使用KineticJS变换(移动/缩放/旋转)形状

Question

我正在尝试为KineticJS构建一个转换管理器,它将构建一个边界框并允许用户在其画布上缩放,移动和旋转图像.我正在绊倒锚点的逻辑.

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

我只是想让用户从任意角落按比例缩放图像,并且还可以按住 - 拖动锚点旋转.

谁能帮助我指出正确的方向？

谢谢!

Answer 1

这是我做过的旋转控制的概念证明:http: //codepen.io/ArtemGr/pen/ociAD

拖动控件时,dragBoundFunc用于旋转内容:

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
})