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

Add support for "opacity" attribute.

Browse source
This commit is contained in:
kangax 2011-06-14 17:28:54 -04:00
parent 27c72bd634
commit e7aafae9e7
11 changed files with 44 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
dist/all.js vendored
View file

@ -7602,6 +7602,7 @@ fabric.util.animate = animate;
*/
_render: function(ctx, noTransform) {
ctx.beginPath();
ctx.globalAlpha *= this.opacity;
ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false);
ctx.closePath();
if (this.fill) {
@ -7645,7 +7646,7 @@ fabric.util.animate = animate;
* @static
* @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement
*/
fabric.Circle.ATTRIBUTE_NAMES = 'cx cy r fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Circle.ATTRIBUTE_NAMES = 'cx cy r fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* Returns {@link fabric.Circle} instance from an SVG element
@ -7847,15 +7848,16 @@ fabric.util.animate = animate;
_render: function(ctx, noTransform) {
ctx.beginPath();
ctx.save();
ctx.globalAlpha *= this.opacity;
ctx.transform(1, 0, 0, this.ry/this.rx, 0, 0);
ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.rx, 0, piBy2, false);
ctx.restore();
if (this.stroke) {
ctx.stroke();
}
if (this.fill) {
ctx.fill();
}
ctx.restore();
},
/**
@ -7873,7 +7875,7 @@ fabric.util.animate = animate;
* @static
* @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement
*/
fabric.Ellipse.ATTRIBUTE_NAMES = 'cx cy rx ry fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Ellipse.ATTRIBUTE_NAMES = 'cx cy rx ry fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* Returns {@link fabric.Ellipse} instance from an SVG element
@ -7988,6 +7990,8 @@ fabric.util.animate = animate;
h = this.height;
ctx.beginPath();
ctx.globalAlpha *= this.opacity;
ctx.moveTo(x+rx, y);
ctx.lineTo(x+w-rx, y);
ctx.bezierCurveTo(x+w, y, x+w, y+ry, x+w, y+ry);
@ -8031,7 +8035,7 @@ fabric.util.animate = animate;
* List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
* @static
*/
fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* @private
@ -8165,7 +8169,7 @@ fabric.util.animate = animate;
* @static
* @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement
*/
fabric.Polyline.ATTRIBUTE_NAMES = 'fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Polyline.ATTRIBUTE_NAMES = 'fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* Returns fabric.Polyline instance from an SVG element
@ -8314,7 +8318,7 @@ fabric.util.animate = animate;
* @static
* @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement
*/
fabric.Polygon.ATTRIBUTE_NAMES = 'fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Polygon.ATTRIBUTE_NAMES = 'fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* Returns fabric.Polygon instance from an SVG element
@ -8840,7 +8844,7 @@ fabric.util.animate = animate;
* @static
* @see http://www.w3.org/TR/SVG/paths.html#PathElement
*/
fabric.Path.ATTRIBUTE_NAMES = 'd fill fill-opacity fill-rule stroke stroke-width transform'.split(' ');
fabric.Path.ATTRIBUTE_NAMES = 'd fill fill-opacity opacity fill-rule stroke stroke-width transform'.split(' ');
/**
* Creates an instance of fabric.Path from an SVG <path> element
@ -10219,7 +10223,7 @@ fabric.util.animate = animate;
* @static
* @see http://www.w3.org/TR/SVG/struct.html#ImageElement
*/
fabric.Image.ATTRIBUTE_NAMES = 'x y width height fill fill-opacity stroke stroke-width transform xlink:href'.split(' ');
fabric.Image.ATTRIBUTE_NAMES = 'x y width height fill fill-opacity opacity stroke stroke-width transform xlink:href'.split(' ');
/**
* Returns {@link fabric.Image} instance from an SVG element

4
src/circle.class.js
View file

@ -59,6 +59,8 @@
*/
_render: function(ctx, noTransform) {
ctx.beginPath();
// multiply by currently set alpha (the one that was set by path group where this object is contained, for example)
ctx.globalAlpha *= this.opacity;
ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false);
ctx.closePath();
if (this.fill) {
@ -102,7 +104,7 @@
* @static
* @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement
*/
fabric.Circle.ATTRIBUTE_NAMES = 'cx cy r fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Circle.ATTRIBUTE_NAMES = 'cx cy r fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* Returns {@link fabric.Circle} instance from an SVG element

5
src/ellipse.class.js
View file

@ -75,15 +75,16 @@
_render: function(ctx, noTransform) {
ctx.beginPath();
ctx.save();
ctx.globalAlpha *= this.opacity;
ctx.transform(1, 0, 0, this.ry/this.rx, 0, 0);
ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.rx, 0, piBy2, false);
ctx.restore();
if (this.stroke) {
ctx.stroke();
}
if (this.fill) {
ctx.fill();
}
ctx.restore();
},
/**
@ -101,7 +102,7 @@
* @static
* @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement
*/
fabric.Ellipse.ATTRIBUTE_NAMES = 'cx cy rx ry fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Ellipse.ATTRIBUTE_NAMES = 'cx cy rx ry fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* Returns {@link fabric.Ellipse} instance from an SVG element

