gibbon.js
Version:
Actor/Component system for use with pixi.js.
82 lines • 2.39 kB
JavaScript
import { htmlStr, rgbaStr } from '../utils/color-utils';
export class Gradient {
colors;
/**
* @property {number[]} stops - percent stops of each color.
* first step should start at 0, last should be 1.
*/
stops;
constructor(colors, stops) {
this.colors = colors;
this.stops = stops;
}
/**
* Create a linear gradient object for the context which may include alpha.
*/
toAlphaLinear(ctx, x0, y0, x1, y1) {
const grad = ctx.createLinearGradient(x0, y0, x1, y1);
this.addAlphaStops(grad);
return grad;
}
/**
* Create a radial gradient object for the context that includes alpha channel.
*/
toAlphaRadial(ctx, r0, r1, x = 0, y = 0) {
const grad = ctx.createRadialGradient(x, y, r0, x, y, r1);
this.addAlphaStops(grad);
return grad;
}
/**
* Create a linear gradient object for the context. alpha is ignored.
*/
toLinear(ctx, x0, y0, x1, y1) {
const grad = ctx.createLinearGradient(x0, y0, x1, y1);
this.addStops(grad);
return grad;
}
/**
* Create a radial gradient object for the context. alpha is ignored.
*/
toRadial(ctx, r0, r1, x = 0, y = 0) {
const grad = ctx.createRadialGradient(x, y, r0, x, y, r1);
this.addStops(grad);
return grad;
}
/**
* Add gradient stops which include an alpha component.
*/
addAlphaStops(grad) {
for (let i = 0; i < this.stops.length; i++) {
grad.addColorStop(this.stops[i], rgbaStr(this.colors[i]));
}
}
/**
* Add the Gradient color steps to the CanvasGradient with no alpha.
* @param {CanvasGradient} grad
*/
addStops(grad) {
for (let i = 0; i < this.stops.length; i++) {
grad.addColorStop(this.stops[i], htmlStr(this.colors[i]));
}
}
/**
* Ensure stops are nondecreasing between 0 and 1.
*/
repair() {
const a = this.stops;
let prev = 0;
for (let i = a.length - 1; i >= 0; i--) {
const cur = a[i];
if (cur < prev) {
a[i] = prev;
}
else if (cur > 1) {
a[i] = prev = 1;
}
else {
prev = cur;
}
}
}
}
//# sourceMappingURL=gradient.js.map