QML 캔버스에서 개체를 영구히 삭제하려면 어떻게합니까?

Question

아래 QQ 코드를 고려해보십시오. 빈 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