Canvas的基本使用_canvas.drawcolor

（一）Canvas上的图形绘制
RectF mArcRect=new RectF(0,0,300,300);
1.绘制画布带透明度的颜色值
canvas.drawARGB(255,255,0,0);
canvas.drawColor(Color.RED);
2.绘制矩形
canvas.drawRect(mArcRect,mPaint);
canvas.drawRoundRect(mArcRect,50,50,mPaint);//圆角矩形
3.绘制椭圆
canvas.drawOval(mArcRect,mPaint);
4.绘制点
canvas.drawPoint(500,600,mPaint);
5.绘制圆
canvas.drawCircle(mArcRect.width()/2, //绘制圆的中心点x坐标
mArcRect.height()/2, //绘制圆的中心点y坐标
mArcRect.height()/4, //绘制圆的半径
mPaint);
6.绘制线条
canvas.drawLine(0, //直线的起点x坐标
0, //直线的起点y坐标
100, //直线的终点x坐标
100, //直线的终点y坐标
mPaint);
float[]pts=new float[]{0,0,100,100,100,100,0,100,0,100,0,0};
canvas.drawLines(pts, //绘制直线的x,y坐标的数组集合，必须成对出现
mPaint);
7.绘制圆弧
canvas.drawArc(mArcRect, //定义圆弧的绘制的椭圆区域 已矩形中心点绘制
0, //从哪个角度开始绘制圆弧 默认初始位置为时钟3点钟的位置开始绘制
180, //这个值表示顺时针绘制的圆弧的度数 结束度数是从开始绘制的度数算起(startAngle+sweepAngle)
true, //true表示会连接椭圆中心 false则不会
mPaint);
8.绘制Bitmap
canvas.drawBitmap(mBitmap,
0, //绘制图片的左上角x坐标
0, //绘制图片左上角的y坐标
mPaint);
canvas.drawBitmap(mBitmap,
mRect, //矩形区域中的图片 一般设置为null表示原始图片
mArcRect, //将矩形区域中的图片填充到目标矩形区域
mPaint);
Matrix matrix=new Matrix();
matrix.setScale(0.5f,0.5f);//大小缩放
canvas.drawBitmap(mBitmap,
matrix, //可以通过矩阵对bitmap进行旋转平移缩放等处理
mPaint)
9.绘制文字
String text=“武汉加油”;
Rect textBounds=new Rect();
//测量文字的宽高将值保存在textBounds中
mPaint.getTextBounds(text,0,text.length(),textBounds);
canvas.drawText(text, //文字内容
0, //绘制文字的起始点x坐标
textBounds.height(), //绘制文字的起始点y坐标
mPaint);
10.绘制路径path,path中可以添加矩形，圆，线，圆弧等等
Path path=new Path();
path.moveTo(500,500);//移动画笔的起点
path.lineTo(10,10); //连线x,y绝对坐标值
path.rLineTo(50,50);//连线相对坐标值
path.addRect(mArcRect, Path.Direction.CW);
path.addRoundRect(r, radii, Path.Direction.CCW);//添加圆角矩形
path.addArc(oval, startAngle, sweepAngle);
path.addOval(r, Path.Direction.CCW)
path.close();//闭合路径
//绘制二阶贝塞尔曲线
mPath.quadTo(100,100,//控制点x,y坐标
200,200);//结束点x,y坐标
//绘制三阶贝塞尔曲线
path.cubicTo(0,500, //控制点x,y坐标
200,0, //控制点x,y坐标
500,500);//结束点x,y坐标
canvas.drawPath(path,mPaint);
FillType的几种方式如下：
a.WINDING 模式 — 取Path所有所在的区域 – 默认的模式
b.EVEN_ODD 模式 — 取Path所在不相交的区域
c.INVERSE_WINDING 模式 – 取path所有未占的区域
d.INVERSE_EVEN_ODD 模式 — 取path所有未占和相交的区域
如下：

		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);
1
2
3
4
5

Op的几种方式如下：
a.DIFFERENCE – 减去Path2后Path1区域剩下的部分
b.INTERSECT — 保留Path2 和 Path1 共同的部分
c.UNION – 保留Path1 和 Path 2
d.XOR — 保留Path1 和 Path2 还有共同的部分
e.REVERSE_DIFFERENCE — 减去Path1后Path2区域剩下的部分
例如
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);

