《QmlBook》笔记（13）：简单绘图板

最新推荐文章于 2023-09-11 23:38:52 发布

友善啊，朋友

最新推荐文章于 2023-09-11 23:38:52 发布

阅读量218

点赞数

分类专栏： # 《QmlBook》笔记文章标签： qml

本文链接：https://blog.csdn.net/kenfan1647/article/details/120944196

版权

《QmlBook》笔记专栏收录该内容

15 篇文章 14 订阅

订阅专栏

这个博客展示了如何使用QtQuick来创建一个颜色选择工具，包括一个可点击的颜色方块，用户可以选择不同的颜色，并通过点击更新画笔颜色。在主窗口中，用户可以使用所选颜色在画布上进行绘画，实现了一个简单的绘图应用。

摘要由CSDN通过智能技术生成

ColorSquare.qml

import QtQuick 2.0

Rectangle
{
    id: colorSquare;
    width: 48; height: 48
    color: "green"
    signal clicked
    property bool active: false
    border.color: active? "#666666" : "#f0f0f0"
    border.width: 2

    MouseArea
    {
        id: area
        anchors.fill :parent
        onClicked:
        {
            colorSquare.clicked()
        }
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 640
    height: 480
    Row
    {
        id:colorTools//颜色提取工具
        anchors
        {
            horizontalCenter: parent.horizontalCenter
            top: parent.top
            topMargin: 8
        }
        property color paintColor: "#33b5e5"//设置初始画笔颜色
        spacing: 4;
        Repeater
        {
            //四个colorSquare
            model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]//modelData 颜色数据
            ColorSquare
            {
                id:red;
                color: modelData;
                active: parent.paintColor === color//当选中一个colorSquare时，当前画笔颜色为选中的颜色
                onClicked:
                {
                    parent.paintColor = color
                }
            }
        }
    }
    Rectangle
    {
        anchors.fill: canvas
        border.color: "#666"
        border.width: 4;
    }
    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.lineWidtn = 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()//当鼠标press位置改变  完成当前绘制
            }
        }
    }
}