QML学习之折线绘制

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    Canvas {
        id: canvas
        anchors.fill: parent

        property int lineLength: 100
        property int lineWidth: 2
        property color lineColor: "blue"
        property var linePoints: []

        onPaint: {
            var ctx = getContext("2d");
            ctx.strokeStyle = lineColor;
            ctx.lineWidth = lineWidth;

            ctx.beginPath();
            for (var i = 0; i < linePoints.length; i++) {
                if (i === 0) {
                    ctx.moveTo(linePoints[i].x, linePoints[i].y);
                } else {
                    ctx.lineTo(linePoints[i].x, linePoints[i].y);
                }
            }
            ctx.stroke();
        }

        Timer {
            interval: 1000
            running: true
            repeat: true
            onTriggered: {
                var x = Math.random() * canvas.width;
                var y = Math.random() * canvas.height;
                canvas.linePoints.push({x: x, y: y});
                if (canvas.linePoints.length > 10) {
                    canvas.linePoints.shift();
                }
                canvas.requestPaint();
            }
        }
    }
}