import { constructors, radian } from '../core/library.js';
import { mergeOver, addStrings, isa_number, pushUnique, Ωempty } from '../core/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.
ConicGradients can be applied to an entity in two different ways, depending on the entity’s lockFillStyleToEntity and lockStrokeStyleToEntity attribute flags:
TO NOTE: this is an experimental technology; most browsers do not (yet) support conic gradients for canvases, only in CSS. In these browsers, the gradient will return a solid, transparent color. To see the effect, enable the appropriate flags in the browser:
import { constructors, radian } from '../core/library.js';
import { mergeOver, addStrings, isa_number, pushUnique, Ωempty } from '../core/utilities.js';
import baseMix from '../mixin/base.js';
import stylesMix from '../mixin/styles.js';const ConicGradient = function (items = Ωempty) {
this.stylesInit(items);
return this;
};let P = ConicGradient.prototype = Object.create(Object.prototype);
P.type = 'ConicGradient';
P.lib = 'styles';
P.isArtefact = false;
P.isAsset = false;P = baseMix(P);
P = stylesMix(P);let 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:
colors cyclicP.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) {
let engine = cell.engine;
if (engine) {
if (!engine.createConicGradient) return 'rgba(0,0,0,0)';
let gradient = engine.createConicGradient(...this.gradientArgs);
return this.addStopsToGradient(gradient, this.paletteStart, this.paletteEnd, this.cyclePalette);
}
}
return 'rgba(0,0,0,0)';
};updateGradientArgs - internal function
P.updateGradientArgs = function (x, y) {
let gradientArgs = this.gradientArgs,
currentStart = this.currentStart,
angle = this.angle * radian;
let 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',
});
const makeConicGradient = function (items) {
if (!items) return false;
return new ConicGradient(items);
};
constructors.ConicGradient = ConicGradient;export {
makeConicGradient,
};