qml中Canvas使用示例

已于 2023-09-06 09:48:12 修改
阅读量201 收藏 1
点赞数
分类专栏： Qt qml 文章标签： qt
于 2023-09-06 09:44:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23604781/article/details/132692358
版权
Qt 同时被 2 个专栏收录
13 篇文章 1 订阅
订阅专栏
qml
4 篇文章 1 订阅
订阅专栏

qml中Canvas使用示例

总是忘记Canvas怎么用，每次用了都得去翻资料，干脆自己写一下，方便下次查。

创建Canvas

在qml里创建一个Canvas，并将画布清空为白色

Canvas{
    id: canvas
    anchors.fill: parent
    
    onPaint: {
        var ctx = getContext("2d")
        ctx.fillStyle = "#FFFFFF"
        ctx.fillRect(0, 0, width, height)  // 填充一个矩形，这里用白色填充整个画布
    }
}

画一个矩形框

ctx.beginPath()
ctx.rect(80, 80, 100, 70)  // (startX, startY, width, height)
ctx.stroke()

画一个填充矩形

ctx.fillStyle = "#4f4f4f"
ctx.fillRect(80, 80, 100, 70)

画一个圆

ctx.beginPath()
ctx.arc(120, 120, 90, 0, 360)  // (centerX, centerY, radius, angle_start, angle_end)
ctx.stroke()

画一个填充圆

ctx.beginPath()
ctx.arc(120, 120, 90, 0, 360)
ctx.fillStyle = "#4f4f4f"
ctx.fill();
ctx.stroke()

画一条直线

ctx.beginPath()
ctx.moveTo(40, 40)  // (startX, startY)
ctx.lineTo(120, 90) // (endX, endY)
ctx.stroke()

颜色、粗细

ctx.strokeStyle = "#FF0000" // 边框颜色
ctx.fillStyle = "#FF0000" // 填充颜色
ctx.lineWidth = 5 // 笔头粗细

现在把这些功能集合起来，做一个简单的画板

需要注意的是，因为在qml中使用了enum，所以qml文件名必须以大写开头，否则无法调用enum中的参数。

// Main_t.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Dialogs 1.3
import QtQuick.Controls 1.4

