Qml 意外行为

Question

在以下代码中，可以从 listmodel 中删除一个点，并在下一行中显示 ReferenceError : pthModel 未定义。你能帮我一下吗？

import QtQuick
import QtQuick.Shapes 2.15
import "utils.js" as JS

Rectangle {
   id: mRct
   implicitHeight: 600
   implicitWidth: 800
   color: "transparent"

   property bool moving: false
   ListModel {
      id: pthModel

      onDataChanged: {
         console.log("dataChanged")
         cnvManual.requestPaint()
      }
   }

   MouseArea {
      anchors.fill: parent
      id: mouse
      onClicked: {
         if (moving)
            return
         pthModel.append({
                            "x": mouseX,
                            "y": mouseY
                         })
         cnvManual.requestPaint()
      }
   }

   Repeater {
      model: pthModel
      z: 21
      delegate: Rectangle {
         required property var modelData
         id: rctParent
         color: "white"
         width: 12
         height: 12
         radius: 6
         x: modelData.x - 6
         y: modelData.y - 6

         DragHandler {
            acceptedModifiers: Qt.ControlModifier
            target: parent

            onActiveChanged: {
               if (!active) {
                  modelData.x = rctParent.x + 6
                  modelData.y = rctParent.y + 6
                  cnvManual.requestPaint()
               }
            }
         }

         MouseArea {
            anchors.fill: parent
            id: ms
            acceptedButtons: Qt.AllButtons
            signal removed

            onRemoved: {
               console.log("removed")
               cnvManual.requestPaint()
            }
            onClicked: mouse => {
                          if (mouse.button === Qt.RightButton) {
                             //cnvManual.requestPaint() //Works
                             pthModel.remove(modelData.index, 1)
                           //cnvManual.requestPaint() //cnvManual is not defined error
                           //whatever happens it happens after this line
                             ms.removed() //msRemoved is not triggered
                          }
                       }
         }
      }
   }

   Canvas {
      id: cnvManual
      anchors.fill: parent

      onPaint: {
         if (pthModel.count === 0) {
            return
         }
         console.log(pthModel.count)
         var ctx = getContext("2d")
         ctx.clearRect(0, 0, width, height)

         ctx.strokeStyle = "blue"
         ctx.lineWidth = 2

         ctx.beginPath()
         var points = pthModel
         var firstPoint = points.get(0)
         ctx.moveTo(firstPoint.x, firstPoint.y)
         for (var i = 1; i < points.count; i++) {
            var pnt = pthModel.get(i)
            ctx.lineTo(pnt.x, pnt.y)
         }
         if (points.count > 2) {
            ctx.lineTo(firstPoint.x, firstPoint.y)
         }
         ctx.stroke()
      }
   }
}

我尝试触发 pthModel.datachanged 事件，但得到相同的引用未定义错误。 无论我尝试什么，我都无法使其工作。

顺便说一下，我愿意接受新的想法来添加删除点，在它们之间画线以及移动点。

提前致谢。

Answer 1

我找到了解决办法。我将 onItemRemoved 添加到中继器，然后调用 Canvas.requestPaint()。

 Repeater {
  id: pthRpt
  model: pthModel
  z: 21
  onItemRemoved: cnvManual.requestPaint()
  delegate: Rectangle {
     required property var modelData
     id: rctParent
     color: "white"
     width: 12
     height: 12
     radius: 6