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 "redrawing" 函数，但那是我被卡住的部分。有任何想法吗？提前致谢！

Answer 1

同时我自己找到了答案。解决方案是向整个组添加一个 @dragmove 事件侦听器，并使用 getStage() 然后 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")
      }
    ...
}

这样，矩形会在拖动时更改其填充颜色。

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

Konva - conditionally change rectangle color while dragging

html

javascript

canvas

drag