Window {
    width: 640
    height: 480
    visibility: "Maximized"
    visible: true
    title: qsTr("Hello World")
    color: "#444444"

    enum Draw_Type {
        Type_Rect = 0,      // 外框矩形
        Type_Rect_Fill,     // 填充矩形
        Type_Circle,        // 外框圆
        Type_Circle_Fill,   // 填充圆
        Type_Line,          // 线条
        Type_Paint          // 画笔随笔画
    }
    property int currentType: Main_t.Draw_Type.Type_Rect
    property point startPoint: Qt.point(0, 0)
    property point endPoint: Qt.point(0, 0)
    property bool needClearSaved: true
    property string borderColor: "#4f4f4f"
    property string fillColor: "#4f4f4f"
    property int currLineWidth: 1

    Item{
        width: parent.width - 5
        height: parent.height - 5
        anchors.centerIn: parent

        // 保存画板
        Canvas {
            id: canvas_save
            width: parent.width
            anchors.bottom: parent.bottom
            anchors.top: menuRec.bottom
            anchors.topMargin: 1
            onPaint: {
                var ctx = getContext("2d");

                if (needClearSaved){
                    ctx.fillStyle = "#FFFFFF";
                    ctx.fillRect(0, 0, width, height);  // 填充一个矩形，这里用白色填充整个画布
                    needClearSaved = false;
                    return;
                }

                ctx.strokeStyle = borderColor
                ctx.fillStyle = fillColor
                ctx.lineWidth = currLineWidth
                switch (currentType) {
                case Main_t.Draw_Type.Type_Rect:
                    ctx.beginPath()
                    ctx.rect(startPoint.x, startPoint.y,
                             endPoint.x - startPoint.x,
                             endPoint.y - startPoint.y)  // (startX, startY, width, height)
                    ctx.stroke()
                    break;
                case Main_t.Draw_Type.Type_Rect_Fill:
                    ctx.beginPath()
                    ctx.rect(startPoint.x, startPoint.y,
                             endPoint.x - startPoint.x,
                             endPoint.y - startPoint.y)  // (startX, startY, width, height)
                    ctx.fill();
                    ctx.stroke()
                    break;
                case Main_t.Draw_Type.Type_Circle:
                    ctx.beginPath()
                    var centerX = (startPoint.x + endPoint.x) / 2
                    var centerY = (startPoint.y + endPoint.y) / 2
                    var radius = distance(startPoint, endPoint) / 2
                    ctx.arc(centerX, centerY, radius, 0, 360)  // (centerX, centerY, radius, angle_start, angle_end)
                    ctx.stroke();
                    break;
                case Main_t.Draw_Type.Type_Circle_Fill:
                    ctx.beginPath()
                    var centerX = (startPoint.x + endPoint.x) / 2
                    var centerY = (startPoint.y + endPoint.y) / 2
                    var radius = distance(startPoint, endPoint) / 2
                    ctx.arc(centerX, centerY, radius, 0, 360)  // (centerX, centerY, radius, angle_start, angle_end)
                    ctx.fill();
                    ctx.stroke();
                    break;
                case Main_t.Draw_Type.Type_Line:
                    ctx.beginPath()
                    ctx.moveTo(startPoint.x, startPoint.y)  // (startX, startY)
                    ctx.lineTo(endPoint.x, endPoint.y) // (endX, endY)
                    ctx.stroke()
                    break;
                case Main_t.Draw_Type.Type_Paint:
                    ctx.beginPath()
                    ctx.moveTo(startPoint.x, startPoint.y)  // (startX, startY)
                    ctx.lineTo(endPoint.x, endPoint.y) // (endX, endY)
                    ctx.stroke()
                    startPoint = endPoint
                    return;
                }

                // 画完后，把实时绘画面板给清除掉
                startPoint = Qt.point(0, 0)
                endPoint = Qt.point(0, 0)
                canvas_ing.requestPaint()
            }
        }


        // 实时绘图画板
        Canvas {
            id: canvas_ing
            anchors.fill: canvas_save
            onPaint: {
                var ctx = getContext("2d");
                ctx.clearRect(0, 0, width, height)
                ctx.strokeStyle = borderColor
                ctx.fillStyle = fillColor
                ctx.lineWidth = currLineWidth

                switch (currentType) {
                case Main_t.Draw_Type.Type_Rect:
                    ctx.beginPath();
                    ctx.rect(startPoint.x, startPoint.y,
                             endPoint.x - startPoint.x,
                             endPoint.y - startPoint.y);  // (startX, startY, width, height)
                    ctx.stroke();
                    break;
                case Main_t.Draw_Type.Type_Rect_Fill:
                    ctx.beginPath()
                    ctx.rect(startPoint.x, startPoint.y,
                             endPoint.x - startPoint.x,
                             endPoint.y - startPoint.y)  // (startX, startY, width, height)
                    ctx.fill();
                    ctx.stroke()
                    break;
                case Main_t.Draw_Type.Type_Circle:
                    ctx.beginPath()
                    var centerX = (startPoint.x + endPoint.x) / 2
                    var centerY = (startPoint.y + endPoint.y) / 2
                    var radius = distance(startPoint, endPoint) / 2
                    ctx.arc(centerX, centerY, radius, 0, 360)  // (centerX, centerY, radius, angle_start, angle_end)
                    ctx.stroke();
                    break;
                case Main_t.Draw_Type.Type_Circle_Fill:
                    ctx.beginPath()
                    var centerX = (startPoint.x + endPoint.x) / 2
                    var centerY = (startPoint.y + endPoint.y) / 2
                    var radius = distance(startPoint, endPoint) / 2
                    ctx.arc(centerX, centerY, radius, 0, 360)  // (centerX, centerY, radius, angle_start, angle_end)
                    ctx.fill();
                    ctx.stroke();
                    break;
                case Main_t.Draw_Type.Type_Line:
                    ctx.beginPath()
                    ctx.moveTo(startPoint.x, startPoint.y)  // (startX, startY)
                    ctx.lineTo(endPoint.x, endPoint.y) // (endX, endY)
                    ctx.stroke()
                    break;
                case Main_t.Draw_Type.Type_Paint:
                    // 这个不需要实时显示了，直接画在显示面板上就行
                    break;
                }
            }
            MouseArea{
                anchors.fill: parent
                onPressed: {
                    startPoint = Qt.point(mouseX, mouseY)
                    if(currentType === Main_t.Draw_Type.Type_Paint) {
                        endPoint = Qt.point(mouseX, mouseY)
                        canvas_save.requestPaint()
                    }
                }
                onPositionChanged: {
                    if(!pressed) return;
                    endPoint = Qt.point(mouseX, mouseY)
                    canvas_ing.requestPaint()
                    if(currentType === Main_t.Draw_Type.Type_Paint) {
                        canvas_save.requestPaint()
                    }
                }
                onReleased: {
                    endPoint = Qt.point(mouseX, mouseY)
                    canvas_save.requestPaint()
                }
            }
        }


        // 菜单区域
        Rectangle {
            id: menuRec
            width: parent.width
            height: 40
            anchors.top: parent.top
            color: "#CCCCCC"

            Row{
                width: parent.width- 20
                height: parent.height
                anchors.centerIn: parent
                spacing: 20

                Text {
                    text: qsTr("清空画板")
                    font.pixelSize: 17
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#888888"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            needClearSaved = true;
                            canvas_save.requestPaint();
                        }
                    }
                }

                Rectangle { // 填充颜色
                    id: fillColorRec
                    height: 30
                    width: parent.height
                    color: fillColor
                    anchors.verticalCenter: parent.verticalCenter
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            colorFillSelect.open()
                        }
                    }
                }

                Rectangle { // 边框颜色
                    id: borderColorRec
                    height: 30
                    width: parent.height
                    color: "transparent"
                    border.width: 2
                    border.color: borderColor
                    anchors.verticalCenter: parent.verticalCenter
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            colorBorderSelect.open()
                        }
                    }
                }

                Item{
                    width: 120
                    height: parent.height
                    Text {
                        id: lineWidthLabel
                        text: qsTr("线条粗细 ")
                        font.pixelSize: 17
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    SpinBox{
                        anchors.left: lineWidthLabel.right
                        anchors.verticalCenter: parent.verticalCenter
                        minimumValue: 1
                        value: currLineWidth
                        onValueChanged: {
                            currLineWidth = value
                        }
                    }
                }

                Text {
                    text: qsTr("空矩形")
                    font.pixelSize: 17
                    anchors.verticalCenter: parent.verticalCenter
                    color: currentType === Main_t.Draw_Type.Type_Rect ? "#444444" : "#888888"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            currentType = Main_t.Draw_Type.Type_Rect
                        }
                    }
                }

                Text {
                    text: qsTr("填充矩形")
                    font.pixelSize: 17
                    anchors.verticalCenter: parent.verticalCenter
                    color: currentType === Main_t.Draw_Type.Type_Rect_Fill ? "#444444" : "#888888"
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            currentType = Main_t.Draw_Type.Type_Rect_Fill
                        }
                    }
                }

                Text {
                    text: qsTr("空圆形")
                    font.pixelSize: 17
                    anchors.verticalCenter: parent.verticalCenter
                    color: currentType === Main_t.Draw_Type.Type_Circle ? "#444444" : "#888888"
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            currentType = Main_t.Draw_Type.Type_Circle
                        }
                    }
                }

                Text {
                    text: qsTr("填充圆形")
                    font.pixelSize: 17
                    anchors.verticalCenter: parent.verticalCenter
                    color: currentType === Main_t.Draw_Type.Type_Circle_Fill ? "#444444" : "#888888"
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            currentType = Main_t.Draw_Type.Type_Circle_Fill
                        }
                    }
                }

                Text {
                    text: qsTr("直线")
                    font.pixelSize: 17
                    anchors.verticalCenter: parent.verticalCenter
                    color: currentType === Main_t.Draw_Type.Type_Line ? "#444444" : "#888888"
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            currentType = Main_t.Draw_Type.Type_Line
                        }
                    }
                }

                Text {
                    text: qsTr("画笔")
                    font.pixelSize: 17
                    anchors.verticalCenter: parent.verticalCenter
                    color: currentType === Main_t.Draw_Type.Type_Paint ? "#444444" : "#888888"
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            currentType = Main_t.Draw_Type.Type_Paint
                        }
                    }
                }

            }
        }
    }


    ColorDialog{
        id: colorFillSelect
        visible: false
        onAccepted: {
            fillColor = colorFillSelect.color
        }
    }

    ColorDialog{
        id: colorBorderSelect
        visible: false
        onAccepted: {
            borderColor = colorBorderSelect.color
        }
    }

    function distance(pointOne, pointTwo) {
        var xDiff = pointTwo.x - pointOne.x;
        var yDiff = pointTwo.y - pointOne.y;
        return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
    }

}

