Paper.js - 围绕半径大小旋转线段点

Question

我的 paper.js 项目中有一个导入的 SVG。

我想做的是围绕设定的半径旋转 svg 的每个分段点，使用 onFrame() 方法对其进行动画处理。

我知道如何定位每个线段点的 x 和 y 位置，但我真的不知道如何将它定位在 'rotation'。

我现在拥有的:

var words = project.importSVG(document.querySelector("svg"));
words.visible = true; // Turn off the effect of display:none;;
words.position = view.center;

var letterR = words.children.letter_r;
var letterR_outside = letterR.children.letter_r_outside;
letterR_outside.selected = true;


var rotate_point = view.center;

function onFrame(event) {

  var _delta = Math.sin(event.time);

  //   console.log(Math.round(50 * Math.cos(theta[0])) * _delta);
  //   letterR_outside.segments[0].point.x = Math.round(_radius * Math.cos(theta[0]));
  //   letterR_outside.segments[0].point.y = Math.round(_radius * Math.sin(theta[0]));


  for (var i = 0; i < letterR_outside.segments.length; i++) {
    var segment = letterR_outside.segments[i];
    // segment.point.x += _delta;
    segment.point.rotate(3, rotate_point);
  }

}

我试图通过围绕半径旋转每个点来实现的示例。 [我让黑圈可见以显示每个点的旋转圈]

我不确定如何处理这个问题。非常感谢任何帮助

Answer 1

调用 point.rotate() 没有任何作用，因为它 returns 是点的克隆，不会直接修改它。
请参阅文档：

Rotates the point by the given angle around an optional center point. The object itself is not modified. ...

因此您可能想要重新分配值：

segment.point = segment.point.rotate(3, rotate_point);

Paper.js - 围绕半径大小旋转线段点

Paper.js - Rotate segment points around a radius size

javascript

rotation

rotational-matrices

paperjs