import { constructors } from '../core/library.js';
import { pushUnique } from '../core/utilities.js';
import baseMix from '../mixin/base.js';
import stylesMix from '../mixin/styles.js';Scrawl-canvas Gradient objects implement the Canvas API’s createLinearGradient method. The resulting CanvasGradient object can be used by any Scrawl-canvas entity as its fillStyle or strokeStyle.
Gradients can be applied to an entity in two different ways, depending on the entity’s lockFillStyleToEntity and lockStrokeStyleToEntity attribute flags:
import { constructors } from '../core/library.js';
import { pushUnique } from '../core/utilities.js';
import baseMix from '../mixin/base.js';
import stylesMix from '../mixin/styles.js';const Gradient = function (items = {}) {
this.stylesInit(items);
return this;
};let P = Gradient.prototype = Object.create(Object.prototype);
P.type = 'Gradient';
P.lib = 'styles';
P.isArtefact = false;
P.isAsset = false;P = baseMix(P);
P = stylesMix(P);No additional attributes are defined in this file.
P.packetObjects = pushUnique(P.packetObjects, ['palette']);buildStyle - internal function: creates the linear 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) {
let gradient = engine.createLinearGradient(...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,
currentEnd = this.currentEnd;
let sx = currentStart[0] + x,
sy = currentStart[1] + y,
ex = currentEnd[0] + x,
ey = currentEnd[1] + y;check to correct situation where coordinates represent a ‘0 x 0’ box - which will cause errors in some browsers
if (sx === ex && sy === ey) ex++;
gradientArgs.length = 0;
gradientArgs.push(sx, sy, ex, ey);
};scrawl.makeGradient({
name: 'colored-pipes',
endX: '100%',
cyclePalette: true
})
.updateColor(0, 'black')
.updateColor(49, 'yellow')
.updateColor(99, 'black')
.updateColor(149, 'lightyellow')
.updateColor(199, 'black')
.updateColor(249, 'goldenrod')
.updateColor(299, 'black')
.updateColor(349, 'lemonchiffon')
.updateColor(399, 'black')
.updateColor(449, 'gold')
.updateColor(499, 'black')
.updateColor(549, 'tan')
.updateColor(599, 'black')
.updateColor(649, 'wheat')
.updateColor(699, 'black')
.updateColor(749, 'yellowgreen')
.updateColor(799, 'black')
.updateColor(849, 'peachpuff')
.updateColor(899, 'black')
.updateColor(949, 'papayawhip')
.updateColor(999, 'black');
scrawl.makeBlock({
name: 'animated-block',
width: 150,
height: 150,
startX: 180,
startY: 120,
handleX: 'center',
handleY: 'center',
strokeStyle: 'coral',
fillStyle: 'colored-pipes',
lineWidth: 2,
method: 'fillAndDraw',
});const makeGradient = function (items) {
return new Gradient(items);
};
constructors.Gradient = Gradient;export {
makeGradient,
};