结果显示：
在这里插入图片描述

猫生鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QMLcanvas画板鼠标画图（有预览路径）
10-29
基于qml的canvas画板功能，实现利用鼠标进行画圆画矩形等，有预览路径
turtle库--------python
cg_code的博客
11-07 252
turtle库中的函数 turtle.forward()与turtle.backward() turtle.forward(distance) 画笔向前移动distance距离 turtle.backward(distance) 画笔向后移动distance距离 turtle.right() turtle.right(degree) 绘制方向向右旋转degree度 turtle.left() turtle.left(degree) 绘制方向向左旋转degree度 turtle.penup(
提升性能：QML Canvas 绘图优化技巧
最新发布
梦起丶的博客
04-16 913
优化QML Canvas绘图性能是确保应用程序流畅运行的关键一环。通过采用上述技巧和策略，你可以提升绘图性能，改善用户体验，并确保应用程序在各种设备上都能够高效运行。只有不断地优化和调整绘图代码，结合性能分析工具的使用，才能使你的应用在绘图方面达到最佳状态。
qml Canvas（一）
weixin_48657573的博客
09-29 602
quick 中控件都在窗口中显示，所以如果你需要使用画布必须在一个窗口中定义 画布的实现的方式有2种： 第一种：这种是通过getContsxt()方法获得obj // transform.qml import QtQuick 2.5 import QtQuick.Window 2.0 Window{ visible: true; width: 800; height: 500; //定义Canvas obj Canvas { width: 400
在QML中使用Canvas
梦起丶的博客
04-18 1万+
【写在前面】 在qml中，要进行一般的绘图，如果不想使用 C++ API，那么就只能使用 Canvas 了。 qml Canvas 提供 HTML5 Canvas 类似的 API，需要修改 HTML5 Canvas 应用程序以在 Canvas项 中运行。 使用 qml 属性绑定或 Canvas 项方法替换所有 DOM API 调用。 使用 MouseArea 项替换所有 HTML 事件处理...
QML之Canvas（画布元素）
DEV_linux的专栏
11-20 3302
Qt5中引进了画布元素（canvas element），允许脚本绘制。画布元素（canvas element） 提供了一个依赖于分辨率的位图画布，你可以使JavaScript脚本来绘制图形，制作游戏或者其它的动态图像。画布元素（canvas element）是基于HTML5的画布元素来完成的。    画布元素（ canvas element）的基本思想是使一个2D对象来渲染路径。
QML--Canvas画布实现矩形圆形等圈定
01-10
QML--Canvas画布实现矩形圆形等圈定
qml中使用Canvas绘制饼状图
08-09
在qml中使用Canvas绘制饼状图，可以直接使用qmlscene运行,支持Qt5.5及其以上
QmlCanvas文字QmlCanvasText.7z
07-20
QmlCanvas文字QmlCanvasText.7z
qt qml canvas 实时绘图
10-09
本工程使用Qt5QML,绘制实时折线图，提供canvas基本使用方法
Qml-canvas鼠标按压画图
10-29
基于qml的canvas画板功能，利用鼠标pressed进行随笔画
QML类型：Canvas
友善啊，朋友的博客
10-25 1950
一、描述 Canvas 项目允许绘制直线和曲线、简单和复杂的形状、图形和参考图形图像。 它还可以添加文本、颜色、阴影、渐变和图案，并进行低级像素操作。 Canvas 输出可以保存为图像文件或序列化为 URL。 渲染到 Canvas 是使用 Context2D 对象完成的。 二、线程渲染和渲染目标 在 Qt 6.0 中，Canvas 项支持一个渲染目标：Canvas.Image。 Canvas.Image 渲染目标是一个 QImage 对象。 此渲染目标支持后台线程渲染，允许在不阻塞 UI 的情况下
QML —— Canvas重绘钟表组件（附完整源码）
wx微信公众号“码农总动员”，获取更多编程知识
01-03 435
QML —— Canvas重绘钟表组件（附完整源码）
canvas的fillStyle
DreamFJ的博客
08-07 419
以下方法也适用于strokeStyle，但是一般不会给strokeStyle设置样式 1.线性渐变 var lgrd = context.createLinearGradient(xstart,ystart,xend,yend); lgrd.addColorStop(stop,color); context.fillStyle = lgrd; 2.径向渐变 var rgrd = cont...
canvas fillstyle
hugejihu9的专栏
01-09 315
文章来自：源码在线https://www.shengli.me/h5/553.html   fillstyle (设置或返回用于填充绘画的颜色、渐变或模式)     结果显示：      
QML中的Canvas绘图---渐变
xi__q的专栏
02-07 2804
QML中的Canvas的画布功能其实和js以及h5的Canvas基本一样，以下是我使用QML的Canvas绘出渐变效果的代码，在过程中出现的几个问题，都是由几个关键的数据控制的，这个一般在网上和帮助文档都很少有资料，记录下//mainView's right view background,the size is fix import QtQuick 2.0 import QtQuick.Contr
QML画图-Canvas画基本图形
热门推荐
落尘飞
07-06 1万+
1.canvas画矩形   a.无路径画法     ctx.fillRect(200,100,50,40);    //填充     ctx.strokeRect(200,100,50,40);  //描边     注：先用fillRect填充了矩形，用stroke()，不能描边，因为虽然有个矩形，但不存在路径。   b.rect     ctx.rect(300,100,50,40)
[基础]qmlscene的使用
我不想说
12-02 743
qmlscene怎么使用
QML Canvas 绘制基础形状
青春不老，奋斗不止！
06-16 1159
Canvas 是一个用于在 QML 中绘制图形的元素，它提供了一个依赖于分辨率的位图画布，可用于动画、游戏、数据可视化、图片编辑以及视频处理等方面。
qml中canvas知识
09-09
在这个例子中，我们导入了QtQuick 2.7和QtQuick.Controls 2.0模块，并创建了一个可见的应用程序窗口。在窗口中，我们可以在MyCanvas元素中绘制自定义的图形。 总而言之，QML中的Canvas元素提供了一个方便的方式来在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值