QT ----Canvas绘图

在使用qtwidget进行界面设计的时候，可以进直接使用gui模块内的控件或者使用QPainter自行绘制组件。但是在qml中QT只给我们提供了一个形状组件：rectangle，可以通过设置它的radius构成圆角矩形。

但是，如果我们需要进行绘制多边形或者一切我们想要的图形怎么办呢？qml给我们提供了Canvas，可以将Canvas看成一个画布，在里面我们可以自定义画笔和画刷来绘制我们想要的图形，还可以绘制图片和文字

对画笔以及画刷样式进行设置

设置画布的大小和位置，并且在onPaint事件中对画笔和画刷进行相关设置

为了能让绘制出来的形状的坐标点设置更加直观，我在canvas中添加了一个背景矩形，并设置了其透明度

 

1、直线

这里直接使用直线绘制一个矩形

moveTo是设置画笔的起点，使用lineTo确定画笔下一个落笔点，beginPath提示开始进行图案的绘制，closePath停止绘制，在实践过程中发现，在使用stroke和fill渲染之前使用这个函数才会将起点和终点连接起来fill是将画刷的样式应用到形状中，stroke将画笔的样式应用起来

 

2、矩形

绘制矩形有四种方法，其中一种方法就是上面的直线绘制法，接下来演示一下接下来的四种方法：

1、rect:指定矩形的位置和大小，需要使用fill和stroke函数渲染矩形

2、fillRect：指定矩形的大小和位置之后填充矩形

3、strokeRect：指定矩形的位置和大小之后使用画笔绘制矩形

4、clearRect:以矩形形式将某一块区域挖空为白色

 

 

3、扇形

引用了网上一位博主所总结的扇形静态图：

画一个圆：

 

 

 

4、文字

三种方式：1、text

2、fillText

3、strokeText

 

绘制阴影文字：

 

 

 

5、图片

需要注意的是使用canvas绘制图片时，需要先将图片加载后进行重绘制：loadimage异步加载图片，当加载完成之后会发射imageLoaded信号

 

drawImage有三种格式：
1、drawimage（imagesource, x, y, width, heigh）：绘制一个坐标点在（x, y）且大小为width和height的图片

  2、drawimage（imagesource, x, y）：绘制一个坐标点在（x, y）充满父组件的图片

3、drawimage（imagesource, x, y, width, heigh，x,  y, width, heigh）：将源图像上的一个区域绘制到目标矩形内，必要时会进行拉伸处理；感觉这个有点像是clip（对图片的裁剪）

 

 

对图片进行裁剪：