Konva - 在拖动时有条件地改变矩形颜色

Question

我正在使用Vue.js的Konva包装器开发类似于甘特图的东西。我基本上有一个包含矩形的组（以及在这种情况下无关的一些其他元素）。该组是可拖动的，如果该组在拖动时与另一个组重叠，我想更改矩形的填充颜色。我已经实现了用于放置标志的逻辑，该标志表示拖动的组是否重叠，但是我在更改填充颜色时失败了。机制看起来像这样：

  //--- config object for the group: ---
   groupTemplate: { 
          name: "test",
          x: 100,
          y: 100,
          width: 100, 
          height: 20,
          draggable: true,
          dragBoundFunc: function (pos) {
            return {
              x: getXPos(pos.x),
              y: this.getAbsolutePosition().y       //prevents vertical dragging
            }
          }
        }

关键部分是getXPos功能。如果我们重叠，它基本上将布尔值设置为“true”：

 function getXPos(posx) {
    ...    
    / *** check if we are overlapping, then: *** /
    ...
    if (overlapping)
      myDraggedGroup.rect.fill = "#4b9161"
    else 
      myDraggedGroup.rect.fill = "#f49542"

  }

但是，这不起作用。矩形的颜色仅在拖动组后才会更改，而不是在我们仍然拖动它的时候。我假设我必须手动调用一些Konva“重绘”功能，但那是我被卡住的部分。有任何想法吗？提前致谢！

Answer 1

我在此期间找到了答案。解决方案是向整个组添加一个@dragmove事件监听器，并使用getStage()and然后fill()来改变颜色，获得我们希望修改的元素（在我的情况下，它是组内的矩形）。

模板：

 <v-group ... @dragmove="onDragmoveGroup($event)" ...>
        <!-- the actual rectangle -->
        <v-rect :config="plan.rect"></v-rect>
         ....
 </v-group>

脚本：

methods: {
      ...
     onDragmoveGroup(self) {
        let rect = self.$children[0].getStage()  // get rectangle
        if (overlapping)
            rect.fill("#FFF")
        else
            rect.fill("#000")
      }
    ...
}

这样，矩形会在拖动时改变它的填充颜色。