在使用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(对图片的裁剪)
对图片进行裁剪: