Canvas

最新推荐文章于 2023-06-08 15:50:16 发布

飞鸟_

最新推荐文章于 2023-06-08 15:50:16 发布

阅读量1.7k

点赞数

分类专栏： Android干货分享文章标签： canvas

本文链接：https://blog.csdn.net/likuan0214/article/details/73604065

版权

Android干货分享专栏收录该内容

63 篇文章 0 订阅

订阅专栏

画线

画一条直线：
canvas.drawLine(0, 0, 100, 100, paint);

画多条线：
float []pts = {0,0,100,100,200,200,300,300};
canvas.drawLines(pts, paint);// 画虚线–也通过多条线的方式
这里写图片描述

画点

画一个点：
canvas.drawPoint(500, 500, paint);

画多个点：
float []pts = {0,0,100,100,200,200,300,300};
canvas.drawPoints(pts, paint);
这里写图片描述

画矩形

RectF r = new RectF(100, 100, 400, 500);
canvas.drawRect(r, paint);

canvas.drawRect(left, top, right, bottom, paint);

画圆角矩形

RectF r = new RectF(100, 100, 200, 200);
//x-radius ,y-radius圆角的半径
canvas.drawRoundRect(r, 10, 10, paint);

画圆

canvas.drawCircle(300, 300, 200, paint);

画椭圆

RectF r = new RectF(100, 100, 300, 200);
canvas.drawOval(r, paint);

画圆弧

canvas.drawArc(
rect,
startAngle, //其实角度，相对X轴正方向
sweepAngle, //画多少角度的弧度
useCenter, //boolean, false：只有一个纯弧线；true：闭合的边
paint);

RectF r = new RectF(100, 100, 400, 400);
canvas.drawArc(r, 0, 90, true, paint);//顺时针旋转90度

true:
这里写图片描述
false:

Path

这里写图片描述

rLineTo，rMoveTo 带r开头基于前一个点的相对位置
LineTo，MovoTo 不带r开头的，传的是我们的绝对位置

Path path = new Path();
//移动
path.moveTo(100, 300);//画笔落笔的位置
//连线(100, 300)—(200, 100)
path.lineTo(200, 100);
这里写图片描述
//连线(200, 100) — (200, 200)
path.lineTo(200, 200);

//拼接
path.cubicTo(250, 200, 350, 300, 450, 400);//连接(200, 200)

//首尾相接
path.close();
canvas.drawPath(path, paint);

圆角矩形路径

RectF r = new RectF(100, 100, 200, 200);
Path path = new Path();
float radii[] = {10,10,50,50,0,0,10,10};
path.addRoundRect(r, radii, Path.Direction.CW);
canvas.drawPath(path, paint);

这里写图片描述

RectF r = new RectF(100, 100, 200, 200);
Path path = new Path();
path.addArc(r, 0, 90);
canvas.drawPath(path, paint);

这里写图片描述

贝塞尔曲线

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(4);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLACK);
        mStartX = 60;
        mStartY = 350;
        mEndX = 450;
        mEndY = 350;
        mPath = new Path();
        mPath.reset();
        mPath.moveTo(mStartX, mStartY);
        mPath.quadTo(mContorlX, mContorlY, mEndX, mEndY);
        //mPath.addCircle(); 里面有一个方向值 --顺时针和逆时针
        // canvas.drawTextOnPath();---可以去看一下文字的绘制方向
        canvas.drawPath(mPath, mPaint);
        canvas.drawPoint(mContorlX,mContorlY,mPaint);

这里写图片描述

setFillType

        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(2);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);

Path.FillType.WINDING

WINDING 模式 — 取Path所有所在的区域 – 默认的模式

    private void drawWindingType(Canvas canvas) {
        mPath = new Path();
        mPath.offset(100,100);
        mPath.addCircle(200, 200, 100, Path.Direction.CW);
        mPath.addCircle(300, 300, 100, Path.Direction.CW);
        mPath.setFillType(Path.FillType.WINDING);
        mPaint.setColor(Color.RED);
        canvas.drawPath(mPath,mPaint);
    }

这里写图片描述

Path.FillType.EVEN_ODD

