mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-28 17:24:42 +00:00
Update svg export to do not output colors in rgba format.
This commit is contained in:
Andrea Bogazzi
parent
a9cf96b9be
commit
56ef2d2612
2 changed files with 150 additions and 122 deletions
|
|
@ -1,129 +1,145 @@
|
|||
/* _TO_SVG_START_ */
|
||||
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
||||
(function() {
|
||||
|
||||
/**
|
||||
* Returns styles-string for svg-export
|
||||
* @param {Boolean} skipShadow a boolean to skip shadow filter output
|
||||
* @return {String}
|
||||
*/
|
||||
getSvgStyles: function(skipShadow) {
|
||||
|
||||
var fill = this.fill
|
||||
? (this.fill.toLive ? 'url(#SVGID_' + this.fill.id + ')' : this.fill)
|
||||
: 'none',
|
||||
fillRule = this.fillRule,
|
||||
stroke = this.stroke
|
||||
? (this.stroke.toLive ? 'url(#SVGID_' + this.stroke.id + ')' : this.stroke)
|
||||
: 'none',
|
||||
|
||||
strokeWidth = this.strokeWidth ? this.strokeWidth : '0',
|
||||
strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none',
|
||||
strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt',
|
||||
strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter',
|
||||
strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4',
|
||||
opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1',
|
||||
|
||||
visibility = this.visible ? '' : ' visibility: hidden;',
|
||||
filter = skipShadow ? '' : this.getSvgFilter();
|
||||
|
||||
return [
|
||||
'stroke: ', stroke, '; ',
|
||||
'stroke-width: ', strokeWidth, '; ',
|
||||
'stroke-dasharray: ', strokeDashArray, '; ',
|
||||
'stroke-linecap: ', strokeLineCap, '; ',
|
||||
'stroke-linejoin: ', strokeLineJoin, '; ',
|
||||
'stroke-miterlimit: ', strokeMiterLimit, '; ',
|
||||
'fill: ', fill, '; ',
|
||||
'fill-rule: ', fillRule, '; ',
|
||||
'opacity: ', opacity, ';',
|
||||
filter,
|
||||
visibility
|
||||
].join('');
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns filter for svg shadow
|
||||
* @return {String}
|
||||
*/
|
||||
getSvgFilter: function() {
|
||||
return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : '';
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns transform-string for svg-export
|
||||
* @return {String}
|
||||
*/
|
||||
getSvgTransform: function() {
|
||||
if (this.group && this.group.type === 'path-group') {
|
||||
return '';
|
||||
function getSvgColorString(prop, value) {
|
||||
if (!value) {
|
||||
return prop + ': none; ';
|
||||
}
|
||||
var toFixed = fabric.util.toFixed,
|
||||
angle = this.getAngle(),
|
||||
skewX = (this.getSkewX() % 360),
|
||||
skewY = (this.getSkewY() % 360),
|
||||
center = this.getCenterPoint(),
|
||||
|
||||
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
|
||||
|
||||
translatePart = this.type === 'path-group' ? '' : 'translate(' +
|
||||
toFixed(center.x, NUM_FRACTION_DIGITS) +
|
||||
' ' +
|
||||
toFixed(center.y, NUM_FRACTION_DIGITS) +
|
||||
')',
|
||||
|
||||
anglePart = angle !== 0
|
||||
? (' rotate(' + toFixed(angle, NUM_FRACTION_DIGITS) + ')')
|
||||
: '',
|
||||
|
||||
scalePart = (this.scaleX === 1 && this.scaleY === 1)
|
||||
? '' :
|
||||
(' scale(' +
|
||||
toFixed(this.scaleX, NUM_FRACTION_DIGITS) +
|
||||
' ' +
|
||||
toFixed(this.scaleY, NUM_FRACTION_DIGITS) +
|
||||
')'),
|
||||
|
||||
skewXPart = skewX !== 0 ? ' skewX(' + toFixed(skewX, NUM_FRACTION_DIGITS) + ')' : '',
|
||||
|
||||
skewYPart = skewY !== 0 ? ' skewY(' + toFixed(skewY, NUM_FRACTION_DIGITS) + ')' : '',
|
||||
|
||||
addTranslateX = this.type === 'path-group' ? this.width : 0,
|
||||
|
||||
flipXPart = this.flipX ? ' matrix(-1 0 0 1 ' + addTranslateX + ' 0) ' : '',
|
||||
|
||||
addTranslateY = this.type === 'path-group' ? this.height : 0,
|
||||
|
||||
flipYPart = this.flipY ? ' matrix(1 0 0 -1 0 ' + addTranslateY + ')' : '';
|
||||
|
||||
return [
|
||||
translatePart, anglePart, scalePart, flipXPart, flipYPart, skewXPart, skewYPart
|
||||
].join('');
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns transform-string for svg-export from the transform matrix of single elements
|
||||
* @return {String}
|
||||
*/
|
||||
getSvgTransformMatrix: function() {
|
||||
return this.transformMatrix ? ' matrix(' + this.transformMatrix.join(' ') + ') ' : '';
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_createBaseSVGMarkup: function() {
|
||||
var markup = [ ];
|
||||
|
||||
if (this.fill && this.fill.toLive) {
|
||||
markup.push(this.fill.toSVG(this, false));
|
||||
else if (value.toLive) {
|
||||
return prop + ': url(#SVGID_' + value.id + '); ';
|
||||
}
|
||||
if (this.stroke && this.stroke.toLive) {
|
||||
markup.push(this.stroke.toSVG(this, false));
|
||||
else {
|
||||
var color = new fabric.Color(value),
|
||||
str = prop + ': ' + value + '; ',
|
||||
opacity = color.getAlpha();
|
||||
if (opacity !== 1) {
|
||||
//change the color in rgb + opacity
|
||||
str = prop + ': ' + color.toRgb() + '; ';
|
||||
str += prop + '-opacity: ' + opacity.toString() + '; ';
|
||||
}
|
||||
return str;
|
||||
}
|
||||
if (this.shadow) {
|
||||
markup.push(this.shadow.toSVG(this));
|
||||
}
|
||||
return markup;
|
||||
}
|
||||
});
|
||||
|
||||
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
||||
/**
|
||||
* Returns styles-string for svg-export
|
||||
* @param {Boolean} skipShadow a boolean to skip shadow filter output
|
||||
* @return {String}
|
||||
*/
|
||||
getSvgStyles: function(skipShadow) {
|
||||
|
||||
var fillRule = this.fillRule,
|
||||
strokeWidth = this.strokeWidth ? this.strokeWidth : '0',
|
||||
strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none',
|
||||
strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt',
|
||||
strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter',
|
||||
strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4',
|
||||
opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1',
|
||||
visibility = this.visible ? '' : ' visibility: hidden;',
|
||||
filter = skipShadow ? '' : this.getSvgFilter(),
|
||||
fill = getSvgColorString('fill', this.fill),
|
||||
stroke = getSvgColorString('stroke', this.stroke);
|
||||
|
||||
return [
|
||||
stroke,
|
||||
'stroke-width: ', strokeWidth, '; ',
|
||||
'stroke-dasharray: ', strokeDashArray, '; ',
|
||||
'stroke-linecap: ', strokeLineCap, '; ',
|
||||
'stroke-linejoin: ', strokeLineJoin, '; ',
|
||||
'stroke-miterlimit: ', strokeMiterLimit, '; ',
|
||||
fill,
|
||||
'fill-rule: ', fillRule, '; ',
|
||||
'opacity: ', opacity, ';',
|
||||
filter,
|
||||
visibility
|
||||
].join('');
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns filter for svg shadow
|
||||
* @return {String}
|
||||
*/
|
||||
getSvgFilter: function() {
|
||||
return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : '';
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns transform-string for svg-export
|
||||
* @return {String}
|
||||
*/
|
||||
getSvgTransform: function() {
|
||||
if (this.group && this.group.type === 'path-group') {
|
||||
return '';
|
||||
}
|
||||
var toFixed = fabric.util.toFixed,
|
||||
angle = this.getAngle(),
|
||||
skewX = (this.getSkewX() % 360),
|
||||
skewY = (this.getSkewY() % 360),
|
||||
center = this.getCenterPoint(),
|
||||
|
||||
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
|
||||
|
||||
translatePart = this.type === 'path-group' ? '' : 'translate(' +
|
||||
toFixed(center.x, NUM_FRACTION_DIGITS) +
|
||||
' ' +
|
||||
toFixed(center.y, NUM_FRACTION_DIGITS) +
|
||||
')',
|
||||
|
||||
anglePart = angle !== 0
|
||||
? (' rotate(' + toFixed(angle, NUM_FRACTION_DIGITS) + ')')
|
||||
: '',
|
||||
|
||||
scalePart = (this.scaleX === 1 && this.scaleY === 1)
|
||||
? '' :
|
||||
(' scale(' +
|
||||
toFixed(this.scaleX, NUM_FRACTION_DIGITS) +
|
||||
' ' +
|
||||
toFixed(this.scaleY, NUM_FRACTION_DIGITS) +
|
||||
')'),
|
||||
|
||||
skewXPart = skewX !== 0 ? ' skewX(' + toFixed(skewX, NUM_FRACTION_DIGITS) + ')' : '',
|
||||
|
||||
skewYPart = skewY !== 0 ? ' skewY(' + toFixed(skewY, NUM_FRACTION_DIGITS) + ')' : '',
|
||||
|
||||
addTranslateX = this.type === 'path-group' ? this.width : 0,
|
||||
|
||||
flipXPart = this.flipX ? ' matrix(-1 0 0 1 ' + addTranslateX + ' 0) ' : '',
|
||||
|
||||
addTranslateY = this.type === 'path-group' ? this.height : 0,
|
||||
|
||||
flipYPart = this.flipY ? ' matrix(1 0 0 -1 0 ' + addTranslateY + ')' : '';
|
||||
|
||||
return [
|
||||
translatePart, anglePart, scalePart, flipXPart, flipYPart, skewXPart, skewYPart
|
||||
].join('');
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns transform-string for svg-export from the transform matrix of single elements
|
||||
* @return {String}
|
||||
*/
|
||||
getSvgTransformMatrix: function() {
|
||||
return this.transformMatrix ? ' matrix(' + this.transformMatrix.join(' ') + ') ' : '';
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_createBaseSVGMarkup: function() {
|
||||
var markup = [ ];
|
||||
|
||||
if (this.fill && this.fill.toLive) {
|
||||
markup.push(this.fill.toSVG(this, false));
|
||||
}
|
||||
if (this.stroke && this.stroke.toLive) {
|
||||
markup.push(this.stroke.toSVG(this, false));
|
||||
}
|
||||
if (this.shadow) {
|
||||
markup.push(this.shadow.toSVG(this));
|
||||
}
|
||||
return markup;
|
||||
}
|
||||
});
|
||||
})();
|
||||
/* _TO_SVG_END_ */
|
||||
|
|
|
|||
|
|
@ -147,6 +147,18 @@
|
|||
equal(svg, '<rect x="-50" y="-50" rx="20" ry="30" width="100" height="100" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform="translate(50 50)"/>\n');
|
||||
});
|
||||
|
||||
test('toSVG with alpha colors fill', function() {
|
||||
var rect = new fabric.Rect({ width: 100, height: 100, strokeWidth: 0, fill: 'rgba(255, 0, 0, 0.5)' });
|
||||
var svg = rect.toSVG();
|
||||
equal(svg, '<rect x="-50" y="-50" rx="0" ry="0" width="100" height="100" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,0,0); fill-opacity: 0.5; fill-rule: nonzero; opacity: 1;" transform="translate(50 50)"/>\n');
|
||||
});
|
||||
|
||||
test('toSVG with alpha colors stroke', function() {
|
||||
var rect = new fabric.Rect({ width: 100, height: 100, strokeWidth: 0, fill: '', stroke: 'rgba(255, 0, 0, 0.5)' });
|
||||
var svg = rect.toSVG();
|
||||
equal(svg, '<rect x="-50" y="-50" rx="0" ry="0" width="100" height="100" style="stroke: rgb(255,0,0); stroke-opacity: 0.5; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(50 50)"/>\n');
|
||||
});
|
||||
|
||||
test('toObject without default values', function() {
|
||||
var options = { type: 'rect', width: 69, height: 50, left: 10, top: 20 };
|
||||
var rect = new fabric.Rect(options);
|
||||
|
|
|
|||
Loading…
Reference in a new issue