(function () {
'use strict';
if (fabric.StaticCanvas) {
fabric.warn('fabric.StaticCanvas is already defined.');
return;
}
// aliases for faster resolution
var extend = fabric.util.object.extend,
getElementOffset = fabric.util.getElementOffset,
removeFromArray = fabric.util.removeFromArray,
CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element');
/**
* Static canvas class
* @class fabric.StaticCanvas
* @mixes fabric.Collection
* @mixes fabric.Observable
* @see {@link http://fabricjs.com/static_canvas/|StaticCanvas demo}
* @see {@link fabric.StaticCanvas#initialize} for constructor definition
* @fires before:render
* @fires after:render
* @fires canvas:cleared
* @fires object:added
* @fires object:removed
*/
fabric.StaticCanvas = fabric.util.createClass(/** @lends fabric.StaticCanvas.prototype */ {
/**
* Constructor
* @param {HTMLElement | String} el <canvas> element to initialize instance on
* @param {Object} [options] Options object
* @return {Object} thisArg
*/
initialize: function(el, options) {
options || (options = { });
this._initStatic(el, options);
fabric.StaticCanvas.activeInstance = this;
},
/**
* Background color of canvas instance.
* Should be set via {@link fabric.StaticCanvas#setBackgroundColor}.
* @type {(String|fabric.Pattern)}
* @default
*/
backgroundColor: '',
/**
* Background image of canvas instance.
* Should be set via {@link fabric.StaticCanvas#setBackgroundImage}.
* Backwards incompatibility note: The "backgroundImageOpacity"
* and "backgroundImageStretch" properties are deprecated since 1.3.9.
* Use {@link fabric.Image#opacity}, {@link fabric.Image#width} and {@link fabric.Image#height}.
* @type fabric.Image
* @default
*/
backgroundImage: null,
/**
* Overlay color of canvas instance.
* Should be set via {@link fabric.StaticCanvas#setOverlayColor}
* @since 1.3.9
* @type {(String|fabric.Pattern)}
* @default
*/
overlayColor: '',
/**
* Overlay image of canvas instance.
* Should be set via {@link fabric.StaticCanvas#setOverlayImage}.
* Backwards incompatibility note: The "overlayImageLeft"
* and "overlayImageTop" properties are deprecated since 1.3.9.
* Use {@link fabric.Image#left} and {@link fabric.Image#top}.
* @type fabric.Image
* @default
*/
overlayImage: null,
/**
* Indicates whether toObject/toDatalessObject should include default values
* @type Boolean
* @default
*/
includeDefaultValues: true,
/**
* Indicates whether objects' state should be saved
* @type Boolean
* @default
*/
stateful: true,
/**
* Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove} should also re-render canvas.
* Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once
* (followed by a manual rendering after addition/deletion)
* @type Boolean
* @default
*/
renderOnAddRemove: true,
/**
* Function that determines clipping of entire canvas area
* Being passed context as first argument. See clipping canvas area in {@link https://github.com/kangax/fabric.js/wiki/FAQ}
* @type Function
* @default
*/
clipTo: null,
/**
* Indicates whether object controls (borders/controls) are rendered above overlay image
* @type Boolean
* @default
*/
controlsAboveOverlay: false,
/**
* Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
* @type Boolean
* @default
*/
allowTouchScrolling: false,
/**
* Indicates whether this canvas will use image smoothing, this is on by default in browsers
* @type Boolean
* @default
*/
imageSmoothingEnabled: true,
/**
* Indicates whether objects should remain in current stack position when selected. When false objects are brought to top and rendered as part of the selection group
* @type Boolean
* @default
*/
preserveObjectStacking: false,
/**
* The transformation (in the format of Canvas transform) which focuses the viewport
* @type Array
* @default
*/
viewportTransform: [1, 0, 0, 1, 0, 0],
/**
* Callback; invoked right before object is about to be scaled/rotated
*/
onBeforeScaleRotate: function () {
/* NOOP */
},
/**
* When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
*/
enableRetinaScaling: true,
/**
* @private
* @param {HTMLElement | String} el <canvas> element to initialize instance on
* @param {Object} [options] Options object
*/
_initStatic: function(el, options) {
this._objects = [];
this._createLowerCanvas(el);
this._initOptions(options);
this._setImageSmoothing();
// only initialize retina scaling once
if (!this.interactive) {
this._initRetinaScaling();
}
if (options.overlayImage) {
this.setOverlayImage(options.overlayImage, this.renderAll.bind(this));
}
if (options.backgroundImage) {
this.setBackgroundImage(options.backgroundImage, this.renderAll.bind(this));
}
if (options.backgroundColor) {
this.setBackgroundColor(options.backgroundColor, this.renderAll.bind(this));
}
if (options.overlayColor) {
this.setOverlayColor(options.overlayColor, this.renderAll.bind(this));
}
this.calcOffset();
},
/**
* @private
*/
_initRetinaScaling: function() {
if (fabric.devicePixelRatio === 1 || !this.enableRetinaScaling) {
return;
}
this.lowerCanvasEl.setAttribute('width', this.width * fabric.devicePixelRatio);
this.lowerCanvasEl.setAttribute('height', this.height * fabric.devicePixelRatio);
this.contextContainer.scale(fabric.devicePixelRatio, fabric.devicePixelRatio);
},
/**
* Calculates canvas element offset relative to the document
* This method is also attached as "resize" event handler of window
* @return {fabric.Canvas} instance
* @chainable
*/
calcOffset: function () {
this._offset = getElementOffset(this.lowerCanvasEl);
return this;
},
/**
* Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas
* @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to
* @param {Function} callback callback to invoke when image is loaded and set as an overlay
* @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}.
* @return {fabric.Canvas} thisArg
* @chainable
* @see {@link http://jsfiddle.net/fabricjs/MnzHT/|jsFiddle demo}
* @example
Normal overlayImage with left/top = 0
* canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
* // Needed to position overlayImage at 0/0
* originX: 'left',
* originY: 'top'
* });
* @example
fabric.Pattern used as backgroundColor with repeat and offset
* canvas.setBackgroundColor({
* source: 'http://fabricjs.com/assets/escheresque_ste.png',
* repeat: 'repeat',
* offsetX: 200,
* offsetY: 100
* }, canvas.renderAll.bind(canvas));
*/
setBackgroundColor: function(backgroundColor, callback) {
return this.__setBgOverlayColor('backgroundColor', backgroundColor, callback);
},
/**
* @private
* @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-imagesmoothingenabled|WhatWG Canvas Standard}
*/
_setImageSmoothing: function() {
var ctx = this.getContext();
if (typeof ctx.imageSmoothingEnabled !== 'undefined') {
ctx.imageSmoothingEnabled = this.imageSmoothingEnabled;
return;
}
ctx.webkitImageSmoothingEnabled = this.imageSmoothingEnabled;
ctx.mozImageSmoothingEnabled = this.imageSmoothingEnabled;
ctx.msImageSmoothingEnabled = this.imageSmoothingEnabled;
ctx.oImageSmoothingEnabled = this.imageSmoothingEnabled;
},
/**
* @private
* @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundImage|backgroundImage}
* or {@link fabric.StaticCanvas#overlayImage|overlayImage})
* @param {(fabric.Image|String|null)} image fabric.Image instance, URL of an image or null to set background or overlay to
* @param {Function} callback Callback to invoke when image is loaded and set as background or overlay
* @param {Object} [options] Optional options to set for the {@link fabric.Image|image}.
*/
__setBgOverlayImage: function(property, image, callback, options) {
if (typeof image === 'string') {
fabric.util.loadImage(image, function(img) {
this[property] = new fabric.Image(img, options);
callback && callback();
}, this, options && options.crossOrigin);
}
else {
options && image.setOptions(options);
this[property] = image;
callback && callback();
}
return this;
},
/**
* @private
* @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundColor|backgroundColor}
* or {@link fabric.StaticCanvas#overlayColor|overlayColor})
* @param {(Object|String|null)} color Object with pattern information, color value or null
* @param {Function} [callback] Callback is invoked when color is set
*/
__setBgOverlayColor: function(property, color, callback) {
if (color && color.source) {
var _this = this;
fabric.util.loadImage(color.source, function(img) {
_this[property] = new fabric.Pattern({
source: img,
repeat: color.repeat,
offsetX: color.offsetX,
offsetY: color.offsetY
});
callback && callback();
});
}
else {
this[property] = color;
callback && callback();
}
return this;
},
/**
* @private
*/
_createCanvasElement: function() {
var element = fabric.document.createElement('canvas');
if (!element.style) {
element.style = { };
}
if (!element) {
throw CANVAS_INIT_ERROR;
}
this._initCanvasElement(element);
return element;
},
/**
* @private
* @param {HTMLElement} element
*/
_initCanvasElement: function(element) {
fabric.util.createCanvasElement(element);
if (typeof element.getContext === 'undefined') {
throw CANVAS_INIT_ERROR;
}
},
/**
* @private
* @param {Object} [options] Options object
*/
_initOptions: function (options) {
for (var prop in options) {
this[prop] = options[prop];
}
this.width = this.width || parseInt(this.lowerCanvasEl.width, 10) || 0;
this.height = this.height || parseInt(this.lowerCanvasEl.height, 10) || 0;
if (!this.lowerCanvasEl.style) {
return;
}
this.lowerCanvasEl.width = this.width;
this.lowerCanvasEl.height = this.height;
this.lowerCanvasEl.style.width = this.width + 'px';
this.lowerCanvasEl.style.height = this.height + 'px';
this.viewportTransform = this.viewportTransform.slice();
},
/**
* Creates a bottom canvas
* @private
* @param {HTMLElement} [canvasEl]
*/
_createLowerCanvas: function (canvasEl) {
this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement();
this._initCanvasElement(this.lowerCanvasEl);
fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas');
if (this.interactive) {
this._applyCanvasStyle(this.lowerCanvasEl);
}
this.contextContainer = this.lowerCanvasEl.getContext('2d');
},
/**
* Returns canvas width (in px)
* @return {Number}
*/
getWidth: function () {
return this.width;
},
/**
* Returns canvas height (in px)
* @return {Number}
*/
getHeight: function () {
return this.height;
},
/**
* Sets width of this canvas instance
* @param {Number|String} value Value to set width to
* @param {Object} [options] Options object
* @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
* @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions
* @return {fabric.Canvas} instance
* @chainable true
*/
setWidth: function (value, options) {
return this.setDimensions({ width: value }, options);
},
/**
* Sets height of this canvas instance
* @param {Number|String} value Value to set height to
* @param {Object} [options] Options object
* @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
* @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions
* @return {fabric.Canvas} instance
* @chainable true
*/
setHeight: function (value, options) {
return this.setDimensions({ height: value }, options);
},
/**
* Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
* @param {Object} dimensions Object with width/height properties
* @param {Number|String} [dimensions.width] Width of canvas element
* @param {Number|String} [dimensions.height] Height of canvas element
* @param {Object} [options] Options object
* @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
* @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions
* @return {fabric.Canvas} thisArg
* @chainable
*/
setDimensions: function (dimensions, options) {
var cssValue;
options = options || {};
for (var prop in dimensions) {
cssValue = dimensions[prop];
if (!options.cssOnly) {
this._setBackstoreDimension(prop, dimensions[prop]);
cssValue += 'px';
}
if (!options.backstoreOnly) {
this._setCssDimension(prop, cssValue);
}
}
this._setImageSmoothing();
this.calcOffset();
if (!options.cssOnly) {
this.renderAll();
}
return this;
},
/**
* Helper for setting width/height
* @private
* @param {String} prop property (width|height)
* @param {Number} value value to set property to
* @return {fabric.Canvas} instance
* @chainable true
*/
_setBackstoreDimension: function (prop, value) {
this.lowerCanvasEl[prop] = value;
if (this.upperCanvasEl) {
this.upperCanvasEl[prop] = value;
}
if (this.cacheCanvasEl) {
this.cacheCanvasEl[prop] = value;
}
this[prop] = value;
return this;
},
/**
* Helper for setting css width/height
* @private
* @param {String} prop property (width|height)
* @param {String} value value to set property to
* @return {fabric.Canvas} instance
* @chainable true
*/
_setCssDimension: function (prop, value) {
this.lowerCanvasEl.style[prop] = value;
if (this.upperCanvasEl) {
this.upperCanvasEl.style[prop] = value;
}
if (this.wrapperEl) {
this.wrapperEl.style[prop] = value;
}
return this;
},
/**
* Returns canvas zoom level
* @return {Number}
*/
getZoom: function () {
return Math.sqrt(this.viewportTransform[0] * this.viewportTransform[3]);
},
/**
* Sets viewport transform of this canvas instance
* @param {Array} vpt the transform in the form of context.transform
* @return {fabric.Canvas} instance
* @chainable true
*/
setViewportTransform: function (vpt) {
var activeGroup = this.getActiveGroup();
this.viewportTransform = vpt;
this.renderAll();
for (var i = 0, len = this._objects.length; i < len; i++) {
this._objects[i].setCoords();
}
if (activeGroup) {
activeGroup.setCoords();
}
return this;
},
/**
* Sets zoom level of this canvas instance, zoom centered around point
* @param {fabric.Point} point to zoom with respect to
* @param {Number} value to set zoom to, less than 1 zooms out
* @return {fabric.Canvas} instance
* @chainable true
*/
zoomToPoint: function (point, value) {
// TODO: just change the scale, preserve other transformations
var before = point;
point = fabric.util.transformPoint(point, fabric.util.invertTransform(this.viewportTransform));
this.viewportTransform[0] = value;
this.viewportTransform[3] = value;
var after = fabric.util.transformPoint(point, this.viewportTransform);
this.viewportTransform[4] += before.x - after.x;
this.viewportTransform[5] += before.y - after.y;
this.renderAll();
for (var i = 0, len = this._objects.length; i < len; i++) {
this._objects[i].setCoords();
}
return this;
},
/**
* Sets zoom level of this canvas instance
* @param {Number} value to set zoom to, less than 1 zooms out
* @return {fabric.Canvas} instance
* @chainable true
*/
setZoom: function (value) {
this.zoomToPoint(new fabric.Point(0, 0), value);
return this;
},
/**
* Pan viewport so as to place point at top left corner of canvas
* @param {fabric.Point} point to move to
* @return {fabric.Canvas} instance
* @chainable true
*/
absolutePan: function (point) {
this.viewportTransform[4] = -point.x;
this.viewportTransform[5] = -point.y;
this.renderAll();
for (var i = 0, len = this._objects.length; i < len; i++) {
this._objects[i].setCoords();
}
return this;
},
/**
* Pans viewpoint relatively
* @param {fabric.Point} point (position vector) to move by
* @return {fabric.Canvas} instance
* @chainable true
*/
relativePan: function (point) {
return this.absolutePan(new fabric.Point(
-point.x - this.viewportTransform[4],
-point.y - this.viewportTransform[5]
));
},
/**
* Returns <canvas> element corresponding to this instance
* @return {HTMLCanvasElement}
*/
getElement: function () {
return this.lowerCanvasEl;
},
/**
* Returns currently selected object, if any
* @return {fabric.Object}
*/
getActiveObject: function() {
return null;
},
/**
* Returns currently selected group of object, if any
* @return {fabric.Group}
*/
getActiveGroup: function() {
return null;
},
/**
* Given a context, renders an object on that context
* @param {CanvasRenderingContext2D} ctx Context to render object on
* @param {fabric.Object} object Object to render
* @private
*/
_draw: function (ctx, object) {
if (!object) {
return;
}
ctx.save();
var v = this.viewportTransform;
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
if (this._shouldRenderObject(object)) {
object.render(ctx);
}
ctx.restore();
if (!this.controlsAboveOverlay) {
object._renderControls(ctx);
}
},
_shouldRenderObject: function(object) {
if (!object) {
return false;
}
return (object !== this.getActiveGroup() || !this.preserveObjectStacking);
},
/**
* @private
* @param {fabric.Object} obj Object that was added
*/
_onObjectAdded: function(obj) {
this.stateful && obj.setupState();
obj._set('canvas', this);
obj.setCoords();
this.fire('object:added', { target: obj });
obj.fire('added');
},
/**
* @private
* @param {fabric.Object} obj Object that was removed
*/
_onObjectRemoved: function(obj) {
// removing active object should fire "selection:cleared" events
if (this.getActiveObject() === obj) {
this.fire('before:selection:cleared', { target: obj });
this._discardActiveObject();
this.fire('selection:cleared');
}
this.fire('object:removed', { target: obj });
obj.fire('removed');
},
/**
* Clears specified context of canvas element
* @param {CanvasRenderingContext2D} ctx Context to clear
* @return {fabric.Canvas} thisArg
* @chainable
*/
clearContext: function(ctx) {
ctx.clearRect(0, 0, this.width, this.height);
return this;
},
/**
* Returns context of canvas where objects are drawn
* @return {CanvasRenderingContext2D}
*/
getContext: function () {
return this.contextContainer;
},
/**
* Clears all contexts (background, main, top) of an instance
* @return {fabric.Canvas} thisArg
* @chainable
*/
clear: function () {
this._objects.length = 0;
if (this.discardActiveGroup) {
this.discardActiveGroup();
}
if (this.discardActiveObject) {
this.discardActiveObject();
}
this.clearContext(this.contextContainer);
if (this.contextTop) {
this.clearContext(this.contextTop);
}
this.fire('canvas:cleared');
this.renderAll();
return this;
},
/**
* Renders both the top canvas and the secondary container canvas.
* @param {Boolean} [allOnTop] Whether we want to force all images to be rendered on the top canvas
* @return {fabric.Canvas} instance
* @chainable
*/
renderAll: function (allOnTop) {
var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'],
activeGroup = this.getActiveGroup();
if (this.contextTop && this.selection && !this._groupSelector) {
this.clearContext(this.contextTop);
}
if (!allOnTop) {
this.clearContext(canvasToDrawOn);
}
this.fire('before:render');
if (this.clipTo) {
fabric.util.clipContext(this, canvasToDrawOn);
}
this._renderBackground(canvasToDrawOn);
this._renderObjects(canvasToDrawOn, activeGroup);
this._renderActiveGroup(canvasToDrawOn, activeGroup);
if (this.clipTo) {
canvasToDrawOn.restore();
}
this._renderOverlay(canvasToDrawOn);
if (this.controlsAboveOverlay && this.interactive) {
this.drawControls(canvasToDrawOn);
}
this.fire('after:render');
return this;
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
* @param {fabric.Group} activeGroup
*/
_renderObjects: function(ctx, activeGroup) {
var i, length;
// fast path
if (!activeGroup || this.preserveObjectStacking) {
for (i = 0, length = this._objects.length; i < length; ++i) {
this._draw(ctx, this._objects[i]);
}
}
else {
for (i = 0, length = this._objects.length; i < length; ++i) {
if (this._objects[i] && !activeGroup.contains(this._objects[i])) {
this._draw(ctx, this._objects[i]);
}
}
}
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
* @param {fabric.Group} activeGroup
*/
_renderActiveGroup: function(ctx, activeGroup) {
// delegate rendering to group selection (if one exists)
if (activeGroup) {
//Store objects in group preserving order, then replace
var sortedObjects = [];
this.forEachObject(function (object) {
if (activeGroup.contains(object)) {
sortedObjects.push(object);
}
});
// forEachObject reverses the object, so we reverse again
activeGroup._set('_objects', sortedObjects.reverse());
this._draw(ctx, activeGroup);
}
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_renderBackground: function(ctx) {
if (this.backgroundColor) {
ctx.fillStyle = this.backgroundColor.toLive
? this.backgroundColor.toLive(ctx)
: this.backgroundColor;
ctx.fillRect(
this.backgroundColor.offsetX || 0,
this.backgroundColor.offsetY || 0,
this.width,
this.height);
}
if (this.backgroundImage) {
this._draw(ctx, this.backgroundImage);
}
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_renderOverlay: function(ctx) {
if (this.overlayColor) {
ctx.fillStyle = this.overlayColor.toLive
? this.overlayColor.toLive(ctx)
: this.overlayColor;
ctx.fillRect(
this.overlayColor.offsetX || 0,
this.overlayColor.offsetY || 0,
this.width,
this.height);
}
if (this.overlayImage) {
this._draw(ctx, this.overlayImage);
}
},
/**
* Method to render only the top canvas.
* Also used to render the group selection box.
* @return {fabric.Canvas} thisArg
* @chainable
*/
renderTop: function () {
var ctx = this.contextTop || this.contextContainer;
this.clearContext(ctx);
// we render the top context - last object
if (this.selection && this._groupSelector) {
this._drawSelection();
}
// delegate rendering to group selection if one exists
// used for drawing selection borders/controls
var activeGroup = this.getActiveGroup();
if (activeGroup) {
activeGroup.render(ctx);
}
this._renderOverlay(ctx);
this.fire('after:render');
return this;
},
/**
* Returns coordinates of a center of canvas.
* Returned value is an object with top and left properties
* @return {Object} object with "top" and "left" number values
*/
getCenter: function () {
return {
top: this.getHeight() / 2,
left: this.getWidth() / 2
};
},
/**
* Centers object horizontally.
* You might need to call `setCoords` on an object after centering, to update controls area.
* @param {fabric.Object} object Object to center horizontally
* @return {fabric.Canvas} thisArg
*/
centerObjectH: function (object) {
this._centerObject(object, new fabric.Point(this.getCenter().left, object.getCenterPoint().y));
this.renderAll();
return this;
},
/**
* Centers object vertically.
* You might need to call `setCoords` on an object after centering, to update controls area.
* @param {fabric.Object} object Object to center vertically
* @return {fabric.Canvas} thisArg
* @chainable
*/
centerObjectV: function (object) {
this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenter().top));
this.renderAll();
return this;
},
/**
* Centers object vertically and horizontally.
* You might need to call `setCoords` on an object after centering, to update controls area.
* @param {fabric.Object} object Object to center vertically and horizontally
* @return {fabric.Canvas} thisArg
* @chainable
*/
centerObject: function(object) {
var center = this.getCenter();
this._centerObject(object, new fabric.Point(center.left, center.top));
this.renderAll();
return this;
},
/**
* @private
* @param {fabric.Object} object Object to center
* @param {fabric.Point} center Center point
* @return {fabric.Canvas} thisArg
* @chainable
*/
_centerObject: function(object, center) {
object.setPositionByOrigin(center, 'center', 'center');
return this;
},
/**
* Returs dataless JSON representation of canvas
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {String} json string
*/
toDatalessJSON: function (propertiesToInclude) {
return this.toDatalessObject(propertiesToInclude);
},
/**
* Returns object representation of canvas
* @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) {
return this._toObjectMethod('toObject', propertiesToInclude);
},
/**
* Returns dataless object representation of canvas
* @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) {
return this._toObjectMethod('toDatalessObject', propertiesToInclude);
},
/**
* @private
*/
_toObjectMethod: function (methodName, propertiesToInclude) {
var data = {
objects: this._toObjects(methodName, propertiesToInclude)
};
extend(data, this.__serializeBgOverlay());
fabric.util.populateWithProperties(this, data, propertiesToInclude);
return data;
},
/**
* @private
*/
_toObjects: function(methodName, propertiesToInclude) {
return this.getObjects().map(function(instance) {
return this._toObject(instance, methodName, propertiesToInclude);
}, this);
},
/**
* @private
*/
_toObject: function(instance, methodName, propertiesToInclude) {
var originalValue;
if (!this.includeDefaultValues) {
originalValue = instance.includeDefaultValues;
instance.includeDefaultValues = false;
}
//If the object is part of the current selection group, it should
//be transformed appropriately
//i.e. it should be serialised as it would appear if the selection group
//were to be destroyed.
var originalProperties = this._realizeGroupTransformOnObject(instance),
object = instance[methodName](propertiesToInclude);
if (!this.includeDefaultValues) {
instance.includeDefaultValues = originalValue;
}
//Undo the damage we did by changing all of its properties
this._unwindGroupTransformOnObject(instance, originalProperties);
return object;
},
/**
* Realises an object's group transformation on it
* @private
* @param {fabric.Object} [instance] the object to transform (gets mutated)
* @returns the original values of instance which were changed
*/
_realizeGroupTransformOnObject: function(instance) {
var layoutProps = ['angle', 'flipX', 'flipY', 'height', 'left', 'scaleX', 'scaleY', 'top', 'width'];
if (instance.group && instance.group === this.getActiveGroup()) {
//Copy all the positionally relevant properties across now
var originalValues = {};
layoutProps.forEach(function(prop) {
originalValues[prop] = instance[prop];
});
this.getActiveGroup().realizeTransform(instance);
return originalValues;
}
else {
return null;
}
},
/**
* Restores the changed properties of instance
* @private
* @param {fabric.Object} [instance] the object to un-transform (gets mutated)
* @param {Object} [originalValues] the original values of instance, as returned by _realizeGroupTransformOnObject
*/
_unwindGroupTransformOnObject: function(instance, originalValues) {
if (originalValues) {
instance.set(originalValues);
}
},
/**
* @private
*/
__serializeBgOverlay: function() {
var data = {
background: (this.backgroundColor && this.backgroundColor.toObject)
? this.backgroundColor.toObject()
: this.backgroundColor
};
if (this.overlayColor) {
data.overlay = this.overlayColor.toObject
? this.overlayColor.toObject()
: this.overlayColor;
}
if (this.backgroundImage) {
data.backgroundImage = this.backgroundImage.toObject();
}
if (this.overlayImage) {
data.overlayImage = this.overlayImage.toObject();
}
return data;
},
/* _TO_SVG_START_ */
/**
* When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true,
* a zoomed canvas will then produce zoomed SVG output.
* @type Boolean
* @default
*/
svgViewportTransformation: true,
/**
* Returns SVG representation of canvas
* @function
* @param {Object} [options] Options object for SVG output
* @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included
* @param {Object} [options.viewBox] SVG viewbox object
* @param {Number} [options.viewBox.x] x-cooridnate of viewbox
* @param {Number} [options.viewBox.y] y-coordinate of viewbox
* @param {Number} [options.viewBox.width] Width of viewbox
* @param {Number} [options.viewBox.height] Height of viewbox
* @param {String} [options.encoding=UTF-8] Encoding of SVG output
* @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation.
* @return {String} SVG string
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#serialization}
* @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo}
* @example
Normal SVG output
* var svg = canvas.toSVG();
* @example
SVG output without preamble (without <?xml ../>)
* var svg = canvas.toSVG({suppressPreamble: true});
* @example