Skip to content

Instantly share code, notes, and snippets.

@ivanpopelyshev
Created December 6, 2019 12:57
Show Gist options
  • Save ivanpopelyshev/de892371307f70b21ba2743ab383bebb to your computer and use it in GitHub Desktop.
Save ivanpopelyshev/de892371307f70b21ba2743ab383bebb to your computer and use it in GitHub Desktop.
Progress mask
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment