вложенная / концентрическая группа и mouseenter / mouseleave

У меня возникли проблемы с добавлением прослушивателя событий в концентрическую группу кругов. Моя предполагаемая функциональность заключается в следующем: когда курсор мыши находится над группой, в центре группы должна появиться новая черная точка («яблочко» - кружок 3 в приведенном ниже коде). Когда указатель мыши не находится над группой, черная точка не должна появляться.

Следующий код приближается к этому:

<!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).

(*) Я пробовал разные решения, но, похоже, ничего не работает. Во-первых, я попытался захватить положение мыши (слой X и слой Y) и обнаружить столкновение с областью группы на холсте. То есть, если x и y находятся в его границах, я рисую яблочко. В противном случае я избавлюсь от этого. Однако проблема с этим решением состоит в том, что «яблочко» иногда становится сиротой в группе, даже если мышь покинула группу. Это связано с тем, что событие mouseout / mouseleave иногда имеет позицию layerX или layerY, которая все еще находится внутри круга.

(*) Использование mouseover и mouseout вместо mouseenter / mouseleave, похоже, ни на что не влияет.

(*) Я не могу добавить прослушиватель событий только к внешнему кругу, так как это заставляет «яблочко» исчезать, когда указатель мыши находится над внутренним кругом.


javascript canvas kineticjs
person user3057661    schedule 02.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете предотвратить мерцание, отключив прослушивание событий для вложенных кругов, например:

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);

Он устраняет проблему, которую вы описываете, но я не уверен, нужно ли вам отслеживать другие события в этих кругах ... Если это так, вам может потребоваться отменить распространение событий из внутренних кругов.

person Noah Heldman    schedule 02.12.2013