javascript - 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 函数。如果我们重叠，它基本上将 bool 值设置为“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() 获取我们想要修改的元素(在我的例子中是组内的矩形) code> 然后 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")
      }
    ...
}

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