Skip to content

Commit

Permalink
Merge pull request #2399 from asturur/parse-x-y-svg-atttrs
Browse files Browse the repository at this point in the history
Parse x y svg attributes
kangax committed Aug 9, 2015
2 parents d742cc6 + cf19c6f commit 7c81f46
Showing 3 changed files with 47 additions and 23 deletions.
20 changes: 15 additions & 5 deletions src/parser.js
Original file line number Diff line number Diff line change
@@ -468,11 +468,14 @@
viewBoxWidth, viewBoxHeight, matrix, el,
widthAttr = element.getAttribute('width'),
heightAttr = element.getAttribute('height'),
x = element.getAttribute('x') || 0,
y = element.getAttribute('y') || 0,
preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '',
missingViewBox = (!viewBoxAttr || !reViewBoxTagNames.test(element.tagName)
|| !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))),
missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'),
toBeParsed = missingViewBox && missingDimAttr,
parsedDim = { };
parsedDim = { }, translateMatrix = '';

parsedDim.width = 0;
parsedDim.height = 0;
@@ -505,14 +508,21 @@
}

// default is to preserve aspect ratio
// preserveAspectRatio attribute to be implemented
scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX);
preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio);
if (preserveAspectRatio.alignX !== 'none') {
//translate all container for the effect of Mid, Min, Max
scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX);
}

if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0) {
if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) {
return parsedDim;
}

matrix = ' matrix(' + scaleX +
if (x || y) {
translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';
}

matrix = translateMatrix + ' matrix(' + scaleX +
' 0' +
' 0 ' +
scaleY + ' ' +
21 changes: 3 additions & 18 deletions src/shapes/image.class.js
Original file line number Diff line number Diff line change
@@ -589,28 +589,13 @@
*/
fabric.Image.fromElement = function(element, callback, options) {
var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES),
align = 'xMidYMid', meetOrSlice = 'meet', alignX, alignY, aspectRatioAttrs;
preserveAR;

if (parsedAttributes.preserveAspectRatio) {
aspectRatioAttrs = parsedAttributes.preserveAspectRatio.split(' ');
preserveAR = fabric.util.parsePreserveAspectRatioAttribute(parsedAttributes.preserveAspectRatio);
extend(parsedAttributes, preserveAR);
}

if (aspectRatioAttrs && aspectRatioAttrs.length) {
meetOrSlice = aspectRatioAttrs.pop();
if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') {
align = meetOrSlice;
meetOrSlice = 'meet';
}
else if (aspectRatioAttrs.length) {
align = aspectRatioAttrs.pop();
}
}
//divide align in alignX and alignY
alignX = align !== 'none' ? align.slice(1, 4) : 'none';
alignY = align !== 'none' ? align.slice(5, 8) : 'none';
parsedAttributes.alignX = alignX;
parsedAttributes.alignY = alignY;
parsedAttributes.meetOrSlice = meetOrSlice;
fabric.Image.fromURL(parsedAttributes['xlink:href'], callback,
extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
};
29 changes: 29 additions & 0 deletions src/util/misc.js
Original file line number Diff line number Diff line change
@@ -522,6 +522,35 @@
imageData = null;

return _isTransparent;
},

/**
* Parse preserveAspectRatio attribute from element
* @param {string} attribute to be parsed
* @return {Object} an object containing align and meetOrSlice attribute
*/
parsePreserveAspectRatioAttribute: function(attribute) {
var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid',
aspectRatioAttrs = attribute.split(' '), align;

if (aspectRatioAttrs && aspectRatioAttrs.length) {
meetOrSlice = aspectRatioAttrs.pop();
if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') {
align = meetOrSlice;
meetOrSlice = 'meet';
}
else if (aspectRatioAttrs.length) {
align = aspectRatioAttrs.pop();
}
}
//divide align in alignX and alignY
alignX = align !== 'none' ? align.slice(1, 4) : 'none';
alignY = align !== 'none' ? align.slice(5, 8) : 'none';
return {
meetOrSlice: meetOrSlice,
alignX: alignX,
alignY: alignY
};
}
};

0 comments on commit 7c81f46

Please sign in to comment.