HTML 5 - 在鼠標懸停上添加形狀

我使用KineticJS來創建形狀併爲它們設置動畫。HTML 5 - 在鼠標懸停上添加形狀

我有一個三角形：

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添加>這是不好的，因爲它的閃爍。

我試圖找到一些東西：「如果形狀還沒有添加到圖層，添加它」。但沒有。

任何幫助將是偉大的。謝謝:)

來源

2013-07-02 ezawadzki

如果你給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-02 16:19:02 projeqht

大廈下面sumitb.mdi的答案，它可能用mouseenter代替mouseover事件來替代我的解決方案會更好。我會留下你的選擇。 – projeqht

嗯，我覺得你需要一個像mouseenter和mouseleave回調函數只是繪製triangle1Over當mouseenter功能被觸發過triangle1和掙錢的時候，mouseleave事件在triangle1Over被解僱triangle1Over消失。也許這個鏈接mouseevents可能會有所幫助..

來源

2013-07-02 16:29:01

如何改變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-03 04:52:18 markE

感謝您的回答，但在我的代碼中，它閃爍着！當處理一個mouseover事件時，它會調用每個mousemove的函數。這是我真正的問題:( – ezawadzki

我不確定你要去的效果......但看到我編輯的答案的可能性。 – markE

HTML 5 - 在鼠標懸停上添加形狀

回答

相關問題