HTML 5 - 在鼠标悬停时添加形状答案

【问题标题】：HTML 5 - add Shape on mouseoverHTML 5 - 在鼠标悬停时添加形状
【发布时间】：2013-07-12 21:41:18
【问题描述】：

我使用 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();
});

问题：在每次光标移动到 triangle1 时，都会添加形状 triangle1Over > 这很糟糕，因为它在闪烁。

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

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

【问题讨论】：

标签： html mouseover kineticjs shape

【解决方案1】：

在 mouseenter 和 mouseleave 上改变三角形的颜色怎么样？

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

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>

【讨论】：

感谢您的回答，但在我的代码中，它正在闪烁！当处理鼠标悬停事件时，它将在每次鼠标移动时调用该函数。这是我真正的问题:(
我不太确定你想要的效果……但请参阅我编辑的答案以了解可能性。

【解决方案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();
  }
});

【讨论】：

基于 sumitb.mdi 下面的回答，用 mouseenter 代替 mouseover 事件可能会更好。我会留给你选择。

【解决方案3】：

我认为您需要像mouseenter 和mouseleave 这样的回调函数，只需在三角形1 上触发mouseenter 函数时绘制三角形1Over，并在触发三角形1Over 上的mouseleave 事件时使三角形1Over 消失。也许mouseevents 的这个链接可能会有所帮助..

【讨论】：