Qt-quick(qml) Canvas用法及鼠标绘制图形

最新推荐文章于 2024-10-02 09:33:55 发布
最新推荐文章于 2024-10-02 09:33:55 发布
阅读量5.2k 收藏 52
点赞数 10
分类专栏： Qt quick-qml 文章标签： Qt qml quick Canvas 鼠标绘图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36685813/article/details/102546312
版权

Canvas

画布元素（canvas element）的基本思想是使⽤⼀个2D对象来渲染路径。这个2D对象包括了必要的绘图函数，画布元素（canvas element）充当绘制画布。2D对象⽀持画笔，填充，渐变，⽂本和绘制路径创建命令。canvas项目允许绘制直线和曲线，简单和复杂的形状，图形以及参考的图形图像。它还可以添加文本，颜色，阴影，渐变和图案，并执行低级像素操作。canvas输出可以保存为图像文件或序列化为URL。

在QML中，画布元素（canvas element）充当了绘制的容器。2D绘制对象提供了实际绘制的⽅法。绘制需要在onPaint事件中完成以下代码创建一个Canvas项目，画一条直线。

        典型绘制命令调⽤如下：

                   1. 装载画笔或者填充模式            

                   2. 创建绘制路径

                   3. 使⽤画笔或者填充绘制路径

import QtQuick 2.9
import QtQuick.Window 2.2

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

    Canvas {
        id: mycanvas
        width: 100
        height: 200
        onPaint: {
            var ctx = getContext("2d");

            // setup the stroke
            ctx.strokeStyle = "red"

            // create a path
            ctx.beginPath()

            ctx.moveTo(50,50)
            ctx.lineTo(150,50)

            // stroke path
            ctx.stroke()
        }
    }
}

 在绘制矩形时，我们提供了⼀个便捷的接⼝，而不需要调⽤stroke或者fill来完成。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

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

    //定位元素，画四个带颜色的正方形
    Row {
        id: colorTools
        anchors {
            horizontalCenter: parent.horizontalCenter
            top: parent.top
            topMargin: 8
        }

        property color paintColor: "#33B5E5"
        spacing: 4

        //清楚按钮
        Button {
            text: "Clear"
            onClicked: {
                canvas.clear()
            }
        }

        //绑定点击更换颜色
        Repeater {
            model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]

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

                MouseArea {
                    id: area1
                    anchors.fill :parent
                    onClicked: {
                        colorTools.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  //继承颜色

        //清除函数
        function clear() {
            var ctx = getContext('2d')
            ctx.reset();
            canvas.requestPaint();
        }

        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()
            }
        }
    }
}

 效果如下：

 

画布绘制（Canvas Paint） 

1. 在这个例⼦中我们将使⽤画布（Canvas）创建⼀个简单的鼠标绘制程序。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window{
    id: root
    width: 640
    height: 480
    visible: true

    //鼠标点击坐标位置
    property real startX     //储存鼠标开始时的坐标
    property real startY
    property real stopX      //储存鼠标结束时的坐标
    property real stopY

    //在root上画一个方框
    Rectangle{
        anchors.fill: canvas
        border.color: "#666"
        border.width: 4;
    }

    //创建一个画布
    Canvas{
        id:canvas;
        anchors.fill:parent

        onPaint: {
            var ctx = getContext("2d")
            ctx.lineWidtn = 3
            ctx.strokeStyle = "blue";

            //开始绘制
            ctx.beginPath()
            ctx.moveTo(startX,startY)

            //纪录鼠标开始的位置的坐标点
            startX = area.mouseX;
            startY = area.mouseY;
            ctx.lineTo(startX,startY)
            ctx.stroke()
        }

    }

    MouseArea{
        id:area;
        anchors.fill: parent;

        //当鼠标按下时调用本函数
        onPressed: {
            startX = mouse.x;
            startY = mouse.y;
            isMouseMoveEnable = true
        }

        //当鼠标释放时调用本函数
        onReleased: {
            isMouseMoveEnable = false
            canvas.requestPaint()      //当鼠标released时，调用绘制paint

        }

        //当鼠标press位置改变，调用本函数
        onPositionChanged: {
            if (isMouseMoveEnable){
                canvas.requestPaint()   //绘制函数
            }
        }
    }
}

效果如下：

 

 

