refactor
This commit is contained in:
Zeno Zeng
parent
bc805cfb63
commit
35b9c08c5f
@ -28,6 +28,12 @@ const mySerializedSVG = ctx.getSerializedSvg();
|
||||
|
||||
## CHANGELOG
|
||||
|
||||
## v2.1.0
|
||||
|
||||
- feat: SVGCanvasElement(options)
|
||||
- feat: options.debug
|
||||
- refactor
|
||||
|
||||
### v2.0.7
|
||||
|
||||
- fix typo
|
||||
|
||||
154
context.js
154
context.js
@ -18,7 +18,7 @@ import * as utils from './utils';
|
||||
export default (function () {
|
||||
"use strict";
|
||||
|
||||
var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;
|
||||
var STYLES, Context, CanvasGradient, CanvasPattern, namedEntities;
|
||||
|
||||
//helper function to format a string
|
||||
function format(str, args) {
|
||||
@ -196,8 +196,7 @@ export default (function () {
|
||||
CanvasGradient.prototype.addColorStop = function (offset, color) {
|
||||
var stop = this.__ctx.__createElement("stop"), regex, matches;
|
||||
stop.setAttribute("offset", offset);
|
||||
color = utils.toString(color);
|
||||
if (color.indexOf("rgba") !== -1) {
|
||||
if (utils.toString(color).indexOf("rgba") !== -1) {
|
||||
//separate alpha value, since webkit can't handle it
|
||||
regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
|
||||
matches = regex.exec(color);
|
||||
@ -223,7 +222,8 @@ export default (function () {
|
||||
* enableMirroring - enables canvas mirroring (get image data) (defaults to false)
|
||||
* document - the document object (defaults to the current document)
|
||||
*/
|
||||
ctx = function (o) {
|
||||
Context = function (o) {
|
||||
|
||||
var defaultOptions = { width:500, height:500, enableMirroring : false}, options;
|
||||
|
||||
//keep support for this way of calling C2S: new C2S(width,height)
|
||||
@ -237,9 +237,9 @@ export default (function () {
|
||||
options = o;
|
||||
}
|
||||
|
||||
if (!(this instanceof ctx)) {
|
||||
if (!(this instanceof Context)) {
|
||||
//did someone call this without new?
|
||||
return new ctx(options);
|
||||
return new Context(options);
|
||||
}
|
||||
|
||||
//setup options
|
||||
@ -260,7 +260,7 @@ export default (function () {
|
||||
}
|
||||
|
||||
this.__setDefaultStyles();
|
||||
this.__stack = [this.__getStyleState()];
|
||||
this.__styleStack = [this.__getStyleState()];
|
||||
this.__groupStack = [];
|
||||
|
||||
//the root svg element
|
||||
@ -284,14 +284,30 @@ export default (function () {
|
||||
|
||||
// init transformation matrix
|
||||
this.resetTransform();
|
||||
|
||||
this.__options = options;
|
||||
this.__id = Math.random().toString(16).substring(2, 8);
|
||||
this.__debug(`new`, o);
|
||||
};
|
||||
|
||||
/**
|
||||
* Log
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Context.prototype.__debug = function(...data) {
|
||||
if (!this.__options.debug) {
|
||||
return
|
||||
}
|
||||
console.debug(`svgcanvas#${this.__id}:`, ...data)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Creates the specified svg element
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__createElement = function (elementName, properties, resetFill) {
|
||||
Context.prototype.__createElement = function (elementName, properties, resetFill) {
|
||||
if (typeof properties === "undefined") {
|
||||
properties = {};
|
||||
}
|
||||
@ -314,7 +330,7 @@ export default (function () {
|
||||
* Applies default canvas styles to the context
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__setDefaultStyles = function () {
|
||||
Context.prototype.__setDefaultStyles = function () {
|
||||
//default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
|
||||
var keys = Object.keys(STYLES), i, key;
|
||||
for (i=0; i<keys.length; i++) {
|
||||
@ -328,7 +344,7 @@ export default (function () {
|
||||
* @param styleState
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__applyStyleState = function (styleState) {
|
||||
Context.prototype.__applyStyleState = function (styleState) {
|
||||
var keys = Object.keys(styleState), i, key;
|
||||
for (i=0; i<keys.length; i++) {
|
||||
key = keys[i];
|
||||
@ -341,7 +357,7 @@ export default (function () {
|
||||
* @return {Object}
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__getStyleState = function () {
|
||||
Context.prototype.__getStyleState = function () {
|
||||
var i, styleState = {}, keys = Object.keys(STYLES), key;
|
||||
for (i=0; i<keys.length; i++) {
|
||||
key = keys[i];
|
||||
@ -353,7 +369,7 @@ export default (function () {
|
||||
/**
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
|
||||
*/
|
||||
ctx.prototype.__applyTransformation = function (element, matrix) {
|
||||
Context.prototype.__applyTransformation = function (element, matrix) {
|
||||
const {a, b, c, d, e, f} = matrix || this.getTransform();
|
||||
element.setAttribute('transform', `matrix(${a} ${b} ${c} ${d} ${e} ${f})`)
|
||||
}
|
||||
@ -363,7 +379,7 @@ export default (function () {
|
||||
* @param type
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__applyStyleToCurrentElement = function (type) {
|
||||
Context.prototype.__applyStyleToCurrentElement = function (type) {
|
||||
var currentElement = this.__currentElement;
|
||||
var currentStyleGroup = this.__currentElementsToStyle;
|
||||
if (currentStyleGroup) {
|
||||
@ -397,7 +413,7 @@ export default (function () {
|
||||
//gradient
|
||||
currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
|
||||
} else if (style.apply.indexOf(type)!==-1 && style.svg !== value) {
|
||||
if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && utils.toString(value).indexOf("rgba") !== -1) {
|
||||
if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
|
||||
//separate alpha value, since illustrator can't handle it
|
||||
regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
|
||||
matches = regex.exec(value);
|
||||
@ -430,7 +446,7 @@ export default (function () {
|
||||
* Will return the closest group or svg node. May return the current element.
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__closestGroupOrSvg = function (node) {
|
||||
Context.prototype.__closestGroupOrSvg = function (node) {
|
||||
node = node || this.__currentElement;
|
||||
if (node.nodeName === "g" || node.nodeName === "svg") {
|
||||
return node;
|
||||
@ -445,7 +461,7 @@ export default (function () {
|
||||
* If true, we attempt to find all named entities and encode it as a numeric entity.
|
||||
* @return serialized svg
|
||||
*/
|
||||
ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
|
||||
Context.prototype.getSerializedSvg = function (fixNamedEntities) {
|
||||
var serialized = new XMLSerializer().serializeToString(this.__root),
|
||||
keys, i, key, value, regexp, xmlns;
|
||||
|
||||
@ -476,20 +492,23 @@ export default (function () {
|
||||
* Returns the root svg
|
||||
* @return
|
||||
*/
|
||||
ctx.prototype.getSvg = function () {
|
||||
Context.prototype.getSvg = function () {
|
||||
return this.__root;
|
||||
};
|
||||
|
||||
/**
|
||||
* Will generate a group tag.
|
||||
*/
|
||||
ctx.prototype.save = function () {
|
||||
Context.prototype.save = function () {
|
||||
var group = this.__createElement("g");
|
||||
var parent = this.__closestGroupOrSvg();
|
||||
this.__groupStack.push(parent);
|
||||
parent.appendChild(group);
|
||||
this.__currentElement = group;
|
||||
this.__stack.push(this.__getStyleState());
|
||||
const style = this.__getStyleState();
|
||||
|
||||
this.__debug('save style', style)
|
||||
this.__styleStack.push(style);
|
||||
if (!this.__transformMatrixStack) {
|
||||
this.__transformMatrixStack = [];
|
||||
}
|
||||
@ -499,24 +518,26 @@ export default (function () {
|
||||
/**
|
||||
* Sets current element to parent, or just root if already root
|
||||
*/
|
||||
ctx.prototype.restore = function () {
|
||||
Context.prototype.restore = function () {
|
||||
this.__currentElement = this.__groupStack.pop();
|
||||
this.__currentElementsToStyle = null;
|
||||
//Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
|
||||
if (!this.__currentElement) {
|
||||
this.__currentElement = this.__root.childNodes[1];
|
||||
}
|
||||
var state = this.__stack.pop();
|
||||
var state = this.__styleStack.pop();
|
||||
this.__debug('restore style', state);
|
||||
this.__applyStyleState(state);
|
||||
if (this.__transformMatrixStack && this.__transformMatrixStack.length > 0) {
|
||||
this.setTransform(this.__transformMatrixStack.pop())
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a new Path Element
|
||||
*/
|
||||
ctx.prototype.beginPath = function () {
|
||||
Context.prototype.beginPath = function () {
|
||||
var path, parent;
|
||||
|
||||
// Note that there is only one current default path, it is not part of the drawing state.
|
||||
@ -534,7 +555,7 @@ export default (function () {
|
||||
* Helper function to apply currentDefaultPath to current path element
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__applyCurrentDefaultPath = function () {
|
||||
Context.prototype.__applyCurrentDefaultPath = function () {
|
||||
var currentElement = this.__currentElement;
|
||||
if (currentElement.nodeName === "path") {
|
||||
currentElement.setAttribute("d", this.__currentDefaultPath);
|
||||
@ -547,7 +568,7 @@ export default (function () {
|
||||
* Helper function to add path command
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__addPathCommand = function (command) {
|
||||
Context.prototype.__addPathCommand = function (command) {
|
||||
this.__currentDefaultPath += " ";
|
||||
this.__currentDefaultPath += command;
|
||||
};
|
||||
@ -556,7 +577,7 @@ export default (function () {
|
||||
* Adds the move command to the current path element,
|
||||
* if the currentPathElement is not empty create a new path element
|
||||
*/
|
||||
ctx.prototype.moveTo = function (x,y) {
|
||||
Context.prototype.moveTo = function (x,y) {
|
||||
if (this.__currentElement.nodeName !== "path") {
|
||||
this.beginPath();
|
||||
}
|
||||
@ -572,7 +593,7 @@ export default (function () {
|
||||
/**
|
||||
* Closes the current path
|
||||
*/
|
||||
ctx.prototype.closePath = function () {
|
||||
Context.prototype.closePath = function () {
|
||||
if (this.__currentDefaultPath) {
|
||||
this.__addPathCommand("Z");
|
||||
}
|
||||
@ -581,7 +602,7 @@ export default (function () {
|
||||
/**
|
||||
* Adds a line to command
|
||||
*/
|
||||
ctx.prototype.lineTo = function (x, y) {
|
||||
Context.prototype.lineTo = function (x, y) {
|
||||
this.__currentPosition = {x: x, y: y};
|
||||
if (this.__currentDefaultPath.indexOf('M') > -1) {
|
||||
this.__addPathCommand(format("L {x} {y}", {
|
||||
@ -599,7 +620,7 @@ export default (function () {
|
||||
/**
|
||||
* Add a bezier command
|
||||
*/
|
||||
ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
|
||||
Context.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
|
||||
this.__currentPosition = {x: x, y: y};
|
||||
this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
|
||||
{
|
||||
@ -615,7 +636,7 @@ export default (function () {
|
||||
/**
|
||||
* Adds a quadratic curve to command
|
||||
*/
|
||||
ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
|
||||
Context.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
|
||||
this.__currentPosition = {x: x, y: y};
|
||||
this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {
|
||||
cpx: this.__matrixTransform(cpx, cpy).x,
|
||||
@ -639,7 +660,7 @@ export default (function () {
|
||||
*
|
||||
* @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
|
||||
*/
|
||||
ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
|
||||
Context.prototype.arcTo = function (x1, y1, x2, y2, radius) {
|
||||
// Let the point (x0, y0) be the last point in the subpath.
|
||||
var x0 = this.__currentPosition && this.__currentPosition.x;
|
||||
var y0 = this.__currentPosition && this.__currentPosition.y;
|
||||
@ -730,7 +751,7 @@ export default (function () {
|
||||
/**
|
||||
* Sets the stroke property on the current element
|
||||
*/
|
||||
ctx.prototype.stroke = function () {
|
||||
Context.prototype.stroke = function () {
|
||||
if (this.__currentElement.nodeName === "path") {
|
||||
this.__currentElement.setAttribute("paint-order", "fill stroke markers");
|
||||
}
|
||||
@ -741,7 +762,8 @@ export default (function () {
|
||||
/**
|
||||
* Sets fill properties on the current element
|
||||
*/
|
||||
ctx.prototype.fill = function () {
|
||||
Context.prototype.fill = function () {
|
||||
utils.debug('fill', this.fillStyle);
|
||||
if (this.__currentElement.nodeName === "path") {
|
||||
this.__currentElement.setAttribute("paint-order", "stroke fill markers");
|
||||
}
|
||||
@ -752,7 +774,7 @@ export default (function () {
|
||||
/**
|
||||
* Adds a rectangle to the path.
|
||||
*/
|
||||
ctx.prototype.rect = function (x, y, width, height) {
|
||||
Context.prototype.rect = function (x, y, width, height) {
|
||||
if (this.__currentElement.nodeName !== "path") {
|
||||
this.beginPath();
|
||||
}
|
||||
@ -768,7 +790,7 @@ export default (function () {
|
||||
/**
|
||||
* adds a rectangle element
|
||||
*/
|
||||
ctx.prototype.fillRect = function (x, y, width, height) {
|
||||
Context.prototype.fillRect = function (x, y, width, height) {
|
||||
let {a, b, c, d, e, f} = this.getTransform();
|
||||
if (JSON.stringify([a, b, c, d, e, f]) === JSON.stringify([1, 0, 0, 1, 0, 0])) {
|
||||
//clear entire canvas
|
||||
@ -797,7 +819,7 @@ export default (function () {
|
||||
* @param width
|
||||
* @param height
|
||||
*/
|
||||
ctx.prototype.strokeRect = function (x, y, width, height) {
|
||||
Context.prototype.strokeRect = function (x, y, width, height) {
|
||||
var rect, parent;
|
||||
rect = this.__createElement("rect", {
|
||||
x : x,
|
||||
@ -818,7 +840,7 @@ export default (function () {
|
||||
* 1. save current transforms
|
||||
* 2. remove all the childNodes of the root g element
|
||||
*/
|
||||
ctx.prototype.__clearCanvas = function () {
|
||||
Context.prototype.__clearCanvas = function () {
|
||||
var rootGroup = this.__root.childNodes[1];
|
||||
this.__root.removeChild(rootGroup);
|
||||
this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g");
|
||||
@ -830,7 +852,7 @@ export default (function () {
|
||||
/**
|
||||
* "Clears" a canvas by just drawing a white rectangle in the current group.
|
||||
*/
|
||||
ctx.prototype.clearRect = function (x, y, width, height) {
|
||||
Context.prototype.clearRect = function (x, y, width, height) {
|
||||
let {a, b, c, d, e, f} = this.getTransform();
|
||||
if (JSON.stringify([a, b, c, d, e, f]) === JSON.stringify([1, 0, 0, 1, 0, 0])) {
|
||||
//clear entire canvas
|
||||
@ -855,7 +877,7 @@ export default (function () {
|
||||
* Adds a linear gradient to a defs tag.
|
||||
* Returns a canvas gradient object that has a reference to it's parent def
|
||||
*/
|
||||
ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {
|
||||
Context.prototype.createLinearGradient = function (x1, y1, x2, y2) {
|
||||
var grad = this.__createElement("linearGradient", {
|
||||
id : randomString(this.__ids),
|
||||
x1 : x1+"px",
|
||||
@ -872,7 +894,7 @@ export default (function () {
|
||||
* Adds a radial gradient to a defs tag.
|
||||
* Returns a canvas gradient object that has a reference to it's parent def
|
||||
*/
|
||||
ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
|
||||
Context.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
|
||||
var grad = this.__createElement("radialGradient", {
|
||||
id : randomString(this.__ids),
|
||||
cx : x1+"px",
|
||||
@ -891,7 +913,7 @@ export default (function () {
|
||||
* Parses the font string and returns svg mapping
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__parseFont = function () {
|
||||
Context.prototype.__parseFont = function () {
|
||||
var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
|
||||
var fontPart = regex.exec( this.font );
|
||||
var data = {
|
||||
@ -923,7 +945,7 @@ export default (function () {
|
||||
* @return {*}
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__wrapTextLink = function (font, element) {
|
||||
Context.prototype.__wrapTextLink = function (font, element) {
|
||||
if (font.href) {
|
||||
var a = this.__createElement("a");
|
||||
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
|
||||
@ -941,7 +963,7 @@ export default (function () {
|
||||
* @param action - stroke or fill
|
||||
* @private
|
||||
*/
|
||||
ctx.prototype.__applyText = function (text, x, y, action) {
|
||||
Context.prototype.__applyText = function (text, x, y, action) {
|
||||
var font = this.__parseFont(),
|
||||
parent = this.__closestGroupOrSvg(),
|
||||
textElement = this.__createElement("text", {
|
||||
@ -969,7 +991,7 @@ export default (function () {
|
||||
* @param x
|
||||
* @param y
|
||||
*/
|
||||
ctx.prototype.fillText = function (text, x, y) {
|
||||
Context.prototype.fillText = function (text, x, y) {
|
||||
this.__applyText(text, x, y, "fill");
|
||||
};
|
||||
|
||||
@ -979,7 +1001,7 @@ export default (function () {
|
||||
* @param x
|
||||
* @param y
|
||||
*/
|
||||
ctx.prototype.strokeText = function (text, x, y) {
|
||||
Context.prototype.strokeText = function (text, x, y) {
|
||||
this.__applyText(text, x, y, "stroke");
|
||||
};
|
||||
|
||||
@ -988,7 +1010,7 @@ export default (function () {
|
||||
* @param text
|
||||
* @return {TextMetrics}
|
||||
*/
|
||||
ctx.prototype.measureText = function (text) {
|
||||
Context.prototype.measureText = function (text) {
|
||||
this.__ctx.font = this.font;
|
||||
return this.__ctx.measureText(text);
|
||||
};
|
||||
@ -996,7 +1018,7 @@ export default (function () {
|
||||
/**
|
||||
* Arc command!
|
||||
*/
|
||||
ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
|
||||
Context.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
|
||||
// in canvas no circle is drawn if no angle is provided.
|
||||
if (startAngle === endAngle) {
|
||||
return;
|
||||
@ -1044,7 +1066,7 @@ export default (function () {
|
||||
/**
|
||||
* Generates a ClipPath from the clip command.
|
||||
*/
|
||||
ctx.prototype.clip = function () {
|
||||
Context.prototype.clip = function () {
|
||||
var group = this.__closestGroupOrSvg(),
|
||||
clipPath = this.__createElement("clipPath"),
|
||||
id = randomString(this.__ids),
|
||||
@ -1073,7 +1095,7 @@ export default (function () {
|
||||
* Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
|
||||
* http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
|
||||
*/
|
||||
ctx.prototype.drawImage = function () {
|
||||
Context.prototype.drawImage = function () {
|
||||
//convert arguments to a real array
|
||||
var args = Array.prototype.slice.call(arguments),
|
||||
image=args[0],
|
||||
@ -1110,7 +1132,7 @@ export default (function () {
|
||||
parent = this.__closestGroupOrSvg();
|
||||
currentElement = this.__currentElement;
|
||||
const matrix = this.getTransform().translate(dx, dy);
|
||||
if (image instanceof ctx) {
|
||||
if (image instanceof Context) {
|
||||
//canvas2svg mock canvas context. In the future we may want to clone nodes instead.
|
||||
//also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
|
||||
svg = image.getSvg().cloneNode(true);
|
||||
@ -1153,7 +1175,7 @@ export default (function () {
|
||||
/**
|
||||
* Generates a pattern tag
|
||||
*/
|
||||
ctx.prototype.createPattern = function (image, repetition) {
|
||||
Context.prototype.createPattern = function (image, repetition) {
|
||||
var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
|
||||
img;
|
||||
pattern.setAttribute("id", id);
|
||||
@ -1172,14 +1194,14 @@ export default (function () {
|
||||
image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
|
||||
pattern.appendChild(img);
|
||||
this.__defs.appendChild(pattern);
|
||||
} else if (image instanceof ctx) {
|
||||
} else if (image instanceof Context) {
|
||||
pattern.appendChild(image.__root.childNodes[1]);
|
||||
this.__defs.appendChild(pattern);
|
||||
}
|
||||
return new CanvasPattern(pattern, this);
|
||||
};
|
||||
|
||||
ctx.prototype.setLineDash = function (dashArray) {
|
||||
Context.prototype.setLineDash = function (dashArray) {
|
||||
if (dashArray && dashArray.length > 0) {
|
||||
this.lineDash = dashArray.join(",");
|
||||
} else {
|
||||
@ -1193,7 +1215,7 @@ export default (function () {
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
|
||||
*/
|
||||
ctx.prototype.setTransform = function (a, b, c, d, e, f) {
|
||||
Context.prototype.setTransform = function (a, b, c, d, e, f) {
|
||||
if (a instanceof DOMMatrix) {
|
||||
this.__transformMatrix = new DOMMatrix([a.a, a.b, a.c, a.d, a.e, a.f]);
|
||||
} else {
|
||||
@ -1207,7 +1229,7 @@ export default (function () {
|
||||
*
|
||||
* @returns A DOMMatrix Object
|
||||
*/
|
||||
ctx.prototype.getTransform = function () {
|
||||
Context.prototype.getTransform = function () {
|
||||
let {a, b, c, d, e, f} = this.__transformMatrix;
|
||||
return new DOMMatrix([a, b, c, d, e, f]);
|
||||
};
|
||||
@ -1217,7 +1239,7 @@ export default (function () {
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform
|
||||
*/
|
||||
ctx.prototype.resetTransform = function () {
|
||||
Context.prototype.resetTransform = function () {
|
||||
this.setTransform(1, 0, 0, 1, 0, 0);
|
||||
};
|
||||
|
||||
@ -1228,7 +1250,7 @@ export default (function () {
|
||||
* @param y The y argument represents the scale factor in the vertical direction.
|
||||
* @see https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-scale
|
||||
*/
|
||||
ctx.prototype.scale = function (x, y) {
|
||||
Context.prototype.scale = function (x, y) {
|
||||
if (y === undefined) {
|
||||
y = x;
|
||||
}
|
||||
@ -1247,7 +1269,7 @@ export default (function () {
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate
|
||||
* @see https://www.w3.org/TR/css-transforms-1
|
||||
*/
|
||||
ctx.prototype.rotate = function (angle) {
|
||||
Context.prototype.rotate = function (angle) {
|
||||
let matrix = this.getTransform().multiply(new DOMMatrix([
|
||||
Math.cos(angle),
|
||||
Math.sin(angle),
|
||||
@ -1266,7 +1288,7 @@ export default (function () {
|
||||
* @param y Distance to move in the vertical direction. Positive values are down, and negative are up.
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate
|
||||
*/
|
||||
ctx.prototype.translate = function (x, y) {
|
||||
Context.prototype.translate = function (x, y) {
|
||||
const matrix = this.getTransform().translate(x, y);
|
||||
this.setTransform(matrix);
|
||||
};
|
||||
@ -1277,23 +1299,23 @@ export default (function () {
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
|
||||
*/
|
||||
ctx.prototype.transform = function (a, b, c, d, e, f) {
|
||||
Context.prototype.transform = function (a, b, c, d, e, f) {
|
||||
const matrix = this.getTransform().multiply(new DOMMatrix([a, b, c, d, e, f]));
|
||||
this.setTransform(matrix);
|
||||
};
|
||||
|
||||
ctx.prototype.__matrixTransform = function(x, y) {
|
||||
Context.prototype.__matrixTransform = function(x, y) {
|
||||
return new DOMPoint(x, y).matrixTransform(this.__transformMatrix)
|
||||
}
|
||||
|
||||
/**
|
||||
* Not yet implemented
|
||||
*/
|
||||
ctx.prototype.drawFocusRing = function () {};
|
||||
ctx.prototype.createImageData = function () {};
|
||||
ctx.prototype.getImageData = function () {};
|
||||
ctx.prototype.putImageData = function () {};
|
||||
ctx.prototype.globalCompositeOperation = function () {};
|
||||
Context.prototype.drawFocusRing = function () {};
|
||||
Context.prototype.createImageData = function () {};
|
||||
Context.prototype.getImageData = function () {};
|
||||
Context.prototype.putImageData = function () {};
|
||||
Context.prototype.globalCompositeOperation = function () {};
|
||||
|
||||
return ctx;
|
||||
return Context;
|
||||
}());
|
||||
|
||||
@ -2,7 +2,7 @@ import Context from './context';
|
||||
|
||||
function SVGCanvasElement(options) {
|
||||
|
||||
this.ctx = new Context(100, 100);
|
||||
this.ctx = new Context(options);
|
||||
this.svg = this.ctx.__root;
|
||||
|
||||
// sync attributes to svg
|
||||
|
||||
15
utils.js
15
utils.js
@ -1,8 +1,19 @@
|
||||
const DEBUG = true;
|
||||
|
||||
function toString(obj) {
|
||||
if (!obj) {
|
||||
return obj
|
||||
}
|
||||
if (typeof obj === 'string') {
|
||||
return obj
|
||||
}
|
||||
return obj.toString()
|
||||
return obj + '';
|
||||
}
|
||||
|
||||
export {toString};
|
||||
function debug(...data) {
|
||||
if (DEBUG) {
|
||||
console.debug(...data)
|
||||
}
|
||||
}
|
||||
|
||||
export {toString, debug};
|
||||
Loading…
x
Reference in New Issue
Block a user