HTML5 Canvas Select Shape by Id with KineticJS

To select a shape by id with KineticJS, we can use the get() method using the # selector. The get() method always returns an array of elements, even if we are expecting it to return one element. The get() method works for any node, including the stage, layers, groups, and shapes.

Instructions: press the "Activate Rectangle" button to select the rectangle by id and perform a transition. You can also drag and drop the rectangle.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <input type="button" id="activate" value="Activate rectangle">
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

for(var n = 0; n < 10; n++) {
        var circle = new Kinetic.Circle({
          x: Math.random() * stage.getWidth(),
          y: Math.random() * stage.getHeight(),
          radius: Math.random() * 50 + 25,
          fill: 'red',
          strokeWidth: 3
        });

layer.add(circle);
      }

var rect = new Kinetic.Rect({
        x: 300,
        y: 90,
        width: 100,
        height: 50,
        fill: 'green',
        strokeWidth: 3,
        offset: {
          x: 50,
          y: 25
        },
        draggable: true,
        id: 'myRect'
      });

layer.add(rect);
      stage.add(layer);

document.getElementById('activate').addEventListener('click', function() {
        var shape = stage.get('#myRect')[0];
        new Kinetic.Tween({
          node: shape, 
          duration: 1,
          scaleX: Math.random() * 2,
          scaleY: Math.random() * 2,
          easing: Kinetic.Easings.ElasticEaseOut
        }).play();
      }, false);
    </script>
  </body>
</html>

< Stop Animation Select by Name >

More Examples

No Related Post

Modified on April 9th, 2013 by Eric Rowell