Rotate Around Point

Demonstrates how to rotate a geometric line around a specific pivot point, such as an endpoint, its midpoint, or an arbitrary coordinate.

Rotate Around Point, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    points;
    lines;
    graphics;

    create ()
    {
        this.graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa }, fillStyle: { color: 0x0000aa } });

        this.lines = [
            new Phaser.Geom.Line(200, 400, 400, 400),
            new Phaser.Geom.Line(400, 400, 600, 400),
            new Phaser.Geom.Line(300, 100, 500, 100),
            new Phaser.Geom.Line(700, 200, 700, 400)
        ];

        this.points = [
            this.lines[0].getPointA(),
            this.lines[1].getPointB(),
            Phaser.Geom.Line.GetMidPoint(this.lines[2]),
            { x: 400, y: 300}
        ];
    }

    update ()
    {

        this.graphics.clear();

        for (let i = 0; i < this.lines.length; i++)
        {
            Phaser.Geom.Line.RotateAroundPoint(this.lines[i], this.points[i], 0.02);

            this.graphics.strokeLineShape(this.lines[i]);

            this.graphics.fillPointShape(this.points[i], 10);
        }
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Line31 examples