Canvas的基本使用

（一）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);

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);
    }

有關貝瑟爾曲線相關鏈接
[鋼筆描點](http://bezier.method.ac/)
[添加鏈接描述](https://github.com/venshine/BezierMaker)