quick 中控件都在窗口中显示,所以如果你需要使用画布必须在一个窗口中定义
画布的实现的方式有2种:
第一种:这种是通过getContsxt()方法获得obj
// transform.qml
import QtQuick 2.5
import QtQuick.Window 2.0
Window{
visible: true;
width: 800;
height: 500;
//定义Canvas obj
Canvas {
width: 400
height: 240
//onpaint signal处理器
onPaint: {
//获取Context2D对象z
var ct = getContext("2d");
ct.lineWidth=2;
ct.strokeStyle="red";
//画刷
ct.fillStyle="blue";
ct.beginPath();
ct.rect(100,80,120,80);
ct.fill();
ct.stroke();
}
}
}
第二种: 设置contextType: “2d”
// transform.qml
import QtQuick 2.5
import QtQuick.Window 2.0
Window{
visible: true;
width: 800;
height: 500;
//定义Canvas obj
Canvas {
width: 400
height: 240
contextType: "2d"
onPaint: {
context.lineWidth=2;
context.strokeStyle="red";
context.fillStyle="blue";
context.beginPath();
context.rect(100,80,120,80);
context.fill();
context.stroke();
}
}
}
Context2D有两个方法,createLinearGradient(线性渐变对象) createRadialGradient(放射渐变对象)
import QtQuick 2.5
import QtQuick.Window 2.0
Window{
visible: true;
width: 800;
height: 500;
Canvas {
width: 400
height: 240
onPaint: {
var ct = getContext("2d");
ct.lineWidth=7;
ct.strokeStyle="red";
var gradient=ct.createLinearGradient(60,50,180,130);
gradient.addColorStop(0.0,Qt.rgba(1,0,0,1.0));
gradient.addColorStop(0.0,Qt.rgba(0,0,1,1.0));
ct.fillStyle=gradient;
ct.beginPath();
ct.rect(60,50,80,80);
ct.fill();
ct.stroke();
gradient=ct.createRadialGradient(230,160,30,260,200,20);
gradient.addColorStop(0.0,Qt.rgba(1,0,0,1.0));
gradient.addColorStop(0.0,Qt.rgba(0,0,1,1.0));
ct.fillStyle=gradient;
ct.beginPath();
ct.rect(200,140,80,80);
ct.fill();
ct.stroke();
}
}
}
画三角:
import QtQuick 2.5
import QtQuick.Window 2.0
Window{
visible: true;
width: 800;
height: 500;
Canvas {
width: 400
height: 240
onPaint: {
var ct = getContext("2d");
ct.lineWidth=7;
ct.strokeStyle="red";
ct.fillStyle="blue";
ct.beginPath();
//开启new load
ct.moveTo(100,80);
ct.lineTo(100,200);
ct.lineTo(300,200);
//结束 并完成斜边的绘制
ct.closePath();
ct.fill();
ct.stroke();
}
}
}
绘制文本:
import QtQuick 2.5
import QtQuick.Window 2.0
Window{
visible: true;
width: 800;
height: 500;
Canvas {
width: 400
height: 240
onPaint: {
var ct = getContext("2d");
ct.lineWidth=7;
ct.strokeStyle="red";
ct.font="42px sans-serif";
var gradient=ct.createLinearGradient(0,0,width,height);
gradient.addColorStop(0.0,Qt.rgba(0,1,0,1));
gradient.addColorStop(1.0,Qt.rgba(0,0,1,1));
ct.fillStyle=gradient;
ct.beginPath();
ct.text("wang zhang",10,50);
ct.fill();
ct.strokeText("OKOK",10,100);
ct.strokeText("OPOPOPOPOP",10,150);
ct.fillText("OPOPOPOPOP",10,150);
}
}
}