import { mergeOver, isa_number } from '../core/utilities.js';
import { cell } from '../core/library.js';Most of the code relating to the CanvasPattern API can be found here.
fillStyle or strokeStyle attribute by supplying the Pattern object or Cell wrapper’s String name to it.import { mergeOver, isa_number } from '../core/utilities.js';
import { cell } from '../core/library.js';export default function (P = {}) { let defaultAttributes = {repeat - String indicating how to repeat the pattern’s image. Possible values are: repeat (default), repeat-x, repeat-y, no-repeat
repeat: 'repeat',patternMatrix - Scrawl-canvas will apply a 2d-style, 6 value DOMMatrix to the pattern each time it is recreated. Changing the values of the matrix will change the rotation, skew, etc of the pattern. Pseudo-attributes can be used to set individual elements of the matrix, as follows:
matrixA - generally used for horizontal (x axis) scalematrixB - generally used for horizontal (x axis) skewmatrixC - generally used for vertical (y axis) skewmatrixD - generally used for vertical (y axis) scalematrixE - generally used for horizontal (x axis) positioningmatrixF - generally used for vertical (y axis) positioningTo rotate the pattern, update the B and C matrix values in tandem. Results will be dependent on the surrounding matrix values. See demo Canvas-035 to explore further.
patternMatrix: null,
};
P.defs = mergeOver(P.defs, defaultAttributes); let S = P.setters;repeat
P.repeatValues = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat'];
S.repeat = function (item) {
if (this.repeatValues.indexOf(item) >= 0) this.repeat = item;
else this.repeat = this.defs.repeat;
};updateMatrixNumber - internal helper function
P.matrixNumberPosCheck = ['a', 'b', 'c', 'd', 'e', 'f'];
P.updateMatrixNumber = function (item, pos) {
if (!this.patternMatrix) this.patternMatrix = new DOMMatrix();
item = (item.substring) ? parseFloat(item) : item;
let posCheck = this.matrixNumberPosCheck.indexOf(pos);
if (isa_number(item) && posCheck >= 0) this.patternMatrix[pos] = item;
};matrixA, matrixB, matrixC, matrixD, matrixE, matrixF - these pseudo-attributes can be used to set individual attributes of the patternMatrix DOMMatrix object
S.matrixA = function (item) { this.updateMatrixNumber(item, 'a'); };
S.matrixB = function (item) { this.updateMatrixNumber(item, 'b'); };
S.matrixC = function (item) { this.updateMatrixNumber(item, 'c'); };
S.matrixD = function (item) { this.updateMatrixNumber(item, 'd'); };
S.matrixE = function (item) { this.updateMatrixNumber(item, 'e'); };
S.matrixF = function (item) { this.updateMatrixNumber(item, 'f'); };patternMatrix - the argument must be an Array containing 6 Number elements in the form of [a, b, c, d, e, f]
S.patternMatrix = function (item) {
if (Array.isArray(item)) {
let update = this.updateMatrixNumber;
update(item[0], 'a');
update(item[1], 'b');
update(item[2], 'c');
update(item[3], 'd');
update(item[4], 'e');
update(item[5], 'f');
}
};buildStyle - internal function: creates the pattern on the Cell’s CanvasRenderingContext2D engine.
P.buildStyle = function (mycell = {}) {
if (mycell) {
if (mycell.substring) mycell = cell[mycell];
let source = this.source,
loaded = this.sourceLoaded,
repeat = this.repeat,
engine = mycell.engine;
if (this.type === 'Cell' || this.type === 'Noise') {
source = this.element;
loaded = true;
}
if (engine && loaded) {
let p = engine.createPattern(source, repeat);
p.setTransform(this.patternMatrix);
return p;
}
}
return 'rgba(0,0,0,0)';
};Return the prototype
return P;
};