0

我使用 KineticJS 来创建形状并为其设置动画。

我有一个三角形：

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

我想让它在鼠标悬停事件中出现一次。

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

问题：在三角形 1 中的每个光标移动时，都会添加形状 triangle1Over > 这很糟糕，因为它在闪烁。

我试图找到一些东西：“如果形状尚未添加到图层中，请添加它”。但什么都没有。

任何帮助都会很棒。谢谢 ：）

4

3 回答 3

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>
于 2013-07-03T04:52:18.983 回答
0

好吧，我认为您需要回调函数，例如mouseenter，mouseleave当函数在 triangle1 上触发时绘制 triangle1Over，并在mouseenter触发 triangle1Over 上的事件时使 triangle1Over 消失mouseleave。也许鼠标事件的这个链接可能会有所帮助..

于 2013-07-02T16:29:01.910 回答
0

如果您提供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();
  }
});
于 2013-07-02T16:19:02.000 回答