QML 캔버스 업데이트

Question

저는 QML/자바 스크립트 멍청한 놈입니다.

나는 흰색 QML 캔버스 요소에 (작은 검은 색 원으로 표시) 몇 가지 포인트를 삽입 한 다음

다음

내 QML (예 : 외부 기하학적 라이브러리를 통해 볼록 선체를 찾는으로) 그들에 알고리즘을 실행하려면 암호.

import QtQuick 2.5 
import QtQuick.Window 2.2 

Window{ 
    id: root 
    width: 640 
    height: 480 
    visible: true 

    Canvas { 

     width: 1000 
     height: 1000 

     onPaint: { 
      var context = getContext("2d"); 

     } 

     MouseArea { 
      id: mymouse 
      anchors.fill: parent 

      property var arrpoints : [] 
      onClicked: { 

       // Record mouse-position 
       arrpoints = arrpoints.concat([mouseX, mouseY]) 
       console.log(arrpoints) 

      } 
     } 

    } 
} 

지금까지 위의 코드는, 그것에 QML 캔버스로, 창을 열어, 나는 내 마우스로 하나의 버튼으로 클릭 (배열 arrpoints를 통해) 캔버스에 위치를 추적 할 수 있습니다, 클릭 한 포인트의 배열을 콘솔에 출력합니다.

하지만 이제는 arrpoints이 변경 될 때마다 'QML에 그 시점에서 작은 검은 색 원을 그려야한다고 어떻게 말할 수 있습니까?

QML의 onPaint 부분이 새 상태의 렌더링을 즉시 트리거한다고 생각했지만, 사용자가 캔버스에서 처음으로 작업하기 전에 해당 부분이 캔버스의 초기 그림에만있는 것으로 보입니다.

Answer 1

그림을 강제로 표시하려면 캔버스 requestPaint() 함수를 호출해야합니다. 위치 정보를 적절하게 저장하는 것이 좋습니다. {"x": x_value, "y": y_value}

import QtQuick 2.5 
import QtQuick.Window 2.2 

Window{ 
    id: root 
    width: 640 
    height: 480 
    visible: true 

    Canvas { 
     id: canvas 

     width: 1000 
     height: 1000 

     onPaint: { 
      var context = getContext("2d") 
      context.strokeStyle = Qt.rgba(0, 0, 0, 1) 
      context.lineWidth = 1 
      for(var i=0; i < mymouse.arrpoints.length; i++){ 
       var point = mymouse.arrpoints[i] 
       context.ellipse(point["x"]-5, point["y"]-5, 10, 10) 
      } 
      context.stroke() 
     } 

     MouseArea { 
      id: mymouse 
      anchors.fill: parent 
      property var arrpoints : [] 
      onClicked: { 
       arrpoints.push({"x": mouseX, "y": mouseY}) 
       canvas.requestPaint() 
      } 
     } 
    } 
}