Question

所以我有很多动力学多边形，我收集它们并存储在这样的变量中：

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

也许它有点愚蠢，我可以做得更容易，但还有其他我需要考虑的事情，这里没有包括在内，我认为这应该是一个好方法。

所以我想要的是删除一组多边形，然后用不同颜色重绘它们，当鼠标悬停它们时，当它离开时，它应该变回原始状态。但使用破坏，重绘，然后再次收集它们似乎不起作用，不知道为什么。任何想法？

Answer 1

不要删除/重新创建多边形，只需在mouseover和mouseleave事件中使用myPoly.setFill：

为您的poly添加2个附加属性：hoverColor和blurColor，
关于鼠标悬停：this.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>

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

1 个答案: