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)

    }
}

}

‘’’