Transform (Move/Scale/Rotate) shapes with KineticJS

Question

I'm trying to build a transform manager for KineticJS that would build a bounding box and allow users to scale, move, and rotate an image on their canvas. I'm getting tripped up with the logic for the anchor points.

http://jsfiddle.net/mharrisn/whK2M/

I just want to allow a user to scale their image proportionally from any corner, and also rotate as the hold-drag an anchor point.

Can anyone help point me in the right direction?

Thank you!

Answer 1

Here is a proof of concept of a rotational control I've made: http://codepen.io/ArtemGr/pen/ociAD

While the control is dragged around, the dragBoundFunc is used to rotate the content alongside it:

controlGroup.setDragBoundFunc (function (pos) {
  var groupPos = group.getPosition()
  var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y))
  status.setText ('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation); layer.draw()
  group.setRotationDeg (rotation); layer.draw()
  return pos
})