在 Kinetic.js 中描边多个形状答案

【问题标题】：Stroke multiple shapes in Kinetic.js在 Kinetic.js 中描边多个形状
【发布时间】：2023-03-15 15:54:01
【问题描述】：

我正在尝试将几个对象（RegularPolygons）组合在一起并抚摸它们（最后一组不是个人）。类似的问题可能是：您有各个州的形状，并且想要中欧。

我试图为此目的使用 Group，但我无法使用 Group。我也不能描边图层。我想从我的形状中获得积分来创建一个新的大形状，但我无法获得积分。我在谷歌上搜索，发现 Util.extend 可能对我有帮助，但我没有在文档中找到它，我也不完全理解它是如何工作的。那么该怎么做呢？

【问题讨论】：

标签： kineticjs

【解决方案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>

【讨论】：