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

Merge pull request #1785 from asturur/fix-filter-box-for-shadows

Browse source 
Fix filter box dimensions for shadows svg export
This commit is contained in:
Juriy Zaytsev 2014-10-26 22:47:59 +01:00
commit 00b8aaaab4
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/shadow.class.js
View file

@ -110,23 +110,31 @@
* @return {String} SVG representation of a shadow
*/
toSVG: function(object) {
var mode = 'SourceAlpha';
var mode = 'SourceAlpha', fBoxX = 40, fBoxY = 40;
if (object && (object.fill === this.color || object.stroke === this.color)) {
mode = 'SourceGraphic';
}
if (object.width && object.height) {
//http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion
// we add some extra space to filter box to contain the blur ( 20 )
fBoxX = Math.abs(this.offsetX / object.getWidth()) * 100 + 20;
fBoxY = Math.abs(this.offsetY / object.getHeight()) * 100 + 20;
}
return (
'<filter id="SVGID_' + this.id + '" y="-40%" height="180%">' +
'<feGaussianBlur in="' + mode + '" stdDeviation="' +
'<filter id="SVGID_' + this.id + '" y="-' + fBoxY + '%" height="' + (100 + 2 * fBoxY) + '%" ' +
'x="-' + fBoxX + '%" width="' + (100 + 2 * fBoxX) + '%" ' + '>\n' +
'\t<feGaussianBlur in="' + mode + '" stdDeviation="' +
(this.blur ? this.blur / 3 : 0) +
'"></feGaussianBlur>' +
'<feOffset dx="' + this.offsetX + '" dy="' + this.offsetY + '"></feOffset>' +
'<feMerge>' +
'<feMergeNode></feMergeNode>' +
'<feMergeNode in="SourceGraphic"></feMergeNode>' +
'</feMerge>' +
'</filter>');
'"></feGaussianBlur>\n' +
'\t<feOffset dx="' + this.offsetX + '" dy="' + this.offsetY + '"></feOffset>\n' +
'\t<feMerge>\n' +
'\t\t<feMergeNode></feMergeNode>\n' +
'\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n' +
'\t</feMerge>\n' +
'</filter>\n');
},
/* _TO_SVG_END_ */

4
test/unit/shadow.js
View file

@ -155,10 +155,10 @@
var shadow = new fabric.Shadow({color: '#FF0000', offsetX: 10, offsetY: -10, blur: 2});
var object = new fabric.Object({fill: '#FF0000'});
equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%"><feGaussianBlur in="SourceGraphic" stdDeviation="0.6666666666666666"></feGaussianBlur><feOffset dx="10" dy="-10"></feOffset><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter>');
equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%" x="-40%" width="180%" >\n\t<feGaussianBlur in="SourceGraphic" stdDeviation="0.6666666666666666"></feGaussianBlur>\n\t<feOffset dx="10" dy="-10"></feOffset>\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n');
shadow.color = '#000000';
equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%"><feGaussianBlur in="SourceAlpha" stdDeviation="0.6666666666666666"></feGaussianBlur><feOffset dx="10" dy="-10"></feOffset><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter>');
equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%" x="-40%" width="180%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="0.6666666666666666"></feGaussianBlur>\n\t<feOffset dx="10" dy="-10"></feOffset>\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n');
});
})();