(function(global) {
'use strict';
var fabric = global.fabric || (global.fabric = { }),
extend = fabric.util.object.extend,
toFixed = fabric.util.toFixed,
capitalize = fabric.util.string.capitalize,
degreesToRadians = fabric.util.degreesToRadians,
supportsLineDash = fabric.StaticCanvas.supports('setLineDash');
if (fabric.Object) {
return;
}
/**
* Root object class from which all 2d shape classes inherit from
* @class fabric.Object
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#objects}
* @see {@link fabric.Object#initialize} for constructor definition
*
* @fires added
* @fires removed
*
* @fires selected
* @fires modified
* @fires rotating
* @fires scaling
* @fires moving
*
* @fires mousedown
* @fires mouseup
*/
fabric.Object = fabric.util.createClass(/** @lends fabric.Object.prototype */ {
/**
* Retrieves object's {@link fabric.Object#clipTo|clipping function}
* @method getClipTo
* @memberOf fabric.Object.prototype
* @return {Function}
*/
/**
* Sets object's {@link fabric.Object#clipTo|clipping function}
* @method setClipTo
* @memberOf fabric.Object.prototype
* @param {Function} clipTo Clipping function
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#transformMatrix|transformMatrix}
* @method getTransformMatrix
* @memberOf fabric.Object.prototype
* @return {Array} transformMatrix
*/
/**
* Sets object's {@link fabric.Object#transformMatrix|transformMatrix}
* @method setTransformMatrix
* @memberOf fabric.Object.prototype
* @param {Array} transformMatrix
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#visible|visible} state
* @method getVisible
* @memberOf fabric.Object.prototype
* @return {Boolean} True if visible
*/
/**
* Sets object's {@link fabric.Object#visible|visible} state
* @method setVisible
* @memberOf fabric.Object.prototype
* @param {Boolean} value visible value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#shadow|shadow}
* @method getShadow
* @memberOf fabric.Object.prototype
* @return {Object} Shadow instance
*/
/**
* Retrieves object's {@link fabric.Object#stroke|stroke}
* @method getStroke
* @memberOf fabric.Object.prototype
* @return {String} stroke value
*/
/**
* Sets object's {@link fabric.Object#stroke|stroke}
* @method setStroke
* @memberOf fabric.Object.prototype
* @param {String} value stroke value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#strokeWidth|strokeWidth}
* @method getStrokeWidth
* @memberOf fabric.Object.prototype
* @return {Number} strokeWidth value
*/
/**
* Sets object's {@link fabric.Object#strokeWidth|strokeWidth}
* @method setStrokeWidth
* @memberOf fabric.Object.prototype
* @param {Number} value strokeWidth value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#originX|originX}
* @method getOriginX
* @memberOf fabric.Object.prototype
* @return {String} originX value
*/
/**
* Sets object's {@link fabric.Object#originX|originX}
* @method setOriginX
* @memberOf fabric.Object.prototype
* @param {String} value originX value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#originY|originY}
* @method getOriginY
* @memberOf fabric.Object.prototype
* @return {String} originY value
*/
/**
* Sets object's {@link fabric.Object#originY|originY}
* @method setOriginY
* @memberOf fabric.Object.prototype
* @param {String} value originY value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#fill|fill}
* @method getFill
* @memberOf fabric.Object.prototype
* @return {String} Fill value
*/
/**
* Sets object's {@link fabric.Object#fill|fill}
* @method setFill
* @memberOf fabric.Object.prototype
* @param {String} value Fill value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#opacity|opacity}
* @method getOpacity
* @memberOf fabric.Object.prototype
* @return {Number} Opacity value (0-1)
*/
/**
* Sets object's {@link fabric.Object#opacity|opacity}
* @method setOpacity
* @memberOf fabric.Object.prototype
* @param {Number} value Opacity value (0-1)
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#angle|angle} (in degrees)
* @method getAngle
* @memberOf fabric.Object.prototype
* @return {Number}
*/
/**
* Sets object's {@link fabric.Object#angle|angle}
* @method setAngle
* @memberOf fabric.Object.prototype
* @param {Number} value Angle value (in degrees)
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#top|top position}
* @method getTop
* @memberOf fabric.Object.prototype
* @return {Number} Top value (in pixels)
*/
/**
* Sets object's {@link fabric.Object#top|top position}
* @method setTop
* @memberOf fabric.Object.prototype
* @param {Number} value Top value (in pixels)
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#left|left position}
* @method getLeft
* @memberOf fabric.Object.prototype
* @return {Number} Left value (in pixels)
*/
/**
* Sets object's {@link fabric.Object#left|left position}
* @method setLeft
* @memberOf fabric.Object.prototype
* @param {Number} value Left value (in pixels)
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#scaleX|scaleX} value
* @method getScaleX
* @memberOf fabric.Object.prototype
* @return {Number} scaleX value
*/
/**
* Sets object's {@link fabric.Object#scaleX|scaleX} value
* @method setScaleX
* @memberOf fabric.Object.prototype
* @param {Number} value scaleX value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#scaleY|scaleY} value
* @method getScaleY
* @memberOf fabric.Object.prototype
* @return {Number} scaleY value
*/
/**
* Sets object's {@link fabric.Object#scaleY|scaleY} value
* @method setScaleY
* @memberOf fabric.Object.prototype
* @param {Number} value scaleY value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#flipX|flipX} value
* @method getFlipX
* @memberOf fabric.Object.prototype
* @return {Boolean} flipX value
*/
/**
* Sets object's {@link fabric.Object#flipX|flipX} value
* @method setFlipX
* @memberOf fabric.Object.prototype
* @param {Boolean} value flipX value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#flipY|flipY} value
* @method getFlipY
* @memberOf fabric.Object.prototype
* @return {Boolean} flipY value
*/
/**
* Sets object's {@link fabric.Object#flipY|flipY} value
* @method setFlipY
* @memberOf fabric.Object.prototype
* @param {Boolean} value flipY value
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Type of an object (rect, circle, path, etc.)
* @type String
* @default
*/
type: 'object',
/**
* Horizontal origin of transformation of an object (one of "left", "right", "center")
* @type String
* @default
*/
originX: 'left',
/**
* Vertical origin of transformation of an object (one of "top", "bottom", "center")
* @type String
* @default
*/
originY: 'top',
/**
* Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
* @type Number
* @default
*/
top: 0,
/**
* Left position of an object. Note that by default it's relative to object center. You can change this by setting originX={left/center/right}
* @type Number
* @default
*/
left: 0,
/**
* Object width
* @type Number
* @default
*/
width: 0,
/**
* Object height
* @type Number
* @default
*/
height: 0,
/**
* Object scale factor (horizontal)
* @type Number
* @default
*/
scaleX: 1,
/**
* Object scale factor (vertical)
* @type Number
* @default
*/
scaleY: 1,
/**
* When true, an object is rendered as flipped horizontally
* @type Boolean
* @default
*/
flipX: false,
/**
* When true, an object is rendered as flipped vertically
* @type Boolean
* @default
*/
flipY: false,
/**
* Opacity of an object
* @type Number
* @default
*/
opacity: 1,
/**
* Angle of rotation of an object (in degrees)
* @type Number
* @default
*/
angle: 0,
/**
* Size of object's controlling corners (in pixels)
* @type Number
* @default
*/
cornerSize: 12,
/**
* When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
* @type Boolean
* @default
*/
transparentCorners: true,
/**
* Default cursor value used when hovering over this object on canvas
* @type String
* @default
*/
hoverCursor: null,
/**
* Padding between object and its controlling borders (in pixels)
* @type Number
* @default
*/
padding: 0,
/**
* Color of controlling borders of an object (when it's active)
* @type String
* @default
*/
borderColor: 'rgba(102,153,255,0.75)',
/**
* Color of controlling corners of an object (when it's active)
* @type String
* @default
*/
cornerColor: 'rgba(102,153,255,0.5)',
/**
* When true, this object will use center point as the origin of transformation
* when being scaled via the controls.
* Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
* @since 1.3.4
* @type Boolean
* @default
*/
centeredScaling: false,
/**
* When true, this object will use center point as the origin of transformation
* when being rotated via the controls.
* Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
* @since 1.3.4
* @type Boolean
* @default
*/
centeredRotation: true,
/**
* Color of object's fill
* @type String
* @default
*/
fill: 'rgb(0,0,0)',
/**
* Fill rule used to fill an object
* @type String
* @default
*/
fillRule: 'source-over',
/**
* Background color of an object. Only works with text objects at the moment.
* @type String
* @default
*/
backgroundColor: '',
/**
* When defined, an object is rendered via stroke and this property specifies its color
* @type String
* @default
*/
stroke: null,
/**
* Width of a stroke used to render this object
* @type Number
* @default
*/
strokeWidth: 1,
/**
* Array specifying dash pattern of an object's stroke (stroke must be defined)
* @type Array
*/
strokeDashArray: null,
/**
* Line endings style of an object's stroke (one of "butt", "round", "square")
* @type String
* @default
*/
strokeLineCap: 'butt',
/**
* Corner style of an object's stroke (one of "bevil", "round", "miter")
* @type String
* @default
*/
strokeLineJoin: 'miter',
/**
* Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
* @type Number
* @default
*/
strokeMiterLimit: 10,
/**
* Shadow object representing shadow of this shape
* @type fabric.Shadow
* @default
*/
shadow: null,
/**
* Opacity of object's controlling borders when object is active and moving
* @type Number
* @default
*/
borderOpacityWhenMoving: 0.4,
/**
* Scale factor of object's controlling borders
* @type Number
* @default
*/
borderScaleFactor: 1,
/**
* Transform matrix (similar to SVG's transform matrix)
* @type Array
*/
transformMatrix: null,
/**
* Minimum allowed scale value of an object
* @type Number
* @default
*/
minScaleLimit: 0.01,
/**
* When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection).
* But events still fire on it.
* @type Boolean
* @default
*/
selectable: true,
/**
* When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
* @type Boolean
* @default
*/
evented: true,
/**
* When set to `false`, an object is not rendered on canvas
* @type Boolean
* @default
*/
visible: true,
/**
* When set to `false`, object's controls are not displayed and can not be used to manipulate object
* @type Boolean
* @default
*/
hasControls: true,
/**
* When set to `false`, object's controlling borders are not rendered
* @type Boolean
* @default
*/
hasBorders: true,
/**
* When set to `false`, object's controlling rotating point will not be visible or selectable
* @type Boolean
* @default
*/
hasRotatingPoint: true,
/**
* Offset for object's controlling rotating point (when enabled via `hasRotatingPoint`)
* @type Number
* @default
*/
rotatingPointOffset: 40,
/**
* When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box
* @type Boolean
* @default
*/
perPixelTargetFind: false,
/**
* When `false`, default object's values are not included in its serialization
* @type Boolean
* @default
*/
includeDefaultValues: true,
/**
* Function that determines clipping of an object (context is passed as a first argument)
* Note that context origin is at the object's center point (not left/top corner)
* @type Function
*/
clipTo: null,
/**
* When `true`, object horizontal movement is locked
* @type Boolean
* @default
*/
lockMovementX: false,
/**
* When `true`, object vertical movement is locked
* @type Boolean
* @default
*/
lockMovementY: false,
/**
* When `true`, object rotation is locked
* @type Boolean
* @default
*/
lockRotation: false,
/**
* When `true`, object horizontal scaling is locked
* @type Boolean
* @default
*/
lockScalingX: false,
/**
* When `true`, object vertical scaling is locked
* @type Boolean
* @default
*/
lockScalingY: false,
/**
* When `true`, object non-uniform scaling is locked
* @type Boolean
* @default
*/
lockUniScaling: false,
/**
* List of properties to consider when checking if state
* of an object is changed (fabric.Object#hasStateChanged)
* as well as for history (undo/redo) purposes
* @type Array
*/
stateProperties: (
'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' +
'stroke strokeWidth strokeDashArray strokeLineCap strokeLineJoin strokeMiterLimit ' +
'angle opacity fill fillRule shadow clipTo visible backgroundColor'
).split(' '),
/**
* Constructor
* @param {Object} [options] Options object
*/
initialize: function(options) {
if (options) {
this.setOptions(options);
}
},
/**
* @private
*/
_initGradient: function(options) {
if (options.fill && options.fill.colorStops && !(options.fill instanceof fabric.Gradient)) {
this.set('fill', new fabric.Gradient(options.fill));
}
},
/**
* @private
*/
_initPattern: function(options) {
if (options.fill && options.fill.source && !(options.fill instanceof fabric.Pattern)) {
this.set('fill', new fabric.Pattern(options.fill));
}
if (options.stroke && options.stroke.source && !(options.stroke instanceof fabric.Pattern)) {
this.set('stroke', new fabric.Pattern(options.stroke));
}
},
/**
* @private
*/
_initClipping: function(options) {
if (!options.clipTo || typeof options.clipTo !== 'string') return;
var functionBody = fabric.util.getFunctionBody(options.clipTo);
if (typeof functionBody !== 'undefined') {
this.clipTo = new Function('ctx', functionBody);
}
},
/**
* Sets object's properties from options
* @param {Object} [options] Options object
*/
setOptions: function(options) {
for (var prop in options) {
this.set(prop, options[prop]);
}
this._initGradient(options);
this._initPattern(options);
this._initClipping(options);
},
/**
* Transforms context when rendering an object
* @param {CanvasRenderingContext2D} ctx Context
* @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node
*/
transform: function(ctx, fromLeft) {
if (this.group) {
this.group.transform(ctx, fromLeft);
}
ctx.globalAlpha = this.opacity;
var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
ctx.translate(center.x, center.y);
ctx.rotate(degreesToRadians(this.angle));
ctx.scale(
this.scaleX * (this.flipX ? -1 : 1),
this.scaleY * (this.flipY ? -1 : 1)
);
},
/**
* Returns an object representation of an instance
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {Object} Object representation of an instance
*/
toObject: function(propertiesToInclude) {
var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
object = {
type: this.type,
originX: this.originX,
originY: this.originY,
left: toFixed(this.left, NUM_FRACTION_DIGITS),
top: toFixed(this.top, NUM_FRACTION_DIGITS),
width: toFixed(this.width, NUM_FRACTION_DIGITS),
height: toFixed(this.height, NUM_FRACTION_DIGITS),
fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill,
stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke,
strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS),
strokeDashArray: this.strokeDashArray,
strokeLineCap: this.strokeLineCap,
strokeLineJoin: this.strokeLineJoin,
strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS),
scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS),
scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS),
angle: toFixed(this.getAngle(), NUM_FRACTION_DIGITS),
flipX: this.flipX,
flipY: this.flipY,
opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS),
shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow,
visible: this.visible,
clipTo: this.clipTo && String(this.clipTo),
backgroundColor: this.backgroundColor
};
if (!this.includeDefaultValues) {
object = this._removeDefaultValues(object);
}
fabric.util.populateWithProperties(this, object, propertiesToInclude);
return object;
},
/**
* Returns (dataless) object representation of an instance
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {Object} Object representation of an instance
*/
toDatalessObject: function(propertiesToInclude) {
// will be overwritten by subclasses
return this.toObject(propertiesToInclude);
},
/**
* @private
* @param {Object} object
*/
_removeDefaultValues: function(object) {
var prototype = fabric.util.getKlass(object.type).prototype,
stateProperties = prototype.stateProperties;
stateProperties.forEach(function(prop) {
if (object[prop] === prototype[prop]) {
delete object[prop];
}
});
return object;
},
/**
* Returns a string representation of an instance
* @return {String}
*/
toString: function() {
return '#';
},
/**
* Basic getter
* @param {String} property Property name
* @return {Any} value of a property
*/
get: function(property) {
return this[property];
},
/**
* @private
*/
_setObject: function(obj) {
for (var prop in obj) {
this._set(prop, obj[prop]);
}
},
/**
* Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`.
* @param {String|Object} key Property name or object (if object, iterate over the object properties)
* @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one)
* @return {fabric.Object} thisArg
* @chainable
*/
set: function(key, value) {
if (typeof key === 'object') {
this._setObject(key);
}
else {
if (typeof value === 'function' && key !== 'clipTo') {
this._set(key, value(this.get(key)));
}
else {
this._set(key, value);
}
}
return this;
},
/**
* @private
* @param {String} key
* @param {Any} value
* @return {fabric.Object} thisArg
*/
_set: function(key, value) {
var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY');
if (shouldConstrainValue) {
value = this._constrainScale(value);
}
if (key === 'scaleX' && value < 0) {
this.flipX = !this.flipX;
value *= -1;
}
else if (key === 'scaleY' && value < 0) {
this.flipY = !this.flipY;
value *= -1;
}
else if (key === 'width' || key === 'height') {
this.minScaleLimit = toFixed(Math.min(0.1, 1/Math.max(this.width, this.height)), 2);
}
else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) {
value = new fabric.Shadow(value);
}
this[key] = value;
return this;
},
/**
* Toggles specified property from `true` to `false` or from `false` to `true`
* @param {String} property Property to toggle
* @return {fabric.Object} thisArg
* @chainable
*/
toggle: function(property) {
var value = this.get(property);
if (typeof value === 'boolean') {
this.set(property, !value);
}
return this;
},
/**
* Sets sourcePath of an object
* @param {String} value Value to set sourcePath to
* @return {fabric.Object} thisArg
* @chainable
*/
setSourcePath: function(value) {
this.sourcePath = value;
return this;
},
/**
* Retrieves viewportTransform from Object's canvas if possible
* @method getViewportTransform
* @memberOf fabric.Object.prototype
* @return {Boolean} flipY value // TODO
*/
getViewportTransform: function() {
if (this.canvas && this.canvas.viewportTransform)
return this.canvas.viewportTransform;
return [1, 0, 0, 1, 0, 0];
},
/**
* Renders an object on a specified context
* @param {CanvasRenderingContext2D} ctx Context to render on
* @param {Boolean} [noTransform] When true, context is not transformed
*/
render: function(ctx, noTransform) {
// do not render if width/height are zeros or object is not visible
if (this.width === 0 || this.height === 0 || !this.visible) return;
ctx.save();
//setup fill rule for current object
this._setupFillRule(ctx);
this._transform(ctx, noTransform);
this._setStrokeStyles(ctx);
this._setFillStyles(ctx);
var m = this.transformMatrix;
if (m && this.group) {
ctx.translate(-this.group.width/2, -this.group.height/2);
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
this._setShadow(ctx);
this.clipTo && fabric.util.clipContext(this, ctx);
this._render(ctx, noTransform);
this.clipTo && ctx.restore();
this._removeShadow(ctx);
this._restoreFillRule(ctx);
ctx.restore();
},
_transform: function(ctx, noTransform) {
var m = this.transformMatrix;
if (m && !this.group) {
ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
if (!noTransform) {
this.transform(ctx);
}
},
_setStrokeStyles: function(ctx) {
if (this.stroke) {
ctx.lineWidth = this.strokeWidth;
ctx.lineCap = this.strokeLineCap;
ctx.lineJoin = this.strokeLineJoin;
ctx.miterLimit = this.strokeMiterLimit;
ctx.strokeStyle = this.stroke.toLive
? this.stroke.toLive(ctx)
: this.stroke;
}
},
_setFillStyles: function(ctx) {
if (this.fill) {
ctx.fillStyle = this.fill.toLive
? this.fill.toLive(ctx)
: this.fill;
}
},
/**
* Renders controls and borders for the object
* @param {CanvasRenderingContext2D} ctx Context to render on
* @param {Boolean} [noTransform] When true, context is not transformed
*/
_renderControls: function(ctx, noTransform) {
var v = this.getViewportTransform();
ctx.save();
if (this.active && !noTransform) {
var center;
if (this.group) {
center = fabric.util.transformPoint(this.group.getCenterPoint(), v);
ctx.translate(center.x, center.y);
ctx.rotate(degreesToRadians(this.group.angle));
}
center = fabric.util.transformPoint(this.getCenterPoint(), v, null != this.group);
if (this.group) {
center.x *= this.group.scaleX;
center.y *= this.group.scaleY;
}
ctx.translate(center.x, center.y);
ctx.rotate(degreesToRadians(this.angle));
this.drawBorders(ctx);
this.drawControls(ctx);
}
ctx.restore();
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_setShadow: function(ctx) {
if (!this.shadow) return;
ctx.shadowColor = this.shadow.color;
ctx.shadowBlur = this.shadow.blur;
ctx.shadowOffsetX = this.shadow.offsetX;
ctx.shadowOffsetY = this.shadow.offsetY;
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_removeShadow: function(ctx) {
if (!this.shadow) return;
ctx.shadowColor = '';
ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_renderFill: function(ctx) {
if (!this.fill) return;
if (this.fill.toLive) {
ctx.save();
ctx.translate(
-this.width / 2 + this.fill.offsetX || 0,
-this.height / 2 + this.fill.offsetY || 0);
}
if (this.fillRule === 'destination-over') {
ctx.fill('evenodd');
}
else {
ctx.fill();
}
if (this.fill.toLive) {
ctx.restore();
}
if (this.shadow && !this.shadow.affectStroke) {
this._removeShadow(ctx);
}
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_renderStroke: function(ctx) {
if (!this.stroke) return;
ctx.save();
if (this.strokeDashArray) {
// Spec requires the concatenation of two copies the dash list when the number of elements is odd
if (1 & this.strokeDashArray.length) {
this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray);
}
if (supportsLineDash) {
ctx.setLineDash(this.strokeDashArray);
this._stroke && this._stroke(ctx);
}
else {
this._renderDashedStroke && this._renderDashedStroke(ctx);
}
ctx.stroke();
}
else {
this._stroke ? this._stroke(ctx) : ctx.stroke();
}
this._removeShadow(ctx);
ctx.restore();
},
/**
* Clones an instance
* @param {Function} callback Callback is invoked with a clone as a first argument
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {fabric.Object} clone of an instance
*/
clone: function(callback, propertiesToInclude) {
if (this.constructor.fromObject) {
return this.constructor.fromObject(this.toObject(propertiesToInclude), callback);
}
return new fabric.Object(this.toObject(propertiesToInclude));
},
/**
* Creates an instance of fabric.Image out of an object
* @param callback {Function} callback, invoked with an instance as a first argument
* @return {fabric.Object} thisArg
*/
cloneAsImage: function(callback) {
var dataUrl = this.toDataURL();
fabric.util.loadImage(dataUrl, function(img) {
if (callback) {
callback(new fabric.Image(img));
}
});
return this;
},
/**
* Converts an object into a data-url-like string
* @param {Object} options Options object
* @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
* @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
* @param {Number} [options.multiplier=1] Multiplier to scale by
* @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
* @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
* @param {Number} [options.width] Cropping width. Introduced in v1.2.14
* @param {Number} [options.height] Cropping height. Introduced in v1.2.14
* @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
*/
toDataURL: function(options) {
options || (options = { });
var el = fabric.util.createCanvasElement(),
boundingRect = this.getBoundingRect();
el.width = boundingRect.width;
el.height = boundingRect.height;
fabric.util.wrapElement(el, 'div');
var canvas = new fabric.Canvas(el);
// to avoid common confusion https://github.com/kangax/fabric.js/issues/806
if (options.format === 'jpg') {
options.format = 'jpeg';
}
if (options.format === 'jpeg') {
canvas.backgroundColor = '#fff';
}
var origParams = {
active: this.get('active'),
left: this.getLeft(),
top: this.getTop()
};
this.set('active', false);
this.setPositionByOrigin(new fabric.Point(el.width / 2, el.height / 2), 'center', 'center');
var originalCanvas = this.canvas;
canvas.add(this);
var data = canvas.toDataURL(options);
this.set(origParams).setCoords();
this.canvas = originalCanvas;
canvas.dispose();
canvas = null;
return data;
},
/**
* Returns true if specified type is identical to the type of an instance
* @param type {String} type Type to check against
* @return {Boolean}
*/
isType: function(type) {
return this.type === type;
},
/**
* Returns complexity of an instance
* @return {Number} complexity of this instance
*/
complexity: function() {
return 0;
},
/**
* Returns a JSON representation of an instance
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {Object} JSON
*/
toJSON: function(propertiesToInclude) {
// delegate, not alias
return this.toObject(propertiesToInclude);
},
/**
* Sets gradient (fill or stroke) of an object
* Backwards incompatibility note: This method was named "setGradientFill" until v1.1.0
* @param {String} property Property name 'stroke' or 'fill'
* @param {Object} [options] Options object
* @param {String} [options.type] Type of gradient 'radial' or 'linear'
* @param {Number} [options.x1=0] x-coordinate of start point
* @param {Number} [options.y1=0] y-coordinate of start point
* @param {Number} [options.x2=0] x-coordinate of end point
* @param {Number} [options.y2=0] y-coordinate of end point
* @param {Number} [options.r1=0] Radius of start point (only for radial gradients)
* @param {Number} [options.r2=0] Radius of end point (only for radial gradients)
* @param {Object} [options.colorStops] Color stops object eg. {0: 'ff0000', 1: '000000'}
* @return {fabric.Object} thisArg
* @chainable
* @see {@link http://jsfiddle.net/fabricjs/58y8b/|jsFiddle demo}
* @example Set linear gradient
* object.setGradient('fill', {
* type: 'linear',
* x1: -object.width / 2,
* y1: 0,
* x2: object.width / 2,
* y2: 0,
* colorStops: {
* 0: 'red',
* 0.5: '#005555',
* 1: 'rgba(0,0,255,0.5)'
* }
* });
* canvas.renderAll();
* @example Set radial gradient
* object.setGradient('fill', {
* type: 'radial',
* x1: 0,
* y1: 0,
* x2: 0,
* y2: 0,
* r1: object.width / 2,
* r2: 10,
* colorStops: {
* 0: 'red',
* 0.5: '#005555',
* 1: 'rgba(0,0,255,0.5)'
* }
* });
* canvas.renderAll();
*/
setGradient: function(property, options) {
options || (options = { });
var gradient = { colorStops: [] };
gradient.type = options.type || (options.r1 || options.r2 ? 'radial' : 'linear');
gradient.coords = {
x1: options.x1,
y1: options.y1,
x2: options.x2,
y2: options.y2
};
if (options.r1 || options.r2) {
gradient.coords.r1 = options.r1;
gradient.coords.r2 = options.r2;
}
for (var position in options.colorStops) {
var color = new fabric.Color(options.colorStops[position]);
gradient.colorStops.push({
offset: position,
color: color.toRgb(),
opacity: color.getAlpha()
});
}
return this.set(property, fabric.Gradient.forObject(this, gradient));
},
/**
* Sets pattern fill of an object
* @param {Object} options Options object
* @param {(String|HTMLImageElement)} options.source Pattern source
* @param {String} [options.repeat=repeat] Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
* @param {Number} [options.offsetX=0] Pattern horizontal offset from object's left/top corner
* @param {Number} [options.offsetY=0] Pattern vertical offset from object's left/top corner
* @return {fabric.Object} thisArg
* @chainable
* @see {@link http://jsfiddle.net/fabricjs/QT3pa/|jsFiddle demo}
* @example Set pattern
* fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function(img) {
* object.setPatternFill({
* source: img,
* repeat: 'repeat'
* });
* canvas.renderAll();
* });
*/
setPatternFill: function(options) {
return this.set('fill', new fabric.Pattern(options));
},
/**
* Sets {@link fabric.Object#shadow|shadow} of an object
* @param {Object|String} [options] Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)")
* @param {String} [options.color=rgb(0,0,0)] Shadow color
* @param {Number} [options.blur=0] Shadow blur
* @param {Number} [options.offsetX=0] Shadow horizontal offset
* @param {Number} [options.offsetY=0] Shadow vertical offset
* @return {fabric.Object} thisArg
* @chainable
* @see {@link http://jsfiddle.net/fabricjs/7gvJG/|jsFiddle demo}
* @example Set shadow with string notation
* object.setShadow('2px 2px 10px rgba(0,0,0,0.2)');
* canvas.renderAll();
* @example Set shadow with object notation
* object.setShadow({
* color: 'red',
* blur: 10,
* offsetX: 20,
* offsetY: 20
* });
* canvas.renderAll();
*/
setShadow: function(options) {
return this.set('shadow', options ? new fabric.Shadow(options) : null);
},
/**
* Sets "color" of an instance (alias of `set('fill', …)`)
* @param {String} color Color value
* @return {fabric.Object} thisArg
* @chainable
*/
setColor: function(color) {
this.set('fill', color);
return this;
},
/**
* Sets "angle" of an instance
* @param {Number} angle Angle value
* @return {fabric.Object} thisArg
* @chainable
*/
setAngle: function(angle) {
var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation;
if (shouldCenterOrigin) {
this._setOriginToCenter();
}
this.set('angle', angle);
if (shouldCenterOrigin) {
this._resetOrigin();
}
return this;
},
/**
* Centers object horizontally on canvas to which it was added last.
* You might need to call `setCoords` on an object after centering, to update controls area.
* @return {fabric.Object} thisArg
* @chainable
*/
centerH: function () {
this.canvas.centerObjectH(this);
return this;
},
/**
* Centers object vertically on canvas to which it was added last.
* You might need to call `setCoords` on an object after centering, to update controls area.
* @return {fabric.Object} thisArg
* @chainable
*/
centerV: function () {
this.canvas.centerObjectV(this);
return this;
},
/**
* Centers object vertically and horizontally on canvas to which is was added last
* You might need to call `setCoords` on an object after centering, to update controls area.
* @return {fabric.Object} thisArg
* @chainable
*/
center: function () {
this.canvas.centerObject(this);
return this;
},
/**
* Removes object from canvas to which it was added last
* @return {fabric.Object} thisArg
* @chainable
*/
remove: function() {
this.canvas.remove(this);
return this;
},
/**
* Returns coordinates of a pointer relative to an object
* @param {Event} e Event to operate upon
* @param {Object} [pointer] Pointer to operate upon (instead of event)
* @return {Object} Coordinates of a pointer (x, y)
*/
getLocalPointer: function(e, pointer) {
pointer = pointer || this.canvas.getPointer(e);
var objectLeftTop = this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top');
return {
x: pointer.x - objectLeftTop.x,
y: pointer.y - objectLeftTop.y
};
},
/**
* Sets canvas globalCompositeOperation for specific object
* custom composition operation for the particular object can be specifed using fillRule property
* @param {CanvasRenderingContext2D} ctx Rendering canvas context
*/
_setupFillRule: function (ctx) {
if (this.fillRule) {
this._prevFillRule = ctx.globalCompositeOperation;
ctx.globalCompositeOperation = this.fillRule;
}
},
/**
* Restores previously saved canvas globalCompositeOperation after obeject rendering
* @param {CanvasRenderingContext2D} ctx Rendering canvas context
*/
_restoreFillRule: function (ctx) {
if (this.fillRule && this._prevFillRule) {
ctx.globalCompositeOperation = this._prevFillRule;
}
}
});
fabric.util.createAccessors(fabric.Object);
/**
* Alias for {@link fabric.Object.prototype.setAngle}
* @alias rotate -> setAngle
* @memberof fabric.Object
*/
fabric.Object.prototype.rotate = fabric.Object.prototype.setAngle;
extend(fabric.Object.prototype, fabric.Observable);
/**
* Defines the number of fraction digits to use when serializing object values.
* You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc.
* @static
* @memberof fabric.Object
* @constant
* @type Number
*/
fabric.Object.NUM_FRACTION_DIGITS = 2;
/**
* Unique id used internally when creating SVG elements
* @static
* @memberof fabric.Object
* @type Number
*/
fabric.Object.__uid = 0;
})(typeof exports !== 'undefined' ? exports : this);