如何在动力学js中改变一组节点的颜色？

Question

SO I have a lot of Kinetic polygons, and I collect them and store in a variable like this: 所以我有很多动力学多边形，我收集它们并存储在这样的变量中：

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

I want to change their colors, so I want to delete them and draw them with different colour: 我想改变它们的颜色，所以我想删除它们并用不同的颜色绘制它们：

          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');
          });

where: 哪里：

    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);
        },           ....
    }

and 和

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

and 和

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

maybe it is kind of stupid and I could do it much easier, but there are other things I have to think about, which are not included here and I thought this should be a good way. 也许它有点愚蠢，我可以做得更容易，但还有其他我需要考虑的事情，这里没有包括，我认为这应该是一个好方法。

so what I want is to delete a set of polygons then redraw them with different colour, when the mouse hovers them and when it leaves, it should change back to original. 所以我想要的是删除一组多边形，然后用不同颜色重绘它们，当鼠标悬停它们时，当它离开时，它应该变回原始。 but using destroy, redraw, and then collecting them again does not seem to work, dont know why. 但使用破坏，重绘，然后再次收集它们似乎不起作用，不知道为什么。 any ideas? 有任何想法吗？

Answer 1

Instead of removing/recreating the poly, just use myPoly.setFill inside the mouseover and mouseleave events: 而不是删除/重新创建多边形，只需在mouseover和mouseleave事件中使用myPoly.setFill：

Add 2 additional properties to your poly: hoverColor and blurColor, 为你的poly添加2个额外的属性：hoverColor和blurColor，
On mouseover: this.setFill(this.hoverColor); 在鼠标悬停时：this.setFill（this.hoverColor）;
On mouseleave: this.setFill(this.blurColor); 在mouseleave上：this.setFill（this.blurColor）;

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/GTe9j/ 这是代码和小提琴： 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>

如何在动力学js中改变一组节点的颜色？

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-12-17 19:44:20

如何在动力学js中改变一组节点的颜色？

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-12-17 19:44:20

解决方案1
2 已采纳 2013-12-17 19:44:20