如何使用KineticJS創建按鈕周圍的發光效果（圖片）以創建點擊感覺？

我用KineticJS創建了幾個帶圖片的按鈕。現在，我想使用KineticJS在按鈕（Image）周圍產生髮光效果，以創建點擊感覺。請幫助我開發這個。如何使用KineticJS創建按鈕周圍的發光效果（圖片）以創建點擊感覺？

2014-02-10 Balu Varanasi

請給我你的按鈕代碼。。 –

您可以將陰影添加到您的按鈕來創建你的輝光效果：

演示：http://jsfiddle.net/m1erickson/NxTW7/

enter image description here

示例代碼：

<!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.7.2.min.js"></script> 

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

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

    var button=new Kinetic.Rect({ 
     x:30,y:30,width:50,height:35,fill:"green",stroke:"black",strokeWidth:3, 
    }); 
    button.on("mousedown",function(){ 
     this.setShadowColor("green"); 
     this.setShadowBlur(20); 
     layer.draw(); 
    }); 
    button.on("mouseup mouseleave",function(){ 
     this.setShadowColor("transparent"); 
     this.setShadowBlur(0); 
     layer.draw(); 
    }); 
    layer.add(button); 
    layer.draw(); 

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

</script>  
</head> 

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

來源

2014-02-10 21:04:02 markE

如何使用KineticJS創建按鈕周圍的發光效果（圖片）以創建點擊感覺？

回答

相關問題