在Kinetic.js中笔触多个形状

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/

...

示例代码：

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