Konva在图层之间传播事件 [英] Konva Propagate events between layers

问题描述

我在形状层的顶部有一个透明的拖动层.可以很好地使交互变得独特，因此我可以切换拖动的功能(在滚动视图或编辑形状位置之间).但是，除非我关闭拖动模式(通过隐藏中间的透明Rect)，否则其他鼠标悬停事件都不会触发其下方的形状层.我需要将非拖动鼠标事件传播到它下面的层.鼠标悬停事件有很多形状.

I have a transparent drag layer on top of a shape layer. Works great to make interaction distinct so I can toggle what dragging does (between scrolling the view or editing the shape positions). However, unless I turn off drag mode (by hiding the intervening transparent Rect), none of the other mouseover events fire on the shape layer beneath it. I need to propogate the non-drag mouse events to the layer below it. There are A LOT of shapes with mouse over events.

是否有一种简便的方法将鼠标悬停在事件下方的层上，还是需要编写一个自定义处理程序来触发每种形状的事件?

Is there an easy way to propogate the mouse over events to the layer beneath it or do I need to write a custom handler to fire events for every shape?

推荐答案

我设法解决了这一问题，而不必在层之间传播事件.仅当未单击形状时，才在形状图层上的形状后面放置可拖动的表面.然后，在形状dragstart事件上，如果设置了layerdraggable标志，则要覆盖是否单击了形状，我将在形状上执行stopDrag()，在层上执行startDrag().这使我可以使用简单的标志切换，是要拖动整个图层还是仅拖动形状.

I managed to solve this without having to propagate events between layers. I put a draggable surface behind the shapes on the shape layer only if a shape isn't clicked. Then to cover if a shape is clicked, on the shape dragstart event, if a layerdraggable flag is set, I do a stopDrag() on the shape and a startDrag() on the layer. This allowed me to toggle with a simple flag whether I want the whole layer dragging, or just the shape.

我必须在dragend事件中清理一下形状的位置，但是您也可以在形状的拖拽中做到这一点.

I had to clean up a little of the shape position on the dragend event, but alternatively you can do that with a dragbounds on the shape.

shape.on('dragstart', function () {
    if (layerDraggable) {
        shape.stopDrag();
        shapeLayer.startDrag();
    }
}

这篇关于Konva在图层之间传播事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！