Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-26 16:34:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2069 from asturur/svgParsing

Browse source 
Parse svg with 100% dimension or missing dimensions
This commit is contained in:
Juriy Zaytsev 2015-04-06 21:24:47 +02:00
commit 506f4dfa47
2 changed files with 55 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/parser.js
View file

@ -502,12 +502,25 @@
var startTime = new Date(),
svgUid = fabric.Object.__uid++,
/* http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute
* as per spec, width and height attributes are to be considered
* 100% if no value is specified.
*/
widthAttr = parseUnit(doc.getAttribute('width') || '100%'),
heightAttr = parseUnit(doc.getAttribute('height') || '100%');
widthAttr, heightAttr, toBeParsed = false;
if (doc.getAttribute('width') && doc.getAttribute('width') !== '100%') {
widthAttr = parseUnit(doc.getAttribute('width'));
}
if (doc.getAttribute('height') && doc.getAttribute('height') !== '100%') {
heightAttr = parseUnit(doc.getAttribute('height'));
}
if (!widthAttr || !heightAttr) {
var viewBoxAttr = doc.getAttribute('viewBox');
if (viewBoxAttr && (viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))) {
widthAttr = parseFloat(viewBoxAttr[3]),
heightAttr = parseFloat(viewBoxAttr[4]);
}
else {
toBeParsed = true;
}
}
addVBTransform(doc, widthAttr, heightAttr);
@ -538,9 +551,8 @@
var options = {
width: widthAttr,
height: heightAttr,
widthAttr: widthAttr,
heightAttr: heightAttr,
svgUid: svgUid
svgUid: svgUid,
toBeParsed: toBeParsed
};
fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc);

43
src/shapes/path_group.class.js
View file

@ -46,19 +46,15 @@
options = options || { };
this.paths = paths || [ ];
for (var i = this.paths.length; i--; ) {
for (var i = this.paths.length; i--;) {
this.paths[i].group = this;
}
if (options.toBeParsed) {
this.parseDimensionsFromPaths(options);
delete options.toBeParsed;
}
this.setOptions(options);
if (options.widthAttr) {
this.scaleX = options.widthAttr / options.width;
}
if (options.heightAttr) {
this.scaleY = options.heightAttr / options.height;
}
this.setCoords();
if (options.sourcePath) {
@ -66,6 +62,35 @@
}
},
/**
* Calculate width and height based on paths contained
*/
parseDimensionsFromPaths: function(options) {
var points, p, xC = [ ], yC = [ ], path, height, width,
m = this.transformMatrix;
for (var j = this.paths.length; j--;) {
path = this.paths[j];
height = path.height + path.strokeWidth;
width = path.width + path.strokeWidth;
points = [
{ x: path.left, y: path.top },
{ x: path.left + width, y: path.top },
{ x: path.left, y: path.top + height },
{ x: path.left + width, y: path.top + height }
];
for (var i = 0; i < points.length; i++) {
p = points[i];
if (m) {
p = fabric.util.transformPoint(p, m, false);
}
xC.push(p.x);
yC.push(p.y);
}
}
options.width = Math.max.apply(null, xC);
options.height = Math.max.apply(null, yC);
},
/**
* Renders this group on a specified context
* @param {CanvasRenderingContext2D} ctx Context to render this instance on