前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android画布Canvas裁剪效果演示--RevealView

Android画布Canvas裁剪效果演示--RevealView

作者头像
aruba
发布2020-07-03 11:12:05
1.3K0
发布2020-07-03 11:12:05
举报
文章被收录于专栏:android技术android技术
图片资源如下图,就是几张灰色和彩色图片
思路是利用画布canvas的裁剪,先画出灰色的图片,再画出彩色图片并对彩色图片进行裁剪,先初始化一些参数
代码语言:javascript
复制
    private Paint mPaint = new Paint();
    private Map<Integer, List<Bitmap>> bitmap = new HashMap<>();
    private float needClipWidth, needClipHeight;
    private float maxWidth, maxHeight;
    private float translateX;
    private float dx;
    private float currentX;

    private void init() {
        if (bitmap.size() != 0) return;

        mPaint.setDither(true);

        List<Bitmap> bitmaps1 = new ArrayList<>();
        bitmaps1.add(BitmapFactory.decodeResource(getResources(), R.drawable.avft));
        bitmaps1.add(BitmapFactory.decodeResource(getResources(), R.drawable.avft_active));
        bitmap.put(1, bitmaps1);

        List<Bitmap> bitmaps2 = new ArrayList<>();
        bitmaps2.add(BitmapFactory.decodeResource(getResources(), R.drawable.box_stack));
        bitmaps2.add(BitmapFactory.decodeResource(getResources(), R.drawable.box_stack_active));
        bitmap.put(2, bitmaps2);

        List<Bitmap> bitmaps3 = new ArrayList<>();
        bitmaps3.add(BitmapFactory.decodeResource(getResources(), R.drawable.bubble_frame));
        bitmaps3.add(BitmapFactory.decodeResource(getResources(), R.drawable.bubble_frame_active));
        bitmap.put(3, bitmaps3);

        List<Bitmap> bitmaps4 = new ArrayList<>();
        bitmaps4.add(BitmapFactory.decodeResource(getResources(), R.drawable.bubbles));
        bitmaps4.add(BitmapFactory.decodeResource(getResources(), R.drawable.bubbles_active));
        bitmap.put(4, bitmaps4);

        List<Bitmap> bitmaps5 = new ArrayList<>();
        bitmaps5.add(BitmapFactory.decodeResource(getResources(), R.drawable.bullseye));
        bitmaps5.add(BitmapFactory.decodeResource(getResources(), R.drawable.bullseye_active));
        bitmap.put(5, bitmaps5);

        List<Bitmap> bitmaps6 = new ArrayList<>();
        bitmaps6.add(BitmapFactory.decodeResource(getResources(), R.drawable.circle_filled));
        bitmaps6.add(BitmapFactory.decodeResource(getResources(), R.drawable.circle_filled_active));
        bitmap.put(6, bitmaps6);

        List<Bitmap> bitmaps7 = new ArrayList<>();
        bitmaps7.add(BitmapFactory.decodeResource(getResources(), R.drawable.circle_outline));
        bitmaps7.add(BitmapFactory.decodeResource(getResources(), R.drawable.circle_outline_active));
        bitmap.put(7, bitmaps7);

        //最大宽高
        maxWidth = bitmaps1.get(0).getWidth() * 7;
        maxHeight = bitmaps1.get(0).getHeight();
        if (maxWidth > getMeasuredWidth()) {//缩放
            float scaleX = getMeasuredWidth() / maxWidth;
            for (int i = 1; i <= 7; i++) {
                Bitmap newBitmap1 = Bitmap.createScaledBitmap(bitmap.get(i).get(0), (int) (bitmap.get(i).get(0).getWidth() * scaleX), (int) (bitmap.get(i).get(0).getHeight() * scaleX), true);
                bitmap.get(i).set(0, newBitmap1);
                Bitmap newBitmap2 = Bitmap.createScaledBitmap(bitmap.get(i).get(1), (int) (bitmap.get(i).get(1).getWidth() * scaleX), (int) (bitmap.get(i).get(1).getHeight() * scaleX), true);
                bitmap.get(i).set(1, newBitmap2);
            }

            maxWidth = getMeasuredWidth();
            maxHeight = maxHeight * scaleX;
        }
        //需要裁剪的宽高
        needClipWidth = maxWidth / 7;
        needClipHeight = maxHeight;
    }
在onDraw方法中进行处理,要注意的是,为了不影响灰色图片,需要新创建一层图层,对画布进行裁剪后,在新图层中画出彩色图片,由于canvas的绘图是根据当前绘图的matrix进行处理的,所以要先裁剪将matrix改变再调用canvas的draw方法,倒过来将没有效果
代码语言:javascript
复制
    @Override
    protected void onDraw(Canvas canvas) {
        init();

        //先画有灰色的
        int nowLeft = 0;
        for (int i = 1; i <= 7; i++) {
            canvas.drawBitmap(bitmap.get(i).get(0), nowLeft, 0, mPaint);
            //偏移
            nowLeft += bitmap.get(i).get(0).getWidth();
        }

        int layerCount = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, ALL_SAVE_FLAG);

        translateX += dx;
        //平移操作达到最右边或着最左边,停止
        if (translateX <= -(maxWidth / 2 - needClipWidth / 2)) {
            translateX = -(maxWidth / 2 - needClipWidth / 2);
        }
        if (translateX >= maxWidth / 2 - needClipWidth / 2) {
            translateX = maxWidth / 2 - needClipWidth / 2;
        }

        //将画布裁剪
        canvas.clipRect(new RectF(maxWidth / 2 - needClipWidth / 2 + translateX, 0, maxWidth / 2 + needClipHeight / 2 + translateX, needClipHeight));

        //再画有色彩的
        nowLeft = 0;
        for (int i = 1; i <= 7; i++) {
            canvas.drawBitmap(bitmap.get(i).get(1), nowLeft, 0, mPaint);
            //偏移
            nowLeft += bitmap.get(i).get(1).getWidth();
        }

        canvas.restoreToCount(layerCount);
    }
项目地址:https://gitee.com/aruba/CanvasApplication.git
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 图片资源如下图,就是几张灰色和彩色图片
  • 思路是利用画布canvas的裁剪,先画出灰色的图片,再画出彩色图片并对彩色图片进行裁剪,先初始化一些参数
  • 在onDraw方法中进行处理,要注意的是,为了不影响灰色图片,需要新创建一层图层,对画布进行裁剪后,在新图层中画出彩色图片,由于canvas的绘图是根据当前绘图的matrix进行处理的,所以要先裁剪将matrix改变再调用canvas的draw方法,倒过来将没有效果
  • 项目地址:https://gitee.com/aruba/CanvasApplication.git
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档