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()然后使用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-拖动时有条件地更改矩形颜色

1 个答案: