Question

我在向同心圆圈组添加事件监听器时遇到了一些麻烦。我的预期功能是这样的：当鼠标在组上方时，一个新的黑点（“Bullseye” - 下面代码中的circle3）应该出现在组的中心。当鼠标不在组上方时，不应出现黑点。

以下代码接近完成此任务：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer">

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var layer = new Kinetic.Layer({});
var group = new Kinetic.Group({
    x: 0, // 
    y: 0 //

}); 


var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 50,
    fill: 'white',
    stroke: 'black',
    strokeWidth: 4
});


var circle3 = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 20,
    fill: 'black',
    stroke: 'black',
    strokeWidth: 4,
    visible: false
});



group.add(circle); 

group.add(circle2); 

group.add(circle3); 

group.on("mouseenter", function(event){ 
    circle3.setVisible(true);
    stage.draw();
}); 


group.on("mouseleave", function(event){ 
    circle3.setVisible(false); 
    stage.draw(); 
}); 


// add the shape to the layer
layer.add(group);

// add the layer to the stage
stage.add(layer);


    </script>
  </body>
</html>

然而，问题是“大眼鲷”在离开外圈（圆圈）并进入内圈（圆圈2）时闪烁。

（*）我尝试了各种解决方案 - 但似乎没有任何效果。首先，我尝试捕获鼠标位置（layerX和layerY）并检测与画布上的组区域的碰撞。也就是说，如果x和y在它的边界内，我画出靶心。否则，我摆脱它。然而，这种解决方案的问题在于，即使鼠标已离开该组，该靶心有时也会成为孤儿。这是因为mouseout / mouseleave事件有时会有一个仍然在圆圈内的layerX或layerY位置。

（*）使用mouseover和mouseout而不是mouseenter / mouseleave似乎不会影响任何事情。

（*）我不能单独将eventlistener添加到外圈，因为当鼠标在内圈上时，会使靶心消失。

Answer 1

您可以通过关闭嵌套圈子的事件监听来阻止闪烁，如下所示：

group.add(circle); 
group.add(circle2); 
group.add(circle3); 

// Don't listen for any events (e.g. mouseenter/leave) on the inner circles
circle2.setListening(false);
circle3.setListening(false);

它修复了您描述的问题，但我不确定您是否需要在这些圈子上侦听其他事件......如果是这样，您可能需要取消内圈的事件传播。

嵌套/同心组和mouseenter / mouseleave

1 个答案: