QTのjavascriptからQMLキャンバスにアクセス

Question

QT QMLで非常に単純なアプリケーションを作成しようとしています。QtQuick 2.7を使用しています。私はキャンバス長方形に加え、ボタンを押した後、私は別の長方形を追加します。問題はボタンクリックが作成されていませんした後に表示されます長方形は（私はキャンバス上でそれを見ることができない）、しかしにconsole.log（）が出力Button 1 cliceked私が見ていること、です。私が間違っていることは何ですか？キャンバスなどをリフレッシュする必要はありますか？私のコードは：

Page1Form { 
    property alias canvas: canvas 
    button1.onClicked: { 
     console.log("Button 1 clicked."); 
     var ct = canvas.getContext("2d"); 
     ct.fillStyle = Qt.rgba(0, 0, 1, 1); 
     ct.fillRect(50, 50, 10, 10);//this doesnt work 
    } 
    Canvas { 
     id: canvas 
     x: 16 
     y: 39 
     width: 342 
     height: 517 
     onPaint: { 
       var ctx = getContext("2d"); 
       ctx.fillStyle = Qt.rgba(1, 1, 1, 1); 
       ctx.fillRect(10, 10, 10, 10); 
     } 
    } 
} 

Answer 1

Canvasです。 documentation for the paint() signal：

この信号は、領域をレンダリングする必要があるときに放出されます。コンテキストがアクティブな場合は、コンテキストプロパティから参照できます。

このシグナルは、markdirty（）、requestPaint（）、または現在のキャンバスウィンドウを変更することによってトリガされます。

だから、あなたの描画を行った後、requestPaint()を呼び出す：

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Controls 2.0 

Window { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 

    Column { 
     anchors.fill: parent 
     Canvas { 
      id: canvas 
      width: parent.width 
      height: 300 
      onPaint: { 
       var ctx = getContext("2d"); 
       ctx.fillStyle = Qt.rgba(1, 0, 1, 1); 
       ctx.fillRect(10, 10, 10, 10); 
      } 
     } 
     Button { 
      text: "Add" 
      onClicked: { 
       console.log("Button 1 clicked."); 
       var ct = canvas.getContext("2d"); 
       ct.fillStyle = Qt.rgba(0, 0, 1, 1); 
       ct.fillRect(50, 50, 10, 10);//this doesnt work 
       canvas.requestPaint(); 
      } 
     } 
    } 
} 

を、これはそれをやっての奇妙な方法のように私には思われる、けれども。通常はキャンバスに反応して、paint()シグナルを使ってペイントする準備ができていることを伝えます。これが実際に意味することは、あなたの青色の四角形がの前にの前に描かれている（それゆえにその下に）onPaintハンドラのものであるということです。