Progress mask

Progress.ts

import { Graphics } from "pixi.js";

const angles = [];
export class Progress extends Graphics {
	_color: number;
	_tWidth: number;
	_tHeight: number;
	_progress: number;
	public invert: boolean = false;

	constructor(color = 0xff0000, width = 100, height = 100) {
		super();
		this._color = color;
		this._tWidth = width;
		this._tHeight = height;
		this._progress = 0;
	}

	set progress(v) {
		v = Math.min(1, Math.max(0, v));
		this._progress = v;

		angles.push(v);

		for (let i = 0; i < 4; i++) {
			const corner = (2 * i + 1) / 8;
			if (corner > v) {
				angles.push(corner);
			}
		}
		angles.push(1.0);

		const w = this._tWidth / 2, h = this._tHeight / 2;

		this.clear();
		this.beginFill(this._color);
		this.moveTo(w, h);

		for (let i = 0; i < angles.length; i++) {
			const a = (angles[i] - 0.25) * Math.PI * 2;
			let dx = Math.cos(a), dy = Math.sin(a);
			const r = Math.max(Math.abs(dx), Math.abs(dy));
			dx *= w / r; dy *= h / r;
			this.lineTo(w + dx, h + dy);
		}
		this.closePath();
		angles.length = 0;
	}


	get progress() {
		return this._progress;
	}
}