QML中Canvas（画布）、Text(文本)、Button(按钮)元素的使用

Canvas（画布元素），就是给你提供了一张白纸，并准备了各种画图的工具、颜料。你就是根据需要，使用合适的工具、颜色 画出图案。
这里的白纸就是 Canvas 元素，而 工具、颜料 就是该元素的属性。

Demo

使用Canvas绘画出一个准星，然后使用Button来控制准星 上下左右 的移动，同时使用Text 显示准星的坐标。

• 直接上图（图为黄色，是因为开了护眼）
  

环境

• Qt 5.14.1 + MinGW
• window 10

上代码（cv就能用）

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.13    //导入控件

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: root
        width: 640
        height: 480
//        transformOrigin: Item.Top

        Canvas{             //canvas默认是透明的，没有背景色  Canvas画图是通过javascript来做的
            id: button
            width: parent.width
            height: parent.height
            onPaint: {
                  var ctx = getContext("2d");	//getContext：获取上下文
                  draw(ctx);
            }

            function draw(ctx ) {
                // 画之前清空画布
                ctx.clearRect(0, 0, parent.width, parent.height);
//                    ctx.fillStyle ="#F5DEB3";
//                    ctx.fillRect(0, 0,parent.width, parent.height);

                ctx.fillStyle ="#111";           // 设置画笔属性
                ctx.strokeStyle = "red";
                ctx.lineWidth = 2

                ctx.beginPath();                  // 开始一条路径
                ctx.moveTo(260, 240) //起点
                ctx.lineTo(310, 240)  //线(到终点)
                ctx.moveTo(330, 240) //起点
                ctx.lineTo(380, 240)  //线(到终点)

                ctx.moveTo(320, 180) //起点
                ctx.lineTo(320, 230)  //线(到终点)
                ctx.moveTo(320, 250) //起点
                ctx.lineTo(320, 300)  //线(到终点)

                ctx.moveTo(320, 238) //起点
                ctx.lineTo(320, 242)  //线(到终点)
                ctx.moveTo(319, 238) //起点
                ctx.lineTo(319, 242)  //线(到终点)
                ctx.moveTo(321, 238) //起点
                ctx.lineTo(321, 242)  //线(到终点)
//                        ctx.strokeStyle = 'rgba(255,0,0,0.5)';
                //描边，把线画出来
                ctx.stroke();
            }
        }
        
        Text {
                id: status
                width: 40; height: 40
                anchors.verticalCenter: status2.verticalCenter
                anchors.left: status2.right
                anchors.leftMargin: 1
//                color: "#00FFFF"
//                font.family: "Ubuntu"
//                font.pixelSize: 28
                text: " "
                horizontalAlignment: Text.AlignHCenter
        }
        Text {
                id: status1
                width: 40; height: 40
                anchors.verticalCenter: status2.verticalCenter
                anchors.left: status3.right
                anchors.leftMargin: 10
                text: " "
//                textFormat: Text.AutoText
//                styleColor: "#960b0b"
                horizontalAlignment: Text.AlignHCenter
        }
        Text {
                id: status2
                width: 40; height: 40
                anchors.bottom:parent.bottom
                anchors.bottomMargin:400
                anchors.left:parent.left
                anchors.leftMargin:10
                text: "X:"
                horizontalAlignment: Text.AlignHCenter
        }
        Text {
                id: status3
                width: 40; height: 40
                anchors.verticalCenter: status2.verticalCenter
                anchors.left: status.right
                anchors.leftMargin: 10
                text: "Y:"
                horizontalAlignment: Text.AlignHCenter
        }

        Button{
            id: button0
            text: qsTr("左")//标题
            width: 60
            height: 40
            anchors.bottom:parent.bottom
            anchors.bottomMargin:8
            anchors.left:parent.left
            anchors.leftMargin:80
            onClicked: {
                button.x -= 1
                status.text=button.x
            }
        }
        Button{
            id: button1
            text: qsTr("右")
            width: 60
            height: 40
            anchors.verticalCenter: button0.verticalCenter
            anchors.left: button0.right
            anchors.leftMargin: 12
            onClicked: {
                button.x += 1
                status.text=button.x
            }
        }
        Button{
            id: button2
            text: qsTr("上")
            width: 60
            height: 40
            anchors.verticalCenter: button0.verticalCenter
            anchors.left: button1.right
            anchors.leftMargin: 12
            onClicked: {
                button.y = button.y - 1
                status1.text=button.y
            }
        }
        Button{
            id: button3
            text: qsTr("下")
            width: 60
            height: 40
            anchors.verticalCenter: button0.verticalCenter
            anchors.left: button2.right
            anchors.leftMargin: 12
            onClicked: {
                button.y = button.y + 1
                status1.text=button.y
            }
        }
        Button{
            id: button4
            text: qsTr("开始")
            width: 60
            height: 40
            anchors.verticalCenter: button0.verticalCenter
            anchors.left: button3.right
            anchors.leftMargin: 12
            onClicked: {
                status.text=button.x
                status1.text=button.y
            }
        }
        
    }
}