EVEN_ODD 模式 — 取Path所在不相交的区域

    private void drawEvenOddType(Canvas canvas) {
        mPath = new Path();
        mPath.offset(100,100);
        mPath.addCircle(200, 200, 100, Path.Direction.CW);
        mPath.addCircle(300, 300, 100, Path.Direction.CW);
        mPath.setFillType(Path.FillType.EVEN_ODD);
        mPaint.setColor(Color.RED);
        canvas.drawPath(mPath,mPaint);
    }

这里写图片描述

Path.FillType.INVERSE_WINDING

INVERSE_WINDING 模式 – 取path所有未占的区域

    private void drawInverseWinding(Canvas canvas) {
        mPath = new Path();
        mPath.offset(100,100);
        mPath.addCircle(200, 200, 100, Path.Direction.CW);
        mPath.addCircle(300, 300, 100, Path.Direction.CW);
        mPath.setFillType(Path.FillType.INVERSE_WINDING);
        mPaint.setColor(Color.RED);
        canvas.drawPath(mPath,mPaint);
    }

这里写图片描述

Path.FillType.INVERSE_EVEN_ODD

INVERSE_EVEN_ODD 模式 — 取path所有未占和相交的区域

    private void drawInverseEvenOdd(Canvas canvas) {
        mPath = new Path();
        mPath.offset(100,100);
        mPath.addCircle(200, 200, 100, Path.Direction.CW);
        mPath.addCircle(300, 300, 100, Path.Direction.CW);
        mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);
        mPaint.setColor(Color.RED);
        canvas.drawPath(mPath,mPaint);
    }

这里写图片描述

op(Path path, Op op)

        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(8);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);

Path.Op.DIFFERENCE

DIFFERENCE – 减去Path2后Path1区域剩下的部分

    private void drawDifferenceOp(Canvas canvas) {
        Path path1 = new Path();
        path1.addCircle(150, 150, 100, Path.Direction.CW);
        Path path2 = new Path();
        path2.addCircle(200, 200, 100, Path.Direction.CW);
        path1.op(path2, Path.Op.DIFFERENCE);
        canvas.drawPath(path1, mPaint);
        mPaint.setColor(Color.DKGRAY);
        mPaint.setStrokeWidth(2);
        canvas.drawCircle(150, 150, 100,mPaint);
        canvas.drawCircle(200, 200, 100,mPaint);
    }

这里写图片描述

Path.Op.INTERSECT

INTERSECT — 保留Path2 和 Path1 共同的部分

    private void drawIntersectOp(Canvas canvas) {
        Path path1 = new Path();
        path1.addCircle(150, 150, 100, Path.Direction.CW);
        Path path2 = new Path();
        path2.addCircle(200, 200, 100, Path.Direction.CW);
        path1.op(path2, Path.Op.INTERSECT);
        canvas.drawPath(path1, mPaint);
        mPaint.setColor(Color.DKGRAY);
        mPaint.setStrokeWidth(2);
        canvas.drawCircle(150, 150, 100,mPaint);
        canvas.drawCircle(200, 200, 100,mPaint);
    }

这里写图片描述

Path.Op.UNION

UNION – 保留Path1 和 Path 2

    private void drawUnionOp(Canvas canvas) {
        Path path1 = new Path();
        path1.addCircle(150, 150, 100, Path.Direction.CW);
        Path path2 = new Path();
        path2.addCircle(200, 200, 100, Path.Direction.CW);
        path1.op(path2, Path.Op.UNION);
        canvas.drawPath(path1, mPaint);
        mPaint.setColor(Color.DKGRAY);
        mPaint.setStrokeWidth(2);
        canvas.drawCircle(150, 150, 100,mPaint);
        canvas.drawCircle(200, 200, 100,mPaint);
    }

这里写图片描述

Path.Op.XOR

XOR — 保留Path1 和 Path2 还有共同的部分

    private void drawXorOp(Canvas canvas) {
        Path path1 = new Path();
        path1.addCircle(150, 150, 100, Path.Direction.CW);
        Path path2 = new Path();
        path2.addCircle(200, 200, 100, Path.Direction.CW);
        path1.op(path2, Path.Op.XOR);
        canvas.drawPath(path1, mPaint);
        mPaint.setColor(Color.DKGRAY);
        mPaint.setStrokeWidth(2);
        canvas.drawCircle(150, 150, 100,mPaint);
        canvas.drawCircle(200, 200, 100,mPaint);
    }

