Android开发之Canvas及高级使用

前言：相信你看了前几篇的博客，你对paint渲染以及滤镜有一个初步的认识，今天我们来综合一下canvas的绘制，path的用法，以及Canvas的转换。

----------------分割线--------------

1、绘制直线：

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        canvas.drawLine(0, 0, 100, 100, paint);
        float pts[] = {0, 0, 100, 100, 200, 200, 300, 300, 400, 400};
        float pts[] = {0, 0, 50, 50, 100, 100, 150, 150};
        canvas.drawLines(pts, paint);
        canvas.drawLines(pts, 20, 2, paint);//通过offset设置线的间隔距离，可以实现虚线效果

2、绘制点：

        canvas.drawPoint(300, 300, paint);//单独一个点
        float []pts = {0,0,100,100,200,200,300,300};
        canvas.drawPoints(pts, paint);//连续多个点

3、绘制矩形：

        paint.setStyle(Paint.Style.STROKE);
        RectF r = new RectF(100, 100, 400, 500);
        canvas.drawRect(r, paint);
        canvas.drawRect(left, top, right, bottom, paint);

4、绘制圆角矩形：

        paint.setStyle(Paint.Style.STROKE);
        RectF r = new RectF(100, 100, 400, 500);
        //x-radius ,y-radius圆角的半径
        canvas.drawRoundRect(r, 30, 30, paint);

5、绘制圆形：

        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(300, 300, 200, paint);

6、绘制椭圆：

        paint.setStyle(Paint.Style.STROKE);
        RectF r = new RectF(100, 100, 400, 500);
        paint.setColor(Color.GREEN);
        canvas.drawRoundRect(r, 30, 30, paint);
        paint.setColor(Color.RED);
        canvas.drawOval(r, paint);

7、圆弧绘制：

        //		canvas.drawArc(
//				r,
//				startAngle, //其实角度，相对X轴正方向
//				sweepAngle, //画多少角度的弧度
//				useCenter, //boolean, false：只有一个纯弧线；true：闭合的边
//				paint)；
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GREEN);
        RectF r = new RectF(100, 100, 400, 500);
        canvas.drawArc(r, 0, 90, true, paint);//顺时针旋转90度

------------分割线----------

path的相关用法。

1、曲线绘制：

        Path path = new Path();
        path.moveTo(100, 100);//画笔落笔的位置
		//移动
        path.lineTo(200, 100);
		path.lineTo(200, 200);
        path.cubicTo(250, 200, 350, 300, 450, 400);
        path.close();
        canvas.drawPath(path, paint);

2、圆角矩形路径：

        Path path = new Path();
        RectF r = new RectF(100, 100, 400, 500);
        paint.setStyle(Paint.Style.STROKE);
        float radii[] = {10, 10, 10, 10, 10, 10, 50, 60};
//        path.addRoundRect(r, radii, Path.Direction.CCW);
//        path.addRoundRect(r, radii, Path.Direction.CW);
        //半圆
        path.addArc(r, 100, 200);
        canvas.drawPath(path, paint);

3、椭圆：

        RectF r = new RectF(100, 100, 400, 500);
        Path path = new Path();
        paint.setStyle(Paint.Style.STROKE);
        path.addOval(r, Path.Direction.CCW);
        canvas.drawPath(path, paint);

4、Region用法：

//椭圆
        RectF r = new RectF(100, 100, 400, 500);
        Path path = new Path();
        paint.setStyle(Paint.Style.STROKE);
        path.addOval(r, Path.Direction.CCW);
        canvas.drawPath(path, paint);

        //创建一块矩形的区域
        Region region = new Region(100, 100, 400, 500);
        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);
        }

效果图：

--------------分割线--------------

canvas的变幻技巧。

1、平移：

        //1.平移（Translate）
        paint.setStyle(Paint.Style.STROKE);
        RectF r = new RectF(0, 0, 400, 500);
        canvas.drawRect(r, paint);
        paint.setColor(Color.BLUE);
        //将画布平移
        canvas.translate(50, 50);
        //当canvas执行drawXXX的时候就会新建一个新的画布图层
        canvas.drawRect(r, paint);
        RectF r2 = new RectF(0, 0, 400, 500);
        paint.setColor(Color.RED);
        //虽然新建了一个画布图层，但是还是会沿用之前设置的平移变换。不可逆的。（save和restore来解决）
        canvas.drawRect(r2, paint);

效果图：

2、缩放（Scale）：

      paint.setStyle(Paint.Style.STROKE);
        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);

效果图：

3、旋转Rotate：

        paint.setStyle(Paint.Style.STROKE);
        RectF r = new RectF(200, 200, 400, 500);
        canvas.drawRect(r, paint);
        paint.setColor(Color.BLUE);
//		canvas.rotate(45);
        canvas.rotate(45, 200, 200);
        canvas.drawRect(r, paint);

效果图：

4、斜拉画布（Skew）：

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

效果图：

5、裁剪画布（Clip）：

    RectF r = new RectF(0, 0, 200, 400);
        canvas.drawRect(r, paint);
        paint.setColor(Color.BLUE);
        canvas.clipRect(new Rect(250, 250, 300, 400));
        canvas.drawColor(Color.YELLOW);

效果图：

-----------完！----------