Paper.js绕枢轴onMouseDrag旋转组

Question

如何在onMouseDrag事件中实现围绕枢轴旋转组。所以你可以想象我的意思是小提琴，

var point1 = new Point(150, 150);
  var point2 = new Point(250, 150);
  path.add(point1);
  path.add(point2);

  var handle1 = new Path.Circle({
    center    : point1,
    radius    : 7,
    fillColor : 'green'
  });

  var handle2 = new Path.Circle({
    center    : point2,
    radius    : 7,
    fillColor : 'blue'
  });

  var group = new Group(path, handle1, handle2);
  group.pivot = point1;

  handle1.onMouseDrag = function(event) {
    group.position = group.position.subtract(handle1.position).add(event.point);
  };

  handle2.onMouseDrag = function(event) {
    group.rotate(event.point.angle - handle2.position.angle)
  };

有一条在边缘有两个手柄的路径。绿色handle1可以正常工作，它应该移动整个路径。蓝色的handle2在拖动时应根据鼠标位置围绕绿色点旋转路径。我在那里的代码可以正常工作，但仅适用于180度低角度的cca。

我在这里想念什么？

非常感谢您的帮助

Answer 1

如果将对象A的枢轴点声明为另一个对象B的位置，则如果对象B更改位置，它不会自动更新。您每次使用时都必须对其进行更改handle1.onMouseDrag：

handle1.onMouseDrag = function(event) {
    group.position = group.position.subtract(handle1.position).add(event.point);
    group.pivot = event.point;
};

至于旋转，您可能想按组event.point和当前角度之间的差旋转组。在当前代码中，您将旋转（0,0）event.point的角度以减去（0,0）的角度handle1。尝试以下方法：

group.rotate(event.point.subtract(handle1.position).angle - (handle2.position.subtract(handle1.position)).angle);

这是更新的小提琴。