自定义View项目实战（三）：Canvas画布

---

注意：位移是基于当前位置移动，而不是每次基于屏幕左上角的(0,0)点移动。

//位移操作

// 在坐标原点绘制一个白色圆形

mPaint.setColor(Color.WHITE);

canvas.translate(200,200);

canvas.drawCircle(0,0,100,mPaint);

// 在坐标原点绘制一个蓝色圆形

mPaint.setColor(Color.BLUE);

canvas.translate(400,200);

canvas.drawCircle(0,0,100,mPaint);

⑵缩放操作(scale)

---

缩放提供了两个方法：

public void scale (float sx, float sy)

public final void scale (float sx, float sy, float px, float py)

这两个方法中前两个参数是相同的分别为x轴和y轴的缩放比例。而第二种方法比前一种多了两个参数，用来控制缩放中心位置的。

注意：缩放的中心默认为坐标原点,而缩放中心轴就是坐标轴

//缩放操作

// 将坐标系原点移动到屏幕正中心

canvas.translate(width / 2, height / 2);

// 矩形区域

RectF rect = new RectF(0,-300,300,0);

// 绘制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 画布缩放（缩放中心是屏幕正中心）

canvas.scale(0.5f,0.5f);

// 绘制蓝色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

改变缩放中心位置：

canvas.translate(width / 2, height / 2);

// 矩形区域

RectF rect = new RectF(0,-300,300,0);

// 绘制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 画布缩放（缩放中心向右移动150px）

canvas.scale(0.5f,0.5f,150,0);

// 绘制蓝色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

当缩放比例为负数的时候会根据缩放中心轴进行翻转

canvas.translate(width / 2, height / 2);

// 矩形区域

RectF rect = new RectF(0,-300,300,0);

// 绘制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 画布缩放（缩放中心是屏幕正中心，缩放比例为负数）

canvas.scale(-0.5f,-0.5f);

// 绘制蓝色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

缩放中心的改变

canvas.translate(width / 2, height / 2);

// 矩形区域

RectF rect = new RectF(0,-300,300,0);

// 绘制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 画布缩放（缩放中心向右移动150px，缩放比例为负数）

canvas.scale(-0.5f,-0.5f,150,0);

// 绘制蓝色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

位移(translate)一样，缩放也是可以叠加的,可以利用这一特性，做出特殊的图形

注意：要把画笔的模式改为STROKE

//设置画笔模式

mPaint.setStyle(Paint.Style.STROKE);

canvas.translate(width / 2, height / 2);

// 矩形区域

RectF rect = new RectF(-380,-380,380,380);

for (int i=0; i<=20; i++)

{

canvas.scale(0.9f,0.9f);

canvas.drawRect(rect,mPaint);

}

⑶旋转(rotate)

---

旋转提供了两种方法：

public void rotate (float degrees)

public final void rotate (float degrees, float px, float py)

和缩放一样，第二种方法多出来的两个参数依旧是控制旋转中心点的。

默认的旋转中心依旧是坐标原点

// 将坐标系原点移动到画布正中心

canvas.translate(width / 2, height / 2);

// 矩形区域

RectF rect = new RectF(0,-300,300,0);

// 绘制黑色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 旋转180度 <-- 默认旋转中心为原点

canvas.rotate(180);

// 绘制蓝色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

改变旋转中心位置

// 将坐标系原点移动到画布正中心

canvas.translate(width / 2, height / 2);

// 矩形区域

RectF rect = new RectF(0,-200,200,0);

设计模式学习笔记

设计模式系列学习视频

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
ess=image/format,png)

改变旋转中心位置

// 将坐标系原点移动到画布正中心

canvas.translate(width / 2, height / 2);

// 矩形区域

RectF rect = new RectF(0,-200,200,0);

设计模式学习笔记

[外链图片转存中…(img-miCa3miX-1715364199113)]

设计模式系列学习视频

[外链图片转存中…(img-UeYPFjIv-1715364199114)]

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！