QML学习笔记-纯qml实现canvas画板功能-鼠标画图

最新推荐文章于 2023-09-13 16:09:50 发布

DebJane

最新推荐文章于 2023-09-13 16:09:50 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： QML QML 文章标签： qml canvs mouse

本文链接：https://blog.youkuaiyun.com/sueRimn/article/details/83504650

本文介绍如何使用QML纯JavaScript实现canvas画板功能，支持鼠标点击画图和按压拖动绘图，包括无预览路径和有预览路径的实现方式。同时，文章提供了源码示例，并指出为了优化画图性能，建议结合C++进行实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

gitHub:sueRimn

源码：

qml-draw-canvas (随笔画) qml-draw-canvs-press（按压随笔画）qml-draw-canvas-path(预览路径)

用纯qml实现canvas画板功能，用鼠标进行画图，可以画直线，画圆，画矩形，画弧线。

由于canvas画图会有延迟和卡顿，建议还是结合c++实现画图功能。

以下gif效果都没有录进鼠标

1.鼠标点击画图-无预览路径（两点实现）

贴上代码和注释：

property real startX
    property real startY
    property real stopX
    property real stopY
    property color color: colorTools.paintColor
    property var paintType: ["line","rect","circle","curve"]//自定义绘制类型
    property var clickPoint: []//多边形画图的存点数组 未实现
    property int clickNum: 0//鼠标点击

    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
//                }

//            }
//        }
        Button {
            text: "Clear"
            onClicked: {
                canvas.clear()
            }
        }
        Button{
            text: "line";
                onClicked: {

                    paintType = "line";
                    //canvas.requestPaint();
                }

        }
        Button{
            text: "rect"
            onClicked: {
                paintType = "rect";
               // canvas.requestPaint();
            }
        }
        Button{
            text: "circle"
            onClicked: {
                paintType = "circle";
//                canvas.requestPaint();
            }
        }
        Button{
            text: "curve"
            onClicked: {
                paintType = "curve";
//                canvas.requestPaint();
            }
        }
    }
    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
        }
        //鼠标点击坐标位置

        function clear() {
            var ctx = getContext("2d");
            ctx.reset();
            canvas.requestPaint();
        }
          onPaint: {
              var ctx = getCo