11.Region
Region表示的Canvas图层上的一块封闭的区域
Op有以下几种方式：----具体含义 看图
DIFFERENCE(0),
INTERSECT(1),
UNION(2),
XOR(3),
REVERSE_DIFFERENCE(4),
REPLACE(5);

Path path=new Path();
path.addRect(mArcRect, Path.Direction.CW);
//创建矩形区域
Region region=new Region(100,100,500,500);
region.setPath(path,region);//矩形区域region与mArcRect相交的区域
region.union(mRect); //矩形区域region与mRect的并集
region.op(mRect, Region.Op.XOR);//取交集 XOR
//得到图形里面的所有的矩形区域
RegionIterator regionIterator=new RegionIterator(region);
Rect rect=new Rect();
while (regionIterator.next(rect)){
//绘制获取到的矩形区域
canvas.drawRect(rect,mPaint);
}
（二）Canvas变换技巧
平移，旋转，缩放，倾斜，剪切等变换操作
1.画布平移 x，y均平移200 canvas.translate(200,200);
2.画布旋转90度 canvas.rotate(90);
3.画布x,y方向上缩放0.5 canvas.scale(0.5f,0.5f);
4.sx,sy倾斜度：X轴方向上倾斜60度，tan60=根号3 canvas.skew(1.73f, 0);
5.裁剪画布 canvas.clipRect(new Rect(250, 250, 300, 400));
Canvas里面有两种坐标系：Canvas坐标系、绘图坐标系
Canvas的坐标系：它就在View的左上角，做坐标原点往右是X轴正半轴，往下是Y轴的正半轴，有且只有一个，唯一不变
绘图坐标系：它不是唯一不变的，它与Canvas的Matrix有关系，当Matrix发生改变的时候，绘图坐标系对应的进行改变，
同时这个过程是不可逆的（save和restore方法来保存和还原变化操作）
（三）Canvas中的状态栈保存
上面说过通过对Canvas进行变化后，这个过程是不可逆的，其实这里可以通过对其状态保存来实现还原操作
canvas.save()//保存当前画布状态 默认存在一个画布状态 从2开始
canvas.restore()//恢复到上一个保存的画布状态
canvas.restoreToCount(1)//恢复到指定那层画布状态
canvas.saveLayer()//会创建一个离屏的Bitmap透明的图层，当需要透明色时使用 ，返回值为当前层数可通过restoreToCount()方法恢复，并且会将saveLayer之前的一些Canvas操作延续过来，后续的绘图操作都在新建的layer上面进行，当我们调用restore 或者 restoreToCount 时 更新到对应的图层和画布上

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();//保存以上画布状态 2
        mPaint.setColor(Color.RED);
        RectF rectF=new RectF(0,0,100,100);
        canvas.drawRect(rectF,mPaint);
        Log.e(TAG, "onDraw: save="+ canvas.getSaveCount());

        canvas.save();//保存以上画布状态 3
        mPaint.setColor(Color.BLACK);
        canvas.translate(50,50);
        canvas.scale(2f,2f);
        canvas.drawRect(rectF,mPaint);
        Log.e(TAG, "onDraw: save="+ canvas.getSaveCount());

        canvas.save();//保存以上画布状态 4
        mPaint.setColor(Color.BLUE);
        canvas.translate(100,100);
        canvas.scale(1.2f,1.2f);
        canvas.drawRect(rectF,mPaint);
        Log.e(TAG, "onDraw: save="+ canvas.getSaveCount());

        //绘制文字
//        canvas.restore();
        canvas.restoreToCount(4);
        mPaint.setColor(Color.WHITE);
        mPaint.setTextSize(20);
        String text="武汉加油";
        Rect textBounds=new Rect();
        //测量文字的宽高将值保存在textBounds中
        mPaint.getTextBounds(text,0,text.length(),textBounds);
        canvas.drawText(text, //文字内容
                0, //绘制文字的起始点x坐标
                textBounds.height(), //绘制文字的起始点y坐标
                mPaint);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

有关贝瑟尔曲线相关链接
[钢笔描点](http://bezier.method.ac/)
[添加链接描述](https://github.com/venshine/BezierMaker)
1
2
3