QML中的Canvas绘图---渐变

2019-11-11 02:52:12

字体：大中小

来源：转载

供稿：网友

QML中的Canvas的画布功能其实和js以及h5的Canvas基本一样，以下是我使用QML的Canvas绘出渐变效果的代码，在过程中出现的几个问题，都是由几个关键的数据控制的，这个一般在网上和帮助文档都很少有资料，记录下

//mainView's right view background,the size is fiximport QtQuick 2.0import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2import QtQuick.Window 2.2Rectangle { width: 1364 height: 1080 border.width: 0 color: "transparent"; Canvas{ id:myCanvas; anchors.fill: parent; onPaint: { var ctx = myCanvas.getContext("2d"); var grd = ctx.createLinearGradient(0,0,1364,0); //设置渐变的范围 x,y,x1,y1 //由于设置的时两个，所有只有两种，当设置出现的三个的时候，会正常 1-2-3类型的显示渐变（渐变的属性时根据设置的颜色的值的变化，r，g，b，a） grd.addColorStop(0.0,Qt.rgba(0,0,0,0)); grd.addColorStop(0.32,Qt.rgba(0,0,0,0.75));//渐变设置到40%的位置时停止 grd.addColorStop(1.0,Qt.rgba(0,0,0,0.75));//渐变设置到100%的位置时停止 ctx.fillStyle = grd; ctx.beginPath(); //可去除边框 ctx.fillRect(0,0,1364,1080); //不可去除边框// ctx.rect(0,0,1364,1080);;// ctx.fill(); ctx.stroke(); } Component.onCompleted: { requestPaint(); } }}

createLinearGradient()函数里面的参数分别是x,y,x1,y1，对此特意测试过，当x和x1相同时，实现的渐变是上下矩形形状的渐变，同理y和y1相同时，实现的渐变是左右矩形形状的渐变，当两者都不相同的时候，实现的是对角线类型的渐变。

第二个就是onPaint信号的问题，Canvas提供paint信号，只有在发出requestPaint()信号的时候，才会调用onPaint的内容。

第三个就是绘出的图形带有边框的问题，这个问题可以看上面的代码的注释部分，fillRect()与fill()，rect()函数之间的区别，个人理解是，fillRect()字面意思就是填充rect，而不是先画出rect，再fill，是直接跳过画rect，进行fill对应的rect区域

上一篇：静态代码块链接数据库，返回链接对象

下一篇：JVM相关知识