如何更改kinetic js中一組節點的顏色？

所以我有很多動力學多邊形，和我收集它們並存儲在一個變量是這樣的：如何更改kinetic js中一組節點的顏色？

var midr = layer.find('.midr');

我想改變自己的顏色，所以我想將其刪除，並用不同的顏色繪製它們：

  midr.on('mouseover',function(){ 
       midr.destroy(); 
       Boxes.MidR(color.R,color.G,color.B,1,'midr'); 
       midr = layer.find('.midr'); 
      }); 
      midr.on('mouseout',function(){ 
       midr.destroy(); 
       Boxes.MidR(color.R,color.G,color.B,0,'midr'); 
       midr = layer.find('.midr'); 
      });

其中：

var Boxes={ 
        ..... 
      MidR:function(R,G,B,A,group){ 
      var C = shade(R,G,B,25,"+"); 
      Mid_right.left(C.r,C.g,C.b,A,group); 
      var C = shade(R,G,B,20,"-"); 
      Mid_right.back(C.r,C.g,C.b,A,group);    
      Mid_right.right(R,G,B,A,group); 
      Mid_right.bottom(R,G,B,A,group); 
      Mid_right.shelf(R,G,B,A,group); 
     },   .... 
    }

和

var Mid_right={ 
     left:function(R,G,B,A,group){ 
      frame([89,192,120,192,120,309,89,315],150,150,150,A,group); 
      frame([75,311,89,315,89,192,75,192],R,G,B,A,group) 
     }, 
     right:function(R,G,B,A,group){ 
      frame([99,193.5,99,306,118.5,309,118.5,193.5],R,G,B,A,group) 
     }, 
     back:function(R,G,B,A,group){ 
      frame([90.5,308,99,306,99,193.5,90.5,193.5],R,G,B,A,group); 
     }, 
     shelf:function(R,G,B,A,group){ 
      frame([90.5,270,118.5,266,99,264,90.5,265],R,G,B,A,group) 
     }, 
     bottom:function(R,G,B,A,group){ 
      frame([120,309,99,306,90.5,308,90.5,315],R,G,B,A,group) 
     } 
    };

和

function frame(array,R,G,B,A,group){ 
    poly = new Kinetic.Polygon({ 
     points: array, 
     stroke: 'white', 
     strokeWidth: 1, 
     name: group 
    }); 
    if(R!=null||G!=null||B!=null){ 
     poly.setFill('rgba('+R+','+G+','+B+','+A+')'); 
    } else { 
     poly.setFill('rgba(0,0,0,0)'); 
    }; 
    layer.add(poly); 
};

也許這是一種愚蠢的，我可以做到這一點很容易，但也有其他的事情我得想想，這是不包括在這裏，我想這應該是一個很好的辦法。

所以我想要的是刪除一組多邊形，然後用不同的顏色重新繪製它們，當鼠標懸停在它們上面並且它離開時，它應該變回原來的形狀。但使用摧毀，重繪，然後再次收集它們似乎不起作用，不知道爲什麼。有任何想法嗎？

來源

2013-12-17 godzsa

而不是刪除/重新創建聚，只是使用myPoly.setFill鼠標懸停內部和鼠標離開事件：

添加2個附加屬性，你的聚：hoverColor和blurColor，
在鼠標懸停：這一點。 setFill（this.hoverColor）;
在mouseleave上：this.setFill（this.blurColor）;

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/GTe9j/

<!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); 

    newPoly("red","green",[50,50, 100,50, 50,100]); 
    newPoly("blue","green",[100,50, 150,50, 150,100]); 
    newPoly("orange","green",[150,100, 150,150, 100,150]); 
    newPoly("purple","green",[100,150, 50,150, 50,100]); 


    function newPoly(hovercolor,blurcolor,array){ 

     var poly = new Kinetic.Polygon({ 
      points: array, 
      stroke: 'gray', 
      strokeWidth: 1, 
      fill:blurcolor 
     }); 
     poly.hoverColor=hovercolor; 
     poly.blurColor=blurcolor; 
     poly.on("mouseover",function(){ 
      this.setFill(this.hoverColor); 
      this.draw(); 
     }); 
     poly.on("mouseleave",function(){ 
      this.setFill(this.blurColor); 
      this.draw(); 
     }); 
     layer.add(poly); 
     layer.draw(); 

    } 


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

</script>  
</head> 

<body> 
    <h4>Hover over a triangle to change its hover-color</h4> 
    <div id="container"></div> 
</body> 
</html>

來源

2013-12-17 19:44:20 markE

那是偉大的，但我必須要改變更多的多邊形的顏色被輸入時一個，我不得不改變所有的顏色深淺不同的多邊形，它們在對象中被硬編碼。當我刪除並重繪多邊形時，我可以用正確的陰影設置它們的顏色。 – godzsa

因此，在poly的組上懸停將所有的聚合物都改變爲懸停填充？試試這個變體：http://jsfiddle.net/m1erickson/HpWTL/無論如何，這個想法是使用setFill而不是remove/recreate。 – markE

如何更改kinetic js中一組節點的顏色？

回答

相關問題