问题描述
我在形状层的顶部有一个透明的拖动层.可以很好地使交互变得独特,因此我可以切换拖动的功能(在滚动视图或编辑形状位置之间).但是,除非我关闭拖动模式(通过隐藏中间的透明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在图层之间传播事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!