import { constructors } from '../core/library.js';
import { doCreate, mergeOver, pushUnique, Ωempty } from '../helper/utilities.js';
import baseMix from '../mixin/base.js';
import stylesMix from '../mixin/styles.js';Scrawl-canvas ConicGradient objects implement the Canvas API’s createConicGradient method. The resulting CanvasGradient object can be used by any Scrawl-canvas entity as its fillStyle or strokeStyle.
import { constructors } from '../core/library.js';
import { doCreate, mergeOver, pushUnique, Ωempty } from '../helper/utilities.js';
import baseMix from '../mixin/base.js';
import stylesMix from '../mixin/styles.js';Shared constants
import { _radian, BLANK, STYLES } from '../helper/shared-vars.js';Local constants
const T_CONIC_GRADIENT = 'ConicGradient';const ConicGradient = function (items = Ωempty) {
this.stylesInit(items);
return this;
};const P = ConicGradient.prototype = doCreate();
P.type = T_CONIC_GRADIENT;
P.lib = STYLES;
P.isArtefact = false;
P.isAsset = false;baseMix(P);
stylesMix(P);const defaultAttributes = {ConicGradients calculate their gradients as a sweep of color around the start (startX and startY) coordinate. The startAngle attribute - measured in degrees, not radians - represents the angle at which the color stop 0 occurs.
paletteStart and paletteEnd attributes. angle: 0,
};
P.defs = mergeOver(P.defs, defaultAttributes);In addition to the attributes defined in the base and styles mixins, Gradients also pass through Palette attributes to their Palette object.
Attributes from base mixin:
nameAttributes from styles mixin:
startstartXstartYendendXendYpalettepaletteStartpaletteEndcyclePaletteAttributes from the palette factory:
colorscyclicP.packetObjects = pushUnique(P.packetObjects, ['palette']);buildStyle - internal function: creates the radial gradient on the Cell’s CanvasRenderingContext2D engine, and then adds the color stops to it.
P.buildStyle = function (cell) {
if (cell) {
const engine = cell.engine;
if (engine) {
if (!engine.createConicGradient) return BLANK;
const gradient = engine.createConicGradient(...this.gradientArgs);
return this.addStopsToGradient(gradient, this.paletteStart, this.paletteEnd, this.cyclePalette);
}
}
return BLANK;
};updateGradientArgs - internal function
P.updateGradientArgs = function (x, y) {
const gradientArgs = this.gradientArgs,
currentStart = this.currentStart,
angle = this.angle * _radian;
const sx = currentStart[0] + x,
sy = currentStart[1] + y;
gradientArgs.length = 0;
gradientArgs.push(angle, sx, sy);
};let graddy = scrawl.makeConicGradient({
name: 'mygradient',
startX: '50%',
startY: '50%',
angle: 90,
});
scrawl.makeBlock({
name: 'myblock',
width: '90%',
height: '90%',
startX: '5%',
startY: '5%',
fillStyle: graddy,
strokeStyle: 'coral',
lineWidth: 2,
method: 'fillAndDraw',
});
export const makeConicGradient = function (items) {
if (!items) return false;
return new ConicGradient(items);
};
constructors.ConicGradient = ConicGradient;