2
src/image.class.js
View file

@ -409,7 +409,7 @@
* @static
* @see http://www.w3.org/TR/SVG/struct.html#ImageElement
*/
fabric.Image.ATTRIBUTE_NAMES = 'x y width height fill fill-opacity stroke stroke-width transform xlink:href'.split(' ');
fabric.Image.ATTRIBUTE_NAMES = 'x y width height fill fill-opacity opacity stroke stroke-width transform xlink:href'.split(' ');
/**
* Returns {@link fabric.Image} instance from an SVG element

2
src/path.class.js
View file

@ -501,7 +501,7 @@
* @static
* @see http://www.w3.org/TR/SVG/paths.html#PathElement
*/
fabric.Path.ATTRIBUTE_NAMES = 'd fill fill-opacity fill-rule stroke stroke-width transform'.split(' ');
fabric.Path.ATTRIBUTE_NAMES = 'd fill fill-opacity opacity fill-rule stroke stroke-width transform'.split(' ');
/**
* Creates an instance of fabric.Path from an SVG <path> element

2
src/polygon.class.js
View file

@ -108,7 +108,7 @@
* @static
* @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement
*/
fabric.Polygon.ATTRIBUTE_NAMES = 'fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Polygon.ATTRIBUTE_NAMES = 'fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* Returns fabric.Polygon instance from an SVG element

2
src/polyline.class.js
View file

@ -89,7 +89,7 @@
* @static
* @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement
*/
fabric.Polyline.ATTRIBUTE_NAMES = 'fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Polyline.ATTRIBUTE_NAMES = 'fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* Returns fabric.Polyline instance from an SVG element

4
src/rect.class.js
View file

@ -81,6 +81,8 @@
h = this.height;
ctx.beginPath();
ctx.globalAlpha *= this.opacity;
ctx.moveTo(x+rx, y);
ctx.lineTo(x+w-rx, y);
ctx.bezierCurveTo(x+w, y, x+w, y+ry, x+w, y+ry);
@ -126,7 +128,7 @@
* List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
* @static
*/
fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity stroke stroke-width transform'.split(' ');
fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* @private

5
test/demo/assets/103.svg Normal file
View file

@ -0,0 +1,5 @@
<svg version="1.1" id="testSVG3" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" space="preserve">
<circle fill="red" opacity="0.5" r="25"></circle>
<rect fill="green" opacity="0.5" width="70" height="70"></rect>
<ellipse fill="pink" rx="100" ry="50" opacity="0.5"></ellipse>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 379 B

1
test/demo/index.html
View file

@ -156,6 +156,7 @@
<li><button class="shape" id="shape44"><strong>22375</strong> paths</button></li>
<li><button class="shape" id="shape72"><strong>29303</strong> paths</button></li>
<li><button class="shape" id="shape48"><strong>41787</strong> paths</button></li>
<li><button class="shape" id="shape103"><strong>xxx</strong> paths</button></li>
<!-- <li><button class="shape" id="shape100"><strong>x</strong> paths</button></li> -->
</ul>

13
test/unit/parser.js
View file

@ -280,4 +280,17 @@
}, 1500);
});
test('opacity attribute', function() {
var tagNames = ['rect', 'path', 'circle', 'ellipse', 'polygon'];
for (var i = tagNames.length; i--; ) {
var el = document.createElement(tagNames[i]);
var opacityValue = Math.random().toFixed(2);
el.setAttribute('opacity', opacityValue);
var obj = fabric.Rect.fromElement(el);
equals(parseFloat(opacityValue), obj.opacity,
'opacity should be parsed correctly from "opacity" attribute of ' + tagNames[i] + ' element');
}
});
})();