在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附近旋转，为什么在船舶旋转时，位置会横向摇摆？

以下是我在自己的网站上发布此内容的链接：http://aronadler.com/asteroid/ 我本来喜欢把它放在jsbin或codepen上但是尽管工作了几个小时我还没能真正得到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以使用质心而不是位置。它现在直线移动。