@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
106 lines (105 loc) • 3.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Gradient = void 0;
const types_1 = require("../../types");
/**
* Class representing a gradient with properties and methods to manipulate it.
*/
class Gradient {
/**
* The type of fill, which is always `Gradient`.
*/
fillType = types_1.FillType.Gradient;
/**
* The type of gradient (e.g., linear, radial, conic).
*/
type;
/**
* The points defining the gradient.
*/
points;
/**
* The color stops for the gradient.
*/
stops;
/**
* Constructs a new Gradient instance.
* @param opts {Object} - Optional properties for the gradient.
* @param opts.props {IGradient} - The gradient properties.
*/
constructor(opts) {
this.type = opts?.props?.type || types_1.GradientType.Linear;
this.points = opts?.props?.points || [];
this.stops = opts?.props?.stops || [];
}
/**
* Sets the type of the gradient.
* @param type {AnyGradientType} - The type of the gradient (e.g., linear, radial, conic).
* @returns {this} The current instance for chaining.
*/
setType(type) {
this.type = type;
return this;
}
/**
* Adds points to the gradient.
* @param points {GradientPoint[]} - The points to add to the gradient.
* @returns {this} The current instance for chaining.
*/
addPoints(...points) {
this.points.push(...points);
return this;
}
/**
* Adds color stops to the gradient.
* @param stops {GradientColorStop[]} - The color stops to add to the gradient.
* @returns {this} The current instance for chaining.
*/
addStops(...stops) {
this.stops.push(...stops);
return this;
}
/**
* Draws the gradient on a canvas context.
* @param ctx {SKRSContext2D} - The canvas rendering context.
* @returns {CanvasGradient} The created gradient.
*/
draw(ctx) {
let gradientData = this.toJSON();
let gradient;
switch (gradientData.type) {
case types_1.GradientType.Linear:
case "linear":
gradient = ctx.createLinearGradient(gradientData.points[0].x, gradientData.points[0].y, gradientData.points[1].x, gradientData.points[1].y);
break;
case types_1.GradientType.Radial:
case "radial":
gradient = ctx.createRadialGradient(gradientData.points[0].x, gradientData.points[0].y, gradientData.points[0].r || 0, gradientData.points[1].x || gradientData.points[0].x, gradientData.points[1].y || gradientData.points[0].y, gradientData.points[1].r || 0);
break;
case types_1.GradientType.Conic:
case "conic":
gradient = ctx.createConicGradient(gradientData.points[0].startAngle || 0, gradientData.points[0].x, gradientData.points[0].y);
break;
default:
gradient = ctx.createLinearGradient(gradientData.points[0].x, gradientData.points[0].y, gradientData.points[1].x, gradientData.points[1].y);
break;
}
for (let stop of gradientData.stops) {
gradient.addColorStop(stop.offset, stop.color);
}
return gradient;
}
/**
* Converts the gradient to a JSON representation.
* @returns {IGradient} The JSON representation of the gradient.
*/
toJSON() {
return {
fillType: this.fillType,
type: this.type,
points: this.points,
stops: this.stops,
};
}
}
exports.Gradient = Gradient;