I'm having a bit of trouble playing around with KineticJS.

As you can see from my fiddle, I am able to access the Shape object (box) inside of my drop event, to get the x,y coordinates, and I'm performing math on them to get the new coordinates I want to 'snap' the shape to, but I can't figure out how on earth to set the position and redraw the box.

The docs are sparse, at best:

.php (See Shape.setPosition( x, y))

Has anyone here messed with this library yet?

EDIT: My now working fiddle: /

I'm having a bit of trouble playing around with KineticJS.

As you can see from my fiddle, I am able to access the Shape object (box) inside of my drop event, to get the x,y coordinates, and I'm performing math on them to get the new coordinates I want to 'snap' the shape to, but I can't figure out how on earth to set the position and redraw the box.

The docs are sparse, at best:

http://www.kineticjs./api-docs.php (See Shape.setPosition( x, y))

Has anyone here messed with this library yet?

EDIT: My now working fiddle: http://jsfiddle/Programmer/m4MZk/

• javascript
• kineticjs

2 Answers 2

check out the "Animals on the Beach" lab which is an example of snapping shape objects into place based on their coordinates:

http://www.html5canvastutorials./labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/

This worked for me and has now been extended into a full circuit diagram drawing app.

It's based on the Animals on the Beach code but a bit simpler.

http://reviseomatic/help/e-tools/Diagram%20Designer%20Circuits.php

wire1vImg.on('dragend', function() {
  var point = wire1vImg.getPosition();
  var newX = Math.round(point.x / 15) * 15;
  var newY = Math.round(point.y / 15) * 15;
  wire1vImg.setPosition(newX, newY);
  stage.draw();
});