Inverse Line Geometry

Demonstrates how to flip a line's direction by rotating it 180 degrees around its starting point using the RotateAroundPoint method.

Inverse Line Geometry, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        const line = new Phaser.Geom.Line();

        this.input.on('pointerdown', pointer =>
        {

            line.setTo(pointer.x, pointer.y, pointer.x, pointer.y);

            graphics.clear();
            graphics.lineStyle(4, 0xaa00aa);
            graphics.strokeLineShape(line);

        });

        this.input.on('pointermove', pointer =>
        {

            if (pointer.isDown)
            {
                line.x2 = pointer.x;
                line.y2 = pointer.y;
        
                graphics.clear();
                graphics.lineStyle(4, 0xaa00aa);
                graphics.strokeLineShape(line);
            }

        });

        this.input.on('pointerup', pointer =>
        {

            Phaser.Geom.Line.RotateAroundPoint(line, line.getPointA(), Math.PI);

            graphics.clear();
            graphics.lineStyle(4, 0x00ff00);
            graphics.strokeLineShape(line);

        });
    }
}

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