CODEWITHSUNDEEP
javascripthtmlhtml5-canvaskineticjs
kparkin
kparkin

Reputation: 345

How to select an object in kinetic.js?

I am trying to design an editor which can be used to draw shapes using blocks, using kineticjs framework. So far everything was good. I am able to add rectangle, to change its size, and to rotate it. But what i said only works on the last created object. I can t select one of them to modify. Here html of the code:

    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
  </head>
  <body>
    <table width="800" border="0">
      <tr>
        <td colspan="2" style="background-color:#eeeeee;">
        </td>
      </tr>
      <tr>
        <td style="background-color:#eeeeee;height:200px;width:400px;">
          <button id="rect">Rectangle</button><br>
          <button id="small">Small</button><br>
          <button id="big">Big</button><br>
          <button id="rotate">RotateRight</button><br>
          <button id="rotate2">RotateLeft</button><br>
          <button id="delete">Delete</button><br>
        </td>
        <td>
          <div id="container"></div>
          <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>

          <script type="text/javascript" src="example_kinetic.js"></script>

        </td>
      </tr>
      <tr>
        <td colspan="2" style="background-color:#eeeeee;text-align:center;">
        Copyright © ceng314animation.wordpress.com/</td>
      </tr>
    </table>

  </body>
</html>

And this is the js part:

 var stage = new Kinetic.Stage({
    container: 'container',
    width: 800,
    height: 400
  });

  var layer = new Kinetic.Layer();
  stage.add(layer);
  boardBlankArray = [];
  var rect, myRect;
  var i = 1;


  document.getElementById('rect').addEventListener('click', function() {
    rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    offset: [50,25],
    draggable: true,
    id:"rect"+i
  });
    i=i+1;

    rect.setListening(true);

    boardBlankArray[i] = rect;
    // add the shape to the layer
    layer.add(boardBlankArray[i]);
    stage.add(layer);
    boardBlankArray[i].on("click",function(){
      alert(this.attrs.id);
      //myRect = stage.getChildren()[i];
    });
  }, false);


  document.getElementById('big').addEventListener('click', function(){

    rect.setWidth(rect.getWidth()+10);
    rect.setHeight(rect.getHeight()+10);
    rect.setListening(true);
    stage.add(layer);
  }, false);

  document.getElementById('small').addEventListener('click', function() {
    rect.setListening(true);
    rect.setWidth(rect.getWidth()-10);
    rect.setHeight(rect.getHeight()-10);
    stage.add(layer);
  }, false);

  document.getElementById('rotate').addEventListener('click', function() {
    rect.setListening(true);
    rect.rotate(Math.PI/4);
    stage.add(layer);
  }, false);

  document.getElementById('rotate2').addEventListener('click', function() {
    rect.setListening(true);
    rect.rotate(-Math.PI/4);
    stage.add(layer);
  }, false);


  document.getElementById('delete').addEventListener('click', function() {
    layer.remove(rect);
    stage.add(layer);
  }, false);

Upvotes: 3

Views: 5075

Answers (2)

projeqht
projeqht

Reputation: 3160

It looks like @jing3142's answer worked for @user1422167, but I wanted to post this answer here as the other answer uses an unconventional approach to selecting a node in KineticJS.

The KineticJS way of selecting a node would be to use:

event.targetNode

Source: http://www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/

layer.on('click', function(evt) {
    // get the shape that was clicked on
    var shape = evt.targetNode;
    alert('you clicked on \"' + shape.getName() + '\"');
  });

Using var shape = evt.targetNode;, you can call all of your KineticJS methods on the KineticJS Node. In this example the tutorial calls the getName method: shape.getName().

Also, see more about KineticJS events here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

UPDATE

KineticJS 5.0.1 and before

var shape = evt.targetNode;

KineticJS 5.1.0+

var shape = evt.target;

Upvotes: 6

jing3142
jing3142

Reputation: 1871

When you click on a rectangle you need to make this the active rectangle. Use myrect as variable for currently active rectangle

Make the following changes to your code, identified with //<<<<<<<<<<<<<<<<<<<<<

Note boardBlankArray is not necessary

document.getElementById('rect').addEventListener('click', function() {
    rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    offset: [50,25],
    draggable: true,
    id:"rect"+i
  });
    i=i+1;

    myrect=rect //<<<<<<<<<<<<<<sets recently created rectangle as active
    rect.setListening(true);

    // add the shape to the layer
    layer.add(rect);
    stage.add(layer);
    rect.on("click",function(){    //<<<<<<<<<<<
      myRect = this; //<<<<<<<<<<<<<<<<<<<<<< sets clicked on rectangle as active
    });
  }, false);


  document.getElementById('big').addEventListener('click', function(){

    myrect.setWidth(myrect.getWidth()+10); //<<<<<<<<<uses currently active rectangle
    myrect.setHeight(myrect.getHeight()+10); //<<<<<<<uses currently active rectangle
    myrect.setListening(true);
    stage.add(layer);
  }, false);

You need to change rect to myrect in all following function calls

Upvotes: 1

Related Questions