在Kinetic.js中描绘多个形状

我试图将几个对象（RegularPolygons）组合在一起，并抚摸它们（最终组不是个体）。类似的问题可能是：你有个别国家的形状，你想中风欧洲。在Kinetic.js中描绘多个形状

我试图用Group来达到这个目的，但是我不能中风Group。我也不能中风Layer。我想得到我的形状的点来创造一个新的大形状，但我不能得分。我在Google上搜索，发现也许Util.extend可能会帮助我，但我还没有发现在文档中，我不完全明白它是如何工作的。那么该怎么做？

来源

2014-02-19 user1440445

由于规则的多边形都有一个中心点，因此可以通过创建缩放比原始尺寸略大的每个多边形的背景克隆来应用人造笔划。

下面是如何自动套用一个虚假的行程，以群组的所有正多边形：

function shadow(group){ 
    var scale=1.1; 
    var clones=[]; 
    var children=group.getChildren(); 
    children.each(function(child){ 
     var clone=child.clone(); 
     clone.setScale({x:scale,y:scale}); 
     clone.setFill("black"); 
     clones.push(clone); 
    }); 
    for(var i=0;i<clones.length;i++){ 
     group.add(clones[i]); 
     clones[i].moveToBottom(); 
    } 
    layer.draw(); 
}

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

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-v5.0.1.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 group=new Kinetic.Group({ 
     x:50, 
     y:100, 
     draggable:true, 
    }); 
    layer.add(group); 


    var radius1=35; 
    // 
    var regPoly1 = new Kinetic.RegularPolygon({ 
     x:radius1, 
     y:radius1, 
     sides: 6, 
     radius: radius1, 
     fill: 'red', 
    }); 
    group.add(regPoly1); 

    radius2=30; 
    // 
    var regPoly2 = new Kinetic.RegularPolygon({ 
     x:radius1+radius2/2+20, 
     y:radius1, 
     sides: 6, 
     radius: radius2, 
     fill: 'gold', 
    }); 
    group.add(regPoly2); 

    layer.draw(); 


    function shadow(group){ 
     var scale=1.1; 
     var clones=[]; 
     var children=group.getChildren(); 
     children.each(function(child){ 
      var clone=child.clone(); 
      clone.setScale({x:scale,y:scale}); 
      clone.setFill("black"); 
      clones.push(clone); 
     }); 
     for(var i=0;i<clones.length;i++){ 
      group.add(clones[i]); 
      clones[i].moveToBottom(); 
     } 
     layer.draw(); 
    } 


    $("#myButton").click(function(){ 
     shadow(group); 
    }); 

}); // end $(function(){}); 
</script>  
</head> 
<body> 
    <button id="myButton">Outline the regular polygon</button> 
    <div id="container"></div> 
</body> 
</html>

来源

2014-02-19 20:54:11 markE

其实这是一个黑客，但我喜欢电子邮件，谢谢。 – user1440445

在Kinetic.js中描绘多个形状

回答

相关问题