PixiJs 4 旋转速度和确定停止位置/轴

Question

我已经开始使用 PixiJs 开发一个简单的游戏。我正在尝试基于单击按钮来旋转精灵，然后允许用户通过单击另一个按钮来停止旋转。

我无法实现的是确定旋转将完成多少“循环”，例如，如果图像进行了 3、4 次完整旋转，其停止位置确定另一个需要多少剩余旋转全周期。有什么东西可以轻松检索吗？

到目前为止我的代码非常基本和简单：

    initGameLayout() {
        const top = new PIXI.Graphics();
        top.beginFill(0x2185c7);
        top.drawRect(0, 0, this.app.screen.width, this.margin);

        const headerStyle = new PIXI.TextStyle({
            fontSize: 24,
            fontStyle: 'italic',
            fontWeight: 'bold',
        });

        const headerText = new PIXI.Text('', headerStyle);
        headerText.x = Math.round((top.width - headerText.width) / 2);
        headerText.y = Math.round((this.margin - headerText.height) / 2);
        top.addChild(headerText);

        const spinButton = new PIXI.Graphics();
        spinButton.beginFill(0x2185c7);
        spinButton.drawRect(0, 0, this.app.screen.width, this.margin);
        spinButton.width = 150;
        spinButton.height = 100;
        spinButton.x = 620
        spinButton.y = 500
        spinButton.buttonMode = true;
        spinButton.interactive = true;
        spinButton.on('pointerdown', this.spinWheel);

        const spinButton2 = new PIXI.Graphics();
        spinButton2.beginFill(0x2185c3);
        spinButton2.drawRect(0, 0, this.app.screen.width, this.margin);
        spinButton2.width = 150;
        spinButton2.height = 100;
        spinButton2.x = 420
        spinButton2.y = 500
        spinButton2.buttonMode = true;
        spinButton2.interactive = true;
        spinButton2.on('pointerdown', this.stopWheel);

        this.bunny = new PIXI.Sprite.from('https://pixijs.io/examples-v4/examples/assets/bunny.png');
        this.bunny.width = 50;
        this.bunny.height = 50;
        this.bunny.anchor.set(0.5);
        this.bunny.x = this.app.screen.width / 2;
        this.bunny.y = this.app.screen.height / 2;

        this.bunny.rotate += 0.1;

        this.app.stage.addChild(top);
        this.app.stage.addChild(spinButton);
        this.app.stage.addChild(spinButton2);
        this.app.stage.addChild(this.bunny);

    }

    spinWheel() {
        if (!this.running)
        {
            this.running = true;
            this.app.ticker.add((delta: any) => {
                this.bunny.rotation += 0.1;
            });
        } else {
            this.running = false;
            this.bunny.rotation -= -0.1;
        }

    }

    stopWheel() {
        this.bunny.rotation -= -0.1;
        this.running = false;
    }

感谢任何人就上述问题提供的任何帮助

-杰斯

Answer 1

精灵的rotation 成员是它旋转的弧度的度量。整整一圈有2*Math.PIradians。您可以使用此信息来计算所需的值：

1. 当精灵第一次被点击时，存储originalRotation = bunny.rotation;
2. 再次点击精灵时，计算angleRotated = Math.abs(bunny.rotation - originalRotation);
3. 然后numCycles = Math.floor(angleRotated / (2*Math.PI));
4. 还有radiansUntilNextCycle = 2*Math.PI - (angleRotated % (2*Math.PI));

如果您更熟悉学位，则可以改用这些学位。交换：

• bunny.rotation 与 bunny.angle
• 2*Math.PI 与 360

---

我假设“循环”是指单次旋转 360 度。但是，您的问题很难理解，因为每次使用“旋转”一词时，它似乎都有不同的含义。所以这不是很有意义。

这也可能有助于解释为什么你想要这些值；你将如何处理它们？

pixiplayground.com 是分享实时功能代码的好地方。