在 PaperJS 中，围绕点旋转形状无法正常工作

Question

我正在尝试重新制作小行星游戏。这是 Ship 对象构造函数的代码示例（我使用的是构造函数而不是对象文字，因为 this 在引用文字中的变量时无法正常工作）：

function Ship(pos) {
    var position = pos ? pos : view.center;
    var segments = [
            new Point(position) + new Point(0, -7.5), // Front of ship
            new Point(position) + new Point(-5, 7.5), // Back left
            new Point(position) + new Point(0, 3.5), // Rear exhaust indentation
            new Point(position) + new Point(5, 7.5) // Back right
        ]
    this.shipPath = new Path.Line({
        segments: segments,
        closed: true,
        strokeColor: '#eee',
        strokeWidth: 2
    });
    this.velocity = new Point(0, -1);
    this.steering = new Point(0, -1);
    this.rot = function(ang) {
        this.steering.angle += ang;
        this.shipPath.rotate(ang, this.shipPath.position);
    }
    this.drive = function() {
        this.shipPath.position += this.velocity;
    }
}

var ship = new Ship();

var path = new Path({
    strokeColor: '#ddd',
    strokeWidth: 1
});

function onFrame(event) {
    path.add(ship.shipPath.position);
    ship.drive();
}

我已经省略了关键处理程序，这就是船的操纵方式，但基本上他们所做的是根据点击的是右按钮还是左按钮，以不同的角度调用 this.rot() 函数。

基本上我的问题是，根据这个，当驾驶船时，船应该围绕其 shipPath.position 旋转，这将使该点在船围绕它旋转时沿直线行驶。相反，这正在发生：

path中的卷曲部分是我连续驾驶船几秒钟时造成的。为什么会这样？如果船绕着它的 position 旋转，为什么船旋转时位置会向侧面抖动？

这是 link 我在自己的网站上使用它的地方：http://aronadler.com/asteroid/ 我很想把它放在 jsbin 或 codepen 上，但尽管工作了好几个小时，但我从未能够真正让 paperscript 在 javascript.

中工作

Here is a sketch。因为出于某种原因，Sketch 不会让箭头键被检测到，所以我给了它一个自动恒定旋转。效果是一样的。

Answer 1

原因是path.bounds.center不是三角形的中心。默认的旋转中心是 path.bounds.center。参见 sketch。红点是 bounds.center，绿色矩形是边界矩形。

您想围绕三角形中心（技术上是质心）旋转，可以通过找到从顶点到对边中点的 2/3 路径的点来计算。

下面是一些计算三角形质心的代码：

function centroid(triangle) {
    var segments = triangle.segments;
    var vertex = segments[0].point;
    var opposite = segments[1].point - (segments[1].point - segments[2].point) / 2;
    var c = vertex + (opposite - vertex) * 2/3;
    return c;
}

更新后的 sketch 显示在计算质心时中心如何相对于您的三角形不移动，因为它是旋转的。

并且我已经将您的 sketch 更新为使用质心而不是位置。它现在直线移动。

在 PaperJS 中，围绕点旋转形状无法正常工作

In PaperJS rotating a shape around point is not working properly

javascript

canvas

vector-graphics

paperjs