Qt--canvas画图（5.12）

左手的ㄟ右手 2022-12-29 00:11 245阅读 0赞

### Qt--canvas画图（5.12） ###

*  1 介绍
 *  2 使用流程
 *  3 简单示例
 *   *  3.1 简单线、图形、文本、渐变、尺子
     *  3.2 选色绘画（转【参2】）
     *  3.3 简单鼠标绘制（转【参2】）
     *  3.4 绘制长方形（转【参2】）
 *  参考

# 1 介绍 #

画布项目允许绘制直线和曲线、简单和复杂的形状、图形和引用的图形图像。它还可以添加文本、颜色、阴影、渐变和模式，并执行低级像素操作。画布输出可以保存为图像文件或序列化为URL。

# 2 使用流程 #

*  装载画笔或者填充模式
 *  创建绘制路径
 *  使⽤画笔或者填充绘制路径

# 3 简单示例 #

## 3.1 简单线、图形、文本、渐变、尺子 ##

注： ctx.closePath();画直线使用时会出问题，线变长

import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        visible: true
        width: 640
        height: 640
        title: qsTr("Hello World")
    
        Canvas {
            id: mycanvas
            width: parent.width
            height: parent.height
            onPaint: {
                var ctx = getContext("2d");
    
                // a red short line
                ctx.strokeStyle = "red"
                ctx.lineWidth = 2
                ctx.beginPath()
                ctx.moveTo(50, 50)
                ctx.lineTo(150, 50)
                ctx.stroke()
                ctx.beginPath()
    
                ctx.strokeStyle = "grey"
                ctx.lineWidth = 6
                ctx.moveTo(50, 100)
                ctx.lineTo(150, 100)
                ctx.stroke()
                ctx.beginPath()
    
                ctx.lineWidth = 2
    
                // 填充
                ctx.fillStyle = "pink";
                ctx.fillRect(50, 150, 100, 50);
    
                // 描边
                ctx.strokeStyle = "red";
                ctx.strokeRect(50, 300, 100, 50);
    
                // 画圆
                ctx.strokeStyle = "grey";
                ctx.arc(100, 500, 50, 0, Math.PI*2);
                ctx.stroke();
    
                // 渐变
                var gradient = ctx.createLinearGradient(0, 50, 0, 100)
                gradient.addColorStop(0, "blue")
                gradient.addColorStop(0.5, "lightsteelblue")
                ctx.fillStyle = gradient
                ctx.fillRect(200, 50, 100, 50)
    
                gradient = ctx.createLinearGradient(200, 0, 300, 0)
                gradient.addColorStop(0, "blue")
                gradient.addColorStop(0.5, "lightsteelblue")
                ctx.fillStyle = gradient
                ctx.fillRect(200, 150, 100, 50)
    
                // 文本
                ctx.fillStyle = "green"
                ctx.strokeStyle = "blue"
                ctx.fontSize = 20
                ctx.font = "bold 26px Arial"
                var text = "qter.org";
                context.fillText(text, 200, 250)
                context.strokeText(text, 200, 300)
    
                ctx.font = "bold 12px Arial"
                draw(ctx)
            }
        }
    
    
        function draw(ctx ) {
            var config = {
                rulerWidth: 250,
                rulerHeight: 50,
                size: 5, // the total num of scale
                x: 350,
                y: 350,
                w: 5, // scale line interval
                h: 10 // base length of the scale line
            }
            var size = (config.size || 100) * 10 + 1
            var x = config.x
            var y = config.y - 1
            var w = 5 || 5 // width of the scale line
            var h = 10 || 10
            var offset = 3
            ctx.fillStyle = "#F5DEB3"
            ctx.fillRect(x, y - config.rulerHeight, config.rulerWidth, config.rulerHeight);
            ctx.fillRect(x - config.rulerHeight, y, config.rulerHeight, config.rulerWidth);
            ctx.fillStyle = "#111"
            ctx.strokeStyle = '#333'
            ctx.lineWidth = 1
            ctx.font = 13
    
            // horizontal ruler
            for (var i = 0; i < size; i++) {
                ctx.beginPath()
                ctx.moveTo(x + i * w, y)
                // long scale line
                if (i % 10 == 0) {
                    offset = (String(i / 10).length * 6 / 2)
                    ctx.fillText(i / 10, x + i * w - offset + 10 , y - h * 1.2);
                    ctx.lineTo(x + i * w, y - h * 2)
                } else {
                    // mid scale line / short scale line
                    ctx.lineTo(x + i * w, y - (i % 5 === 0 ? 1 : 0.6) * h)
                }
                ctx.stroke()
            }
    
            // vertical ruler
            for ( i = 0; i < size; i++) {
                ctx.beginPath()
                ctx.moveTo(y, x + i * w)
                // long scale line
                if (i % 10 == 0) {
                    offset = (String(i / 10).length * 6 / 2)
                    ctx.lineTo( y - h * 2, x + i * w)
                    ctx.fillText(i / 10, y - h * 1.2 - 5, x + i * w - offset + 15);
                } else {
                    // mid scale line / short scale line
                    ctx.lineTo(y - (i % 5 === 0 ? 1 : 0.6) * h, x + i * w)
                }
                ctx.stroke()
            }
    
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70]

## 3.2 选色绘画（转【参2】） ##

import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    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()
                }
            }
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70 1]

## 3.3 简单鼠标绘制（转【参2】） ##

import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    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)
    
                //纪录鼠标开始的位置的坐标点
                startX = area.mouseX;
                startY = area.mouseY;
                ctx.lineTo(startX,startY)
                ctx.stroke()
            }
    
        }
    
        MouseArea{
            id: area
            anchors.fill: parent
    
            //当鼠标按下时调用本函数
            onPressed: {
                startX = area.mouseX;
                startY = area.mouseY;
                isMouseMoveEnable = true
            }
    
            //当鼠标释放时调用本函数
            onReleased: {
                isMouseMoveEnable = false
                canvas.requestPaint()      //当鼠标released时，调用绘制paint
            }
    
            //当鼠标press位置改变，调用本函数
            onPositionChanged: {
                if (isMouseMoveEnable){
                    canvas.requestPaint()   //绘制函数
                }
            }
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70 2]

## 3.4 绘制长方形（转【参2】） ##

import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    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()   //绘制函数
                }
            }
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70 3]

# 参考 #

1、[Qt–Canvas QML Type][Qt_Canvas QML Type]  
2、[Qt-quick(qml) Canvas用法及鼠标绘制图形][Qt-quick_qml_ Canvas]  
3、[鼠标画图][Link 1]  
4、[QML画图-Canvas画基本图形][QML_-Canvas]  
5、[canvas arc()方法详解][canvas arc]  
6、[Qt：在QML中自定义贝塞尔动画曲线][Qt_QML]  
7、[HTML canvas fillText() 方法][HTML canvas fillText_]  
8、[HTML canvas createLinearGradient() 方法][HTML canvas createLinearGradient_]  
9、[用qml画坐标][qml]  
10、[QML之CANVAS实现标尺(刻度尺)方案][QML_CANVAS]  
11、[在QML中使用Canvas][QML_Canvas]  
12、[QML 画布Canvas–2D绘图（上）][QML _Canvas_2D]  
13、[提高canvas性能技巧][canvas]  
14、[bezier curve or quadratic curve][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70]: /images/20221120/7a6fff5066b040fe88dbf6b5d79e945a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70 1]: /images/20221120/589bf6ed8fda43a1bc9a4930b93594e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70 2]: /images/20221120/25305c604a664f00b460e3dbd2860efd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70 3]: /images/20221120/b90b92282f6448b399bbf10d04866c8a.png
[Qt_Canvas QML Type]: https://doc.qt.io/qt-5.12/qml-qtquick-canvas.html#details
[Qt-quick_qml_ Canvas]: https://blog.csdn.net/qq_36685813/article/details/102546312?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-9.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-9.control
[Link 1]: https://www.cnblogs.com/suRimn/p/9796389.html
[QML_-Canvas]: https://blog.csdn.net/u012419303/article/details/46771819?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-9.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-9.control
[canvas arc]: https://blog.csdn.net/csm17805987903/article/details/85005790
[Qt_QML]: https://blog.csdn.net/wsj18808050/article/details/72869043?utm_medium=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-10.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-10.nonecas
[HTML canvas fillText_]: https://www.runoob.com/jsref/met-canvas-filltext.html
[HTML canvas createLinearGradient_]: https://www.runoob.com/jsref/met-canvas-createlineargradient.html
[qml]: https://blog.csdn.net/cqltbe131421/article/details/71710583?utm_medium=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-4.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-4.nonecas
[QML_CANVAS]: https://www.freesion.com/article/2608124004/
[QML_Canvas]: https://blog.csdn.net/u011283226/article/details/89355467
[QML _Canvas_2D]: https://www.cnblogs.com/linuxAndMcu/p/13651727.html
[canvas]: https://blog.csdn.net/baozisss/article/details/97897545
[bezier curve or quadratic curve]: https://doc.qt.io/qt-5/qtquick-canvas-example.html