在QML中使用Canvas

朴灿烈づ我的快乐病毒、 2022-02-18 12:09 381阅读 0赞

### **【写在前面】** ###

在qml中，要进行一般的绘图，如果不想使用 C++ API，那么就只能使用 Canvas 了。

qml Canvas 提供 HTML5 Canvas 类似的 API，需要修改 HTML5 Canvas 应用程序以在 Canvas项 中运行。

使用 qml 属性绑定或 Canvas 项方法替换所有 DOM API 调用。

使用 MouseArea 项替换所有 HTML 事件处理程序。

使用 Timer 项或使用 requestAnimationFrame() 更改 setInterval / setTimeout 函数调用。

将绘制代码放入 onPaint 处理程序并通过调用 markDirty() 或 requestPaint() 方法触发绘制。

要绘制图像，请通过调用 Canvas 的 loadImage() 方法加载它们，然后请求在 onImageLoaded 处理程序中绘制它们。

从Qt 5.4开始，Canvas 是一个纹理提供者，可以直接在 ShaderEffects 和其他使用纹理提供者的类中使用。

注意：一般情况下，Canvas.Image 渲染目标应避免使用大型画布，频繁更新和动画。这是因为使用加速图形 API，每次更新都会导致纹理上传。

**此外，如果可能的话，更应该使用 QQuickPaintedItem 并通过 QPainter 在C++中实现绘图，而不是更昂贵且可能性能更差的 JavaScript 和 Context2D 方法。**

--------------------

### **【正文开始】** ###

首先，先上效果图：

![20190418113306698.gif][]

其中，扫描部分的动画就是用 Canvas 做的，当然实际上要快很多。

接下来上代码：

import QtQuick 2.12
    
    Item
    {
        id: root
        clip: true
    
        Canvas
        {
            id: canvas
            anchors.fill: parent
            antialiasing: true
            property bool drawable: false;
            property bool first: true;
            property real r: Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
            property real r1: 0;
            property real r2: r / 2;
    
            function clear()
            {
                first = true;
                r1 = 0;
                r2 = r / 2;
                var ctx = getContext("2d");
                ctx.clearRect(0, 0, width, height);
            }
    
            function drawLine(ctx, color, width, startX, startY, endX, endY)
            {
                ctx.strokeStyle = color;
                ctx.lineWidth = width;
                ctx.beginPath();
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                ctx.closePath();
                ctx.stroke();
            }
    
            Timer
            {
                id: timer
                interval: 16
                running: false
                repeat: true
                onTriggered: canvas.requestPaint();
            }
    
            onPaint:
            {
                var ctx = getContext("2d");
                ctx.fillStyle = "#10FFFFFF";
                ctx.fillRect(0, 0, width, height);
    
                for(var i = 0; i < width; i += 20)
                    drawLine(ctx, "#7266fc", 0.5,i + 0.5, 0, i + 0.5, height);
                for(var j = 0; j < height; j += 20)
                    drawLine(ctx, "#7266fc", 0.5, 0, j + 0.5, width, j + 0.5);
    
                if (drawable)
                {
                    var halfW = width / 2;
                    var halfH = height / 2;
    
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = "#72d6fc";
                    for(var k = 0; k < 5; k += 0.5)
                    {
                        ctx.beginPath();
                        ctx.arc(halfW, halfH, r1 + k, 0, Math.PI * 2);
                        ctx.closePath();
                        ctx.stroke();
    
                        ctx.beginPath();
                        if(!first) ctx.arc(halfW, halfH, r2 + k, 0, Math.PI * 2);
                        ctx.closePath();
                        ctx.stroke();
                    }
                    if(r1 > r) r1 = 0;
                    if(r2 > r)
                    {
                        r2 = 0;
                        if(first) first = false;
                    }
                    r1 += 3;
                    r2 += 3;
                }
            }
        }
    
        MyButton
        {
            text: "扫描"
            widthMargin: 12
            heightMargin: 8
            anchors.centerIn: parent
            onClicked:
            {
                canvas.clear();
                canvas.drawable = true;
                timer.restart();
                discoverCon.discover();
            }
        }
    }

onPaint 是实际绘图的地方，但开始只会调用一次，因此需要使用 Timer 进行定时请求绘制，这里 interva 设置为16ms，即60fps，并且 repeat 为 true (重复)。

Canvas 中绘图步骤如下：

1、使用 getContext() 获取一个2D绘图上下文。

2、使用绘图上下文提供的API进行绘图。

步骤很简单，不过比较有意思的是其中的水波的半透明阴影效果的实现。

一般情况下，我们每一帧都需要清空上一帧绘制的内容，然鹅在这里，我们不清空，而是选择用一个接近透明的颜色来覆盖在上一帧绘制的内容之上，这里我用的颜色为 \#10FFFFFF(ARGB)，这样，上一帧的内容就会成为半透明的效果，然后接着绘制本次帧(非透明)，这样在视觉上，就会形成类似于半透明阴影的效果。

--------------------

### **【结语】** ###

emmm，其实本篇并没有多少值得写的东西，不过这个效果我从别的地方看到的，觉得有点意思，因此才想着写一篇来分析一下。

真正要写的是扫描和文件传输部分，这些后面我都会写的。

最后，项目地址：[https://github.com/mengps/FileTransfer][https_github.com_mengps_FileTransfer]

[20190418113306698.gif]: /images/20220218/2e4de888e45c4adeb9984a35d82b104e.png
[https_github.com_mengps_FileTransfer]: https://github.com/mengps/FileTransfer