fabric.js/src/circle.class.js
Kienz 4c4f845bfe [BACK_INCOMPAT] Implement fabric.Gradient#toSVG() and radialGradient
- Implement radial gradient and expand linear gradient (stop-opacity should now take into account)
- Gradients should now be included in the SVG output for the following fabric objects: circle, ellipse, line, path, polygon, polyline, rect and triangle (text is not yet implemented)
- Gradients (linear / radial) can be applied to stroke or fill property => change setGradientFill(options) to setGradient(type, options)
- Change toObject() that linear and radial gradients can be serialized
- Expand fabric.Color by 16 basic colors fabric.Color.colorNameMap => gradients with e.g. stop-color="blue" and stop-opacity="0.5 can be converted to RGBA color
- RGBA colors in svg has no affect (convert to RGB color), only stop-opacity has affect to color opacity
- Attached some test svg files http://kienzle.geschaeft.s3.amazonaws.com/projects/fabricjs/gradients/gradients.rar
2013-02-23 17:02:52 +01:00

195 lines
No EOL
5.4 KiB
JavaScript

(function(global) {
"use strict";
var fabric = global.fabric || (global.fabric = { }),
piBy2 = Math.PI * 2,
extend = fabric.util.object.extend;
if (fabric.Circle) {
fabric.warn('fabric.Circle is already defined.');
return;
}
/**
* Circle class
* @class Circle
* @extends fabric.Object
*/
fabric.Circle = fabric.util.createClass(fabric.Object, /** @scope fabric.Circle.prototype */ {
/**
* Type of an object
* @property
* @type String
*/
type: 'circle',
/**
* Constructor
* @method initialize
* @param {Object} [options] Options object
* @return {fabric.Circle} thisArg
*/
initialize: function(options) {
options = options || { };
this.set('radius', options.radius || 0);
this.callSuper('initialize', options);
var diameter = this.get('radius') * 2;
this.set('width', diameter).set('height', diameter);
},
/**
* Returns object representation of an instance
* @method toObject
* @param {Array} propertiesToInclude
* @return {Object} object representation of an instance
*/
toObject: function(propertiesToInclude) {
return extend(this.callSuper('toObject', propertiesToInclude), {
radius: this.get('radius')
});
},
/**
* Returns svg representation of an instance
* @method toSVG
* @return {String} svg representation of an instance
*/
toSVG: 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));
}
markup.push(
'<circle ',
'cx="0" cy="0" ',
'r="', this.radius,
'" style="', this.getSvgStyles(),
'" transform="', this.getSvgTransform(),
'"/>'
);
return markup.join('');
},
/**
* @private
* @method _render
* @param ctx {CanvasRenderingContext2D} context to render on
*/
_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.group ? (ctx.globalAlpha * this.opacity) : this.opacity;
ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
this._removeShadow(ctx);
if (this.stroke) {
ctx.stroke();
}
},
/**
* Returns horizontal radius of an object (according to how an object is scaled)
* @method getRadiusX
* @return {Number}
*/
getRadiusX: function() {
return this.get('radius') * this.get('scaleX');
},
/**
* Returns vertical radius of an object (according to how an object is scaled)
* @method getRadiusY
* @return {Number}
*/
getRadiusY: function() {
return this.get('radius') * this.get('scaleY');
},
/**
* Sets radius of an object (and updates width accordingly)
* @method setRadius
* @return {Number}
*/
setRadius: function(value) {
this.radius = value;
this.set('width', value * 2).set('height', value * 2);
},
/**
* Returns complexity of an instance
* @method complexity
* @return {Number} complexity of this instance
*/
complexity: function() {
return 1;
}
});
/**
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement})
* @static
* @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement
*/
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
* @static
* @method fabric.Circle.fromElement
* @param {SVGElement} element Element to parse
* @param {Object} [options] Options object
* @throws {Error} If value of `r` attribute is missing or invalid
* @return {Object} Instance of fabric.Circle
*/
fabric.Circle.fromElement = function(element, options) {
options || (options = { });
var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES);
if (!isValidRadius(parsedAttributes)) {
throw new Error('value of `r` attribute is required and can not be negative');
}
if ('left' in parsedAttributes) {
parsedAttributes.left -= (options.width / 2) || 0;
}
if ('top' in parsedAttributes) {
parsedAttributes.top -= (options.height / 2) || 0;
}
var obj = new fabric.Circle(extend(parsedAttributes, options));
obj.cx = parseFloat(element.getAttribute('cx')) || 0;
obj.cy = parseFloat(element.getAttribute('cy')) || 0;
return obj;
};
/**
* @private
*/
function isValidRadius(attributes) {
return (('radius' in attributes) && (attributes.radius > 0));
}
/**
* Returns {@link fabric.Circle} instance from an object representation
* @static
* @method fabric.Circle.fromObject
* @param {Object} object Object to create an instance from
* @return {Object} Instance of fabric.Circle
*/
fabric.Circle.fromObject = function(object) {
return new fabric.Circle(object);
};
})(typeof exports !== 'undefined' ? exports : this);