QML绘制正弦波时添加逐点绘制延迟的问题求助

问题出在onPaint是同步执行的——你原来的循环会一次性跑完所有点，哪怕加了delay，Timer的异步回调也不会让循环暂停，所以根本看不到逐点延迟的效果。得把绘制逻辑拆开来，用Timer一步步驱动，每次Timer触发就画一个点，直到整个波形画完。

修改后的代码如下：

import QtQuick 2.9
import QtQuick.Window 2.15

Window {
    id: screen
    visible: true
    height: 1080
    width: 1920
    title: qsTr("SineWave")

    Rectangle {
        height: parent.height
        width: parent.width

        Timer {
            id: drawTimer
            interval: 1  // 这里调延迟时间，比如10就是每10ms画一个点
            repeat: true
            onTriggered: {
                canvas.drawNextPoint();
            }
        }

        Canvas {
            id: canvas
            anchors.fill: parent
            property int currentX: 0  // 记录当前画到哪个x坐标了
            property var ctx: null     // 保存绘图上下文，不用每次重绘都取

            // 初始化绘图，启动Timer
            function initDrawing() {
                ctx = getContext("2d");
                var cw = parent.width;
                var ch = parent.height;
                ctx.lineWidth = 4;
                ctx.clearRect(0, 0, cw, ch);
                ctx.beginPath();
                ctx.moveTo(0, ch/2);  // 起始点在左侧中间
                currentX = 0;
                drawTimer.start();
            }

            // 每次Timer触发画一个点
            function drawNextPoint() {
                if (currentX > 1920) {
                    drawTimer.stop();  // 画完了就停Timer
                    ctx.stroke();      // 最后统一描边收尾
                    return;
                }
                var cy = parent.height/2;
                var y = Math.sin(currentX/305);
                ctx.lineTo(currentX, cy + (y*400));
                requestPaint();  // 告诉Canvas该重绘了，显示刚画的点
                currentX++;
            }

            // 每次重绘的时候把已经画的路径描出来
            onPaint: {
                if (ctx) {
                    ctx.stroke();
                }
            }

            // 组件加载完就开始绘图
            Component.onCompleted: {
                initDrawing();
            }
        }
    }
}

主要改了这些地方：

• 加了drawTimer专门驱动逐点绘制，每次触发就调用drawNextPoint
• Canvas里加了currentX变量，记录当前画到哪了，代替原来的一次性循环
• initDrawing负责初始化画布、起始点，然后启动Timer
• drawNextPoint每次计算一个点的位置，加到路径里，请求重绘，直到所有点画完
• onPaint负责描边已有的路径，确保每次更新都能看到已画的部分

你可以调整drawTimer.interval的值来控制绘制速度，数值越大，画得越慢。

内容的提问来源于stack exchange，提问作者sai vineeth