QML中的Canvas的画布功能其实和js以及h5的Canvas基本一样,以下是我使用QML的Canvas绘出渐变效果的代码,在过程中出现的几个问题,都是由几个关键的数据控制的,这个一般在网上和帮助文档都很少有资料,记录下
//mainView's right view background,the size is fix
import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Window 2.2
Rectangle {
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区域