Search code examples
kineticjs

Stroke multiple shapes in Kinetic.js

I'm trying to group several objects (RegularPolygons) together and stroke them (final group not individuals). Similar problem might be: you have shapes of individual states and you want to stroke central Europe.

I was trying to use Group for that purpose, but I can't stroke Group. I also can't stroke Layer. I wanted to get points of my shapes to create one new big shape, but I can't get points. I was googling and found that maybe Util.extend might help me but I haven't found that in docs and I don't fully understand how it works. So how to do that?

Solution

  • Since regular polygons all have a centerpoint, you can apply a faux-stroke by creating a background clone of each polygon that is scaled slightly larger than the original.

    Here's how to automatically apply a faux-stroke to any group full of regular polygons:

    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();
}

    Demo: http://jsfiddle.net/m1erickson/ZZ4Hp/

    enter image description here ... enter image description here

    Example code:

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