Question

我正在尝试将几个对象（RegularPolygons）组合在一起并抚摸它们（最终组不是个体）。类似的问题可能是：你有各种状态的形状，你想要撼动中欧。

我试图将Group用于此目的，但我无法击败Group。我也无法抚摸图层。我想得到我的形状点来创造一个新的大形状，但我不能得分。我在谷歌搜索，发现也许Util.extend可能会帮助我，但我没有在文档中找到它，我不完全了解它是如何工作的。那怎么办？

Answer 1

由于常规多边形都具有中心点，因此可以通过创建每个多边形的背景克隆来应用虚拟笔划，该背景克隆的缩放比原始多边形略大。

以下是如何自动将虚假笔划应用于任何充满正多边形的组：

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>

在Kinetic.js中描边多个形状

1 个答案: