Canvas基礎變換

前面學習了Canvas相關的一些繪制方法，不知道大家發現沒？我們都是根據左上角(0,0)點算出來新的坐標，然后再繪制，這樣明顯不符合我們平常基于坐標原點繪制的習慣，那么我們能不能直接在原點繪制圖形，然后通過操作Canvas來實現移動到目標位置呢？答案是肯定的，這就需要用到Canvas變換方法了。

Canvas變換方法總體分為四類：平移，旋轉，放縮，錯切。

平移

代碼如下：

@Override
protected?void?onDraw(Canvas?canvas)?{
????super.onDraw(canvas);
????//移動畫布坐標原點到View幾何中心
????canvas.translate(getWidth()/2,getHeight()/2);

????Paint?paint?=?new?Paint();
????paint.setStyle(Paint.Style.STROKE);
????paint.setColor(Color.BLUE);
????paint.setStrokeWidth(20);

????canvas.drawCircle(0,0,200,paint);
????//保存當前繪制
????canvas.save();

????//恢復畫布到繪制圓的狀態
????canvas.restore();
}

繪制效果：

旋轉

代碼如下：

Paint?paint?=?new?Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLUE);
paint.setStrokeWidth(20);
//旋轉畫布30度，中心旋轉，以順時針方向為正，逆時針方向為負
canvas.rotate(30);
canvas.drawRect(600,600,1000,900,paint);
canvas.save();
canvas.restore();

運行效果：

放縮

代碼如下：

Paint?paint?=?new?Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(20);paint.setColor(Color.GRAY);
//繪制原始圓環
canvas.drawCircle(600,600,400,paint);
canvas.scale(0.5f,0.5f);
paint.setColor(Color.BLUE);
//繪制縮放0.5f的圓環
canvas.drawCircle(600,600,400,paint);
canvas.save();
canvas.restore();

繪制效果：

錯切

代碼如下：

Paint?paint?=?new?Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(20);

paint.setColor(Color.GRAY);
//繪制原始圓環
canvas.drawRect(100,0,600,600,paint);
canvas.save();
//y軸逆時針旋轉45度，x軸不變
canvas.skew(1,0);
paint.setColor(Color.BLUE);
//繪制縮放0.5f的圓環
canvas.drawRect(100,0,600,600,paint);
canvas.save();
canvas.restore();

運行效果：

對于canvas.skew(float sx,float sy)方法而言，sx及sy分別表示畫布在x及y方向上傾斜角度對應的tan值，當不需要旋轉時，值取。

當sx=1時，表示將畫布向X正方向旋轉45度，其實就是X軸不變，Y軸逆時針旋轉45度

當sy=1時，表示將畫布向Y正方向旋轉45度，其實就是Y軸不變，X軸順時針旋轉45度

如下圖所示：

在錯切作用下，用于坐標軸夾角發生變化，所以原始圖形和變換后圖形并不一定落在同一個左頂點，修改上述代碼中左頂點坐標為(100，100),運行效果如下圖所示：

具體造成原因如下圖：

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的canvas在舞台上点击后图片旋转_View绘制系列(10)Canvas基础变换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。