这里写图片描述

Path.Op.REVERSE_DIFFERENCE

REVERSE_DIFFERENCE — 减去Path1后Path2区域剩下的部分

    private void drawReverseDifferenceOp(Canvas canvas) {
        Path path1 = new Path();
        path1.addCircle(150, 150, 100, Path.Direction.CW);
        Path path2 = new Path();
        path2.addCircle(200, 200, 100, Path.Direction.CW);
        path1.op(path2, Path.Op.REVERSE_DIFFERENCE);
        canvas.drawPath(path1, mPaint);
        mPaint.setColor(Color.DKGRAY);
        mPaint.setStrokeWidth(2);
        canvas.drawCircle(150, 150, 100,mPaint);
        canvas.drawCircle(200, 200, 100,mPaint);
    }

这里写图片描述

Region

        RectF r = new RectF(100, 100, 200, 300);
        Path path = new Path();
        path.addOval(r, Path.Direction.CCW);

        //创建一块矩形的区域
        Region region = new Region(100, 100, 200, 250);
        Region region1 = new Region();
        region1.setPath(path, region);//path的椭圆区域和矩形区域进行交集

        //结合区域迭代器使用（得到图形里面的所有的矩形区域）
        RegionIterator iterator = new RegionIterator(region1);

        Rect rect = new Rect();
        while (iterator.next(rect)) {
            canvas.drawRect(rect, paint);
        }

这里写图片描述

合并union：

        //合并
        Region region = new Region(50, 50, 100, 250);
        Rect r = new Rect(30, 30, 200, 100);
//        canvas.drawRect(r, paint);
//        paint.setColor(Color.BLUE);
        region.union(r);
//        region.op(r, Region.Op.INTERSECT);//交集部分 region是调用者A，r是求交集的B
        RegionIterator iterator = new RegionIterator(region);

        Rect rect = new Rect();
        while (iterator.next(rect)) {
            canvas.drawRect(rect, paint);
        }

这里写图片描述

求交集：

        Region region = new Region(50, 50, 100, 250);
        Rect r = new Rect(30, 30, 200, 100);
//        canvas.drawRect(r, paint);
//        paint.setColor(Color.BLUE);
//        region.union(r);
        region.op(r, Region.Op.INTERSECT);//交集部分 region是调用者A，r是求交集的B
        RegionIterator iterator = new RegionIterator(region);

        Rect rect = new Rect();
        while (iterator.next(rect)) {
            canvas.drawRect(rect, paint);
        }

这里写图片描述

Canvas变换

平移

canvas.translate(150, 50);

        // 绘制坐标系
        // 第一次绘制坐标轴
        paint.setColor(Color.GREEN);
        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴
        paint.setColor(Color.BLUE);
        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴

        //平移--即改变坐标原点
        canvas.translate(150, 50);
        // 第二次绘制坐标轴
        paint.setColor(Color.GREEN);
        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴
        paint.setColor(Color.BLUE);
        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴

这里写图片描述

缩放

//sx,sy：分别对x/y方向的一个缩放系数,画布的缩放会导致里面所有的绘制的东西都会有一个缩放效果
canvas.scale(1.5f, 0.5f);

        RectF r = new RectF(0, 0, 400, 500);
        canvas.drawRect(r, paint);
        paint.setColor(Color.BLUE);
        //sx,sy：分别对x/y方向的一个缩放系数,画布的缩放会导致里面所有的绘制的东西都会有一个缩放效果
        canvas.scale(1.5f, 0.5f);
        canvas.drawRect(r, paint);

这里写图片描述

旋转

canvas.rotate(30);

        // 绘制坐标系
        // 第一次绘制坐标轴
        paint.setColor(Color.GREEN);
        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴
        paint.setColor(Color.BLUE);
        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴

        //旋转
        canvas.rotate(30);
        // 第二次绘制坐标轴
        paint.setColor(Color.GREEN);
        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴
        paint.setColor(Color.BLUE);
        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴

这里写图片描述

斜拉

