HTML5 Canvas Groups with KineticJS

To group multiple shapes together with KineticJS, we can instantiate a Kinetic.Group() object and then add shapes to it with the add() method. Grouping shapes together is really handy when we want to transform multiple shapes together, e.g. if we want to move, rotate, or scale multiple shapes at once. Groups can also be added to other groups to create more complex Node trees. For a full list of attributes and methods, check out the Kinetic.Group documentation.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var shapesLayer = new Kinetic.Layer();

/*
       * create a group which will be used to combine
       * multiple simple shapes.  Transforming the group will
       * transform all of the simple shapes together as
       * one unit
       */
      var group = new Kinetic.Group({
        x: 220,
        y: 40,
        rotationDeg: 20
      });

var colors = ['red', 'orange', 'yellow'];

for(var n = 0; n < 3; n++) {
        // anonymous function to induce scope
        (function() {
          var i = n;
          var box = new Kinetic.Rect({
            x: i * 30,
            y: i * 18,
            width: 100,
            height: 50,
            name: colors[i],
            fill: colors[i],
            stroke: 'black',
            strokeWidth: 4
          });

group.add(box);
        })();
      }

shapesLayer.add(group);
      stage.add(shapesLayer);
    </script>
  </body>
</html>

< Complex Drag Bounds Layering >

More Examples

No Related Post

Modified on April 9th, 2013 by Eric Rowell