evert/svgcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Zeno Zeng 2022-02-04 10:05:16 +08:00
parent bc805cfb63
commit 35b9c08c5f
4 changed files with 108 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -28,6 +28,12 @@ const mySerializedSVG = ctx.getSerializedSvg();
## CHANGELOG ## CHANGELOG
## v2.1.0
- feat: SVGCanvasElement(options)
- feat: options.debug
- refactor
### v2.0.7 ### v2.0.7
- fix typo - fix typo

154
context.js
View File

@ -18,7 +18,7 @@ import * as utils from './utils';
export default (function () { export default (function () {
"use strict"; "use strict";
var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities; var STYLES, Context, CanvasGradient, CanvasPattern, namedEntities;
//helper function to format a string //helper function to format a string
function format(str, args) { function format(str, args) {
@ -196,8 +196,7 @@ export default (function () {
CanvasGradient.prototype.addColorStop = function (offset, color) { CanvasGradient.prototype.addColorStop = function (offset, color) {
var stop = this.__ctx.__createElement("stop"), regex, matches; var stop = this.__ctx.__createElement("stop"), regex, matches;
stop.setAttribute("offset", offset); stop.setAttribute("offset", offset);
color = utils.toString(color); if (utils.toString(color).indexOf("rgba") !== -1) {
if (color.indexOf("rgba") !== -1) {
//separate alpha value, since webkit can't handle it //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; regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
matches = regex.exec(color); matches = regex.exec(color);
@ -223,7 +222,8 @@ export default (function () {
* enableMirroring - enables canvas mirroring (get image data) (defaults to false) * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
* document - the document object (defaults to the current document) * document - the document object (defaults to the current document)
*/ */
ctx = function (o) { Context = function (o) {
var defaultOptions = { width:500, height:500, enableMirroring : false}, options; var defaultOptions = { width:500, height:500, enableMirroring : false}, options;
//keep support for this way of calling C2S: new C2S(width,height) //keep support for this way of calling C2S: new C2S(width,height)
@ -237,9 +237,9 @@ export default (function () {
options = o; options = o;
} }
if (!(this instanceof ctx)) { if (!(this instanceof Context)) {
//did someone call this without new? //did someone call this without new?
return new ctx(options); return new Context(options);
} }
//setup options //setup options
@ -260,7 +260,7 @@ export default (function () {
} }
this.__setDefaultStyles(); this.__setDefaultStyles();
this.__stack = [this.__getStyleState()]; this.__styleStack = [this.__getStyleState()];
this.__groupStack = []; this.__groupStack = [];
//the root svg element //the root svg element
@ -284,14 +284,30 @@ export default (function () {
// init transformation matrix // init transformation matrix
this.resetTransform(); 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 * Creates the specified svg element
* @private * @private
*/ */
ctx.prototype.__createElement = function (elementName, properties, resetFill) { Context.prototype.__createElement = function (elementName, properties, resetFill) {
if (typeof properties === "undefined") { if (typeof properties === "undefined") {
properties = {}; properties = {};
} }
@ -314,7 +330,7 @@ export default (function () {
* Applies default canvas styles to the context * Applies default canvas styles to the context
* @private * @private
*/ */
ctx.prototype.__setDefaultStyles = function () { Context.prototype.__setDefaultStyles = function () {
//default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/ //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
var keys = Object.keys(STYLES), i, key; var keys = Object.keys(STYLES), i, key;
for (i=0; i<keys.length; i++) { for (i=0; i<keys.length; i++) {
@ -328,7 +344,7 @@ export default (function () {
* @param styleState * @param styleState
* @private * @private
*/ */
ctx.prototype.__applyStyleState = function (styleState) { Context.prototype.__applyStyleState = function (styleState) {
var keys = Object.keys(styleState), i, key; var keys = Object.keys(styleState), i, key;
for (i=0; i<keys.length; i++) { for (i=0; i<keys.length; i++) {
key = keys[i]; key = keys[i];
@ -341,7 +357,7 @@ export default (function () {
* @return {Object} * @return {Object}
* @private * @private
*/ */
ctx.prototype.__getStyleState = function () { Context.prototype.__getStyleState = function () {
var i, styleState = {}, keys = Object.keys(STYLES), key; var i, styleState = {}, keys = Object.keys(STYLES), key;
for (i=0; i<keys.length; i++) { for (i=0; i<keys.length; i++) {
key = keys[i]; key = keys[i];
@ -353,7 +369,7 @@ export default (function () {
/** /**
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform * @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(); const {a, b, c, d, e, f} = matrix || this.getTransform();
element.setAttribute('transform', `matrix(${a} ${b} ${c} ${d} ${e} ${f})`) element.setAttribute('transform', `matrix(${a} ${b} ${c} ${d} ${e} ${f})`)
} }
@ -363,7 +379,7 @@ export default (function () {
* @param type * @param type
* @private * @private
*/ */
ctx.prototype.__applyStyleToCurrentElement = function (type) { Context.prototype.__applyStyleToCurrentElement = function (type) {
var currentElement = this.__currentElement; var currentElement = this.__currentElement;
var currentStyleGroup = this.__currentElementsToStyle; var currentStyleGroup = this.__currentElementsToStyle;
if (currentStyleGroup) { if (currentStyleGroup) {
@ -397,7 +413,7 @@ export default (function () {
//gradient //gradient
currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")})); currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
} else if (style.apply.indexOf(type)!==-1 && style.svg !== value) { } 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 //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; regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
matches = regex.exec(value); matches = regex.exec(value);
@ -430,7 +446,7 @@ export default (function () {
* Will return the closest group or svg node. May return the current element. * Will return the closest group or svg node. May return the current element.
* @private * @private
*/ */
ctx.prototype.__closestGroupOrSvg = function (node) { Context.prototype.__closestGroupOrSvg = function (node) {
node = node || this.__currentElement; node = node || this.__currentElement;
if (node.nodeName === "g" || node.nodeName === "svg") { if (node.nodeName === "g" || node.nodeName === "svg") {
return node; 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. * If true, we attempt to find all named entities and encode it as a numeric entity.
* @return serialized svg * @return serialized svg
*/ */
ctx.prototype.getSerializedSvg = function (fixNamedEntities) { Context.prototype.getSerializedSvg = function (fixNamedEntities) {
var serialized = new XMLSerializer().serializeToString(this.__root), var serialized = new XMLSerializer().serializeToString(this.__root),
keys, i, key, value, regexp, xmlns; keys, i, key, value, regexp, xmlns;
@ -476,20 +492,23 @@ export default (function () {
* Returns the root svg * Returns the root svg
* @return * @return
*/ */
ctx.prototype.getSvg = function () { Context.prototype.getSvg = function () {
return this.__root; return this.__root;
}; };
/** /**
* Will generate a group tag. * Will generate a group tag.
*/ */
ctx.prototype.save = function () { Context.prototype.save = function () {
var group = this.__createElement("g"); var group = this.__createElement("g");
var parent = this.__closestGroupOrSvg(); var parent = this.__closestGroupOrSvg();
this.__groupStack.push(parent); this.__groupStack.push(parent);
parent.appendChild(group); parent.appendChild(group);
this.__currentElement = 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) { if (!this.__transformMatrixStack) {
this.__transformMatrixStack = []; this.__transformMatrixStack = [];
} }
@ -499,24 +518,26 @@ export default (function () {
/** /**
* Sets current element to parent, or just root if already root * 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.__currentElement = this.__groupStack.pop();
this.__currentElementsToStyle = null; this.__currentElementsToStyle = null;
//Clearing canvas will make the poped group invalid, currentElement is set to the root group node. //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
if (!this.__currentElement) { if (!this.__currentElement) {
this.__currentElement = this.__root.childNodes[1]; this.__currentElement = this.__root.childNodes[1];
} }
var state = this.__stack.pop(); var state = this.__styleStack.pop();
this.__debug('restore style', state);
this.__applyStyleState(state); this.__applyStyleState(state);
if (this.__transformMatrixStack && this.__transformMatrixStack.length > 0) { if (this.__transformMatrixStack && this.__transformMatrixStack.length > 0) {
this.setTransform(this.__transformMatrixStack.pop()) this.setTransform(this.__transformMatrixStack.pop())
} }
}; };
/** /**
* Create a new Path Element * Create a new Path Element
*/ */
ctx.prototype.beginPath = function () { Context.prototype.beginPath = function () {
var path, parent; var path, parent;
// Note that there is only one current default path, it is not part of the drawing state. // 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 * Helper function to apply currentDefaultPath to current path element
* @private * @private
*/ */
ctx.prototype.__applyCurrentDefaultPath = function () { Context.prototype.__applyCurrentDefaultPath = function () {
var currentElement = this.__currentElement; var currentElement = this.__currentElement;
if (currentElement.nodeName === "path") { if (currentElement.nodeName === "path") {
currentElement.setAttribute("d", this.__currentDefaultPath); currentElement.setAttribute("d", this.__currentDefaultPath);
@ -547,7 +568,7 @@ export default (function () {
* Helper function to add path command * Helper function to add path command
* @private * @private
*/ */
ctx.prototype.__addPathCommand = function (command) { Context.prototype.__addPathCommand = function (command) {
this.__currentDefaultPath += " "; this.__currentDefaultPath += " ";
this.__currentDefaultPath += command; this.__currentDefaultPath += command;
}; };
@ -556,7 +577,7 @@ export default (function () {
* Adds the move command to the current path element, * Adds the move command to the current path element,
* if the currentPathElement is not empty create a new 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") { if (this.__currentElement.nodeName !== "path") {
this.beginPath(); this.beginPath();
} }
@ -572,7 +593,7 @@ export default (function () {
/** /**
* Closes the current path * Closes the current path
*/ */
ctx.prototype.closePath = function () { Context.prototype.closePath = function () {
if (this.__currentDefaultPath) { if (this.__currentDefaultPath) {
this.__addPathCommand("Z"); this.__addPathCommand("Z");
} }
@ -581,7 +602,7 @@ export default (function () {
/** /**
* Adds a line to command * Adds a line to command
*/ */
ctx.prototype.lineTo = function (x, y) { Context.prototype.lineTo = function (x, y) {
this.__currentPosition = {x: x, y: y}; this.__currentPosition = {x: x, y: y};
if (this.__currentDefaultPath.indexOf('M') > -1) { if (this.__currentDefaultPath.indexOf('M') > -1) {
this.__addPathCommand(format("L {x} {y}", { this.__addPathCommand(format("L {x} {y}", {
@ -599,7 +620,7 @@ export default (function () {
/** /**
* Add a bezier command * 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.__currentPosition = {x: x, y: y};
this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}", this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
{ {
@ -615,7 +636,7 @@ export default (function () {
/** /**
* Adds a quadratic curve to command * 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.__currentPosition = {x: x, y: y};
this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", { this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {
cpx: this.__matrixTransform(cpx, cpy).x, 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 * @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. // Let the point (x0, y0) be the last point in the subpath.
var x0 = this.__currentPosition && this.__currentPosition.x; var x0 = this.__currentPosition && this.__currentPosition.x;
var y0 = this.__currentPosition && this.__currentPosition.y; var y0 = this.__currentPosition && this.__currentPosition.y;
@ -730,7 +751,7 @@ export default (function () {
/** /**
* Sets the stroke property on the current element * Sets the stroke property on the current element
*/ */
ctx.prototype.stroke = function () { Context.prototype.stroke = function () {
if (this.__currentElement.nodeName === "path") { if (this.__currentElement.nodeName === "path") {
this.__currentElement.setAttribute("paint-order", "fill stroke markers"); this.__currentElement.setAttribute("paint-order", "fill stroke markers");
} }
@ -741,7 +762,8 @@ export default (function () {
/** /**
* Sets fill properties on the current element * 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") { if (this.__currentElement.nodeName === "path") {
this.__currentElement.setAttribute("paint-order", "stroke fill markers"); this.__currentElement.setAttribute("paint-order", "stroke fill markers");
} }
@ -752,7 +774,7 @@ export default (function () {
/** /**
* Adds a rectangle to the path. * 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") { if (this.__currentElement.nodeName !== "path") {
this.beginPath(); this.beginPath();
} }
@ -768,7 +790,7 @@ export default (function () {
/** /**
* adds a rectangle element * 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(); 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])) { if (JSON.stringify([a, b, c, d, e, f]) === JSON.stringify([1, 0, 0, 1, 0, 0])) {
//clear entire canvas //clear entire canvas
@ -797,7 +819,7 @@ export default (function () {
* @param width * @param width
* @param height * @param height
*/ */
ctx.prototype.strokeRect = function (x, y, width, height) { Context.prototype.strokeRect = function (x, y, width, height) {
var rect, parent; var rect, parent;
rect = this.__createElement("rect", { rect = this.__createElement("rect", {
x : x, x : x,
@ -818,7 +840,7 @@ export default (function () {
* 1. save current transforms * 1. save current transforms
* 2. remove all the childNodes of the root g element * 2. remove all the childNodes of the root g element
*/ */
ctx.prototype.__clearCanvas = function () { Context.prototype.__clearCanvas = function () {
var rootGroup = this.__root.childNodes[1]; var rootGroup = this.__root.childNodes[1];
this.__root.removeChild(rootGroup); this.__root.removeChild(rootGroup);
this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g"); 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. * "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(); 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])) { if (JSON.stringify([a, b, c, d, e, f]) === JSON.stringify([1, 0, 0, 1, 0, 0])) {
//clear entire canvas //clear entire canvas
@ -855,7 +877,7 @@ export default (function () {
* Adds a linear gradient to a defs tag. * Adds a linear gradient to a defs tag.
* Returns a canvas gradient object that has a reference to it's parent def * 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", { var grad = this.__createElement("linearGradient", {
id : randomString(this.__ids), id : randomString(this.__ids),
x1 : x1+"px", x1 : x1+"px",
@ -872,7 +894,7 @@ export default (function () {
* Adds a radial gradient to a defs tag. * Adds a radial gradient to a defs tag.
* Returns a canvas gradient object that has a reference to it's parent def * 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", { var grad = this.__createElement("radialGradient", {
id : randomString(this.__ids), id : randomString(this.__ids),
cx : x1+"px", cx : x1+"px",
@ -891,7 +913,7 @@ export default (function () {
* Parses the font string and returns svg mapping * Parses the font string and returns svg mapping
* @private * @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 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 fontPart = regex.exec( this.font );
var data = { var data = {
@ -923,7 +945,7 @@ export default (function () {
* @return {*} * @return {*}
* @private * @private
*/ */
ctx.prototype.__wrapTextLink = function (font, element) { Context.prototype.__wrapTextLink = function (font, element) {
if (font.href) { if (font.href) {
var a = this.__createElement("a"); var a = this.__createElement("a");
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href); a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
@ -941,7 +963,7 @@ export default (function () {
* @param action - stroke or fill * @param action - stroke or fill
* @private * @private
*/ */
ctx.prototype.__applyText = function (text, x, y, action) { Context.prototype.__applyText = function (text, x, y, action) {
var font = this.__parseFont(), var font = this.__parseFont(),
parent = this.__closestGroupOrSvg(), parent = this.__closestGroupOrSvg(),
textElement = this.__createElement("text", { textElement = this.__createElement("text", {
@ -969,7 +991,7 @@ export default (function () {
* @param x * @param x
* @param y * @param y
*/ */
ctx.prototype.fillText = function (text, x, y) { Context.prototype.fillText = function (text, x, y) {
this.__applyText(text, x, y, "fill"); this.__applyText(text, x, y, "fill");
}; };
@ -979,7 +1001,7 @@ export default (function () {
* @param x * @param x
* @param y * @param y
*/ */
ctx.prototype.strokeText = function (text, x, y) { Context.prototype.strokeText = function (text, x, y) {
this.__applyText(text, x, y, "stroke"); this.__applyText(text, x, y, "stroke");
}; };
@ -988,7 +1010,7 @@ export default (function () {
* @param text * @param text
* @return {TextMetrics} * @return {TextMetrics}
*/ */
ctx.prototype.measureText = function (text) { Context.prototype.measureText = function (text) {
this.__ctx.font = this.font; this.__ctx.font = this.font;
return this.__ctx.measureText(text); return this.__ctx.measureText(text);
}; };
@ -996,7 +1018,7 @@ export default (function () {
/** /**
* Arc command! * 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. // in canvas no circle is drawn if no angle is provided.
if (startAngle === endAngle) { if (startAngle === endAngle) {
return; return;
@ -1044,7 +1066,7 @@ export default (function () {
/** /**
* Generates a ClipPath from the clip command. * Generates a ClipPath from the clip command.
*/ */
ctx.prototype.clip = function () { Context.prototype.clip = function () {
var group = this.__closestGroupOrSvg(), var group = this.__closestGroupOrSvg(),
clipPath = this.__createElement("clipPath"), clipPath = this.__createElement("clipPath"),
id = randomString(this.__ids), 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. * 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 * 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 //convert arguments to a real array
var args = Array.prototype.slice.call(arguments), var args = Array.prototype.slice.call(arguments),
image=args[0], image=args[0],
@ -1110,7 +1132,7 @@ export default (function () {
parent = this.__closestGroupOrSvg(); parent = this.__closestGroupOrSvg();
currentElement = this.__currentElement; currentElement = this.__currentElement;
const matrix = this.getTransform().translate(dx, dy); 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. //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. //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
svg = image.getSvg().cloneNode(true); svg = image.getSvg().cloneNode(true);
@ -1153,7 +1175,7 @@ export default (function () {
/** /**
* Generates a pattern tag * 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), var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
img; img;
pattern.setAttribute("id", id); pattern.setAttribute("id", id);
@ -1172,14 +1194,14 @@ export default (function () {
image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src")); image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
pattern.appendChild(img); pattern.appendChild(img);
this.__defs.appendChild(pattern); this.__defs.appendChild(pattern);
} else if (image instanceof ctx) { } else if (image instanceof Context) {
pattern.appendChild(image.__root.childNodes[1]); pattern.appendChild(image.__root.childNodes[1]);
this.__defs.appendChild(pattern); this.__defs.appendChild(pattern);
} }
return new CanvasPattern(pattern, this); return new CanvasPattern(pattern, this);
}; };
ctx.prototype.setLineDash = function (dashArray) { Context.prototype.setLineDash = function (dashArray) {
if (dashArray && dashArray.length > 0) { if (dashArray && dashArray.length > 0) {
this.lineDash = dashArray.join(","); this.lineDash = dashArray.join(",");
} else { } else {
@ -1193,7 +1215,7 @@ export default (function () {
* *
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform * @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) { if (a instanceof DOMMatrix) {
this.__transformMatrix = new DOMMatrix([a.a, a.b, a.c, a.d, a.e, a.f]); this.__transformMatrix = new DOMMatrix([a.a, a.b, a.c, a.d, a.e, a.f]);
} else { } else {
@ -1207,7 +1229,7 @@ export default (function () {
* *
* @returns A DOMMatrix Object * @returns A DOMMatrix Object
*/ */
ctx.prototype.getTransform = function () { Context.prototype.getTransform = function () {
let {a, b, c, d, e, f} = this.__transformMatrix; let {a, b, c, d, e, f} = this.__transformMatrix;
return new DOMMatrix([a, b, c, d, e, f]); 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 * @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); 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. * @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 * @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) { if (y === undefined) {
y = x; y = x;
} }
@ -1247,7 +1269,7 @@ export default (function () {
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate
* @see https://www.w3.org/TR/css-transforms-1 * @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([ let matrix = this.getTransform().multiply(new DOMMatrix([
Math.cos(angle), Math.cos(angle),
Math.sin(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. * @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 * @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); const matrix = this.getTransform().translate(x, y);
this.setTransform(matrix); this.setTransform(matrix);
}; };
@ -1277,23 +1299,23 @@ export default (function () {
* *
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform * @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])); const matrix = this.getTransform().multiply(new DOMMatrix([a, b, c, d, e, f]));
this.setTransform(matrix); this.setTransform(matrix);
}; };
ctx.prototype.__matrixTransform = function(x, y) { Context.prototype.__matrixTransform = function(x, y) {
return new DOMPoint(x, y).matrixTransform(this.__transformMatrix) return new DOMPoint(x, y).matrixTransform(this.__transformMatrix)
} }
/** /**
* Not yet implemented * Not yet implemented
*/ */
ctx.prototype.drawFocusRing = function () {}; Context.prototype.drawFocusRing = function () {};
ctx.prototype.createImageData = function () {}; Context.prototype.createImageData = function () {};
ctx.prototype.getImageData = function () {}; Context.prototype.getImageData = function () {};
ctx.prototype.putImageData = function () {}; Context.prototype.putImageData = function () {};
ctx.prototype.globalCompositeOperation = function () {}; Context.prototype.globalCompositeOperation = function () {};
return ctx; return Context;
}()); }());

2
element.js
View File

@ -2,7 +2,7 @@ import Context from './context';
function SVGCanvasElement(options) { function SVGCanvasElement(options) {
this.ctx = new Context(100, 100); this.ctx = new Context(options);
this.svg = this.ctx.__root; this.svg = this.ctx.__root;
// sync attributes to svg // sync attributes to svg

15
utils.js
View File

@ -1,8 +1,19 @@
const DEBUG = true;
function toString(obj) { function toString(obj) {
if (!obj) {
return obj
}
if (typeof obj === 'string') { if (typeof obj === 'string') {
return obj return obj
} }
return obj.toString() return obj + '';
} }
export {toString}; function debug(...data) {
if (DEBUG) {
console.debug(...data)
}
}
export {toString, debug};