KineticJS: Defining offset and rotation using anchors

Question

I'm new to KineticJS and I am trying to use anchors in order to rotate and image about the centre point, which is defined using a separate anchor.

I have the rotation working and the defining the centre of rotation working also. However when the user drags the anchor to define the centre of rotation, i use the setOffset() function and it causes the image to move instead of the anchor.

I was wondering if there's a way to allow the user to drag the anchor and the anchor moves and sets the Offset instead of a user dragging the anchor and the image moves?

The update function is as follows

function update(group, activeAnchor) {
var topLeft = group.get(".topLeft")[0];
var topRight = group.get(".topRight")[0];
var bottomRight = group.get(".bottomRight")[0];
var bottomLeft = group.get(".bottomLeft")[0];
var centre = group.get(".centre")[0];
var image = group.get(".image")[0];

var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();

var centreX = group.getOffsetX();
var centreY = group.getOffsetY();

var width = group.getWidth();
var height = group.getHeight();
// update anchor positions
switch (activeAnchor.getName()) {
     case 'topLeft':
          topRight.setY(anchorY);
          bottomLeft.setX(anchorX);
          centreX = topLeft.getX()/2;
          centreY = topLeft.getY()/2;
          break;

    case 'topRight':
          topLeft.setY(anchorY);
          bottomRight.setX(anchorX);
          centreX = topRight.getX()/2;
          centreY = topRight.getY()/2;
          break;

    case 'bottomRight':
          bottomLeft.setY(anchorY);
          topRight.setX(anchorX);
          break;

    case 'bottomLeft':
          bottomRight.setY(anchorY);
          topLeft.setX(anchorX);

          centre.setX(centreX);
          centre.setY(centreY);
          break;

    case "centre":
          var absolute = group.getPosition();
          group.setOffset(anchorX, anchorY);
          group.setPosition(absolute);
  }

image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

var width = topRight.attrs.x - topLeft.attrs.x;
var height = bottomLeft.attrs.y - topLeft.attrs.y;
if(width && height) {
    image.setSize(width, height);
 }
}

I'm also trying to update the centre of rotation a sthe four corners of the image in resizing when dragged. Any idea how to do this?

Thank you in advance.

UPDATE

Fiddle: http://jsfiddle.net/njPdr/ (It may not work properly here but you can see what I am trying to do here)

Answer 1

You are setting the position of the image with: image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

If you replace it by image.setOffset(youroffsetx, youroffsety); the image will no longer move and you will set an offset like you wanted to do. About your second question, remember that the offset is the center of rotation.

Edit as discussed in comments:

case "centre":
          var absolute = group.getPosition();
          group.setOffset(anchorX, anchorY);
          group.setPosition({x:absolute.x + group.getOffsetX(), y:absolute.y + group.getOffsetY()});
  }