前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >速读原著-Android应用开发入门教程(剪裁效果)

速读原著-Android应用开发入门教程(剪裁效果)

作者头像
cwl_java
发布2020-02-13 15:10:56
5430
发布2020-02-13 15:10:56
举报
文章被收录于专栏:cwl_Javacwl_Java

9.5 剪裁效果

Android 中当几个绘制的内容重叠的时候,可以使用剪裁效果进行控制在重叠的情况下,显示哪个部分的内容。 参考示例程序:ApiDemo 的 Clipping(ApiDemo=>Graphics=>Clipping) 源代码:android/apis/graphics/Clipping.java Clipping 程序的运行结果如图所示:

在这里插入图片描述
在这里插入图片描述

图中的 6 个绘制效果各不相同,每个部分都是在一个白色矩形区域中,绘制一个条红线、一个绿色的 园和一个蓝色的文本组成。

代码语言:javascript
复制
    private static class SampleView extends View {
        private Paint mPaint;
        private Path mPath;
        public SampleView(Context context) {
            super(context);
            setFocusable(true);
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setStrokeWidth(6);
            mPaint.setTextSize(16);
            mPaint.setTextAlign(Paint.Align.RIGHT);

            mPath = new Path();
        }

        private void drawScene(Canvas canvas) {
            canvas.clipRect(0, 0, 100, 100); // 选择区域

            canvas.drawColor(Color.WHITE);
            mPaint.setColor(Color.RED); // 红色直线
            canvas.drawLine(0, 0, 100, 100, mPaint);
            mPaint.setColor(Color.GREEN); // 绿色的圆
            canvas.drawCircle(30, 70, 30, mPaint);
            mPaint.setColor(Color.BLUE); // 蓝色文本
            canvas.drawText("Clipping", 100, 30, mPaint);
        }

        @Override protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.GRAY);
            canvas.save(); // 左上部分绘制
            canvas.translate(10, 10);
            drawScene(canvas);
            canvas.restore();
            canvas.save(); // 右上部分绘制
            canvas.translate(160, 10);
            canvas.clipRect(10, 10, 90, 90);
            canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE); // 中间矩形被去除
            drawScene(canvas);
            canvas.restore();
            canvas.save(); // 左中部分绘制
            canvas.translate(10, 160);
            mPath.reset();
            canvas.clipPath(mPath); // 做一个圆
            mPath.addCircle(50, 50, 50, Path.Direction.CCW);
            canvas.clipPath(mPath, Region.Op.REPLACE); // 圆外部分被去除
            drawScene(canvas);
            canvas.restore();
            canvas.save(); // 右中部分绘制
            canvas.translate(160, 160);
            canvas.clipRect(0, 0, 60, 60);
            canvas.clipRect(40, 40, 100, 100, Region.Op.UNION);
            drawScene(canvas);
            canvas.restore();
            canvas.save(); // 左下部分绘制
            canvas.translate(10, 310);
            canvas.clipRect(0, 0, 60, 60);
            canvas.clipRect(40, 40, 100, 100, Region.Op.XOR);
            drawScene(canvas);
            canvas.restore();
            canvas.save(); // 右下部分绘制
            canvas.translate(160, 310);
            canvas.clipRect(0, 0, 60, 60);
            canvas.clipRect(40, 40, 100, 100, Region.Op.REVERSE_DIFFERENCE);
            drawScene(canvas);
            canvas.restore();
        }
    }

Region.Op 表示图层的混合方法,包括以下的几个枚举值:

  • DIFFERENCE(差)
  • INTERSECT(加入)
  • REPLACE(替代)
  • REVERSE_DIFFERENCE(保留差异)
  • UNION(和)
  • XOR(异或) clipPath()clipRect ()等几个函数用于在画布的范围内将几个区域剪裁掉。
代码语言:javascript
复制
boolean clipPath(Path path) 
boolean clipPath(Path path, Region.Op op) 
boolean clipRect(Rect rect) 
boolean clipRect(float left, float top, float right, float bottom) 
boolean clipRect(float left, float top, float right, float bottom, Region.Op op)

剪裁的功能可以丰富绘制的最终效果。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-01-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 9.5 剪裁效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档