代码之家 › 专栏 › 技术社区 › user1440445

在Kinetic.js中绘制多个形状

kineticjs

user1440445 · 技术社区 · 10 年前

我正在尝试将多个对象(RegularPolygons)组合在一起,并对它们进行笔划(最终组合而不是单个)。类似的问题可能是:你有各个州的形状,你想划到中欧。

我正试图使用Group来达到这个目的,但我不能敲击Group。我也不会划图层。我想从我的形状中获得分数,以创建一个新的大形状,但我无法获得分数。我在谷歌上搜索,发现Util.extend可能会对我有所帮助,但我在文档中没有发现,我也不完全理解它的工作原理。那么怎么做呢?

1 回复 | 直到 10 年前

markE 10 年前

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

以下是如何将人造笔划自动应用于任何一组规则多边形:

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>