对上述例子进行扩展：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

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

    Row {
        id: colorTools
        anchors {
            horizontalCenter: parent.horizontalCenter
            top: parent.top
            topMargin: 8
        }

        property color paintColor: "#33B5E5"
        spacing: 4

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

        Repeater {
            model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]

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

                MouseArea {
                    id: area1
                    anchors.fill :parent
                    onClicked: {
                        colorTools.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

        function clear() {
            var ctx = getContext('2d')
            ctx.reset();
            canvas.requestPaint();
        }

        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()
            }
        }
    }
}

效果如下：

 

2. 鼠标绘制长方形，无绘制轨迹

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4


Window{
    id: root
    width: 640
    height: 480
    visible: true

    //鼠标点击坐标位置
    property real startX     //储存鼠标开始时的坐标
    property real startY
    property real stopX      //储存鼠标结束时的坐标
    property real stopY
    property bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件

    //在root上画一个方框
    Rectangle{
        anchors.fill: canvas
        border.color: "#666"
        border.width: 4;
    }

    //创建一个画布
    Canvas{
        id:canvas;
        anchors.fill:parent

        onPaint: {
            var ctx = getContext("2d")
            ctx.lineWidtn = 3
            ctx.strokeStyle = "blue";

            if (!isMouseMoveEnable) {
                ctx.clearRect(0,0,width,height) //清空所画图形
                return;
            }

            if (isMouseMoveEnable){
                ctx.clearRect(0,0,width,height)
            }

            //开始绘制
            ctx.beginPath()
            ctx.moveTo(startX,startY)

            //记录移动终点
            stopX = area.mouseX
            stopY = area.mouseY

            //绘制长方形
            ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)
            ctx.stroke()
        }
    }

    MouseArea{
        id:area;
        anchors.fill: parent;

        //当鼠标按下时调用本函数
        onPressed: {
            startX = mouse.x;
            startY = mouse.y;
            isMouseMoveEnable = true
        }

        //当鼠标press位置改变，调用本函数
        onPositionChanged: {
            if (isMouseMoveEnable){
                canvas.requestPaint()   //绘制函数
            }
        }
    }
}

效果如下：

 

3. 鼠标释放长方形消失

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4


Window{
    id: root
    width: 640
    height: 480
    visible: true

    //鼠标点击坐标位置
    property real startX     //储存鼠标开始时的坐标
    property real startY
    property real stopX      //储存鼠标结束时的坐标
    property real stopY
    property bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件

    //在root上画一个方框
    Rectangle{
        anchors.fill: canvas
        border.color: "#666"
        border.width: 4;
    }


    //创建一个画布
    Canvas{
        id:canvas;
        anchors.fill:parent

        onPaint: {
            var ctx = getContext("2d")
            ctx.lineWidtn = 3
            ctx.strokeStyle = "blue";


            if (!isMouseMoveEnable) {
                ctx.clearRect(0,0,width,height) //清空所画图形
                return;
            }

            if (isMouseMoveEnable){
                ctx.clearRect(0,0,width,height)
            }

            //开始绘制
            ctx.beginPath()
            ctx.moveTo(startX,startY)
            //console.log(startX,startY)

            //记录移动终点
            stopX = area.mouseX
            stopY = area.mouseY

            //绘制长方形
            ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)
            ctx.stroke()
        }

    }

    MouseArea{
        id:area;
        anchors.fill: parent;

        //当鼠标按下时调用本函数
        onPressed: {
            startX = mouse.x;
            startY = mouse.y;
            isMouseMoveEnable = true
        }

        //当鼠标释放时调用本函数
        onReleased: {
            isMouseMoveEnable = false
            canvas.requestPaint()      //当鼠标released时，调用绘制paint

        }

        //当鼠标press位置改变，调用本函数
        onPositionChanged: {
            if (isMouseMoveEnable){
                canvas.requestPaint()   //绘制函数
            }
        }
    }
}

效果如下：

4. 有绘制轨迹的

 

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4


Window{
    id: root
    width: 640
    height: 480
    visible: true

    //鼠标点击坐标位置
    property real startX     //储存鼠标开始时的坐标
    property real startY
    property real stopX      //储存鼠标结束时的坐标
    property real stopY
    property bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件

    //在root上画一个方框
    Rectangle{
        anchors.fill: canvas
        border.color: "#666"
        border.width: 4;
    }


    //创建一个画布
    Canvas{
        id:canvas;
        anchors.fill:parent

        onPaint: {
            var ctx = getContext("2d")
            ctx.lineWidtn = 3
            ctx.strokeStyle = "blue";

            //开始绘制
            ctx.beginPath()
            ctx.moveTo(startX,startY)
            //console.log(startX,startY)

            //记录移动终点
            stopX = area.mouseX
            stopY = area.mouseY

            //绘制长方形
            ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)

            ctx.stroke()
        }

    }
    MouseArea{

        id:area;
        anchors.fill: parent;

        //当鼠标按下时调用本函数
        onPressed: {
            startX = mouse.x;
            startY = mouse.y;
            isMouseMoveEnable = true
        }

        //当鼠标press位置改变，调用本函数
        onPositionChanged: {
            if (isMouseMoveEnable){
                canvas.requestPaint()   //绘制函数
            }
        }
    }
}

效果如下：

 

扩展可以仿照前面的写，这里就不在叙述了。

卫薇
关注
专栏目录
QML Canvas 绘制图像
青春不老，奋斗不止！
06-21 1060
对于 QML Canvas 而言，除了前面讲解的点线面的基本绘制之外，它还提供了一项很有意思的特性 - 绘制图像。只要是 Qt 支持的图片格式都可以使用，比如 PNG、JPEG 等，甚至可以将其它 Canvas 元素生成的图片作为图片源。
QML Canvas 绘制基础形状
青春不老，奋斗不止！
06-16 1344
Canvas 是一个用于在 QML 中绘制图形的元素，它提供了一个依赖于分辨率的位图画布，可用于动画、游戏、数据可视化、图片编辑以及视频处理等方面。
QML学习笔记（二）-纯qml画图实现canvas画板-鼠标画图
diaoyanbian8143的博客
10-16 878
作者：狐狸家的鱼 Github：八至 版权声明：如需转载请获取授权和联系作者 用纯qml实现canvas画板功能，用鼠标进行画图，可以画直线，画圆，画矩形，画弧线。 由于canvas画图会有延迟和卡顿，建议还是结合c++实现画图功能。 以下gif效果都没有录进鼠标 1.鼠标点击画图-无预览路径（两点实现） 贴上代码和注释： property r...
QML绘图动画与交互
最新发布
QT性能优化QT原理源码QT界面美化
10-02 999
QML简介QML简介QML（Qt Meta Language）是一种基于JavaScript的声明性语言，用于描述用户界面。它是Qt框架的一部分，专门用于Qt Quick应用程序的界面开发。QML提供了一种简洁、直观的方式来描述用户界面元素以及它们的行为和外观，使得界面开发变得更加容易和高效。QML的特点声明性语法,QML使用声明性语法，使得开发者可以更加专注于描述用户界面元素，而不是如何构建它们。这使得代码更加简洁和易于维护。易于学习和使用。
Qt Quick之Canvas
weixin_30335353的博客
10-17 189
　　QML中的Canvas,俗称画布，它用来定义一个绘图区域，可以使用ECMAScript代码来绘制直线，矩形，贝塞尔曲线，弧线，图片，文字等图元，还可以为这些图元应用填充颜色和边框颜色，甚至还可以进行低阶的像素级的操作。 1. 几个重要概念 （1）画布 　　下面的代码定义了一个宽320像素高240像素的画布 Canvas { width:320; he...
qml学习--------------利用Canvas绘制图片
南的专栏
09-23 5435
Context2D中有三种不同的方式来绘制图片，其中的image可以是一个image元素，一个图片URL，或者是CanvasImageData。import QtQuick 2.2Rectangle{ width: 480; height: 400; id: root; //绘制一个随机像素的图片 Canvas{ id: randomImageDat
Qt 学习之路：Canvas
weixin_30347335的博客
09-15 406
在 QML 刚刚被引入到 Qt 4 的那段时间，人们往往在讨论 Qt Quick 是不是需要一个椭圆组件。由此，人们又联想到，是不是还需要其它的形状？这种没玩没了的联想导致了一个最直接的结果：除了圆角矩形，Qt Quick 什么都没有提供，包括椭圆。如果你需要一个椭圆，那就找个图片，或者干脆自己用 C++ 写一个吧（反正 Qt Quick 是可以扩展的，不是么）！ 为了使用脚本化的绘图...
Qt-Quick qml
01-19
8. 画布元素（CanvasElement）的使用，包括像素缓冲（PixelsBuffer）、画布绘制（CanvasPaint）、粒子模拟（ParticleSimulations）等，这些是用于创建自定义图形和动画的高级技术。 9. 着色器效果（ShaderEffect）...
canvas3d_qml3d效果_qt3d效果_canvas3d_qt3d_qtgui_
09-28
在本主题中，我们将深入探讨如何在Qt框架中利用Canvas3D和QML3D以及Qt3D来创建丰富的3D图形效果。Qt是一个强大的跨平台应用开发框架，支持多种编程语言，包括C++和QML。Canvas3D是Qt中的一个模块，它允许开发者在...
24.Qt Quick QML-Canvas和Context2D详解
抵抗时间扭曲，坚持做一件有意义的事
05-23 1249
1.Canvas介绍Canvas是一个允许绘制直线和曲线、简单和复杂的形状、图形和引用的图形图像。它还可以添加文本、颜色、阴影、渐变和图案，并执行低级别像素操作。Canvas输出可以另存为图像文件或序列化到URL。例如，以下代码创建一个Canvas项目，该项目具有高度为100像素、宽度为200像素的绘图区域： import QtQuick 2.0 Canvas { id: mycan...
qt qml canvas 实时绘图
10-09
本工程使用Qt5QML,绘制实时折线图，提供canvas基本使用方法
Qml-canvas鼠标按压画图
10-29
基于qml的canvas画板功能，利用鼠标pressed进行随笔画
qml绘制雷达图（蜘蛛网图）
12-04
qml绘制的雷达图，又叫蜘蛛网图。在做项目时结合网上的js的例子，自己封装的图形控件测试demo，可直接运行，Qt5.10
QMLcanvas画板鼠标画图
10-29
基于QML的canvas，实现画板功能，利用鼠标进行涂鸦随笔画
基于QT的Qml Canvas文本显示
06-08
Qml Canvas则允许我们进行更高级的图形绘制，包括自定义的文本渲染。 一、Qt与Qml简介 Qt以其C++库为核心，提供了丰富的API，支持多种操作系统，如Windows、Linux、macOS、Android和iOS。Qml是Qt的扩展，它允许...
Hello Qt（五十三）———QtQuick Canvas
天山老妖
03-06 1286
一、QtQuickCanvas简介 QT5引入了Canvas元素。Canvas元素提供了一种与分辨率无关的位图绘制机制。通过Canvas，可以使用 JavaScript 代码进行绘制。Canvas元素的基本思想是，使用一个2D上下文对象渲染路径。2D上下文对象包含所必须的绘制函数，从而使Canvas元素看起来就像一个画板。2D上下文对象支持画笔、填充、渐变、文本以及其它一系列路径创建函数。 importQtQuick2.0 Canvas { id:root //画板大小 ...
Qt/QML学习-Canvas基础图形绘制
QT、QML
06-29 235
Qt/QML学习-Canvas基础图形绘制
在QML应用中使用Canvas来画图
Elastic 中国社区官方博客
06-05 7747
我们知道画图应用设计中比较重要，虽然QML有很多可以帮我们渲染的控件。我们可以在QML应用中使用Canvas来画我们所需要的图。比如我们可以利用Canvas来画股票的曲线。事实上，我们很容易使用这个API来把很多的HTML5的应用移植到Qt平台中。
使用qt的qml语言基于canvas制作一个鼠标拖动绘制椭圆的功能
06-13
以下是使用Qt的QML语言基于Canvas制作鼠标拖动绘制椭圆的示例代码： ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle { width: 640 height: 480 Canvas { id: canvas anchors.fill: parent onPaint: { // 绘制椭圆 var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.ellipse(x, y, a, b, 0, 0, 2 * Math.PI); ctx.stroke(); } } property real xStart property real yStart property real xEnd property real yEnd MouseArea { anchors.fill: parent onPressed: { xStart = mouseX; yStart = mouseY; xEnd = mouseX; yEnd = mouseY; } onPositionChanged: { xEnd = mouseX; yEnd = mouseY; // 计算椭圆参数 var a = Math.abs(xEnd - xStart) / 2; var b = Math.abs(yEnd - yStart) / 2; var x = Math.min(xStart, xEnd) + a; var y = Math.min(yStart, yEnd) + b; // 更新画布 canvas.x = x; canvas.y = y; canvas.a = a; canvas.b = b; canvas.requestPaint(); } } } ``` 在这个示例中，我们首先创建一个Canvas元素，并在其onPaint信号中绘制椭圆。然后，我们定义了4个属性：x、y、a、b，分别表示椭圆的中心坐标和长短轴长度。在MouseArea元素中，我们在鼠标按下和鼠标移动事件中更新这些属性，并请求Canvas重新绘制。 请注意，这个示例中仅实现了绘制椭圆的功能，如果需要添加更多的交互功能，比如橡皮擦、撤销、重做等，需要根据需求进行相应的修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值