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

Merge pull request #48 from mudcube/master

Browse Source 
Fixes for a few errors being thrown
This commit is contained in:
Tom Kapanka 2017-06-07 16:59:21 -07:00 committed by GitHub
commit 6d09433261
1 changed files with 131 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
canvas2svg.js
View File

@ -219,7 +219,6 @@
* document - the document object (defaults to the current document)
*/
ctx = function (o) {
var defaultOptions = { width:500, height:500, enableMirroring : false}, options;
//keep support for this way of calling C2S: new C2S(width,height)
@ -349,13 +348,23 @@
* @private
*/
ctx.prototype.__applyStyleToCurrentElement = function (type) {
var currentElement = this.__currentElement;
var currentStyleGroup = this.__currentElementsToStyle;
if (currentStyleGroup) {
currentElement.setAttribute(type, "");
currentElement = currentStyleGroup.element;
currentStyleGroup.children.forEach(function (node) {
node.setAttribute(type, "");
})
}
var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
for (i = 0; i < keys.length; i++) {
style = STYLES[keys[i]];
value = this[keys[i]];
if (style.apply) {
//is this a gradient or pattern?
if(style.apply.indexOf("fill")!==-1 && value instanceof CanvasPattern) {
if (value instanceof CanvasPattern) {
//pattern
if (value.__ctx) {
//copy over defs
@ -365,42 +374,39 @@
this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
}
}
this.__currentElement.setAttribute("fill", 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("fill")!==-1 && value instanceof CanvasGradient) {
else if (value instanceof CanvasGradient) {
//gradient
this.__currentElement.setAttribute("fill", 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) {
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);
this.__currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
//should take globalAlpha here
var opacity = matches[4];
var globalAlpha = this.globalAlpha;
if (globalAlpha != null) {
opacity *= globalAlpha;
}
this.__currentElement.setAttribute(style.svgAttr+"-opacity", opacity);
currentElement.setAttribute(style.svgAttr+"-opacity", opacity);
} else {
var attr = style.svgAttr;
if (keys[i] === 'globalAlpha') {
attr = type+'-'+style.svgAttr;
if (this.__currentElement.getAttribute(attr)) {
if (currentElement.getAttribute(attr)) {
//fill-opacity or stroke-opacity has already been set by stroke or fill.
continue;
}
}
//otherwise only update attribute if right type, and not svg default
this.__currentElement.setAttribute(attr, value);
currentElement.setAttribute(attr, value);
}
}
}
}
};
/**
@ -460,7 +466,8 @@
* Will generate a group tag.
*/
ctx.prototype.save = function () {
var group = this.__createElement("g"), parent = this.__closestGroupOrSvg();
var group = this.__createElement("g");
var parent = this.__closestGroupOrSvg();
this.__groupStack.push(parent);
parent.appendChild(group);
this.__currentElement = group;
@ -471,13 +478,13 @@
*/
ctx.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();
this.__applyStyleState(state);
};
/**
@ -485,10 +492,15 @@
* @private
*/
ctx.prototype.__addTransform = function (t) {
//if the current element has siblings, add another group
var parent = this.__closestGroupOrSvg();
if (parent.childNodes.length > 0) {
if (this.__currentElement.nodeName === "path") {
if (!this.__currentElementsToStyle) this.__currentElementsToStyle = {element: parent, children: []};
this.__currentElementsToStyle.children.push(this.__currentElement)
this.__applyCurrentDefaultPath();
}
var group = this.__createElement("g");
parent.appendChild(group);
this.__currentElement = group;
@ -558,11 +570,11 @@
* @private
*/
ctx.prototype.__applyCurrentDefaultPath = function () {
if(this.__currentElement.nodeName === "path") {
var d = this.__currentDefaultPath;
this.__currentElement.setAttribute("d", d);
var currentElement = this.__currentElement;
if (currentElement.nodeName === "path") {
currentElement.setAttribute("d", this.__currentDefaultPath);
} else {
throw new Error("Attempted to apply path command to node " + this.__currentElement.nodeName);
console.error("Attempted to apply path command to node", currentElement.nodeName);
}
};
@ -593,7 +605,9 @@
* Closes the current path
*/
ctx.prototype.closePath = function () {
if (this.__currentDefaultPath) {
this.__addPathCommand("Z");
}
};
/**
@ -888,7 +902,7 @@
* @private
*/
ctx.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-z]+?)\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 data = {
style : fontPart[1] || 'normal',