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

Merge pull request #38 from FuZhenn/master

Browse Source 
Fix drawImage and add new __clearCanvas
This commit is contained in:
Gabriel Hernandez 2016-01-05 12:41:24 -08:00
commit 093bedd087
1 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
canvas2svg.js
View File

@ -447,6 +447,10 @@
*/
ctx.prototype.restore = function(){
this.__currentElement = this.__groupStack.pop();
//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);
@ -776,10 +780,38 @@
};
/**
* Clear entire canvas:
* 1. save current transforms
* 2. remove all the childNodes of the root g element
*/
ctx.prototype.__clearCanvas = function() {
var current = this.__closestGroupOrSvg(),
transform = current.getAttribute("transform");
var rootGroup = this.__root.childNodes[1];
var childNodes = rootGroup.childNodes;
for (var i = childNodes.length - 1; i >= 0; i--) {
if (childNodes[i]) {
rootGroup.removeChild(childNodes[i]);
}
}
this.__currentElement = rootGroup;
//reset __groupStack as all the child group nodes are all removed.
this.__groupStack = [];
if (transform) {
this.__addTransform(transform);
}
};
/**
* "Clears" a canvas by just drawing a white rectangle in the current group.
*/
ctx.prototype.clearRect = function(x, y, width, height) {
//clear entire canvas
if (x === 0 && y === 0 && width === this.width && height === this.height) {
this.__clearCanvas();
return;
}
var rect, parent = this.__closestGroupOrSvg();
rect = this.__createElement("rect", {
x : x,
@ -1039,11 +1071,11 @@
parent = this.__closestGroupOrSvg();
currentElement = this.__currentElement;
var translateDirective = "translate(" + dx + ", " + dy + ")";
if(image instanceof ctx) {
//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();
svg = image.getSvg().cloneNode(true);
if (svg.childNodes && svg.childNodes.length > 1) {
defs = svg.childNodes[0];
while(defs.childNodes.length) {
@ -1053,10 +1085,16 @@
}
group = svg.childNodes[1];
if (group) {
//save original transform
var originTransform = group.getAttribute("transform");
var transformDirective;
if (originTransform) {
transformDirective = originTransform+" "+translateDirective;
} else {
transformDirective = translateDirective;
}
group.setAttribute("transform", transformDirective);
parent.appendChild(group);
this.__currentElement = group;
this.translate(dx, dy);
this.__currentElement = currentElement;
}
}
} else if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {
@ -1075,13 +1113,10 @@
context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
image = canvas;
}
svgImage.setAttribute("transform", translateDirective);
svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
parent.appendChild(svgImage);
this.__currentElement = svgImage;
this.translate(dx, dy);
this.__currentElement = currentElement;
}
};