//= require "object.class" (function(global) { "use strict"; var fabric = global.fabric || (global.fabric = { }); if (fabric.Rect) { console.warn('fabric.Rect is already defined'); return; } /** * @class Rect * @extends fabric.Object */ fabric.Rect = fabric.util.createClass(fabric.Object, /** @scope fabric.Rect.prototype */ { /** * @property * @type String */ type: 'rect', /** * @property * @type Object */ options: { rx: 0, ry: 0 }, /** * Constructor * @method initialize * @param options {Object} options object * @return {Object} thisArg */ initialize: function(options) { this._initStateProperties(); this.callSuper('initialize', options); this._initRxRy(); }, /** * Creates `stateProperties` list on an instance, and adds `fabric.Rect` -specific ones to it * (such as "rx", "ry", etc.) * @private * @method _initStateProperties */ _initStateProperties: function() { this.stateProperties = this.stateProperties.concat(['rx', 'ry']); }, /** * @private * @method _initRxRy */ _initRxRy: function() { if (this.rx && !this.ry) { this.ry = this.rx; } else if (this.ry && !this.rx) { this.rx = this.ry; } }, /** * @private * @method _render * @param ctx {CanvasRenderingContext2D} context to render on */ _render: function(ctx) { var rx = this.rx || 0, ry = this.ry || 0, x = -this.width / 2, y = -this.height / 2, w = this.width, h = this.height; ctx.beginPath(); ctx.globalAlpha *= this.opacity; if (this.group) { ctx.translate(this.x, this.y); } ctx.moveTo(x+rx, y); ctx.lineTo(x+w-rx, y); ctx.bezierCurveTo(x+w, y, x+w, y+ry, x+w, y+ry); ctx.lineTo(x+w, y+h-ry); ctx.bezierCurveTo(x+w,y+h,x+w-rx,y+h,x+w-rx,y+h); ctx.lineTo(x+rx,y+h); ctx.bezierCurveTo(x,y+h,x,y+h-ry,x,y+h-ry); ctx.lineTo(x,y+ry); ctx.bezierCurveTo(x,y,x+rx,y,x+rx,y); ctx.closePath(); if (this.fill) { ctx.fill(); } if (this.stroke) { ctx.stroke(); } }, // since our coordinate system differs from that of SVG _normalizeLeftTopProperties: function(parsedAttributes) { if (parsedAttributes.left) { this.set('left', parsedAttributes.left + this.getWidth() / 2); } this.set('x', parsedAttributes.left || 0); if (parsedAttributes.top) { this.set('top', parsedAttributes.top + this.getHeight() / 2); } this.set('y', parsedAttributes.top || 0); return this; }, /** * @method complexity * @return {Number} complexity */ complexity: function() { return 1; } }); // TODO (kangax): implement rounded rectangles (both parsing and rendering) /** * 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 opacity stroke stroke-width transform'.split(' '); /** * @private */ function _setDefaultLeftTopValues(attributes) { attributes.left = attributes.left || 0; attributes.top = attributes.top || 0; return attributes; } /** * Returns fabric.Rect instance from an SVG element * @static * @method fabric.Rect.fromElement * @param element {SVGElement} element to parse * @param options {Object} options object * @return {fabric.Rect} instance of fabric.Rect */ fabric.Rect.fromElement = function(element, options) { if (!element) { return null; } var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); parsedAttributes = _setDefaultLeftTopValues(parsedAttributes); var rect = new fabric.Rect(fabric.util.object.extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes)); rect._normalizeLeftTopProperties(parsedAttributes); return rect; }; /** * Returns fabric.Rect instance from an object representation * @static * @method fabric.Rect.fromObject * @param object {Object} object to create an instance from * @return {Object} instance of fabric.Rect */ fabric.Rect.fromObject = function(object) { return new fabric.Rect(object); }; })(this);