QML ＜ 画布元素＞之画布绘制

绘制四个色块，使用鼠标选择颜色，按下鼠标，在画布上随意绘制  

绘制四个色块：

 当鼠标位置改变时，canvas 的 requestPaint 函数用于请求重新绘制画布。函数不会立即触发重绘，而是向事件循环发送一个信号，表明画布需要更新。当事件进入下一 次 有机会处理时。它会调用onPaint 回调函数 来执行实际的绘图操作 

 

矩形框代码：

import QtQuick 2.15

Item{
    id: root
    property color squarColor: "red"
    property string name: ""
    property int squarWidth: 48
    property int squarHeight: 48
    property bool active: false
    width: squarWidth
    height: squarHeight

    // 定义一个自定义信号 clicked
    signal clicked()
    
    // 使用 MouseArea 来检测点击事件
    MouseArea {
        anchors.fill: parent
        onClicked: {
            //console.log("MyButton was clicked")
            root.clicked()  // 触发自定义信号
        }
    }

    onActiveChanged:
    {
        if(root.active)
        {
            squareTemplate.inflate(root.width + 5, root.height + 5)
            //root.width += 5;
            //root.height += 5;
        }
        else
        {
            squareTemplate.inflate(root.width - 5, root.height - 5)
            //root.width -= 5;
            //root.height -= 5;
        }
        console.log(root.name + " Is active: " + root.active)
    }


    Rectangle
    {
        id: squareTemplate
        width: root.width
        height: root.height
        color: root.squarColor
        border.color: Qt.lighter(color)
        border.width: 3
        // 使用 NumberAnimation 来创建膨胀效果
        NumberAnimation on width {
            id: widthAnimation
            duration: 100
            easing.type: Easing.InOutQuad
        }

        NumberAnimation on height {
            id: heightAnimation
            duration: 100
            easing.type: Easing.InOutQuad
        }

        // 确保矩形在膨胀过程中保持中心位置不变
        NumberAnimation on x {
            id: xAnimation
            duration: 100
            easing.type: Easing.InOutQuad
        }

        NumberAnimation on y {
            id: yAnimation
            duration: 100
            easing.type: Easing.InOutQuad
        }

        // 定义初始 x, y 位置，以便膨胀时能保持中心位置不变
        property int originalX: (parent.width - width) / 2
        property int originalY: (parent.height - height) / 2

        function inflate(targetWidth, targetHeight) {
            // 计算新的 x, y 位置，以保证矩形中心不变
            var newX = originalX - (targetWidth - width) / 2;
            var newY = originalY - (targetHeight - height) / 2;

            // 设置动画的目标值
            widthAnimation.to = targetWidth;
            heightAnimation.to = targetHeight;
            xAnimation.to = newX;
            yAnimation.to = newY;

            // 开始所有动画
            widthAnimation.start();
            heightAnimation.start();
            xAnimation.start();
            yAnimation.start();
        }
    }
}

绘图代码 

import QtQuick 2.15

Rectangle{
    height: 600
    width: 600
    Row{
        id: colorTools
        anchors{
            horizontalCenter: parent.horizontalCenter
            top: parent.top
            topMargin: 8
        }

        property color paintColor: "#33B566"
        spacing: 10
        Repeater{
            model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]
            Square {
                id: redArray
                squarColor: modelData
                name: modelData
                active: parent.paintColor == squarColor
                onClicked: {
                    console.log("MyButton was clicked: " + squarColor)
                    parent.paintColor = squarColor
                    
                }
            }
        }

        property variant activeSquare: redArray
    }


    Canvas{
        id: canvas
        anchors{
            left: parent.left
            right: parent.right
            top: colorTools.bottom
            bottom: parent.bottom
            margins: 8
        }
        property real lastX
        property real lastY
        property color color: colorTools.paintColor
        onPaint: {
            var ctx = getContext('2d')
            ctx.lineWidth = 1.5
            ctx.strokeStyle = canvas.color
            ctx.beginPath()
            ctx.moveTo(lastX, lastY)
            lastX = area.mouseX
            lastY = area.mouseY
            ctx.lineTo(lastX, lastY)
            ctx.stroke()
        }

        MouseArea {
            id: area
            anchors.fill: parent
            onPressed: {
                canvas.lastX = mouseX
                canvas.lastY = mouseY

            }
            onPositionChanged: {
                canvas.requestPaint()

            }

        }

    }
}