Question

我使用KineticJS来创建形状并为它们制作动画。

我有一个三角形：

var triangle1Over = new Kinetic.Polygon({
    points: [120, 10, 225, 140, 15, 140, 120, 10],
    stroke: 'red',
    strokeWidth: 2
});

我想在mouseover事件中显示一次。

triangle1.on('mouseover', function () {
    layer.add(triangle1Over);
    layer.draw();
});

问题：每个光标在triangle1中移动，形状triangle1Over添加＆gt;这很糟糕，因为它会眨眼。

我尝试找到一些东西：＆＃34;如果形状尚未添加到图层中，请添加它＆＃34;。但没什么。

任何帮助都会很棒。谢谢:)）

Answer 1

如何在mouseenter和mouseleave上更改三角形的颜色？

这将消除当你的2个三角形重叠时导致的任何“闪烁”：

triangle1.on('mouseenter', function () {
console.log("over");
    triangle1.setStroke("orange");
    triangle1.setFill("green");
    layer.draw();
});


triangle1.on('mouseleave', function() {
    triangle1.setStroke("red");
    triangle1.setFill("white");
    layer.draw();
});

这是代码和小提琴：http://jsfiddle.net/m1erickson/35hKX/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var triangle1 = new Kinetic.Polygon({
        points: [120, 10, 225, 140, 15, 140, 120, 10],
        stroke: 'red',
        strokeWidth: 2,
        fill:"white"

    });
    layer.add(triangle1);
    layer.draw();


    triangle1.on('mouseenter', function () {
    console.log("over");
        triangle1.setStroke("orange");
        triangle1.setFill("green");
        layer.draw();
    });


    triangle1.on('mouseleave', function() {
        triangle1.setStroke("red");
        triangle1.setFill("white");
        layer.draw();
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

Answer 2

如果您给triangle1Over这样的ID：

var triangle1Over = new Kinetic.Polygon({
  points: [120, 10, 225, 140, 15, 140, 120, 10],
  stroke: 'red',
  strokeWidth: 2,
  id: triangle1OverID
});

您可以检查图层中是否存在这样的内容：

triangle1.on('mouseover', function () {
  if(typeof stage.get('#triangle1OverID')[0] == 'undefined') {
    layer.add(triangle1Over);
    layer.draw();
  }
});

或者您可以使用名称：

var triangle1Over = new Kinetic.Polygon({
  points: [120, 10, 225, 140, 15, 140, 120, 10],
  stroke: 'red',
  strokeWidth: 2,
  name: triangle1OverName
});

您可以检查图层中是否存在这样的内容：

triangle1.on('mouseover', function () {
  var shapes = stage.get('.triangle1OverName');
  if(shapes.length) {
    layer.add(triangle1Over);
    layer.draw();
  }
});

Answer 3

我觉得你需要像mouseenter和mouseleave这样的回调函数，只需在triangle1上触发mouseenter函数时绘制triangle1Over，并在{{1}时使triangle1Over消失触发triangle1Over上的事件。也许mouseevents的这个链接可能有帮助..

HTML 5 - 在鼠标悬停时添加Shape

3 个答案: