Canvas（三-关于绘图的一些技巧2）

最新推荐文章于 2022-09-16 14:08:55 发布

sssnial-jz

最新推荐文章于 2022-09-16 14:08:55 发布

阅读量151

点赞数

分类专栏： QT（Quick）

本文链接：https://blog.csdn.net/qq_42306471/article/details/115518104

版权

QT（Quick）专栏收录该内容

34 篇文章 1 订阅

订阅专栏

本文介绍了Qt Quick中的Canvas如何进行坐标变换，包括移动画布原点和旋转，以及使用组合模式和像素缓冲进行图像操作。示例代码展示了如何读取和设置像素数据，以及将画布内容转换为图片数据。同时，文章提到了一个错误：`getImageData`未定义，可能是因为缺少正确的上下文或导入。

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

坐标变换：

就是改变画布的原点坐标了

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 240
    height: 120
    title: qsTr("Hello World")

    Item {
        anchors.fill: parent
        Canvas{
            id:root
            anchors.fill: parent

            onPaint: {
                var ctx = getContext("2d")
                ctx.strokeStyle = "blue"
                ctx.lineWidth = 4

                ctx.beginPath()
                ctx.rect(-20,-20,40,40)
                // 移动画布原点到 120.60
                ctx.translate(120,60)
                ctx.stroke()

                ctx.rect(-20,-20,40,40)
                // 画布原点旋转 45 度
                ctx.rotate(Math.PI / 4)
                ctx.stroke()
            }
        }
    }
}

组合模式：

组合允许你绘制一个形状然后与已有的像素点集合混合
Canvas提供了多种组合模式，使用globalCompositeOperation(mode)来设置

（这里就不掩饰了）

像素缓冲：

当你使用画布时，你可以检索读取画布上的像素数据，或者操作画布上的像素。
读取图像数据使用createImageData(sw,sh)或者getImageData(sx,sy,sw,sh)。
这两个函数都会返回一个包含宽度（width），高度（height）和数据（data）的图像数据（ImageData）对象
图像数据包含了一维数组像素数据，使用RGBA格式进行检索。每个数据的数据范围在0到255之间。
设置画布的像素数据可以使用 putImageData(imagedata,dx,dy)函数来完成。
另一种检索画布内容的方法是将画布的数据存储进一张图片中。
可以使用画布的函数save(path)或者toDataURL(mimeType)来完成
toDataURL(mimeType)会返回一个图片的地址，这个链接可以直接用Image元素来读取。

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 240
    height: 120
    title: qsTr("Hello World")

    Item {
        anchors.fill: parent
        Canvas{
            id:canvas
            x:10
            y:10
            width: 100
            height:100
            property real hue: 0.0
            onPaint: {
                var ctx = getContext("2d")
                var x = 10 + Math.random(80)*80
                var y = 10 + Math.random(80)*80
                hue += Math.random()*0.1
                if(hue > 1.0) { hue -= 1 }
                ctx.globalAlpha = 0.7
                ctx.fillStyle = Qt.hsla(hue, 0.5, 0.5, 1.0)
                ctx.beginPath()
                ctx.moveTo(x+5,y)
                ctx.arc(x,y, x/10, 0, 360)
                ctx.closePath()
                ctx.fill()
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    // 将画布存进一张图片
                    var url = canvas.toDataURL('image/png')
                    print('image url=', url)
                    image.source = url
                }
            }

            Image {
                id: image
                x: 130;
                y: 10
                width: 100;
                height: 100
            }

            Timer{
                interval: 1000
                running: true
                triggeredOnStart: true
                repeat: true
                onTriggered: canvas.requestPaint()
            }
        }
    }
}

上面的例子演示了 toDataURL 的用法！

接下来再演示一下另一种保存像素的用法：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 400
    height: 300
    title: qsTr("Hello World")

    Item {
        anchors.fill: parent
        Canvas{
            anchors.fill: parent

            onPaint: {
                var ctx = getContext("2d")
                ctx.fillStyle = "yellow"
                ctx.fillRect(0,0,parent.width,parent.height)

                // 定义阴影效果
                ctx.shadowColor = "blue"
                ctx.shadowOffsetX = 2
                ctx.shadowOffsetY = 2
                // 模糊程度
                ctx.shadowBlur = 10

                // 绘制矩形
                ctx.fillStyle = "white"
                ctx.fillRect(10,10,60,60)
                
                // 操作像素
                // 返回 imageData 对象
                var img = getImageData(0,0,100,100)
                putImageData(img,120,0)
            }
        }
    }
}

很奇怪，显示错误：ReferenceError: getImageData is not defined！

是不是因为：