Zugriff auf QML Canvas von Javascript in QT

Question

Ich versuche, sehr einfache Anwendung in QT QML mit QtQuick 2.7 zu erstellen. Ich habe auf der Leinwand ein Rechteck und nach Drücken der Taste Ich möchte eine andere Rechteck hinzuzufügen. Problem ist, dass die Rechteck, die nach Schaltfläche klicken sollte, wird nicht erstellt (ich kann es nicht auf Canvas Leinwand sehen), aber console.log() Ausgabe Button 1 cliceked ich sehe. Was mache ich falsch? Gibt es eine Notwendigkeit, die Leinwand oder etwas zu aktualisieren? Mein Code ist:

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 nur neu zeichnet, nachdem sie gefragt. Siehe documentation for the paint() signal:

Dieses Signal wird ausgegeben, wenn die Region gerendert werden muss. Wenn ein Kontext aktiv ist, kann er von der Kontexteigenschaft referenziert werden.

Dieses Signal kann durch markdirty(), requestPaint() oder durch Änderung des aktuellen Canvas-Fensters ausgelöst werden.

Also, nach Ihrer Zeichnung zu tun, rufen 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(); 
      } 
     } 
    } 
} 

Obwohl dies wie eine seltsame Art und Weise mir scheint, es zu tun; normalerweise reagieren Sie auf die Leinwand, die Ihnen sagt, dass es bereit ist, über das paint() Signal zu malen, nicht umgekehrt. Was dies in der Praxis bedeutet, ist, dass Ihre blauen Rechtecke vor (und somit darunter) demjenigen im onPaint Handler gemalt werden.