QMLキャンバスからオブジェクトを完全に削除するにはどうすればよいですか？

Question

以下のQMLコードを考えてみましょう。空のQMLキャンバスにポイントを挿入し、マウスをクリックして、左上隅に配置されたボタンを使用して、キャンバス上のすべての入力ポイントと対応するピクチャを消去します

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.4 
Window{ 
    id: root 
    width: 640 
    height: 480 
    visible: true 

    Canvas { 
     id: mycanvas 
     width: 1000 
     height: 1000 

     property var arrpoints : [] 

     onPaint: { 
      var context = getContext("2d"); 
      // Delete everything drawn before? 
      context.clearRect(0, 0, mycanvas.width, mycanvas.height); 

      // Render all the points as small black-circles 
      context.strokeStyle = Qt.rgba(0, 1, 1, 0) 

      // Draw all the points 
      for(var i=0; i < arrpoints.length; i++){ 
       var point = arrpoints[i] 
       context.ellipse(point["x"], point["y"], 10, 10) 
       context.fill() 
       context.stroke() 

      } 
     } 

     // For mousing in points. 
     MouseArea { 
      id: mymouse 
      anchors.fill: parent 

      onClicked: { 
       // Record mouse-position into all the input objects 
       mycanvas.arrpoints.push({"x": mouseX, "y": mouseY}) 

       mycanvas.requestPaint() 
       console.log(mycanvas.arrpoints) 
      } // onClicked 
     }// MouseArea 
    } // Canvas 

    Button { 
     text: "clear input" 
     onClicked: { 
      mycanvas.arrpoints.length = 0 
      mycanvas.requestPaint() 
      console.log(mycanvas.arrpoints) 
     } 
    } 
}//Window 

このコードは非常に奇妙な動作をします。キャンバスにいくつかの点を入力し、「入力クリア」ボタンをクリックするとします。予想どおり、キャンバス とarrpointsの配列からすべての画像（つまり点に対応する小さな円）が消えて空に設定されます。

しかし、私は再びキャンバスをクリックし起動したときに、クリア画像は、新たなポイントが入力されると並んで、再描画です！なぜこれがすべきですか？コンソールに印刷した後も、arrpoints=[]が表示されるので、問題はonPaintセクションのキャンバスをクリアすることになるはずです。

QMLにキャンバスメモリを完全に消去するように指示するにはどうすればよいですか？

Answer 1

キャンバスをクリーニングする場合は、コンテキストをリセットする必要があります。この場合、キャンバスを更新してキャンバスを強制的に更新する関数を実装します。

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.4 
Window{ 
    id: root 
    width: 640 
    height: 480 
    visible: true 

    Canvas { 
     id: mycanvas 
     width: 1000 
     height: 1000 

     property var arrpoints : [] 

     onPaint: { 
      var context = getContext("2d"); 
      // Delete everything drawn before? 
      context.clearRect(0, 0, mycanvas.width, mycanvas.height); 

      // Render all the points as small black-circles 
      context.strokeStyle = Qt.rgba(0, 1, 1, 0) 

      // Draw all the points 
      for(var i=0; i < arrpoints.length; i++){ 
       var point = arrpoints[i] 
       context.ellipse(point["x"], point["y"], 10, 10) 
       context.fill() 
       context.stroke() 

      } 
     } 

     function clear() { 
      var ctx = getContext("2d"); 
      ctx.reset(); 
      mycanvas.requestPaint(); 
     } 

     // For mousing in points. 
     MouseArea { 
      id: mymouse 
      anchors.fill: parent 
      onClicked: { 
       // Record mouse-position into all the input objects 
       mycanvas.arrpoints.push({"x": mouseX, "y": mouseY}) 
       mycanvas.requestPaint() 
       console.log(mycanvas.arrpoints) 
      } // onClicked 
     }// MouseArea 
    } // Canvas 

    Button { 
     text: "clear input" 
     onClicked: { 
      mycanvas.arrpoints.length = 0 
      mycanvas.clear() 
      console.log(mycanvas.arrpoints) 
     } 
    } 
}//Window