html - キャンバス API の再描画関数

Question

キャンバスAPI（html5で使用されているものと同じ）を使用してqmlでタイマーを作成しようとしています.1秒ごとに画面を再描画する必要があります.新しく供給されたパラメータで画面を更新できる関数はありますか? たとえば、描画するクロック アークの角度を指定する arc 関数を使用しています。

ctx.arc(150, 150, 95, 0,1.57,false);

この場合、角度は約 1 秒ごとに変化します。

Answer 1

QML では使用できませんsetTimeout()。ブラウザー用の JS でのみ使用できます。Qml では、宣言型と考える必要があります。

QtQuick 2.0 をインポート

Canvas {
    id: canvas;
    width: 360;
    height: 360;
    contextType: "2d";
    renderStrategy: Canvas.Threaded;
    renderTarget: Canvas.Image;
    antialiasing: true;
    smooth: true;

    onPaint: {
        if (context) {
            context.clearRect (0, 0, width, height);
            context.beginPath ();
            context.moveTo (width / 2, height / 2);
            context.arc (width / 2,
                         height / 2,
                         50,
                         0,
                         angle * Math.PI / 180,
                         false);
            context.closePath ();
            context.fillStyle = "red";
            context.fill ();
        }
    }

    property real angle : 0;

    Timer {
        interval: 1000;
        repeat: true;
        running: true;
        onTriggered: {
            // update your angle property as you want
            canvas.angle = (canvas.angle < 360 ? canvas.angle +6 : 0);
            // repaint
            canvas.requestPaint ();
        }
    }

}

可能な限り最高のレンダリングができるように、キャンバスに最適な設定を自由に設定しました!

Answer 2

setTimeOut を使用できますか?

setTimeout(update, 1000);

function update() {
    ctx.clearRect(0, 0, width, height);
    ctx.arc(150, 150, 95, 0,1.57,false);
}

変数を渡す必要がある場合は、この投稿で説明されている無名関数を使用する必要があります: How can I pass a parameter to a setTimeout() callback? または、以下のコード サンプルを参照してください。

setTimeout(function() {
    update(topicId);
}, 1000)