//sx,sy倾斜度：X轴方向上倾斜60度，tan60=根号3
canvas.skew(1.73f, 0);

        RectF r = new RectF(100, 100, 200, 200);
        canvas.drawRect(r, paint);
        paint.setColor(Color.BLUE);
        //sx,sy倾斜度：X轴方向上倾斜60度，tan60=根号3
        canvas.skew(1.73f, 0);
        canvas.drawRect(r, paint);

这里写图片描述

裁剪

canvas.clipRect(new Rect(250, 250, 300, 400));

        RectF r = new RectF(200, 200, 400, 500);
        canvas.drawRect(r, paint);
        paint.setColor(Color.BLUE);
        canvas.clipRect(new Rect(250, 250, 300, 400));
        canvas.drawBitmap(mBitmap, 250, 250, paint);
        paint.setColor(Color.GREEN);

这里写图片描述

save和restore、restoreToCount

    private void saveRestore(Canvas canvas, Paint paint) {
        canvas.translate(50, 50);
        RectF r = new RectF(0, 0, 200, 100);
        paint.setColor(Color.GREEN);
        canvas.drawRect(r, paint);
        canvas.save();
        //平移
        canvas.translate(50, 50);


        paint.setColor(Color.BLUE);
        canvas.drawRect(r, paint);

        canvas.restore();
        //canvas.rotate(45);

        paint.setColor(Color.YELLOW);
        r = new RectF(0, 0, 100, 200);

        canvas.drawRect(r, paint);
    }

这里写图片描述

        Paint paint = new Paint();
        RectF r = new RectF(50, 50, 150, 150);
        //当canvas执行saveLayer的时候就会新建一个新的透明画布图层
        int layer = canvas.saveLayer(0,0,canvas.getWidth(),canvas.getHeight(),null,Canvas.ALL_SAVE_FLAG);

        canvas.drawColor(Color.YELLOW);
        canvas.translate(50, 50);
        paint.setColor(Color.BLUE);
        canvas.drawRect(r, paint);

        canvas.restoreToCount(layer);


        RectF rectF = new RectF(0,0,100,100);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        paint.setColor(Color.GREEN);

        canvas.drawRect(rectF, paint);
        canvas.translate(50,50);

这里写图片描述

        Paint paint = new Paint();
        RectF rectF = new RectF(0,0,100,100);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        paint.setColor(Color.GREEN);

        canvas.drawRect(rectF, paint);
        canvas.translate(50,50);

        int layerid = canvas.saveLayer(0,0,canvas.getWidth(),canvas.getHeight(),null,Canvas.ALL_SAVE_FLAG);
        //canvas.save();
        canvas.drawColor(Color.BLUE);// 通过drawColor可以发现saveLayer是新建了一个图层，
        // 同时结合Lsn5的16种Xfermode叠加形式Demo可以验证是新建的透明图层
        paint.setColor(Color.YELLOW);
        canvas.drawRect(rectF,paint);
//        canvas.restore();
        canvas.restoreToCount(layerid);

        RectF rectF1 = new RectF(10,10,300,400);
        paint.setColor(Color.RED);
        canvas.drawRect(rectF1,paint);

这里写图片描述

        //save restoreToCount
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        Paint mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(10);
        canvas.save();//1

        canvas.translate(200, 200);
        mPaint.setColor(Color.RED);
        RectF rectF = new RectF(0,0,200,200);

        canvas.drawRect(rectF,mPaint);

        canvas.save();//2

        canvas.rotate(45);
        mPaint.setColor(Color.BLUE);
        canvas.drawRect(rectF,mPaint);

        canvas.save();//3

        canvas.rotate(45);
        mPaint.setColor(Color.YELLOW);
        canvas.drawRect(rectF,mPaint);

        canvas.save();//4

        canvas.restoreToCount(1);

        canvas.translate(20, 100);
        mPaint.setColor(Color.GREEN);
        canvas.drawRect(rectF,mPaint);

这里写图片描述

飞鸟_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas

画线画一条直线： canvas.drawLine(0, 0, 100, 100, paint);画多条线： float []pts = {0,0,100,100,200,200,300,300}; canvas.drawLines(pts, paint);// 画虚线–也通过多条线的方式画点画一个点： canvas.drawPoint(500, 500, paint);画多个点： fl
复制链接

扫一扫