Question

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

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时，应根据鼠标位置围绕绿点旋转路径。代码我已经在那里工作正常，但仅限于cca 180低度。

我在这里缺少什么？

非常感谢您提供任何帮助

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

Here's an updated fiddle.

Paper.js围绕pivot onMouseDrag旋转组

1 个答案: