1.2.8_Canvas的使用

深藏阁楼爱情的钟 2023-10-18 16:39 7阅读 0赞

#### 平移操作 ####

通过`translate`进行平移，可以看到，起始点往右侧、下侧平移了50

canvas.drawRect(0,0, 400, 400, mPaint);
    canvas.translate(50, 50);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(0,0, 400, 400, mPaint);
    canvas.drawLine(0, 0, 600,600, mPaint);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70]

#### 缩放操纵 ####

如果对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

canvas.drawRect(200,200, 700,700, mPaint);
    canvas.scale(0.5f, 0.5f);
    mPaint.setColor(Color.BLUE);
    canvas.drawRect(200,200, 700,700, mPaint);
    //先translate(px, py),再scale(sx, sy),再反响translate
    canvas.scale(0.5f, 0.5f,500,0);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(200,200, 700,700, mPaint);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 1]

#### 旋转操作 ####

canvas.translate(50,50);
    canvas.drawRect(0,0, 700,700, mPaint);
    canvas.rotate(45);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(0,0, 700,700, mPaint);
    
    mPaint.setColor(Color.BLUE);
    canvas.drawRect(400, 400, 900, 900, mPaint);
    canvas.rotate(45, 650, 650); //px, py表示旋转中心的坐标
    mPaint.setColor(Color.GREEN);
    canvas.drawRect(400, 400, 900, 900, mPaint);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 2]

#### 倾斜操作 ####

canvas.drawRect(0,0, 400, 400, mPaint);
    //canvas.skew(1, 0); //在X方向倾斜45度,Y轴逆时针旋转45
    canvas.skew(0, 1); //在y方向倾斜45度， X轴顺时针旋转45
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(0, 0, 400, 400, mPaint);
    mPaint.setColor(Color.BLUE);
    canvas.drawCircle(300,300,200,mPaint);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 3]

#### 切割操作 ####

##### 裁剪画布内区域 #####

canvas.drawRect(200, 200,700, 700, mPaint);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(200, 800,700, 1300, mPaint);
    canvas.clipRect(200, 200,700, 700); //画布被裁剪
    mPaint.setColor(Color.BLUE);
    canvas.drawCircle(200,600, 100,mPaint); //坐标超出裁剪区域，无法绘制
    mPaint.setColor(Color.GREEN);
    canvas.drawCircle(300, 300, 100, mPaint); //坐标区域在裁剪范围内，绘制成功

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 4]

##### 画布裁剪外的区域 #####

canvas.drawRect(200, 200,700, 700, mPaint);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(200, 800,700, 1300, mPaint);
    canvas.clipOutRect(200,200,700,700); //画布裁剪外的区域
    canvas.drawCircle(100,100,100,mPaint); //坐标区域在裁剪范围内，绘制成功
    canvas.drawCircle(300, 300, 100, mPaint);//坐标超出裁剪区域，无法绘制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 5]

#### 矩阵 ####

Matrix 可进行旋转、位移、缩放等操作

canvas.drawRect(0,0,700,700, mPaint);
    Matrix matrix = new Matrix();
    //matrix.setTranslate(50,50); //位移
    //matrix.setRotate(45); //旋转
    matrix.setScale(0.5f, 0.5f); //缩放
    canvas.setMatrix(matrix);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(100,100,700,700, mPaint);

setTranslate:位移  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 6]

setRotate:旋转  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 7]

setScale:缩放  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190404152926834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190404154935106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190404155319751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190404155748664.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190408165507710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190408165741484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190408170444688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20190408170559916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/2019040817064286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70