Qt:使用QML的2D canvas绘制2D图形
1. 效果预览
2. 实现步骤分解
2.1 创建Qt Quick Application
创建新Qt Quick Application:
2.2 在Canvas上绘制2D图形
在Window中添加Canvas对象,使用Window的高宽作为Canvas的高宽,并为每个对象都添加一个id:
定义onPaint事件触发时的动作,这里简单绘制一个叉叉。
2.3 在Canvas上绘制图像
绘制图像需要在onPaint:{ … } 中调用drawImage,还需要再Canvas:{…} 中添加Component.onCompleted:{ loadImage(…)},并指定load图像之后请求绘制。
3. 完整代码与注释
‘’’
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr(“Hello World”)
Canvas{
width:640
height: 480
Component.onCompleted: {
loadImage("home.png")
}
// 5.15需要,6.5不需要
onImageLoaded: requestPaint()
// 绘制
onPaint:{
var context = getContext("2d")
// 1. 设置fill和stroke的风格
context.fillStyle = 'white'
context.fillRect(0, 0, width, height)
context.lineWidth = 2
context.strokeStyle = 'black'
// 2.设置绘制路径beginPath()->closePath()->stroke()
// 2.1 绘制叉叉
context.beginPath()
context.moveTo(50, 50)
context.lineTo(100, 100)
context.closePath()
context.stroke()
context.beginPath()
context.moveTo(100, 50)
context.lineTo(50, 100)
context.closePath()
context.stroke()
// 2.2 绘制半圆和圆并填充
context.lineWidth = 4
context.strokeStyle = "blue"
context.fillStyle = "steelblue"
var pi = 3.141592653589793
context.beginPath()
context.arc(220, 200, 60, 0, pi, true)
context.closePath()
context.fill()
context.stroke()
context.beginPath()
context.arc(220, 280, 60, 0, 2 * pi, true)
context.closePath()
context.fill()
context.stroke()
// 2.3 绘制图像,需要再添加Component.onCompleted()和onImageLoaded
context.drawImage("home.png", 100,200)
}
}
}
‘’’