You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26126 lines
758 KiB
JavaScript
26126 lines
758 KiB
JavaScript
/* build: `node build.js modules=ALL exclude=json,gestures minifier=uglifyjs` */
|
|
/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
|
|
|
|
var fabric = fabric || { version: "1.6.7" };
|
|
if (typeof exports !== 'undefined') {
|
|
exports.fabric = fabric;
|
|
}
|
|
|
|
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
|
fabric.document = document;
|
|
fabric.window = window;
|
|
// ensure globality even if entire library were function wrapped (as in Meteor.js packaging system)
|
|
window.fabric = fabric;
|
|
}
|
|
else {
|
|
// assume we're running under node.js when document/window are not present
|
|
fabric.document = require("jsdom")
|
|
.jsdom("<!DOCTYPE html><html><head></head><body></body></html>");
|
|
|
|
if (fabric.document.createWindow) {
|
|
fabric.window = fabric.document.createWindow();
|
|
} else {
|
|
fabric.window = fabric.document.parentWindow;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* True when in environment that supports touch events
|
|
* @type boolean
|
|
*/
|
|
fabric.isTouchSupported = "ontouchstart" in fabric.document.documentElement;
|
|
|
|
/**
|
|
* True when in environment that's probably Node.js
|
|
* @type boolean
|
|
*/
|
|
fabric.isLikelyNode = typeof Buffer !== 'undefined' &&
|
|
typeof window === 'undefined';
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* Attributes parsed from all SVG elements
|
|
* @type array
|
|
*/
|
|
fabric.SHARED_ATTRIBUTES = [
|
|
"display",
|
|
"transform",
|
|
"fill", "fill-opacity", "fill-rule",
|
|
"opacity",
|
|
"stroke", "stroke-dasharray", "stroke-linecap",
|
|
"stroke-linejoin", "stroke-miterlimit",
|
|
"stroke-opacity", "stroke-width",
|
|
"id"
|
|
];
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion.
|
|
*/
|
|
fabric.DPI = 96;
|
|
fabric.reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:e[-+]?\\d+)?)';
|
|
fabric.fontPaths = { };
|
|
|
|
/**
|
|
* Cache Object for widths of chars in text rendering.
|
|
*/
|
|
fabric.charWidthsCache = { };
|
|
|
|
/**
|
|
* Device Pixel Ratio
|
|
* @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html
|
|
*/
|
|
fabric.devicePixelRatio = fabric.window.devicePixelRatio ||
|
|
fabric.window.webkitDevicePixelRatio ||
|
|
fabric.window.mozDevicePixelRatio ||
|
|
1;
|
|
|
|
|
|
(function() {
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} eventName
|
|
* @param {Function} handler
|
|
*/
|
|
function _removeEventListener(eventName, handler) {
|
|
if (!this.__eventListeners[eventName]) {
|
|
return;
|
|
}
|
|
var eventListener = this.__eventListeners[eventName];
|
|
if (handler) {
|
|
eventListener[eventListener.indexOf(handler)] = false;
|
|
}
|
|
else {
|
|
fabric.util.array.fill(eventListener, false);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Observes specified event
|
|
* @deprecated `observe` deprecated since 0.8.34 (use `on` instead)
|
|
* @memberOf fabric.Observable
|
|
* @alias on
|
|
* @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
|
|
* @param {Function} handler Function that receives a notification when an event of the specified type occurs
|
|
* @return {Self} thisArg
|
|
* @chainable
|
|
*/
|
|
function observe(eventName, handler) {
|
|
if (!this.__eventListeners) {
|
|
this.__eventListeners = { };
|
|
}
|
|
// one object with key/value pairs was passed
|
|
if (arguments.length === 1) {
|
|
for (var prop in eventName) {
|
|
this.on(prop, eventName[prop]);
|
|
}
|
|
}
|
|
else {
|
|
if (!this.__eventListeners[eventName]) {
|
|
this.__eventListeners[eventName] = [];
|
|
}
|
|
this.__eventListeners[eventName].push(handler);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Stops event observing for a particular event handler. Calling this method
|
|
* without arguments removes all handlers for all events
|
|
* @deprecated `stopObserving` deprecated since 0.8.34 (use `off` instead)
|
|
* @memberOf fabric.Observable
|
|
* @alias off
|
|
* @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
|
|
* @param {Function} handler Function to be deleted from EventListeners
|
|
* @return {Self} thisArg
|
|
* @chainable
|
|
*/
|
|
function stopObserving(eventName, handler) {
|
|
if (!this.__eventListeners) {
|
|
return;
|
|
}
|
|
|
|
// remove all key/value pairs (event name -> event handler)
|
|
if (arguments.length === 0) {
|
|
for (eventName in this.__eventListeners) {
|
|
_removeEventListener.call(this, eventName);
|
|
}
|
|
}
|
|
// one object with key/value pairs was passed
|
|
else if (arguments.length === 1 && typeof arguments[0] === 'object') {
|
|
for (var prop in eventName) {
|
|
_removeEventListener.call(this, prop, eventName[prop]);
|
|
}
|
|
}
|
|
else {
|
|
_removeEventListener.call(this, eventName, handler);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Fires event with an optional options object
|
|
* @deprecated `fire` deprecated since 1.0.7 (use `trigger` instead)
|
|
* @memberOf fabric.Observable
|
|
* @alias trigger
|
|
* @param {String} eventName Event name to fire
|
|
* @param {Object} [options] Options object
|
|
* @return {Self} thisArg
|
|
* @chainable
|
|
*/
|
|
function fire(eventName, options) {
|
|
if (!this.__eventListeners) {
|
|
return;
|
|
}
|
|
|
|
var listenersForEvent = this.__eventListeners[eventName];
|
|
if (!listenersForEvent) {
|
|
return;
|
|
}
|
|
|
|
for (var i = 0, len = listenersForEvent.length; i < len; i++) {
|
|
listenersForEvent[i] && listenersForEvent[i].call(this, options || { });
|
|
}
|
|
this.__eventListeners[eventName] = listenersForEvent.filter(function(value) {
|
|
return value !== false;
|
|
});
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* @namespace fabric.Observable
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events}
|
|
* @see {@link http://fabricjs.com/events|Events demo}
|
|
*/
|
|
fabric.Observable = {
|
|
observe: observe,
|
|
stopObserving: stopObserving,
|
|
fire: fire,
|
|
|
|
on: observe,
|
|
off: stopObserving,
|
|
trigger: fire
|
|
};
|
|
})();
|
|
|
|
|
|
/**
|
|
* @namespace fabric.Collection
|
|
*/
|
|
fabric.Collection = {
|
|
|
|
_objects: [],
|
|
|
|
/**
|
|
* Adds objects to collection, Canvas or Group, then renders canvas
|
|
* (if `renderOnAddRemove` is not `false`).
|
|
* in case of Group no changes to bounding box are made.
|
|
* Objects should be instances of (or inherit from) fabric.Object
|
|
* @param {...fabric.Object} object Zero or more fabric instances
|
|
* @return {Self} thisArg
|
|
* @chainable
|
|
*/
|
|
add: function () {
|
|
this._objects.push.apply(this._objects, arguments);
|
|
if (this._onObjectAdded) {
|
|
for (var i = 0, length = arguments.length; i < length; i++) {
|
|
this._onObjectAdded(arguments[i]);
|
|
}
|
|
}
|
|
this.renderOnAddRemove && this.renderAll();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`)
|
|
* An object should be an instance of (or inherit from) fabric.Object
|
|
* @param {Object} object Object to insert
|
|
* @param {Number} index Index to insert object at
|
|
* @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs
|
|
* @return {Self} thisArg
|
|
* @chainable
|
|
*/
|
|
insertAt: function (object, index, nonSplicing) {
|
|
var objects = this.getObjects();
|
|
if (nonSplicing) {
|
|
objects[index] = object;
|
|
}
|
|
else {
|
|
objects.splice(index, 0, object);
|
|
}
|
|
this._onObjectAdded && this._onObjectAdded(object);
|
|
this.renderOnAddRemove && this.renderAll();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)
|
|
* @param {...fabric.Object} object Zero or more fabric instances
|
|
* @return {Self} thisArg
|
|
* @chainable
|
|
*/
|
|
remove: function() {
|
|
var objects = this.getObjects(),
|
|
index, somethingRemoved = false;
|
|
|
|
for (var i = 0, length = arguments.length; i < length; i++) {
|
|
index = objects.indexOf(arguments[i]);
|
|
|
|
// only call onObjectRemoved if an object was actually removed
|
|
if (index !== -1) {
|
|
somethingRemoved = true;
|
|
objects.splice(index, 1);
|
|
this._onObjectRemoved && this._onObjectRemoved(arguments[i]);
|
|
}
|
|
}
|
|
|
|
this.renderOnAddRemove && somethingRemoved && this.renderAll();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Executes given function for each object in this group
|
|
* @param {Function} callback
|
|
* Callback invoked with current object as first argument,
|
|
* index - as second and an array of all objects - as third.
|
|
* Callback is invoked in a context of Global Object (e.g. `window`)
|
|
* when no `context` argument is given
|
|
*
|
|
* @param {Object} context Context (aka thisObject)
|
|
* @return {Self} thisArg
|
|
* @chainable
|
|
*/
|
|
forEachObject: function(callback, context) {
|
|
var objects = this.getObjects();
|
|
for (var i = 0, len = objects.length; i < len; i++) {
|
|
callback.call(context, objects[i], i, objects);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns an array of children objects of this instance
|
|
* Type parameter introduced in 1.3.10
|
|
* @param {String} [type] When specified, only objects of this type are returned
|
|
* @return {Array}
|
|
*/
|
|
getObjects: function(type) {
|
|
if (typeof type === 'undefined') {
|
|
return this._objects;
|
|
}
|
|
return this._objects.filter(function(o) {
|
|
return o.type === type;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns object at specified index
|
|
* @param {Number} index
|
|
* @return {Self} thisArg
|
|
*/
|
|
item: function (index) {
|
|
return this.getObjects()[index];
|
|
},
|
|
|
|
/**
|
|
* Returns true if collection contains no objects
|
|
* @return {Boolean} true if collection is empty
|
|
*/
|
|
isEmpty: function () {
|
|
return this.getObjects().length === 0;
|
|
},
|
|
|
|
/**
|
|
* Returns a size of a collection (i.e: length of an array containing its objects)
|
|
* @return {Number} Collection size
|
|
*/
|
|
size: function() {
|
|
return this.getObjects().length;
|
|
},
|
|
|
|
/**
|
|
* Returns true if collection contains an object
|
|
* @param {Object} object Object to check against
|
|
* @return {Boolean} `true` if collection contains an object
|
|
*/
|
|
contains: function(object) {
|
|
return this.getObjects().indexOf(object) > -1;
|
|
},
|
|
|
|
/**
|
|
* Returns number representation of a collection complexity
|
|
* @return {Number} complexity
|
|
*/
|
|
complexity: function () {
|
|
return this.getObjects().reduce(function (memo, current) {
|
|
memo += current.complexity ? current.complexity() : 0;
|
|
return memo;
|
|
}, 0);
|
|
}
|
|
};
|
|
|
|
|
|
(function(global) {
|
|
|
|
var sqrt = Math.sqrt,
|
|
atan2 = Math.atan2,
|
|
pow = Math.pow,
|
|
abs = Math.abs,
|
|
PiBy180 = Math.PI / 180;
|
|
|
|
/**
|
|
* @namespace fabric.util
|
|
*/
|
|
fabric.util = {
|
|
|
|
/**
|
|
* Removes value from an array.
|
|
* Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Array} array
|
|
* @param {*} value
|
|
* @return {Array} original array
|
|
*/
|
|
removeFromArray: function(array, value) {
|
|
var idx = array.indexOf(value);
|
|
if (idx !== -1) {
|
|
array.splice(idx, 1);
|
|
}
|
|
return array;
|
|
},
|
|
|
|
/**
|
|
* Returns random number between 2 specified ones.
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Number} min lower limit
|
|
* @param {Number} max upper limit
|
|
* @return {Number} random value (between min and max)
|
|
*/
|
|
getRandomInt: function(min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
},
|
|
|
|
/**
|
|
* Transforms degrees to radians.
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Number} degrees value in degrees
|
|
* @return {Number} value in radians
|
|
*/
|
|
degreesToRadians: function(degrees) {
|
|
return degrees * PiBy180;
|
|
},
|
|
|
|
/**
|
|
* Transforms radians to degrees.
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Number} radians value in radians
|
|
* @return {Number} value in degrees
|
|
*/
|
|
radiansToDegrees: function(radians) {
|
|
return radians / PiBy180;
|
|
},
|
|
|
|
/**
|
|
* Rotates `point` around `origin` with `radians`
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {fabric.Point} point The point to rotate
|
|
* @param {fabric.Point} origin The origin of the rotation
|
|
* @param {Number} radians The radians of the angle for the rotation
|
|
* @return {fabric.Point} The new rotated point
|
|
*/
|
|
rotatePoint: function(point, origin, radians) {
|
|
point.subtractEquals(origin);
|
|
var v = fabric.util.rotateVector(point, radians);
|
|
return new fabric.Point(v.x, v.y).addEquals(origin);
|
|
},
|
|
|
|
/**
|
|
* Rotates `vector` with `radians`
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Object} vector The vector to rotate (x and y)
|
|
* @param {Number} radians The radians of the angle for the rotation
|
|
* @return {Object} The new rotated point
|
|
*/
|
|
rotateVector: function(vector, radians) {
|
|
var sin = Math.sin(radians),
|
|
cos = Math.cos(radians),
|
|
rx = vector.x * cos - vector.y * sin,
|
|
ry = vector.x * sin + vector.y * cos;
|
|
return {
|
|
x: rx,
|
|
y: ry
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Apply transform t to point p
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {fabric.Point} p The point to transform
|
|
* @param {Array} t The transform
|
|
* @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied
|
|
* @return {fabric.Point} The transformed point
|
|
*/
|
|
transformPoint: function(p, t, ignoreOffset) {
|
|
if (ignoreOffset) {
|
|
return new fabric.Point(
|
|
t[0] * p.x + t[2] * p.y,
|
|
t[1] * p.x + t[3] * p.y
|
|
);
|
|
}
|
|
return new fabric.Point(
|
|
t[0] * p.x + t[2] * p.y + t[4],
|
|
t[1] * p.x + t[3] * p.y + t[5]
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Returns coordinates of points's bounding rectangle (left, top, width, height)
|
|
* @param {Array} points 4 points array
|
|
* @return {Object} Object with left, top, width, height properties
|
|
*/
|
|
makeBoundingBoxFromPoints: function(points) {
|
|
var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x],
|
|
minX = fabric.util.array.min(xPoints),
|
|
maxX = fabric.util.array.max(xPoints),
|
|
width = Math.abs(minX - maxX),
|
|
yPoints = [points[0].y, points[1].y, points[2].y, points[3].y],
|
|
minY = fabric.util.array.min(yPoints),
|
|
maxY = fabric.util.array.max(yPoints),
|
|
height = Math.abs(minY - maxY);
|
|
|
|
return {
|
|
left: minX,
|
|
top: minY,
|
|
width: width,
|
|
height: height
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Invert transformation t
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Array} t The transform
|
|
* @return {Array} The inverted transform
|
|
*/
|
|
invertTransform: function(t) {
|
|
var a = 1 / (t[0] * t[3] - t[1] * t[2]),
|
|
r = [a * t[3], -a * t[1], -a * t[2], a * t[0]],
|
|
o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true);
|
|
r[4] = -o.x;
|
|
r[5] = -o.y;
|
|
return r;
|
|
},
|
|
|
|
/**
|
|
* A wrapper around Number#toFixed, which contrary to native method returns number, not string.
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Number|String} number number to operate on
|
|
* @param {Number} fractionDigits number of fraction digits to "leave"
|
|
* @return {Number}
|
|
*/
|
|
toFixed: function(number, fractionDigits) {
|
|
return parseFloat(Number(number).toFixed(fractionDigits));
|
|
},
|
|
|
|
/**
|
|
* Converts from attribute value to pixel value if applicable.
|
|
* Returns converted pixels or original value not converted.
|
|
* @param {Number|String} value number to operate on
|
|
* @param {Number} fontSize
|
|
* @return {Number|String}
|
|
*/
|
|
parseUnit: function(value, fontSize) {
|
|
var unit = /\D{0,2}$/.exec(value),
|
|
number = parseFloat(value);
|
|
if (!fontSize) {
|
|
fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;
|
|
}
|
|
switch (unit[0]) {
|
|
case 'mm':
|
|
return number * fabric.DPI / 25.4;
|
|
|
|
case 'cm':
|
|
return number * fabric.DPI / 2.54;
|
|
|
|
case 'in':
|
|
return number * fabric.DPI;
|
|
|
|
case 'pt':
|
|
return number * fabric.DPI / 72; // or * 4 / 3
|
|
|
|
case 'pc':
|
|
return number * fabric.DPI / 72 * 12; // or * 16
|
|
|
|
case 'em':
|
|
return number * fontSize;
|
|
|
|
default:
|
|
return number;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Function which always returns `false`.
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @return {Boolean}
|
|
*/
|
|
falseFunction: function() {
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Returns klass "Class" object of given namespace
|
|
* @memberOf fabric.util
|
|
* @param {String} type Type of object (eg. 'circle')
|
|
* @param {String} namespace Namespace to get klass "Class" object from
|
|
* @return {Object} klass "Class"
|
|
*/
|
|
getKlass: function(type, namespace) {
|
|
// capitalize first letter only
|
|
type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));
|
|
return fabric.util.resolveNamespace(namespace)[type];
|
|
},
|
|
|
|
/**
|
|
* Returns object of given namespace
|
|
* @memberOf fabric.util
|
|
* @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'
|
|
* @return {Object} Object for given namespace (default fabric)
|
|
*/
|
|
resolveNamespace: function(namespace) {
|
|
if (!namespace) {
|
|
return fabric;
|
|
}
|
|
|
|
var parts = namespace.split('.'),
|
|
len = parts.length, i,
|
|
obj = global || fabric.window;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
obj = obj[parts[i]];
|
|
}
|
|
|
|
return obj;
|
|
},
|
|
|
|
/**
|
|
* Loads image element from given url and passes it to a callback
|
|
* @memberOf fabric.util
|
|
* @param {String} url URL representing an image
|
|
* @param {Function} callback Callback; invoked with loaded image
|
|
* @param {*} [context] Context to invoke callback in
|
|
* @param {Object} [crossOrigin] crossOrigin value to set image element to
|
|
*/
|
|
loadImage: function(url, callback, context, crossOrigin) {
|
|
if (!url) {
|
|
callback && callback.call(context, url);
|
|
return;
|
|
}
|
|
|
|
var img = fabric.util.createImage();
|
|
|
|
/** @ignore */
|
|
img.onload = function () {
|
|
callback && callback.call(context, img);
|
|
img = img.onload = img.onerror = null;
|
|
};
|
|
|
|
/** @ignore */
|
|
img.onerror = function() {
|
|
fabric.log('Error loading ' + img.src);
|
|
callback && callback.call(context, null, true);
|
|
img = img.onload = img.onerror = null;
|
|
};
|
|
|
|
// data-urls appear to be buggy with crossOrigin
|
|
// https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767
|
|
// see https://code.google.com/p/chromium/issues/detail?id=315152
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=935069
|
|
if (url.indexOf('data') !== 0 && crossOrigin) {
|
|
img.crossOrigin = crossOrigin;
|
|
}
|
|
|
|
img.src = url;
|
|
},
|
|
|
|
/**
|
|
* Creates corresponding fabric instances from their object representations
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Array} objects Objects to enliven
|
|
* @param {Function} callback Callback to invoke when all objects are created
|
|
* @param {String} namespace Namespace to get klass "Class" object from
|
|
* @param {Function} reviver Method for further parsing of object elements,
|
|
* called after each fabric object created.
|
|
*/
|
|
enlivenObjects: function(objects, callback, namespace, reviver) {
|
|
objects = objects || [];
|
|
|
|
function onLoaded() {
|
|
if (++numLoadedObjects === numTotalObjects) {
|
|
callback && callback(enlivenedObjects);
|
|
}
|
|
}
|
|
|
|
var enlivenedObjects = [],
|
|
numLoadedObjects = 0,
|
|
numTotalObjects = objects.length;
|
|
|
|
if (!numTotalObjects) {
|
|
callback && callback(enlivenedObjects);
|
|
return;
|
|
}
|
|
|
|
objects.forEach(function (o, index) {
|
|
// if sparse array
|
|
if (!o || !o.type) {
|
|
onLoaded();
|
|
return;
|
|
}
|
|
var klass = fabric.util.getKlass(o.type, namespace);
|
|
if (klass.async) {
|
|
klass.fromObject(o, function (obj, error) {
|
|
if (!error) {
|
|
enlivenedObjects[index] = obj;
|
|
reviver && reviver(o, enlivenedObjects[index]);
|
|
}
|
|
onLoaded();
|
|
});
|
|
}
|
|
else {
|
|
enlivenedObjects[index] = klass.fromObject(o);
|
|
reviver && reviver(o, enlivenedObjects[index]);
|
|
onLoaded();
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Groups SVG elements (usually those retrieved from SVG document)
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Array} elements SVG elements to group
|
|
* @param {Object} [options] Options object
|
|
* @param {String} path Value to set sourcePath to
|
|
* @return {fabric.Object|fabric.PathGroup}
|
|
*/
|
|
groupSVGElements: function(elements, options, path) {
|
|
var object;
|
|
|
|
object = new fabric.PathGroup(elements, options);
|
|
|
|
if (typeof path !== 'undefined') {
|
|
object.setSourcePath(path);
|
|
}
|
|
return object;
|
|
},
|
|
|
|
/**
|
|
* Populates an object with properties of another object
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Object} source Source object
|
|
* @param {Object} destination Destination object
|
|
* @return {Array} properties Propertie names to include
|
|
*/
|
|
populateWithProperties: function(source, destination, properties) {
|
|
if (properties && Object.prototype.toString.call(properties) === '[object Array]') {
|
|
for (var i = 0, len = properties.length; i < len; i++) {
|
|
if (properties[i] in source) {
|
|
destination[properties[i]] = source[properties[i]];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Draws a dashed line between two points
|
|
*
|
|
* This method is used to draw dashed line around selection area.
|
|
* See <a href="http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas">dotted stroke in canvas</a>
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx context
|
|
* @param {Number} x start x coordinate
|
|
* @param {Number} y start y coordinate
|
|
* @param {Number} x2 end x coordinate
|
|
* @param {Number} y2 end y coordinate
|
|
* @param {Array} da dash array pattern
|
|
*/
|
|
drawDashedLine: function(ctx, x, y, x2, y2, da) {
|
|
var dx = x2 - x,
|
|
dy = y2 - y,
|
|
len = sqrt(dx * dx + dy * dy),
|
|
rot = atan2(dy, dx),
|
|
dc = da.length,
|
|
di = 0,
|
|
draw = true;
|
|
|
|
ctx.save();
|
|
ctx.translate(x, y);
|
|
ctx.moveTo(0, 0);
|
|
ctx.rotate(rot);
|
|
|
|
x = 0;
|
|
while (len > x) {
|
|
x += da[di++ % dc];
|
|
if (x > len) {
|
|
x = len;
|
|
}
|
|
ctx[draw ? 'lineTo' : 'moveTo'](x, 0);
|
|
draw = !draw;
|
|
}
|
|
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* Creates canvas element and initializes it via excanvas if necessary
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {CanvasElement} [canvasEl] optional canvas element to initialize;
|
|
* when not given, element is created implicitly
|
|
* @return {CanvasElement} initialized canvas element
|
|
*/
|
|
createCanvasElement: function(canvasEl) {
|
|
canvasEl || (canvasEl = fabric.document.createElement('canvas'));
|
|
/* eslint-disable camelcase */
|
|
if (!canvasEl.getContext && typeof G_vmlCanvasManager !== 'undefined') {
|
|
G_vmlCanvasManager.initElement(canvasEl);
|
|
}
|
|
/* eslint-enable camelcase */
|
|
return canvasEl;
|
|
},
|
|
|
|
/**
|
|
* Creates image element (works on client and node)
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @return {HTMLImageElement} HTML image element
|
|
*/
|
|
createImage: function() {
|
|
return fabric.isLikelyNode
|
|
? new (require('canvas').Image)()
|
|
: fabric.document.createElement('img');
|
|
},
|
|
|
|
/**
|
|
* Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Object} klass "Class" to create accessors for
|
|
*/
|
|
createAccessors: function(klass) {
|
|
var proto = klass.prototype, i, propName,
|
|
capitalizedPropName, setterName, getterName;
|
|
|
|
for (i = proto.stateProperties.length; i--; ) {
|
|
|
|
propName = proto.stateProperties[i];
|
|
capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
|
|
setterName = 'set' + capitalizedPropName;
|
|
getterName = 'get' + capitalizedPropName;
|
|
|
|
// using `new Function` for better introspection
|
|
if (!proto[getterName]) {
|
|
proto[getterName] = (function(property) {
|
|
var that = this;
|
|
return function () { this.get(property); }; //return new Function('return this.get("' + property + '")');
|
|
})(propName);
|
|
}
|
|
if (!proto[setterName]) {
|
|
proto[setterName] = (function(property) {
|
|
var that = this;
|
|
return function () { return this.get(property); }; // new Function('value', 'return this.set("' + property + '", value)');
|
|
})(propName);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {fabric.Object} receiver Object implementing `clipTo` method
|
|
* @param {CanvasRenderingContext2D} ctx Context to clip
|
|
*/
|
|
clipContext: function(receiver, ctx) {
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
receiver.clipTo(ctx);
|
|
ctx.clip();
|
|
},
|
|
|
|
/**
|
|
* Multiply matrix A by matrix B to nest transformations
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Array} a First transformMatrix
|
|
* @param {Array} b Second transformMatrix
|
|
* @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices
|
|
* @return {Array} The product of the two transform matrices
|
|
*/
|
|
multiplyTransformMatrices: function(a, b, is2x2) {
|
|
// Matrix multiply a * b
|
|
return [
|
|
a[0] * b[0] + a[2] * b[1],
|
|
a[1] * b[0] + a[3] * b[1],
|
|
a[0] * b[2] + a[2] * b[3],
|
|
a[1] * b[2] + a[3] * b[3],
|
|
is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4],
|
|
is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5]
|
|
];
|
|
},
|
|
|
|
/**
|
|
* Decomposes standard 2x2 matrix into transform componentes
|
|
* @static
|
|
* @memberOf fabric.util
|
|
* @param {Array} a transformMatrix
|
|
* @return {Object} Components of transform
|
|
*/
|
|
qrDecompose: function(a) {
|
|
var angle = atan2(a[1], a[0]),
|
|
denom = pow(a[0], 2) + pow(a[1], 2),
|
|
scaleX = sqrt(denom),
|
|
scaleY = (a[0] * a[3] - a[2] * a [1]) / scaleX,
|
|
skewX = atan2(a[0] * a[2] + a[1] * a [3], denom);
|
|
return {
|
|
angle: angle / PiBy180,
|
|
scaleX: scaleX,
|
|
scaleY: scaleY,
|
|
skewX: skewX / PiBy180,
|
|
skewY: 0,
|
|
translateX: a[4],
|
|
translateY: a[5]
|
|
};
|
|
},
|
|
|
|
customTransformMatrix: function(scaleX, scaleY, skewX) {
|
|
var skewMatrixX = [1, 0, abs(Math.tan(skewX * PiBy180)), 1],
|
|
scaleMatrix = [abs(scaleX), 0, 0, abs(scaleY)];
|
|
return fabric.util.multiplyTransformMatrices(scaleMatrix, skewMatrixX, true);
|
|
},
|
|
|
|
resetObjectTransform: function (target) {
|
|
target.scaleX = 1;
|
|
target.scaleY = 1;
|
|
target.skewX = 0;
|
|
target.skewY = 0;
|
|
target.flipX = false;
|
|
target.flipY = false;
|
|
target.setAngle(0);
|
|
},
|
|
|
|
/**
|
|
* Returns string representation of function body
|
|
* @param {Function} fn Function to get body of
|
|
* @return {String} Function body
|
|
*/
|
|
getFunctionBody: function(fn) {
|
|
return (String(fn).match(/function[^{]*\{([\s\S]*)\}/) || {})[1];
|
|
},
|
|
|
|
/**
|
|
* Returns true if context has transparent pixel
|
|
* at specified location (taking tolerance into account)
|
|
* @param {CanvasRenderingContext2D} ctx context
|
|
* @param {Number} x x coordinate
|
|
* @param {Number} y y coordinate
|
|
* @param {Number} tolerance Tolerance
|
|
*/
|
|
isTransparent: function(ctx, x, y, tolerance) {
|
|
|
|
// If tolerance is > 0 adjust start coords to take into account.
|
|
// If moves off Canvas fix to 0
|
|
if (tolerance > 0) {
|
|
if (x > tolerance) {
|
|
x -= tolerance;
|
|
}
|
|
else {
|
|
x = 0;
|
|
}
|
|
if (y > tolerance) {
|
|
y -= tolerance;
|
|
}
|
|
else {
|
|
y = 0;
|
|
}
|
|
}
|
|
|
|
var _isTransparent = true, i, temp,
|
|
imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1),
|
|
l = imageData.data.length;
|
|
|
|
// Split image data - for tolerance > 1, pixelDataSize = 4;
|
|
for (i = 3; i < l; i += 4) {
|
|
temp = imageData.data[i];
|
|
_isTransparent = temp <= 0;
|
|
if (_isTransparent === false) {
|
|
break; // Stop if colour found
|
|
}
|
|
}
|
|
|
|
imageData = null;
|
|
|
|
return _isTransparent;
|
|
},
|
|
|
|
/**
|
|
* Parse preserveAspectRatio attribute from element
|
|
* @param {string} attribute to be parsed
|
|
* @return {Object} an object containing align and meetOrSlice attribute
|
|
*/
|
|
parsePreserveAspectRatioAttribute: function(attribute) {
|
|
var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid',
|
|
aspectRatioAttrs = attribute.split(' '), align;
|
|
|
|
if (aspectRatioAttrs && aspectRatioAttrs.length) {
|
|
meetOrSlice = aspectRatioAttrs.pop();
|
|
if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') {
|
|
align = meetOrSlice;
|
|
meetOrSlice = 'meet';
|
|
}
|
|
else if (aspectRatioAttrs.length) {
|
|
align = aspectRatioAttrs.pop();
|
|
}
|
|
}
|
|
//divide align in alignX and alignY
|
|
alignX = align !== 'none' ? align.slice(1, 4) : 'none';
|
|
alignY = align !== 'none' ? align.slice(5, 8) : 'none';
|
|
return {
|
|
meetOrSlice: meetOrSlice,
|
|
alignX: alignX,
|
|
alignY: alignY
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Clear char widths cache for a font family.
|
|
* @memberOf fabric.util
|
|
* @param {String} [fontFamily] font family to clear
|
|
*/
|
|
clearFabricFontCache: function(fontFamily) {
|
|
if (!fontFamily) {
|
|
fabric.charWidthsCache = { };
|
|
}
|
|
else if (fabric.charWidthsCache[fontFamily]) {
|
|
delete fabric.charWidthsCache[fontFamily];
|
|
}
|
|
}
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function() {
|
|
|
|
var arcToSegmentsCache = { },
|
|
segmentToBezierCache = { },
|
|
boundsOfCurveCache = { },
|
|
_join = Array.prototype.join;
|
|
|
|
/* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp
|
|
* by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here
|
|
* http://mozilla.org/MPL/2.0/
|
|
*/
|
|
function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) {
|
|
var argsString = _join.call(arguments);
|
|
if (arcToSegmentsCache[argsString]) {
|
|
return arcToSegmentsCache[argsString];
|
|
}
|
|
|
|
var PI = Math.PI, th = rotateX * PI / 180,
|
|
sinTh = Math.sin(th),
|
|
cosTh = Math.cos(th),
|
|
fromX = 0, fromY = 0;
|
|
|
|
rx = Math.abs(rx);
|
|
ry = Math.abs(ry);
|
|
|
|
var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5,
|
|
py = -cosTh * toY * 0.5 + sinTh * toX * 0.5,
|
|
rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px,
|
|
pl = rx2 * ry2 - rx2 * py2 - ry2 * px2,
|
|
root = 0;
|
|
|
|
if (pl < 0) {
|
|
var s = Math.sqrt(1 - pl / (rx2 * ry2));
|
|
rx *= s;
|
|
ry *= s;
|
|
}
|
|
else {
|
|
root = (large === sweep ? -1.0 : 1.0) *
|
|
Math.sqrt( pl / (rx2 * py2 + ry2 * px2));
|
|
}
|
|
|
|
var cx = root * rx * py / ry,
|
|
cy = -root * ry * px / rx,
|
|
cx1 = cosTh * cx - sinTh * cy + toX * 0.5,
|
|
cy1 = sinTh * cx + cosTh * cy + toY * 0.5,
|
|
mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry),
|
|
dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry);
|
|
|
|
if (sweep === 0 && dtheta > 0) {
|
|
dtheta -= 2 * PI;
|
|
}
|
|
else if (sweep === 1 && dtheta < 0) {
|
|
dtheta += 2 * PI;
|
|
}
|
|
|
|
// Convert into cubic bezier segments <= 90deg
|
|
var segments = Math.ceil(Math.abs(dtheta / PI * 2)),
|
|
result = [], mDelta = dtheta / segments,
|
|
mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2),
|
|
th3 = mTheta + mDelta;
|
|
|
|
for (var i = 0; i < segments; i++) {
|
|
result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY);
|
|
fromX = result[i][4];
|
|
fromY = result[i][5];
|
|
mTheta = th3;
|
|
th3 += mDelta;
|
|
}
|
|
arcToSegmentsCache[argsString] = result;
|
|
return result;
|
|
}
|
|
|
|
function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) {
|
|
var argsString2 = _join.call(arguments);
|
|
if (segmentToBezierCache[argsString2]) {
|
|
return segmentToBezierCache[argsString2];
|
|
}
|
|
|
|
var costh2 = Math.cos(th2),
|
|
sinth2 = Math.sin(th2),
|
|
costh3 = Math.cos(th3),
|
|
sinth3 = Math.sin(th3),
|
|
toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1,
|
|
toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1,
|
|
cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2),
|
|
cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2),
|
|
cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3),
|
|
cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3);
|
|
|
|
segmentToBezierCache[argsString2] = [
|
|
cp1X, cp1Y,
|
|
cp2X, cp2Y,
|
|
toX, toY
|
|
];
|
|
return segmentToBezierCache[argsString2];
|
|
}
|
|
|
|
/*
|
|
* Private
|
|
*/
|
|
function calcVectorAngle(ux, uy, vx, vy) {
|
|
var ta = Math.atan2(uy, ux),
|
|
tb = Math.atan2(vy, vx);
|
|
if (tb >= ta) {
|
|
return tb - ta;
|
|
}
|
|
else {
|
|
return 2 * Math.PI - (ta - tb);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draws arc
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {Number} fx
|
|
* @param {Number} fy
|
|
* @param {Array} coords
|
|
*/
|
|
fabric.util.drawArc = function(ctx, fx, fy, coords) {
|
|
var rx = coords[0],
|
|
ry = coords[1],
|
|
rot = coords[2],
|
|
large = coords[3],
|
|
sweep = coords[4],
|
|
tx = coords[5],
|
|
ty = coords[6],
|
|
segs = [[], [], [], []],
|
|
segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);
|
|
|
|
for (var i = 0, len = segsNorm.length; i < len; i++) {
|
|
segs[i][0] = segsNorm[i][0] + fx;
|
|
segs[i][1] = segsNorm[i][1] + fy;
|
|
segs[i][2] = segsNorm[i][2] + fx;
|
|
segs[i][3] = segsNorm[i][3] + fy;
|
|
segs[i][4] = segsNorm[i][4] + fx;
|
|
segs[i][5] = segsNorm[i][5] + fy;
|
|
ctx.bezierCurveTo.apply(ctx, segs[i]);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Calculate bounding box of a elliptic-arc
|
|
* @param {Number} fx start point of arc
|
|
* @param {Number} fy
|
|
* @param {Number} rx horizontal radius
|
|
* @param {Number} ry vertical radius
|
|
* @param {Number} rot angle of horizontal axe
|
|
* @param {Number} large 1 or 0, whatever the arc is the big or the small on the 2 points
|
|
* @param {Number} sweep 1 or 0, 1 clockwise or counterclockwise direction
|
|
* @param {Number} tx end point of arc
|
|
* @param {Number} ty
|
|
*/
|
|
fabric.util.getBoundsOfArc = function(fx, fy, rx, ry, rot, large, sweep, tx, ty) {
|
|
|
|
var fromX = 0, fromY = 0, bound, bounds = [],
|
|
segs = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);
|
|
|
|
for (var i = 0, len = segs.length; i < len; i++) {
|
|
bound = getBoundsOfCurve(fromX, fromY, segs[i][0], segs[i][1], segs[i][2], segs[i][3], segs[i][4], segs[i][5]);
|
|
bounds.push({ x: bound[0].x + fx, y: bound[0].y + fy });
|
|
bounds.push({ x: bound[1].x + fx, y: bound[1].y + fy });
|
|
fromX = segs[i][4];
|
|
fromY = segs[i][5];
|
|
}
|
|
return bounds;
|
|
};
|
|
|
|
/**
|
|
* Calculate bounding box of a beziercurve
|
|
* @param {Number} x0 starting point
|
|
* @param {Number} y0
|
|
* @param {Number} x1 first control point
|
|
* @param {Number} y1
|
|
* @param {Number} x2 secondo control point
|
|
* @param {Number} y2
|
|
* @param {Number} x3 end of beizer
|
|
* @param {Number} y3
|
|
*/
|
|
// taken from http://jsbin.com/ivomiq/56/edit no credits available for that.
|
|
function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) {
|
|
var argsString = _join.call(arguments);
|
|
if (boundsOfCurveCache[argsString]) {
|
|
return boundsOfCurveCache[argsString];
|
|
}
|
|
|
|
var sqrt = Math.sqrt,
|
|
min = Math.min, max = Math.max,
|
|
abs = Math.abs, tvalues = [],
|
|
bounds = [[], []],
|
|
a, b, c, t, t1, t2, b2ac, sqrtb2ac;
|
|
|
|
b = 6 * x0 - 12 * x1 + 6 * x2;
|
|
a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;
|
|
c = 3 * x1 - 3 * x0;
|
|
|
|
for (var i = 0; i < 2; ++i) {
|
|
if (i > 0) {
|
|
b = 6 * y0 - 12 * y1 + 6 * y2;
|
|
a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;
|
|
c = 3 * y1 - 3 * y0;
|
|
}
|
|
|
|
if (abs(a) < 1e-12) {
|
|
if (abs(b) < 1e-12) {
|
|
continue;
|
|
}
|
|
t = -c / b;
|
|
if (0 < t && t < 1) {
|
|
tvalues.push(t);
|
|
}
|
|
continue;
|
|
}
|
|
b2ac = b * b - 4 * c * a;
|
|
if (b2ac < 0) {
|
|
continue;
|
|
}
|
|
sqrtb2ac = sqrt(b2ac);
|
|
t1 = (-b + sqrtb2ac) / (2 * a);
|
|
if (0 < t1 && t1 < 1) {
|
|
tvalues.push(t1);
|
|
}
|
|
t2 = (-b - sqrtb2ac) / (2 * a);
|
|
if (0 < t2 && t2 < 1) {
|
|
tvalues.push(t2);
|
|
}
|
|
}
|
|
|
|
var x, y, j = tvalues.length, jlen = j, mt;
|
|
while (j--) {
|
|
t = tvalues[j];
|
|
mt = 1 - t;
|
|
x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3);
|
|
bounds[0][j] = x;
|
|
|
|
y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3);
|
|
bounds[1][j] = y;
|
|
}
|
|
|
|
bounds[0][jlen] = x0;
|
|
bounds[1][jlen] = y0;
|
|
bounds[0][jlen + 1] = x3;
|
|
bounds[1][jlen + 1] = y3;
|
|
var result = [
|
|
{
|
|
x: min.apply(null, bounds[0]),
|
|
y: min.apply(null, bounds[1])
|
|
},
|
|
{
|
|
x: max.apply(null, bounds[0]),
|
|
y: max.apply(null, bounds[1])
|
|
}
|
|
];
|
|
boundsOfCurveCache[argsString] = result;
|
|
return result;
|
|
}
|
|
|
|
fabric.util.getBoundsOfCurve = getBoundsOfCurve;
|
|
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
var slice = Array.prototype.slice;
|
|
|
|
/* _ES5_COMPAT_START_ */
|
|
|
|
if (!Array.prototype.indexOf) {
|
|
/**
|
|
* Finds index of an element in an array
|
|
* @param {*} searchElement
|
|
* @return {Number}
|
|
*/
|
|
Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
|
|
if (this === void 0 || this === null) {
|
|
throw new TypeError();
|
|
}
|
|
var t = Object(this), len = t.length >>> 0;
|
|
if (len === 0) {
|
|
return -1;
|
|
}
|
|
var n = 0;
|
|
if (arguments.length > 0) {
|
|
n = Number(arguments[1]);
|
|
if (n !== n) { // shortcut for verifying if it's NaN
|
|
n = 0;
|
|
}
|
|
else if (n !== 0 && n !== Number.POSITIVE_INFINITY && n !== Number.NEGATIVE_INFINITY) {
|
|
n = (n > 0 || -1) * Math.floor(Math.abs(n));
|
|
}
|
|
}
|
|
if (n >= len) {
|
|
return -1;
|
|
}
|
|
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
|
|
for (; k < len; k++) {
|
|
if (k in t && t[k] === searchElement) {
|
|
return k;
|
|
}
|
|
}
|
|
return -1;
|
|
};
|
|
}
|
|
|
|
if (!Array.prototype.forEach) {
|
|
/**
|
|
* Iterates an array, invoking callback for each element
|
|
* @param {Function} fn Callback to invoke for each element
|
|
* @param {Object} [context] Context to invoke callback in
|
|
* @return {Array}
|
|
*/
|
|
Array.prototype.forEach = function(fn, context) {
|
|
for (var i = 0, len = this.length >>> 0; i < len; i++) {
|
|
if (i in this) {
|
|
fn.call(context, this[i], i, this);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
if (!Array.prototype.map) {
|
|
/**
|
|
* Returns a result of iterating over an array, invoking callback for each element
|
|
* @param {Function} fn Callback to invoke for each element
|
|
* @param {Object} [context] Context to invoke callback in
|
|
* @return {Array}
|
|
*/
|
|
Array.prototype.map = function(fn, context) {
|
|
var result = [];
|
|
for (var i = 0, len = this.length >>> 0; i < len; i++) {
|
|
if (i in this) {
|
|
result[i] = fn.call(context, this[i], i, this);
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
|
|
if (!Array.prototype.every) {
|
|
/**
|
|
* Returns true if a callback returns truthy value for all elements in an array
|
|
* @param {Function} fn Callback to invoke for each element
|
|
* @param {Object} [context] Context to invoke callback in
|
|
* @return {Boolean}
|
|
*/
|
|
Array.prototype.every = function(fn, context) {
|
|
for (var i = 0, len = this.length >>> 0; i < len; i++) {
|
|
if (i in this && !fn.call(context, this[i], i, this)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
}
|
|
|
|
if (!Array.prototype.some) {
|
|
/**
|
|
* Returns true if a callback returns truthy value for at least one element in an array
|
|
* @param {Function} fn Callback to invoke for each element
|
|
* @param {Object} [context] Context to invoke callback in
|
|
* @return {Boolean}
|
|
*/
|
|
Array.prototype.some = function(fn, context) {
|
|
for (var i = 0, len = this.length >>> 0; i < len; i++) {
|
|
if (i in this && fn.call(context, this[i], i, this)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
}
|
|
|
|
if (!Array.prototype.filter) {
|
|
/**
|
|
* Returns the result of iterating over elements in an array
|
|
* @param {Function} fn Callback to invoke for each element
|
|
* @param {Object} [context] Context to invoke callback in
|
|
* @return {Array}
|
|
*/
|
|
Array.prototype.filter = function(fn, context) {
|
|
var result = [], val;
|
|
for (var i = 0, len = this.length >>> 0; i < len; i++) {
|
|
if (i in this) {
|
|
val = this[i]; // in case fn mutates this
|
|
if (fn.call(context, val, i, this)) {
|
|
result.push(val);
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
|
|
if (!Array.prototype.reduce) {
|
|
/**
|
|
* Returns "folded" (reduced) result of iterating over elements in an array
|
|
* @param {Function} fn Callback to invoke for each element
|
|
* @return {*}
|
|
*/
|
|
Array.prototype.reduce = function(fn /*, initial*/) {
|
|
var len = this.length >>> 0,
|
|
i = 0,
|
|
rv;
|
|
|
|
if (arguments.length > 1) {
|
|
rv = arguments[1];
|
|
}
|
|
else {
|
|
do {
|
|
if (i in this) {
|
|
rv = this[i++];
|
|
break;
|
|
}
|
|
// if array contains no values, no initial value to return
|
|
if (++i >= len) {
|
|
throw new TypeError();
|
|
}
|
|
}
|
|
while (true);
|
|
}
|
|
for (; i < len; i++) {
|
|
if (i in this) {
|
|
rv = fn.call(null, rv, this[i], i, this);
|
|
}
|
|
}
|
|
return rv;
|
|
};
|
|
}
|
|
|
|
/* _ES5_COMPAT_END_ */
|
|
|
|
/**
|
|
* Invokes method on all items in a given array
|
|
* @memberOf fabric.util.array
|
|
* @param {Array} array Array to iterate over
|
|
* @param {String} method Name of a method to invoke
|
|
* @return {Array}
|
|
*/
|
|
function invoke(array, method) {
|
|
var args = slice.call(arguments, 2), result = [];
|
|
for (var i = 0, len = array.length; i < len; i++) {
|
|
result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
/**
|
|
* Finds maximum value in array (not necessarily "first" one)
|
|
* @memberOf fabric.util.array
|
|
* @param {Array} array Array to iterate over
|
|
* @param {String} byProperty
|
|
* @return {*}
|
|
*/
|
|
function max(array, byProperty) {
|
|
return find(array, byProperty, function(value1, value2) {
|
|
return value1 >= value2;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Finds minimum value in array (not necessarily "first" one)
|
|
* @memberOf fabric.util.array
|
|
* @param {Array} array Array to iterate over
|
|
* @param {String} byProperty
|
|
* @return {*}
|
|
*/
|
|
function min(array, byProperty) {
|
|
return find(array, byProperty, function(value1, value2) {
|
|
return value1 < value2;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function fill(array, value) {
|
|
var k = array.length;
|
|
while (k--) {
|
|
array[k] = value;
|
|
}
|
|
return array;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function find(array, byProperty, condition) {
|
|
if (!array || array.length === 0) {
|
|
return;
|
|
}
|
|
|
|
var i = array.length - 1,
|
|
result = byProperty ? array[i][byProperty] : array[i];
|
|
if (byProperty) {
|
|
while (i--) {
|
|
if (condition(array[i][byProperty], result)) {
|
|
result = array[i][byProperty];
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
while (i--) {
|
|
if (condition(array[i], result)) {
|
|
result = array[i];
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
/**
|
|
* @namespace fabric.util.array
|
|
*/
|
|
fabric.util.array = {
|
|
fill: fill,
|
|
invoke: invoke,
|
|
min: min,
|
|
max: max
|
|
};
|
|
|
|
})();
|
|
|
|
|
|
(function() {
|
|
/**
|
|
* Copies all enumerable properties of one object to another
|
|
* @memberOf fabric.util.object
|
|
* @param {Object} destination Where to copy to
|
|
* @param {Object} source Where to copy from
|
|
* @return {Object}
|
|
*/
|
|
|
|
function extend(destination, source, deep) {
|
|
// JScript DontEnum bug is not taken care of
|
|
// the deep clone is for internal use, is not meant to avoid
|
|
// javascript traps or cloning html element or self referenced objects.
|
|
if (deep) {
|
|
if (!fabric.isLikelyNode && source instanceof Element) {
|
|
// avoid cloning deep images, canvases,
|
|
destination = source;
|
|
}
|
|
else if (source instanceof Array) {
|
|
destination = source.map(function(v) {
|
|
return clone(v, deep)
|
|
})
|
|
}
|
|
else if (source instanceof Object) {
|
|
for (var property in source) {
|
|
destination[property] = clone(source[property], deep)
|
|
}
|
|
}
|
|
else {
|
|
// this sounds odd for an extend but is ok for recursive use
|
|
destination = source;
|
|
}
|
|
}
|
|
else {
|
|
for (var property in source) {
|
|
destination[property] = source[property];
|
|
}
|
|
}
|
|
return destination;
|
|
}
|
|
|
|
/**
|
|
* Creates an empty object and copies all enumerable properties of another object to it
|
|
* @memberOf fabric.util.object
|
|
* @param {Object} object Object to clone
|
|
* @return {Object}
|
|
*/
|
|
function clone(object, deep) {
|
|
return extend({ }, object, deep);
|
|
}
|
|
|
|
/** @namespace fabric.util.object */
|
|
fabric.util.object = {
|
|
extend: extend,
|
|
clone: clone
|
|
};
|
|
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
/* _ES5_COMPAT_START_ */
|
|
if (!String.prototype.trim) {
|
|
/**
|
|
* Trims a string (removing whitespace from the beginning and the end)
|
|
* @function external:String#trim
|
|
* @see <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Trim">String#trim on MDN</a>
|
|
*/
|
|
String.prototype.trim = function () {
|
|
// this trim is not fully ES3 or ES5 compliant, but it should cover most cases for now
|
|
return this.replace(/^[\s\xA0]+/, '').replace(/[\s\xA0]+$/, '');
|
|
};
|
|
}
|
|
/* _ES5_COMPAT_END_ */
|
|
|
|
/**
|
|
* Camelizes a string
|
|
* @memberOf fabric.util.string
|
|
* @param {String} string String to camelize
|
|
* @return {String} Camelized version of a string
|
|
*/
|
|
function camelize(string) {
|
|
return string.replace(/-+(.)?/g, function(match, character) {
|
|
return character ? character.toUpperCase() : '';
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Capitalizes a string
|
|
* @memberOf fabric.util.string
|
|
* @param {String} string String to capitalize
|
|
* @param {Boolean} [firstLetterOnly] If true only first letter is capitalized
|
|
* and other letters stay untouched, if false first letter is capitalized
|
|
* and other letters are converted to lowercase.
|
|
* @return {String} Capitalized version of a string
|
|
*/
|
|
function capitalize(string, firstLetterOnly) {
|
|
return string.charAt(0).toUpperCase() +
|
|
(firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase());
|
|
}
|
|
|
|
/**
|
|
* Escapes XML in a string
|
|
* @memberOf fabric.util.string
|
|
* @param {String} string String to escape
|
|
* @return {String} Escaped version of a string
|
|
*/
|
|
function escapeXml(string) {
|
|
return string.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
}
|
|
|
|
/**
|
|
* String utilities
|
|
* @namespace fabric.util.string
|
|
*/
|
|
fabric.util.string = {
|
|
camelize: camelize,
|
|
capitalize: capitalize,
|
|
escapeXml: escapeXml
|
|
};
|
|
})();
|
|
|
|
|
|
/* _ES5_COMPAT_START_ */
|
|
(function() {
|
|
|
|
var slice = Array.prototype.slice,
|
|
apply = Function.prototype.apply,
|
|
Dummy = function() { };
|
|
|
|
if (!Function.prototype.bind) {
|
|
/**
|
|
* Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming)
|
|
* @see <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind">Function#bind on MDN</a>
|
|
* @param {Object} thisArg Object to bind function to
|
|
* @param {Any[]} Values to pass to a bound function
|
|
* @return {Function}
|
|
*/
|
|
Function.prototype.bind = function(thisArg) {
|
|
var _this = this, args = slice.call(arguments, 1), bound;
|
|
if (args.length) {
|
|
bound = function() {
|
|
return apply.call(_this, this instanceof Dummy ? this : thisArg, args.concat(slice.call(arguments)));
|
|
};
|
|
}
|
|
else {
|
|
/** @ignore */
|
|
bound = function() {
|
|
return apply.call(_this, this instanceof Dummy ? this : thisArg, arguments);
|
|
};
|
|
}
|
|
Dummy.prototype = this.prototype;
|
|
bound.prototype = new Dummy();
|
|
|
|
return bound;
|
|
};
|
|
}
|
|
|
|
})();
|
|
/* _ES5_COMPAT_END_ */
|
|
|
|
|
|
(function() {
|
|
|
|
var slice = Array.prototype.slice, emptyFunction = function() { },
|
|
|
|
IS_DONTENUM_BUGGY = (function() {
|
|
for (var p in { toString: 1 }) {
|
|
if (p === 'toString') {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
})(),
|
|
|
|
/** @ignore */
|
|
addMethods = function(klass, source, parent) {
|
|
for (var property in source) {
|
|
|
|
if (property in klass.prototype &&
|
|
typeof klass.prototype[property] === 'function' &&
|
|
(source[property] + '').indexOf('callSuper') > -1) {
|
|
|
|
klass.prototype[property] = (function(property) {
|
|
return function() {
|
|
|
|
var superclass = this.constructor.superclass;
|
|
this.constructor.superclass = parent;
|
|
var returnValue = source[property].apply(this, arguments);
|
|
this.constructor.superclass = superclass;
|
|
|
|
if (property !== 'initialize') {
|
|
return returnValue;
|
|
}
|
|
};
|
|
})(property);
|
|
}
|
|
else {
|
|
klass.prototype[property] = source[property];
|
|
}
|
|
|
|
if (IS_DONTENUM_BUGGY) {
|
|
if (source.toString !== Object.prototype.toString) {
|
|
klass.prototype.toString = source.toString;
|
|
}
|
|
if (source.valueOf !== Object.prototype.valueOf) {
|
|
klass.prototype.valueOf = source.valueOf;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
function Subclass() { }
|
|
|
|
function callSuper(methodName) {
|
|
var fn = this.constructor.superclass.prototype[methodName];
|
|
return (arguments.length > 1)
|
|
? fn.apply(this, slice.call(arguments, 1))
|
|
: fn.call(this);
|
|
}
|
|
|
|
/**
|
|
* Helper for creation of "classes".
|
|
* @memberOf fabric.util
|
|
* @param {Function} [parent] optional "Class" to inherit from
|
|
* @param {Object} [properties] Properties shared by all instances of this class
|
|
* (be careful modifying objects defined here as this would affect all instances)
|
|
*/
|
|
function createClass() {
|
|
var parent = null,
|
|
properties = slice.call(arguments, 0);
|
|
|
|
if (typeof properties[0] === 'function') {
|
|
parent = properties.shift();
|
|
}
|
|
function klass() {
|
|
this.initialize.apply(this, arguments);
|
|
}
|
|
|
|
klass.superclass = parent;
|
|
klass.subclasses = [];
|
|
|
|
if (parent) {
|
|
Subclass.prototype = parent.prototype;
|
|
klass.prototype = new Subclass();
|
|
parent.subclasses.push(klass);
|
|
}
|
|
for (var i = 0, length = properties.length; i < length; i++) {
|
|
addMethods(klass, properties[i], parent);
|
|
}
|
|
if (!klass.prototype.initialize) {
|
|
klass.prototype.initialize = emptyFunction;
|
|
}
|
|
klass.prototype.constructor = klass;
|
|
klass.prototype.callSuper = callSuper;
|
|
return klass;
|
|
}
|
|
|
|
fabric.util.createClass = createClass;
|
|
})();
|
|
|
|
|
|
(function () {
|
|
|
|
var unknown = 'unknown';
|
|
|
|
/* EVENT HANDLING */
|
|
|
|
function areHostMethods(object) {
|
|
var methodNames = Array.prototype.slice.call(arguments, 1),
|
|
t, i, len = methodNames.length;
|
|
for (i = 0; i < len; i++) {
|
|
t = typeof object[methodNames[i]];
|
|
if (!(/^(?:function|object|unknown)$/).test(t)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
/** @ignore */
|
|
var getElement,
|
|
setElement,
|
|
getUniqueId = (function () {
|
|
var uid = 0;
|
|
return function (element) {
|
|
return element.__uniqueID || (element.__uniqueID = 'uniqueID__' + uid++);
|
|
};
|
|
})();
|
|
|
|
(function () {
|
|
var elements = { };
|
|
/** @ignore */
|
|
getElement = function (uid) {
|
|
return elements[uid];
|
|
};
|
|
/** @ignore */
|
|
setElement = function (uid, element) {
|
|
elements[uid] = element;
|
|
};
|
|
})();
|
|
|
|
function createListener(uid, handler) {
|
|
return {
|
|
handler: handler,
|
|
wrappedHandler: createWrappedHandler(uid, handler)
|
|
};
|
|
}
|
|
|
|
function createWrappedHandler(uid, handler) {
|
|
return function (e) {
|
|
handler.call(getElement(uid), e || fabric.window.event);
|
|
};
|
|
}
|
|
|
|
function createDispatcher(uid, eventName) {
|
|
return function (e) {
|
|
if (handlers[uid] && handlers[uid][eventName]) {
|
|
var handlersForEvent = handlers[uid][eventName];
|
|
for (var i = 0, len = handlersForEvent.length; i < len; i++) {
|
|
handlersForEvent[i].call(this, e || fabric.window.event);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
var shouldUseAddListenerRemoveListener = (
|
|
areHostMethods(fabric.document.documentElement, 'addEventListener', 'removeEventListener') &&
|
|
areHostMethods(fabric.window, 'addEventListener', 'removeEventListener')),
|
|
|
|
shouldUseAttachEventDetachEvent = (
|
|
areHostMethods(fabric.document.documentElement, 'attachEvent', 'detachEvent') &&
|
|
areHostMethods(fabric.window, 'attachEvent', 'detachEvent')),
|
|
|
|
// IE branch
|
|
listeners = { },
|
|
|
|
// DOM L0 branch
|
|
handlers = { },
|
|
|
|
addListener, removeListener;
|
|
|
|
if (shouldUseAddListenerRemoveListener) {
|
|
/** @ignore */
|
|
addListener = function (element, eventName, handler) {
|
|
element.addEventListener(eventName, handler, false);
|
|
};
|
|
/** @ignore */
|
|
removeListener = function (element, eventName, handler) {
|
|
element.removeEventListener(eventName, handler, false);
|
|
};
|
|
}
|
|
|
|
else if (shouldUseAttachEventDetachEvent) {
|
|
/** @ignore */
|
|
addListener = function (element, eventName, handler) {
|
|
var uid = getUniqueId(element);
|
|
setElement(uid, element);
|
|
if (!listeners[uid]) {
|
|
listeners[uid] = { };
|
|
}
|
|
if (!listeners[uid][eventName]) {
|
|
listeners[uid][eventName] = [];
|
|
|
|
}
|
|
var listener = createListener(uid, handler);
|
|
listeners[uid][eventName].push(listener);
|
|
element.attachEvent('on' + eventName, listener.wrappedHandler);
|
|
};
|
|
/** @ignore */
|
|
removeListener = function (element, eventName, handler) {
|
|
var uid = getUniqueId(element), listener;
|
|
if (listeners[uid] && listeners[uid][eventName]) {
|
|
for (var i = 0, len = listeners[uid][eventName].length; i < len; i++) {
|
|
listener = listeners[uid][eventName][i];
|
|
if (listener && listener.handler === handler) {
|
|
element.detachEvent('on' + eventName, listener.wrappedHandler);
|
|
listeners[uid][eventName][i] = null;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
else {
|
|
/** @ignore */
|
|
addListener = function (element, eventName, handler) {
|
|
var uid = getUniqueId(element);
|
|
if (!handlers[uid]) {
|
|
handlers[uid] = { };
|
|
}
|
|
if (!handlers[uid][eventName]) {
|
|
handlers[uid][eventName] = [];
|
|
var existingHandler = element['on' + eventName];
|
|
if (existingHandler) {
|
|
handlers[uid][eventName].push(existingHandler);
|
|
}
|
|
element['on' + eventName] = createDispatcher(uid, eventName);
|
|
}
|
|
handlers[uid][eventName].push(handler);
|
|
};
|
|
/** @ignore */
|
|
removeListener = function (element, eventName, handler) {
|
|
var uid = getUniqueId(element);
|
|
if (handlers[uid] && handlers[uid][eventName]) {
|
|
var handlersForEvent = handlers[uid][eventName];
|
|
for (var i = 0, len = handlersForEvent.length; i < len; i++) {
|
|
if (handlersForEvent[i] === handler) {
|
|
handlersForEvent.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Adds an event listener to an element
|
|
* @function
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element
|
|
* @param {String} eventName
|
|
* @param {Function} handler
|
|
*/
|
|
fabric.util.addListener = addListener;
|
|
|
|
/**
|
|
* Removes an event listener from an element
|
|
* @function
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element
|
|
* @param {String} eventName
|
|
* @param {Function} handler
|
|
*/
|
|
fabric.util.removeListener = removeListener;
|
|
|
|
/**
|
|
* Cross-browser wrapper for getting event's coordinates
|
|
* @memberOf fabric.util
|
|
* @param {Event} event Event object
|
|
*/
|
|
function getPointer(event) {
|
|
event || (event = fabric.window.event);
|
|
|
|
var element = event.target ||
|
|
(typeof event.srcElement !== unknown ? event.srcElement : null),
|
|
|
|
scroll = fabric.util.getScrollLeftTop(element);
|
|
|
|
return {
|
|
x: pointerX(event) + scroll.left,
|
|
y: pointerY(event) + scroll.top
|
|
};
|
|
}
|
|
|
|
var pointerX = function(event) {
|
|
// looks like in IE (<9) clientX at certain point (apparently when mouseup fires on VML element)
|
|
// is represented as COM object, with all the consequences, like "unknown" type and error on [[Get]]
|
|
// need to investigate later
|
|
return (typeof event.clientX !== unknown ? event.clientX : 0);
|
|
},
|
|
|
|
pointerY = function(event) {
|
|
return (typeof event.clientY !== unknown ? event.clientY : 0);
|
|
};
|
|
|
|
function _getPointer(event, pageProp, clientProp) {
|
|
var touchProp = event.type === 'touchend' ? 'changedTouches' : 'touches';
|
|
|
|
return (event[touchProp] && event[touchProp][0]
|
|
? (event[touchProp][0][pageProp] - (event[touchProp][0][pageProp] - event[touchProp][0][clientProp]))
|
|
|| event[clientProp]
|
|
: event[clientProp]);
|
|
}
|
|
|
|
if (fabric.isTouchSupported) {
|
|
pointerX = function(event) {
|
|
return _getPointer(event, 'pageX', 'clientX');
|
|
};
|
|
pointerY = function(event) {
|
|
return _getPointer(event, 'pageY', 'clientY');
|
|
};
|
|
}
|
|
|
|
fabric.util.getPointer = getPointer;
|
|
|
|
fabric.util.object.extend(fabric.util, fabric.Observable);
|
|
|
|
})();
|
|
|
|
|
|
(function () {
|
|
|
|
/**
|
|
* Cross-browser wrapper for setting element's style
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element
|
|
* @param {Object} styles
|
|
* @return {HTMLElement} Element that was passed as a first argument
|
|
*/
|
|
function setStyle(element, styles) {
|
|
var elementStyle = element.style;
|
|
if (!elementStyle) {
|
|
return element;
|
|
}
|
|
if (typeof styles === 'string') {
|
|
element.style.cssText += ';' + styles;
|
|
return styles.indexOf('opacity') > -1
|
|
? setOpacity(element, styles.match(/opacity:\s*(\d?\.?\d*)/)[1])
|
|
: element;
|
|
}
|
|
for (var property in styles) {
|
|
if (property === 'opacity') {
|
|
setOpacity(element, styles[property]);
|
|
}
|
|
else {
|
|
var normalizedProperty = (property === 'float' || property === 'cssFloat')
|
|
? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat')
|
|
: property;
|
|
elementStyle[normalizedProperty] = styles[property];
|
|
}
|
|
}
|
|
return element;
|
|
}
|
|
|
|
var parseEl = fabric.document.createElement('div'),
|
|
supportsOpacity = typeof parseEl.style.opacity === 'string',
|
|
supportsFilters = typeof parseEl.style.filter === 'string',
|
|
reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,
|
|
|
|
/** @ignore */
|
|
setOpacity = function (element) { return element; };
|
|
|
|
if (supportsOpacity) {
|
|
/** @ignore */
|
|
setOpacity = function(element, value) {
|
|
element.style.opacity = value;
|
|
return element;
|
|
};
|
|
}
|
|
else if (supportsFilters) {
|
|
/** @ignore */
|
|
setOpacity = function(element, value) {
|
|
var es = element.style;
|
|
if (element.currentStyle && !element.currentStyle.hasLayout) {
|
|
es.zoom = 1;
|
|
}
|
|
if (reOpacity.test(es.filter)) {
|
|
value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')');
|
|
es.filter = es.filter.replace(reOpacity, value);
|
|
}
|
|
else {
|
|
es.filter += ' alpha(opacity=' + (value * 100) + ')';
|
|
}
|
|
return element;
|
|
};
|
|
}
|
|
|
|
fabric.util.setStyle = setStyle;
|
|
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
var _slice = Array.prototype.slice;
|
|
|
|
/**
|
|
* Takes id and returns an element with that id (if one exists in a document)
|
|
* @memberOf fabric.util
|
|
* @param {String|HTMLElement} id
|
|
* @return {HTMLElement|null}
|
|
*/
|
|
function getById(id) {
|
|
return typeof id === 'string' ? fabric.document.getElementById(id) : id;
|
|
}
|
|
|
|
var sliceCanConvertNodelists,
|
|
/**
|
|
* Converts an array-like object (e.g. arguments or NodeList) to an array
|
|
* @memberOf fabric.util
|
|
* @param {Object} arrayLike
|
|
* @return {Array}
|
|
*/
|
|
toArray = function(arrayLike) {
|
|
return _slice.call(arrayLike, 0);
|
|
};
|
|
|
|
try {
|
|
sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array;
|
|
}
|
|
catch (err) { }
|
|
|
|
if (!sliceCanConvertNodelists) {
|
|
toArray = function(arrayLike) {
|
|
var arr = new Array(arrayLike.length), i = arrayLike.length;
|
|
while (i--) {
|
|
arr[i] = arrayLike[i];
|
|
}
|
|
return arr;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Creates specified element with specified attributes
|
|
* @memberOf fabric.util
|
|
* @param {String} tagName Type of an element to create
|
|
* @param {Object} [attributes] Attributes to set on an element
|
|
* @return {HTMLElement} Newly created element
|
|
*/
|
|
function makeElement(tagName, attributes) {
|
|
var el = fabric.document.createElement(tagName);
|
|
for (var prop in attributes) {
|
|
if (prop === 'class') {
|
|
el.className = attributes[prop];
|
|
}
|
|
else if (prop === 'for') {
|
|
el.htmlFor = attributes[prop];
|
|
}
|
|
else {
|
|
el.setAttribute(prop, attributes[prop]);
|
|
}
|
|
}
|
|
return el;
|
|
}
|
|
|
|
/**
|
|
* Adds class to an element
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element Element to add class to
|
|
* @param {String} className Class to add to an element
|
|
*/
|
|
function addClass(element, className) {
|
|
if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) {
|
|
element.className += (element.className ? ' ' : '') + className;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Wraps element with another element
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element Element to wrap
|
|
* @param {HTMLElement|String} wrapper Element to wrap with
|
|
* @param {Object} [attributes] Attributes to set on a wrapper
|
|
* @return {HTMLElement} wrapper
|
|
*/
|
|
function wrapElement(element, wrapper, attributes) {
|
|
if (typeof wrapper === 'string') {
|
|
wrapper = makeElement(wrapper, attributes);
|
|
}
|
|
if (element.parentNode) {
|
|
element.parentNode.replaceChild(wrapper, element);
|
|
}
|
|
wrapper.appendChild(element);
|
|
return wrapper;
|
|
}
|
|
|
|
/**
|
|
* Returns element scroll offsets
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element Element to operate on
|
|
* @return {Object} Object with left/top values
|
|
*/
|
|
function getScrollLeftTop(element) {
|
|
|
|
var left = 0,
|
|
top = 0,
|
|
docElement = fabric.document.documentElement,
|
|
body = fabric.document.body || {
|
|
scrollLeft: 0, scrollTop: 0
|
|
};
|
|
|
|
// While loop checks (and then sets element to) .parentNode OR .host
|
|
// to account for ShadowDOM. We still want to traverse up out of ShadowDOM,
|
|
// but the .parentNode of a root ShadowDOM node will always be null, instead
|
|
// it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938
|
|
while (element && (element.parentNode || element.host)) {
|
|
|
|
// Set element to element parent, or 'host' in case of ShadowDOM
|
|
element = element.parentNode || element.host;
|
|
|
|
if (element === fabric.document) {
|
|
left = body.scrollLeft || docElement.scrollLeft || 0;
|
|
top = body.scrollTop || docElement.scrollTop || 0;
|
|
}
|
|
else {
|
|
left += element.scrollLeft || 0;
|
|
top += element.scrollTop || 0;
|
|
}
|
|
|
|
if (element.nodeType === 1 &&
|
|
fabric.util.getElementStyle(element, 'position') === 'fixed') {
|
|
break;
|
|
}
|
|
}
|
|
|
|
return { left: left, top: top };
|
|
}
|
|
|
|
/**
|
|
* Returns offset for a given element
|
|
* @function
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element Element to get offset for
|
|
* @return {Object} Object with "left" and "top" properties
|
|
*/
|
|
function getElementOffset(element) {
|
|
var docElem,
|
|
doc = element && element.ownerDocument,
|
|
box = { left: 0, top: 0 },
|
|
offset = { left: 0, top: 0 },
|
|
scrollLeftTop,
|
|
offsetAttributes = {
|
|
borderLeftWidth: 'left',
|
|
borderTopWidth: 'top',
|
|
paddingLeft: 'left',
|
|
paddingTop: 'top'
|
|
};
|
|
|
|
if (!doc) {
|
|
return offset;
|
|
}
|
|
|
|
for (var attr in offsetAttributes) {
|
|
offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0;
|
|
}
|
|
|
|
docElem = doc.documentElement;
|
|
if ( typeof element.getBoundingClientRect !== 'undefined' ) {
|
|
box = element.getBoundingClientRect();
|
|
}
|
|
|
|
scrollLeftTop = getScrollLeftTop(element);
|
|
|
|
return {
|
|
left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,
|
|
top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Returns style attribute value of a given element
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element Element to get style attribute for
|
|
* @param {String} attr Style attribute to get for element
|
|
* @return {String} Style attribute value of the given element.
|
|
*/
|
|
var getElementStyle;
|
|
if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {
|
|
getElementStyle = function(element, attr) {
|
|
var style = fabric.document.defaultView.getComputedStyle(element, null);
|
|
return style ? style[attr] : undefined;
|
|
};
|
|
}
|
|
else {
|
|
getElementStyle = function(element, attr) {
|
|
var value = element.style[attr];
|
|
if (!value && element.currentStyle) {
|
|
value = element.currentStyle[attr];
|
|
}
|
|
return value;
|
|
};
|
|
}
|
|
|
|
(function () {
|
|
var style = fabric.document.documentElement.style,
|
|
selectProp = 'userSelect' in style
|
|
? 'userSelect'
|
|
: 'MozUserSelect' in style
|
|
? 'MozUserSelect'
|
|
: 'WebkitUserSelect' in style
|
|
? 'WebkitUserSelect'
|
|
: 'KhtmlUserSelect' in style
|
|
? 'KhtmlUserSelect'
|
|
: '';
|
|
|
|
/**
|
|
* Makes element unselectable
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element Element to make unselectable
|
|
* @return {HTMLElement} Element that was passed in
|
|
*/
|
|
function makeElementUnselectable(element) {
|
|
if (typeof element.onselectstart !== 'undefined') {
|
|
element.onselectstart = fabric.util.falseFunction;
|
|
}
|
|
if (selectProp) {
|
|
element.style[selectProp] = 'none';
|
|
}
|
|
else if (typeof element.unselectable === 'string') {
|
|
element.unselectable = 'on';
|
|
}
|
|
return element;
|
|
}
|
|
|
|
/**
|
|
* Makes element selectable
|
|
* @memberOf fabric.util
|
|
* @param {HTMLElement} element Element to make selectable
|
|
* @return {HTMLElement} Element that was passed in
|
|
*/
|
|
function makeElementSelectable(element) {
|
|
if (typeof element.onselectstart !== 'undefined') {
|
|
element.onselectstart = null;
|
|
}
|
|
if (selectProp) {
|
|
element.style[selectProp] = '';
|
|
}
|
|
else if (typeof element.unselectable === 'string') {
|
|
element.unselectable = '';
|
|
}
|
|
return element;
|
|
}
|
|
|
|
fabric.util.makeElementUnselectable = makeElementUnselectable;
|
|
fabric.util.makeElementSelectable = makeElementSelectable;
|
|
})();
|
|
|
|
(function() {
|
|
|
|
/**
|
|
* Inserts a script element with a given url into a document; invokes callback, when that script is finished loading
|
|
* @memberOf fabric.util
|
|
* @param {String} url URL of a script to load
|
|
* @param {Function} callback Callback to execute when script is finished loading
|
|
*/
|
|
function getScript(url, callback) {
|
|
var headEl = fabric.document.getElementsByTagName('head')[0],
|
|
scriptEl = fabric.document.createElement('script'),
|
|
loading = true;
|
|
|
|
/** @ignore */
|
|
scriptEl.onload = /** @ignore */ scriptEl.onreadystatechange = function(e) {
|
|
if (loading) {
|
|
if (typeof this.readyState === 'string' &&
|
|
this.readyState !== 'loaded' &&
|
|
this.readyState !== 'complete') {
|
|
return;
|
|
}
|
|
loading = false;
|
|
callback(e || fabric.window.event);
|
|
scriptEl = scriptEl.onload = scriptEl.onreadystatechange = null;
|
|
}
|
|
};
|
|
scriptEl.src = url;
|
|
headEl.appendChild(scriptEl);
|
|
// causes issue in Opera
|
|
// headEl.removeChild(scriptEl);
|
|
}
|
|
|
|
fabric.util.getScript = getScript;
|
|
})();
|
|
|
|
fabric.util.getById = getById;
|
|
fabric.util.toArray = toArray;
|
|
fabric.util.makeElement = makeElement;
|
|
fabric.util.addClass = addClass;
|
|
fabric.util.wrapElement = wrapElement;
|
|
fabric.util.getScrollLeftTop = getScrollLeftTop;
|
|
fabric.util.getElementOffset = getElementOffset;
|
|
fabric.util.getElementStyle = getElementStyle;
|
|
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
function addParamToUrl(url, param) {
|
|
return url + (/\?/.test(url) ? '&' : '?') + param;
|
|
}
|
|
|
|
var makeXHR = (function() {
|
|
var factories = [
|
|
function() { return new ActiveXObject('Microsoft.XMLHTTP'); },
|
|
function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
|
|
function() { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); },
|
|
function() { return new XMLHttpRequest(); }
|
|
];
|
|
for (var i = factories.length; i--; ) {
|
|
try {
|
|
var req = factories[i]();
|
|
if (req) {
|
|
return factories[i];
|
|
}
|
|
}
|
|
catch (err) { }
|
|
}
|
|
})();
|
|
|
|
function emptyFn() { }
|
|
|
|
/**
|
|
* Cross-browser abstraction for sending XMLHttpRequest
|
|
* @memberOf fabric.util
|
|
* @param {String} url URL to send XMLHttpRequest to
|
|
* @param {Object} [options] Options object
|
|
* @param {String} [options.method="GET"]
|
|
* @param {String} [options.parameters] parameters to append to url in GET or in body
|
|
* @param {String} [options.body] body to send with POST or PUT request
|
|
* @param {Function} options.onComplete Callback to invoke when request is completed
|
|
* @return {XMLHttpRequest} request
|
|
*/
|
|
function request(url, options) {
|
|
|
|
options || (options = { });
|
|
|
|
var method = options.method ? options.method.toUpperCase() : 'GET',
|
|
onComplete = options.onComplete || function() { },
|
|
xhr = makeXHR(),
|
|
body = options.body || options.parameters;
|
|
|
|
/** @ignore */
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState === 4) {
|
|
onComplete(xhr);
|
|
xhr.onreadystatechange = emptyFn;
|
|
}
|
|
};
|
|
|
|
if (method === 'GET') {
|
|
body = null;
|
|
if (typeof options.parameters === 'string') {
|
|
url = addParamToUrl(url, options.parameters);
|
|
}
|
|
}
|
|
|
|
xhr.open(method, url, true);
|
|
|
|
if (method === 'POST' || method === 'PUT') {
|
|
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
}
|
|
|
|
xhr.send(body);
|
|
return xhr;
|
|
}
|
|
|
|
fabric.util.request = request;
|
|
})();
|
|
|
|
|
|
/**
|
|
* Wrapper around `console.log` (when available)
|
|
* @param {*} [values] Values to log
|
|
*/
|
|
fabric.log = function() { };
|
|
|
|
/**
|
|
* Wrapper around `console.warn` (when available)
|
|
* @param {*} [values] Values to log as a warning
|
|
*/
|
|
fabric.warn = function() { };
|
|
|
|
/* eslint-disable */
|
|
if (typeof console !== 'undefined') {
|
|
|
|
['log', 'warn'].forEach(function(methodName) {
|
|
|
|
if (typeof console[methodName] !== 'undefined' &&
|
|
typeof console[methodName].apply === 'function') {
|
|
|
|
fabric[methodName] = function() {
|
|
return console[methodName].apply(console, arguments);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
/* eslint-enable */
|
|
|
|
|
|
(function() {
|
|
|
|
/**
|
|
* Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
|
|
* @memberOf fabric.util
|
|
* @param {Object} [options] Animation options
|
|
* @param {Function} [options.onChange] Callback; invoked on every value change
|
|
* @param {Function} [options.onComplete] Callback; invoked when value change is completed
|
|
* @param {Number} [options.startValue=0] Starting value
|
|
* @param {Number} [options.endValue=100] Ending value
|
|
* @param {Number} [options.byValue=100] Value to modify the property by
|
|
* @param {Function} [options.easing] Easing function
|
|
* @param {Number} [options.duration=500] Duration of change (in ms)
|
|
*/
|
|
function animate(options) {
|
|
|
|
requestAnimFrame(function(timestamp) {
|
|
options || (options = { });
|
|
|
|
var start = timestamp || +new Date(),
|
|
duration = options.duration || 500,
|
|
finish = start + duration, time,
|
|
onChange = options.onChange || function() { },
|
|
abort = options.abort || function() { return false; },
|
|
easing = options.easing || function(t, b, c, d) {return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;},
|
|
startValue = 'startValue' in options ? options.startValue : 0,
|
|
endValue = 'endValue' in options ? options.endValue : 100,
|
|
byValue = options.byValue || endValue - startValue;
|
|
|
|
options.onStart && options.onStart();
|
|
|
|
(function tick(ticktime) {
|
|
time = ticktime || +new Date();
|
|
var currentTime = time > finish ? duration : (time - start);
|
|
if (abort()) {
|
|
options.onComplete && options.onComplete();
|
|
return;
|
|
}
|
|
onChange(easing(currentTime, startValue, byValue, duration));
|
|
if (time > finish) {
|
|
options.onComplete && options.onComplete();
|
|
return;
|
|
}
|
|
requestAnimFrame(tick);
|
|
})(start);
|
|
});
|
|
|
|
}
|
|
|
|
var _requestAnimFrame = fabric.window.requestAnimationFrame ||
|
|
fabric.window.webkitRequestAnimationFrame ||
|
|
fabric.window.mozRequestAnimationFrame ||
|
|
fabric.window.oRequestAnimationFrame ||
|
|
fabric.window.msRequestAnimationFrame ||
|
|
function(callback) {
|
|
fabric.window.setTimeout(callback, 1000 / 60);
|
|
};
|
|
|
|
/**
|
|
* requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
|
* In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
|
|
* @memberOf fabric.util
|
|
* @param {Function} callback Callback to invoke
|
|
* @param {DOMElement} element optional Element to associate with animation
|
|
*/
|
|
function requestAnimFrame() {
|
|
return _requestAnimFrame.apply(fabric.window, arguments);
|
|
}
|
|
|
|
fabric.util.animate = animate;
|
|
fabric.util.requestAnimFrame = requestAnimFrame;
|
|
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
function normalize(a, c, p, s) {
|
|
if (a < Math.abs(c)) {
|
|
a = c;
|
|
s = p / 4;
|
|
}
|
|
else {
|
|
//handle the 0/0 case:
|
|
if (c === 0 && a === 0) {
|
|
s = p / (2 * Math.PI) * Math.asin(1);
|
|
}
|
|
else {
|
|
s = p / (2 * Math.PI) * Math.asin(c / a);
|
|
}
|
|
}
|
|
return { a: a, c: c, p: p, s: s };
|
|
}
|
|
|
|
function elastic(opts, t, d) {
|
|
return opts.a *
|
|
Math.pow(2, 10 * (t -= 1)) *
|
|
Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p );
|
|
}
|
|
|
|
/**
|
|
* Cubic easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutCubic(t, b, c, d) {
|
|
return c * ((t = t / d - 1) * t * t + 1) + b;
|
|
}
|
|
|
|
/**
|
|
* Cubic easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutCubic(t, b, c, d) {
|
|
t /= d / 2;
|
|
if (t < 1) {
|
|
return c / 2 * t * t * t + b;
|
|
}
|
|
return c / 2 * ((t -= 2) * t * t + 2) + b;
|
|
}
|
|
|
|
/**
|
|
* Quartic easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInQuart(t, b, c, d) {
|
|
return c * (t /= d) * t * t * t + b;
|
|
}
|
|
|
|
/**
|
|
* Quartic easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutQuart(t, b, c, d) {
|
|
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
|
|
}
|
|
|
|
/**
|
|
* Quartic easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutQuart(t, b, c, d) {
|
|
t /= d / 2;
|
|
if (t < 1) {
|
|
return c / 2 * t * t * t * t + b;
|
|
}
|
|
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
|
|
}
|
|
|
|
/**
|
|
* Quintic easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInQuint(t, b, c, d) {
|
|
return c * (t /= d) * t * t * t * t + b;
|
|
}
|
|
|
|
/**
|
|
* Quintic easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutQuint(t, b, c, d) {
|
|
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
|
|
}
|
|
|
|
/**
|
|
* Quintic easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutQuint(t, b, c, d) {
|
|
t /= d / 2;
|
|
if (t < 1) {
|
|
return c / 2 * t * t * t * t * t + b;
|
|
}
|
|
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
|
|
}
|
|
|
|
/**
|
|
* Sinusoidal easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInSine(t, b, c, d) {
|
|
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
|
|
}
|
|
|
|
/**
|
|
* Sinusoidal easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutSine(t, b, c, d) {
|
|
return c * Math.sin(t / d * (Math.PI / 2)) + b;
|
|
}
|
|
|
|
/**
|
|
* Sinusoidal easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutSine(t, b, c, d) {
|
|
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
|
|
}
|
|
|
|
/**
|
|
* Exponential easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInExpo(t, b, c, d) {
|
|
return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
|
|
}
|
|
|
|
/**
|
|
* Exponential easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutExpo(t, b, c, d) {
|
|
return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
|
|
}
|
|
|
|
/**
|
|
* Exponential easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutExpo(t, b, c, d) {
|
|
if (t === 0) {
|
|
return b;
|
|
}
|
|
if (t === d) {
|
|
return b + c;
|
|
}
|
|
t /= d / 2;
|
|
if (t < 1) {
|
|
return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
|
|
}
|
|
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
|
}
|
|
|
|
/**
|
|
* Circular easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInCirc(t, b, c, d) {
|
|
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
|
|
}
|
|
|
|
/**
|
|
* Circular easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutCirc(t, b, c, d) {
|
|
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
|
|
}
|
|
|
|
/**
|
|
* Circular easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutCirc(t, b, c, d) {
|
|
t /= d / 2;
|
|
if (t < 1) {
|
|
return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
|
|
}
|
|
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
|
|
}
|
|
|
|
/**
|
|
* Elastic easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInElastic(t, b, c, d) {
|
|
var s = 1.70158, p = 0, a = c;
|
|
if (t === 0) {
|
|
return b;
|
|
}
|
|
t /= d;
|
|
if (t === 1) {
|
|
return b + c;
|
|
}
|
|
if (!p) {
|
|
p = d * 0.3;
|
|
}
|
|
var opts = normalize(a, c, p, s);
|
|
return -elastic(opts, t, d) + b;
|
|
}
|
|
|
|
/**
|
|
* Elastic easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutElastic(t, b, c, d) {
|
|
var s = 1.70158, p = 0, a = c;
|
|
if (t === 0) {
|
|
return b;
|
|
}
|
|
t /= d;
|
|
if (t === 1) {
|
|
return b + c;
|
|
}
|
|
if (!p) {
|
|
p = d * 0.3;
|
|
}
|
|
var opts = normalize(a, c, p, s);
|
|
return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b;
|
|
}
|
|
|
|
/**
|
|
* Elastic easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutElastic(t, b, c, d) {
|
|
var s = 1.70158, p = 0, a = c;
|
|
if (t === 0) {
|
|
return b;
|
|
}
|
|
t /= d / 2;
|
|
if (t === 2) {
|
|
return b + c;
|
|
}
|
|
if (!p) {
|
|
p = d * (0.3 * 1.5);
|
|
}
|
|
var opts = normalize(a, c, p, s);
|
|
if (t < 1) {
|
|
return -0.5 * elastic(opts, t, d) + b;
|
|
}
|
|
return opts.a * Math.pow(2, -10 * (t -= 1)) *
|
|
Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b;
|
|
}
|
|
|
|
/**
|
|
* Backwards easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInBack(t, b, c, d, s) {
|
|
if (s === undefined) {
|
|
s = 1.70158;
|
|
}
|
|
return c * (t /= d) * t * ((s + 1) * t - s) + b;
|
|
}
|
|
|
|
/**
|
|
* Backwards easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutBack(t, b, c, d, s) {
|
|
if (s === undefined) {
|
|
s = 1.70158;
|
|
}
|
|
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
|
|
}
|
|
|
|
/**
|
|
* Backwards easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutBack(t, b, c, d, s) {
|
|
if (s === undefined) {
|
|
s = 1.70158;
|
|
}
|
|
t /= d / 2;
|
|
if (t < 1) {
|
|
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
|
|
}
|
|
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
|
|
}
|
|
|
|
/**
|
|
* Bouncing easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInBounce(t, b, c, d) {
|
|
return c - easeOutBounce (d - t, 0, c, d) + b;
|
|
}
|
|
|
|
/**
|
|
* Bouncing easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeOutBounce(t, b, c, d) {
|
|
if ((t /= d) < (1 / 2.75)) {
|
|
return c * (7.5625 * t * t) + b;
|
|
}
|
|
else if (t < (2 / 2.75)) {
|
|
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
|
|
}
|
|
else if (t < (2.5 / 2.75)) {
|
|
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
|
|
}
|
|
else {
|
|
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Bouncing easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
function easeInOutBounce(t, b, c, d) {
|
|
if (t < d / 2) {
|
|
return easeInBounce (t * 2, 0, c, d) * 0.5 + b;
|
|
}
|
|
return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
|
|
}
|
|
|
|
/**
|
|
* Easing functions
|
|
* See <a href="http://gizma.com/easing/">Easing Equations by Robert Penner</a>
|
|
* @namespace fabric.util.ease
|
|
*/
|
|
fabric.util.ease = {
|
|
|
|
/**
|
|
* Quadratic easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
easeInQuad: function(t, b, c, d) {
|
|
return c * (t /= d) * t + b;
|
|
},
|
|
|
|
/**
|
|
* Quadratic easing out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
easeOutQuad: function(t, b, c, d) {
|
|
return -c * (t /= d) * (t - 2) + b;
|
|
},
|
|
|
|
/**
|
|
* Quadratic easing in and out
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
easeInOutQuad: function(t, b, c, d) {
|
|
t /= (d / 2);
|
|
if (t < 1) {
|
|
return c / 2 * t * t + b;
|
|
}
|
|
return -c / 2 * ((--t) * (t - 2) - 1) + b;
|
|
},
|
|
|
|
/**
|
|
* Cubic easing in
|
|
* @memberOf fabric.util.ease
|
|
*/
|
|
easeInCubic: function(t, b, c, d) {
|
|
return c * (t /= d) * t * t + b;
|
|
},
|
|
|
|
easeOutCubic: easeOutCubic,
|
|
easeInOutCubic: easeInOutCubic,
|
|
easeInQuart: easeInQuart,
|
|
easeOutQuart: easeOutQuart,
|
|
easeInOutQuart: easeInOutQuart,
|
|
easeInQuint: easeInQuint,
|
|
easeOutQuint: easeOutQuint,
|
|
easeInOutQuint: easeInOutQuint,
|
|
easeInSine: easeInSine,
|
|
easeOutSine: easeOutSine,
|
|
easeInOutSine: easeInOutSine,
|
|
easeInExpo: easeInExpo,
|
|
easeOutExpo: easeOutExpo,
|
|
easeInOutExpo: easeInOutExpo,
|
|
easeInCirc: easeInCirc,
|
|
easeOutCirc: easeOutCirc,
|
|
easeInOutCirc: easeInOutCirc,
|
|
easeInElastic: easeInElastic,
|
|
easeOutElastic: easeOutElastic,
|
|
easeInOutElastic: easeInOutElastic,
|
|
easeInBack: easeInBack,
|
|
easeOutBack: easeOutBack,
|
|
easeInOutBack: easeInOutBack,
|
|
easeInBounce: easeInBounce,
|
|
easeOutBounce: easeOutBounce,
|
|
easeInOutBounce: easeInOutBounce
|
|
};
|
|
|
|
})();
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
/**
|
|
* @name fabric
|
|
* @namespace
|
|
*/
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
capitalize = fabric.util.string.capitalize,
|
|
clone = fabric.util.object.clone,
|
|
toFixed = fabric.util.toFixed,
|
|
parseUnit = fabric.util.parseUnit,
|
|
multiplyTransformMatrices = fabric.util.multiplyTransformMatrices,
|
|
|
|
reAllowedSVGTagNames = /^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/i,
|
|
reViewBoxTagNames = /^(symbol|image|marker|pattern|view|svg)$/i,
|
|
reNotAllowedAncestors = /^(?:pattern|defs|symbol|metadata)$/i,
|
|
reAllowedParents = /^(symbol|g|a|svg)$/i,
|
|
|
|
attributesMap = {
|
|
cx: 'left',
|
|
x: 'left',
|
|
r: 'radius',
|
|
cy: 'top',
|
|
y: 'top',
|
|
display: 'visible',
|
|
visibility: 'visible',
|
|
transform: 'transformMatrix',
|
|
'fill-opacity': 'fillOpacity',
|
|
'fill-rule': 'fillRule',
|
|
'font-family': 'fontFamily',
|
|
'font-size': 'fontSize',
|
|
'font-style': 'fontStyle',
|
|
'font-weight': 'fontWeight',
|
|
'stroke-dasharray': 'strokeDashArray',
|
|
'stroke-linecap': 'strokeLineCap',
|
|
'stroke-linejoin': 'strokeLineJoin',
|
|
'stroke-miterlimit': 'strokeMiterLimit',
|
|
'stroke-opacity': 'strokeOpacity',
|
|
'stroke-width': 'strokeWidth',
|
|
'text-decoration': 'textDecoration',
|
|
'text-anchor': 'originX'
|
|
},
|
|
|
|
colorAttributes = {
|
|
stroke: 'strokeOpacity',
|
|
fill: 'fillOpacity'
|
|
};
|
|
|
|
fabric.cssRules = { };
|
|
fabric.gradientDefs = { };
|
|
|
|
function normalizeAttr(attr) {
|
|
// transform attribute names
|
|
if (attr in attributesMap) {
|
|
return attributesMap[attr];
|
|
}
|
|
return attr;
|
|
}
|
|
|
|
function normalizeValue(attr, value, parentAttributes, fontSize) {
|
|
var isArray = Object.prototype.toString.call(value) === '[object Array]',
|
|
parsed;
|
|
|
|
if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
|
|
value = '';
|
|
}
|
|
else if (attr === 'strokeDashArray') {
|
|
value = value.replace(/,/g, ' ').split(/\s+/).map(function(n) {
|
|
return parseFloat(n);
|
|
});
|
|
}
|
|
else if (attr === 'transformMatrix') {
|
|
if (parentAttributes && parentAttributes.transformMatrix) {
|
|
value = multiplyTransformMatrices(
|
|
parentAttributes.transformMatrix, fabric.parseTransformAttribute(value));
|
|
}
|
|
else {
|
|
value = fabric.parseTransformAttribute(value);
|
|
}
|
|
}
|
|
else if (attr === 'visible') {
|
|
value = (value === 'none' || value === 'hidden') ? false : true;
|
|
// display=none on parent element always takes precedence over child element
|
|
if (parentAttributes && parentAttributes.visible === false) {
|
|
value = false;
|
|
}
|
|
}
|
|
else if (attr === 'originX' /* text-anchor */) {
|
|
value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';
|
|
}
|
|
else {
|
|
parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);
|
|
}
|
|
|
|
return (!isArray && isNaN(parsed) ? value : parsed);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} attributes Array of attributes to parse
|
|
*/
|
|
function _setStrokeFillOpacity(attributes) {
|
|
for (var attr in colorAttributes) {
|
|
|
|
if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') {
|
|
continue;
|
|
}
|
|
|
|
if (typeof attributes[attr] === 'undefined') {
|
|
if (!fabric.Object.prototype[attr]) {
|
|
continue;
|
|
}
|
|
attributes[attr] = fabric.Object.prototype[attr];
|
|
}
|
|
|
|
if (attributes[attr].indexOf('url(') === 0) {
|
|
continue;
|
|
}
|
|
|
|
var color = new fabric.Color(attributes[attr]);
|
|
attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba();
|
|
}
|
|
return attributes;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function _getMultipleNodes(doc, nodeNames) {
|
|
var nodeName, nodeArray = [], nodeList;
|
|
for (var i = 0; i < nodeNames.length; i++) {
|
|
nodeName = nodeNames[i];
|
|
nodeList = doc.getElementsByTagName(nodeName);
|
|
nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList));
|
|
}
|
|
return nodeArray;
|
|
}
|
|
|
|
/**
|
|
* Parses "transform" attribute, returning an array of values
|
|
* @static
|
|
* @function
|
|
* @memberOf fabric
|
|
* @param {String} attributeValue String containing attribute value
|
|
* @return {Array} Array of 6 elements representing transformation matrix
|
|
*/
|
|
fabric.parseTransformAttribute = (function() {
|
|
function rotateMatrix(matrix, args) {
|
|
var angle = args[0],
|
|
x = (args.length === 3) ? args[1] : 0,
|
|
y = (args.length === 3) ? args[2] : 0;
|
|
|
|
matrix[0] = Math.cos(angle);
|
|
matrix[1] = Math.sin(angle);
|
|
matrix[2] = -Math.sin(angle);
|
|
matrix[3] = Math.cos(angle);
|
|
matrix[4] = x - (matrix[0] * x + matrix[2] * y);
|
|
matrix[5] = y - (matrix[1] * x + matrix[3] * y);
|
|
}
|
|
|
|
function scaleMatrix(matrix, args) {
|
|
var multiplierX = args[0],
|
|
multiplierY = (args.length === 2) ? args[1] : args[0];
|
|
|
|
matrix[0] = multiplierX;
|
|
matrix[3] = multiplierY;
|
|
}
|
|
|
|
function skewXMatrix(matrix, args) {
|
|
matrix[2] = Math.tan(fabric.util.degreesToRadians(args[0]));
|
|
}
|
|
|
|
function skewYMatrix(matrix, args) {
|
|
matrix[1] = Math.tan(fabric.util.degreesToRadians(args[0]));
|
|
}
|
|
|
|
function translateMatrix(matrix, args) {
|
|
matrix[4] = args[0];
|
|
if (args.length === 2) {
|
|
matrix[5] = args[1];
|
|
}
|
|
}
|
|
|
|
// identity matrix
|
|
var iMatrix = [
|
|
1, // a
|
|
0, // b
|
|
0, // c
|
|
1, // d
|
|
0, // e
|
|
0 // f
|
|
],
|
|
|
|
// == begin transform regexp
|
|
number = fabric.reNum,
|
|
|
|
commaWsp = '(?:\\s+,?\\s*|,\\s*)',
|
|
|
|
skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))',
|
|
|
|
skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))',
|
|
|
|
rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' +
|
|
commaWsp + '(' + number + ')' +
|
|
commaWsp + '(' + number + '))?\\s*\\))',
|
|
|
|
scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' +
|
|
commaWsp + '(' + number + '))?\\s*\\))',
|
|
|
|
translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' +
|
|
commaWsp + '(' + number + '))?\\s*\\))',
|
|
|
|
matrix = '(?:(matrix)\\s*\\(\\s*' +
|
|
'(' + number + ')' + commaWsp +
|
|
'(' + number + ')' + commaWsp +
|
|
'(' + number + ')' + commaWsp +
|
|
'(' + number + ')' + commaWsp +
|
|
'(' + number + ')' + commaWsp +
|
|
'(' + number + ')' +
|
|
'\\s*\\))',
|
|
|
|
transform = '(?:' +
|
|
matrix + '|' +
|
|
translate + '|' +
|
|
scale + '|' +
|
|
rotate + '|' +
|
|
skewX + '|' +
|
|
skewY +
|
|
')',
|
|
|
|
transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')',
|
|
|
|
transformList = '^\\s*(?:' + transforms + '?)\\s*$',
|
|
|
|
// http://www.w3.org/TR/SVG/coords.html#TransformAttribute
|
|
reTransformList = new RegExp(transformList),
|
|
// == end transform regexp
|
|
|
|
reTransform = new RegExp(transform, 'g');
|
|
|
|
return function(attributeValue) {
|
|
|
|
// start with identity matrix
|
|
var matrix = iMatrix.concat(),
|
|
matrices = [];
|
|
|
|
// return if no argument was given or
|
|
// an argument does not match transform attribute regexp
|
|
if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) {
|
|
return matrix;
|
|
}
|
|
|
|
attributeValue.replace(reTransform, function(match) {
|
|
|
|
var m = new RegExp(transform).exec(match).filter(function (match) {
|
|
// match !== '' && match != null
|
|
return (!!match);
|
|
}),
|
|
operation = m[1],
|
|
args = m.slice(2).map(parseFloat);
|
|
|
|
switch (operation) {
|
|
case 'translate':
|
|
translateMatrix(matrix, args);
|
|
break;
|
|
case 'rotate':
|
|
args[0] = fabric.util.degreesToRadians(args[0]);
|
|
rotateMatrix(matrix, args);
|
|
break;
|
|
case 'scale':
|
|
scaleMatrix(matrix, args);
|
|
break;
|
|
case 'skewX':
|
|
skewXMatrix(matrix, args);
|
|
break;
|
|
case 'skewY':
|
|
skewYMatrix(matrix, args);
|
|
break;
|
|
case 'matrix':
|
|
matrix = args;
|
|
break;
|
|
}
|
|
|
|
// snapshot current matrix into matrices array
|
|
matrices.push(matrix.concat());
|
|
// reset
|
|
matrix = iMatrix.concat();
|
|
});
|
|
|
|
var combinedMatrix = matrices[0];
|
|
while (matrices.length > 1) {
|
|
matrices.shift();
|
|
combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]);
|
|
}
|
|
return combinedMatrix;
|
|
};
|
|
})();
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function parseStyleString(style, oStyle) {
|
|
var attr, value;
|
|
style.replace(/;\s*$/, '').split(';').forEach(function (chunk) {
|
|
var pair = chunk.split(':');
|
|
|
|
attr = normalizeAttr(pair[0].trim().toLowerCase());
|
|
value = normalizeValue(attr, pair[1].trim());
|
|
|
|
oStyle[attr] = value;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function parseStyleObject(style, oStyle) {
|
|
var attr, value;
|
|
for (var prop in style) {
|
|
if (typeof style[prop] === 'undefined') {
|
|
continue;
|
|
}
|
|
|
|
attr = normalizeAttr(prop.toLowerCase());
|
|
value = normalizeValue(attr, style[prop]);
|
|
|
|
oStyle[attr] = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function getGlobalStylesForElement(element, svgUid) {
|
|
var styles = { };
|
|
for (var rule in fabric.cssRules[svgUid]) {
|
|
if (elementMatchesRule(element, rule.split(' '))) {
|
|
for (var property in fabric.cssRules[svgUid][rule]) {
|
|
styles[property] = fabric.cssRules[svgUid][rule][property];
|
|
}
|
|
}
|
|
}
|
|
return styles;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function elementMatchesRule(element, selectors) {
|
|
var firstMatching, parentMatching = true;
|
|
//start from rightmost selector.
|
|
firstMatching = selectorMatches(element, selectors.pop());
|
|
if (firstMatching && selectors.length) {
|
|
parentMatching = doesSomeParentMatch(element, selectors);
|
|
}
|
|
return firstMatching && parentMatching && (selectors.length === 0);
|
|
}
|
|
|
|
function doesSomeParentMatch(element, selectors) {
|
|
var selector, parentMatching = true;
|
|
while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) {
|
|
if (parentMatching) {
|
|
selector = selectors.pop();
|
|
}
|
|
element = element.parentNode;
|
|
parentMatching = selectorMatches(element, selector);
|
|
}
|
|
return selectors.length === 0;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function selectorMatches(element, selector) {
|
|
var nodeName = element.nodeName,
|
|
classNames = element.getAttribute('class'),
|
|
id = element.getAttribute('id'), matcher;
|
|
// i check if a selector matches slicing away part from it.
|
|
// if i get empty string i should match
|
|
matcher = new RegExp('^' + nodeName, 'i');
|
|
selector = selector.replace(matcher, '');
|
|
if (id && selector.length) {
|
|
matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i');
|
|
selector = selector.replace(matcher, '');
|
|
}
|
|
if (classNames && selector.length) {
|
|
classNames = classNames.split(' ');
|
|
for (var i = classNames.length; i--;) {
|
|
matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i');
|
|
selector = selector.replace(matcher, '');
|
|
}
|
|
}
|
|
return selector.length === 0;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* to support IE8 missing getElementById on SVGdocument
|
|
*/
|
|
function elementById(doc, id) {
|
|
var el;
|
|
doc.getElementById && (el = doc.getElementById(id));
|
|
if (el) {
|
|
return el;
|
|
}
|
|
var node, i, nodelist = doc.getElementsByTagName('*');
|
|
for (i = 0; i < nodelist.length; i++) {
|
|
node = nodelist[i];
|
|
if (id === node.getAttribute('id')) {
|
|
return node;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function parseUseDirectives(doc) {
|
|
var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0;
|
|
|
|
while (nodelist.length && i < nodelist.length) {
|
|
var el = nodelist[i],
|
|
xlink = el.getAttribute('xlink:href').substr(1),
|
|
x = el.getAttribute('x') || 0,
|
|
y = el.getAttribute('y') || 0,
|
|
el2 = elementById(doc, xlink).cloneNode(true),
|
|
currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')',
|
|
parentNode, oldLength = nodelist.length, attr, j, attrs, l;
|
|
|
|
applyViewboxTransform(el2);
|
|
if (/^svg$/i.test(el2.nodeName)) {
|
|
var el3 = el2.ownerDocument.createElement('g');
|
|
for (j = 0, attrs = el2.attributes, l = attrs.length; j < l; j++) {
|
|
attr = attrs.item(j);
|
|
el3.setAttribute(attr.nodeName, attr.nodeValue);
|
|
}
|
|
// el2.firstChild != null
|
|
while (el2.firstChild) {
|
|
el3.appendChild(el2.firstChild);
|
|
}
|
|
el2 = el3;
|
|
}
|
|
|
|
for (j = 0, attrs = el.attributes, l = attrs.length; j < l; j++) {
|
|
attr = attrs.item(j);
|
|
if (attr.nodeName === 'x' || attr.nodeName === 'y' || attr.nodeName === 'xlink:href') {
|
|
continue;
|
|
}
|
|
|
|
if (attr.nodeName === 'transform') {
|
|
currentTrans = attr.nodeValue + ' ' + currentTrans;
|
|
}
|
|
else {
|
|
el2.setAttribute(attr.nodeName, attr.nodeValue);
|
|
}
|
|
}
|
|
|
|
el2.setAttribute('transform', currentTrans);
|
|
el2.setAttribute('instantiated_by_use', '1');
|
|
el2.removeAttribute('id');
|
|
parentNode = el.parentNode;
|
|
parentNode.replaceChild(el2, el);
|
|
// some browsers do not shorten nodelist after replaceChild (IE8)
|
|
if (nodelist.length === oldLength) {
|
|
i++;
|
|
}
|
|
}
|
|
}
|
|
|
|
// http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
|
|
// matches, e.g.: +14.56e-12, etc.
|
|
var reViewBoxAttrValue = new RegExp(
|
|
'^' +
|
|
'\\s*(' + fabric.reNum + '+)\\s*,?' +
|
|
'\\s*(' + fabric.reNum + '+)\\s*,?' +
|
|
'\\s*(' + fabric.reNum + '+)\\s*,?' +
|
|
'\\s*(' + fabric.reNum + '+)\\s*' +
|
|
'$'
|
|
);
|
|
|
|
/**
|
|
* Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
|
|
*/
|
|
function applyViewboxTransform(element) {
|
|
|
|
var viewBoxAttr = element.getAttribute('viewBox'),
|
|
scaleX = 1,
|
|
scaleY = 1,
|
|
minX = 0,
|
|
minY = 0,
|
|
viewBoxWidth, viewBoxHeight, matrix, el,
|
|
widthAttr = element.getAttribute('width'),
|
|
heightAttr = element.getAttribute('height'),
|
|
x = element.getAttribute('x') || 0,
|
|
y = element.getAttribute('y') || 0,
|
|
preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '',
|
|
missingViewBox = (!viewBoxAttr || !reViewBoxTagNames.test(element.nodeName)
|
|
|| !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))),
|
|
missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'),
|
|
toBeParsed = missingViewBox && missingDimAttr,
|
|
parsedDim = { }, translateMatrix = '';
|
|
|
|
parsedDim.width = 0;
|
|
parsedDim.height = 0;
|
|
parsedDim.toBeParsed = toBeParsed;
|
|
|
|
if (toBeParsed) {
|
|
return parsedDim;
|
|
}
|
|
|
|
if (missingViewBox) {
|
|
parsedDim.width = parseUnit(widthAttr);
|
|
parsedDim.height = parseUnit(heightAttr);
|
|
return parsedDim;
|
|
}
|
|
|
|
minX = -parseFloat(viewBoxAttr[1]);
|
|
minY = -parseFloat(viewBoxAttr[2]);
|
|
viewBoxWidth = parseFloat(viewBoxAttr[3]);
|
|
viewBoxHeight = parseFloat(viewBoxAttr[4]);
|
|
|
|
if (!missingDimAttr) {
|
|
parsedDim.width = parseUnit(widthAttr);
|
|
parsedDim.height = parseUnit(heightAttr);
|
|
scaleX = parsedDim.width / viewBoxWidth;
|
|
scaleY = parsedDim.height / viewBoxHeight;
|
|
}
|
|
else {
|
|
parsedDim.width = viewBoxWidth;
|
|
parsedDim.height = viewBoxHeight;
|
|
}
|
|
|
|
// default is to preserve aspect ratio
|
|
preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio);
|
|
if (preserveAspectRatio.alignX !== 'none') {
|
|
//translate all container for the effect of Mid, Min, Max
|
|
scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX);
|
|
}
|
|
|
|
if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) {
|
|
return parsedDim;
|
|
}
|
|
|
|
if (x || y) {
|
|
translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';
|
|
}
|
|
|
|
matrix = translateMatrix + ' matrix(' + scaleX +
|
|
' 0' +
|
|
' 0 ' +
|
|
scaleY + ' ' +
|
|
(minX * scaleX) + ' ' +
|
|
(minY * scaleY) + ') ';
|
|
|
|
if (element.nodeName === 'svg') {
|
|
el = element.ownerDocument.createElement('g');
|
|
// element.firstChild != null
|
|
while (element.firstChild) {
|
|
el.appendChild(element.firstChild);
|
|
}
|
|
element.appendChild(el);
|
|
}
|
|
else {
|
|
el = element;
|
|
matrix = el.getAttribute('transform') + matrix;
|
|
}
|
|
|
|
el.setAttribute('transform', matrix);
|
|
return parsedDim;
|
|
}
|
|
|
|
/**
|
|
* Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
|
|
* @static
|
|
* @function
|
|
* @memberOf fabric
|
|
* @param {SVGDocument} doc SVG document to parse
|
|
* @param {Function} callback Callback to call when parsing is finished;
|
|
* It's being passed an array of elements (parsed from a document).
|
|
* @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
|
|
*/
|
|
fabric.parseSVGDocument = (function() {
|
|
|
|
function hasAncestorWithNodeName(element, nodeName) {
|
|
while (element && (element = element.parentNode)) {
|
|
if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', ''))
|
|
&& !element.getAttribute('instantiated_by_use')) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
return function(doc, callback, reviver) {
|
|
if (!doc) {
|
|
return;
|
|
}
|
|
|
|
parseUseDirectives(doc);
|
|
|
|
var startTime = new Date(),
|
|
svgUid = fabric.Object.__uid++,
|
|
options = applyViewboxTransform(doc),
|
|
descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
|
|
|
|
options.svgUid = svgUid;
|
|
|
|
if (descendants.length === 0 && fabric.isLikelyNode) {
|
|
// we're likely in node, where "o3-xml" library fails to gEBTN("*")
|
|
// https://github.com/ajaxorg/node-o3-xml/issues/21
|
|
descendants = doc.selectNodes('//*[name(.)!="svg"]');
|
|
var arr = [];
|
|
for (var i = 0, len = descendants.length; i < len; i++) {
|
|
arr[i] = descendants[i];
|
|
}
|
|
descendants = arr;
|
|
}
|
|
|
|
var elements = descendants.filter(function(el) {
|
|
applyViewboxTransform(el);
|
|
return reAllowedSVGTagNames.test(el.nodeName.replace('svg:', '')) &&
|
|
!hasAncestorWithNodeName(el, reNotAllowedAncestors); // http://www.w3.org/TR/SVG/struct.html#DefsElement
|
|
});
|
|
|
|
if (!elements || (elements && !elements.length)) {
|
|
callback && callback([], {});
|
|
return;
|
|
}
|
|
|
|
fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc);
|
|
fabric.cssRules[svgUid] = fabric.getCSSRules(doc);
|
|
// Precedence of rules: style > class > attribute
|
|
fabric.parseElements(elements, function(instances) {
|
|
fabric.documentParsingTime = new Date() - startTime;
|
|
if (callback) {
|
|
callback(instances, options);
|
|
}
|
|
}, clone(options), reviver);
|
|
};
|
|
})();
|
|
|
|
/**
|
|
* Used for caching SVG documents (loaded via `fabric.Canvas#loadSVGFromURL`)
|
|
* @namespace
|
|
*/
|
|
var svgCache = {
|
|
|
|
/**
|
|
* @param {String} name
|
|
* @param {Function} callback
|
|
*/
|
|
has: function (name, callback) {
|
|
callback(false);
|
|
},
|
|
|
|
get: function () {
|
|
/* NOOP */
|
|
},
|
|
|
|
set: function () {
|
|
/* NOOP */
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function _enlivenCachedObject(cachedObject) {
|
|
|
|
var objects = cachedObject.objects,
|
|
options = cachedObject.options;
|
|
|
|
objects = objects.map(function (o) {
|
|
return fabric[capitalize(o.type)].fromObject(o);
|
|
});
|
|
|
|
return ({ objects: objects, options: options });
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function _createSVGPattern(markup, canvas, property) {
|
|
if (canvas[property] && canvas[property].toSVG) {
|
|
markup.push(
|
|
'\t<pattern x="0" y="0" id="', property, 'Pattern" ',
|
|
'width="', canvas[property].source.width,
|
|
'" height="', canvas[property].source.height,
|
|
'" patternUnits="userSpaceOnUse">\n',
|
|
'\t\t<image x="0" y="0" ',
|
|
'width="', canvas[property].source.width,
|
|
'" height="', canvas[property].source.height,
|
|
'" xlink:href="', canvas[property].source.src,
|
|
'"></image>\n\t</pattern>\n'
|
|
);
|
|
}
|
|
}
|
|
|
|
var reFontDeclaration = new RegExp(
|
|
'(normal|italic)?\\s*(normal|small-caps)?\\s*' +
|
|
'(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' +
|
|
fabric.reNum +
|
|
'(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)');
|
|
|
|
extend(fabric, {
|
|
/**
|
|
* Parses a short font declaration, building adding its properties to a style object
|
|
* @static
|
|
* @function
|
|
* @memberOf fabric
|
|
* @param {String} value font declaration
|
|
* @param {Object} oStyle definition
|
|
*/
|
|
parseFontDeclaration: function(value, oStyle) {
|
|
var match = value.match(reFontDeclaration);
|
|
|
|
if (!match) {
|
|
return;
|
|
}
|
|
var fontStyle = match[1],
|
|
// font variant is not used
|
|
// fontVariant = match[2],
|
|
fontWeight = match[3],
|
|
fontSize = match[4],
|
|
lineHeight = match[5],
|
|
fontFamily = match[6];
|
|
|
|
if (fontStyle) {
|
|
oStyle.fontStyle = fontStyle;
|
|
}
|
|
if (fontWeight) {
|
|
oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight);
|
|
}
|
|
if (fontSize) {
|
|
oStyle.fontSize = parseUnit(fontSize);
|
|
}
|
|
if (fontFamily) {
|
|
oStyle.fontFamily = fontFamily;
|
|
}
|
|
if (lineHeight) {
|
|
oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Parses an SVG document, returning all of the gradient declarations found in it
|
|
* @static
|
|
* @function
|
|
* @memberOf fabric
|
|
* @param {SVGDocument} doc SVG document to parse
|
|
* @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element
|
|
*/
|
|
getGradientDefs: function(doc) {
|
|
var tagArray = [
|
|
'linearGradient',
|
|
'radialGradient',
|
|
'svg:linearGradient',
|
|
'svg:radialGradient'],
|
|
elList = _getMultipleNodes(doc, tagArray),
|
|
el, j = 0, id, xlink,
|
|
gradientDefs = { }, idsToXlinkMap = { };
|
|
|
|
j = elList.length;
|
|
|
|
while (j--) {
|
|
el = elList[j];
|
|
xlink = el.getAttribute('xlink:href');
|
|
id = el.getAttribute('id');
|
|
if (xlink) {
|
|
idsToXlinkMap[id] = xlink.substr(1);
|
|
}
|
|
gradientDefs[id] = el;
|
|
}
|
|
|
|
for (id in idsToXlinkMap) {
|
|
var el2 = gradientDefs[idsToXlinkMap[id]].cloneNode(true);
|
|
el = gradientDefs[id];
|
|
while (el2.firstChild) {
|
|
el.appendChild(el2.firstChild);
|
|
}
|
|
}
|
|
return gradientDefs;
|
|
},
|
|
|
|
/**
|
|
* Returns an object of attributes' name/value, given element and an array of attribute names;
|
|
* Parses parent "g" nodes recursively upwards.
|
|
* @static
|
|
* @memberOf fabric
|
|
* @param {DOMElement} element Element to parse
|
|
* @param {Array} attributes Array of attributes to parse
|
|
* @return {Object} object containing parsed attributes' names/values
|
|
*/
|
|
parseAttributes: function(element, attributes, svgUid) {
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var value,
|
|
parentAttributes = { },
|
|
fontSize;
|
|
|
|
if (typeof svgUid === 'undefined') {
|
|
svgUid = element.getAttribute('svgUid');
|
|
}
|
|
// if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards
|
|
if (element.parentNode && reAllowedParents.test(element.parentNode.nodeName)) {
|
|
parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid);
|
|
}
|
|
fontSize = (parentAttributes && parentAttributes.fontSize ) ||
|
|
element.getAttribute('font-size') || fabric.Text.DEFAULT_SVG_FONT_SIZE;
|
|
|
|
var ownAttributes = attributes.reduce(function(memo, attr) {
|
|
value = element.getAttribute(attr);
|
|
if (value) {
|
|
attr = normalizeAttr(attr);
|
|
value = normalizeValue(attr, value, parentAttributes, fontSize);
|
|
|
|
memo[attr] = value;
|
|
}
|
|
return memo;
|
|
}, { });
|
|
|
|
// add values parsed from style, which take precedence over attributes
|
|
// (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes)
|
|
ownAttributes = extend(ownAttributes,
|
|
extend(getGlobalStylesForElement(element, svgUid), fabric.parseStyleAttribute(element)));
|
|
if (ownAttributes.font) {
|
|
fabric.parseFontDeclaration(ownAttributes.font, ownAttributes);
|
|
}
|
|
return _setStrokeFillOpacity(extend(parentAttributes, ownAttributes));
|
|
},
|
|
|
|
/**
|
|
* Transforms an array of svg elements to corresponding fabric.* instances
|
|
* @static
|
|
* @memberOf fabric
|
|
* @param {Array} elements Array of elements to parse
|
|
* @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements)
|
|
* @param {Object} [options] Options object
|
|
* @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
|
|
*/
|
|
parseElements: function(elements, callback, options, reviver) {
|
|
new fabric.ElementsParser(elements, callback, options, reviver).parse();
|
|
},
|
|
|
|
/**
|
|
* Parses "style" attribute, retuning an object with values
|
|
* @static
|
|
* @memberOf fabric
|
|
* @param {SVGElement} element Element to parse
|
|
* @return {Object} Objects with values parsed from style attribute of an element
|
|
*/
|
|
parseStyleAttribute: function(element) {
|
|
var oStyle = { },
|
|
style = element.getAttribute('style');
|
|
|
|
if (!style) {
|
|
return oStyle;
|
|
}
|
|
|
|
if (typeof style === 'string') {
|
|
parseStyleString(style, oStyle);
|
|
}
|
|
else {
|
|
parseStyleObject(style, oStyle);
|
|
}
|
|
|
|
return oStyle;
|
|
},
|
|
|
|
/**
|
|
* Parses "points" attribute, returning an array of values
|
|
* @static
|
|
* @memberOf fabric
|
|
* @param {String} points points attribute string
|
|
* @return {Array} array of points
|
|
*/
|
|
parsePointsAttribute: function(points) {
|
|
|
|
// points attribute is required and must not be empty
|
|
if (!points) {
|
|
return null;
|
|
}
|
|
|
|
// replace commas with whitespace and remove bookending whitespace
|
|
points = points.replace(/,/g, ' ').trim();
|
|
|
|
points = points.split(/\s+/);
|
|
var parsedPoints = [], i, len;
|
|
|
|
i = 0;
|
|
len = points.length;
|
|
for (; i < len; i += 2) {
|
|
parsedPoints.push({
|
|
x: parseFloat(points[i]),
|
|
y: parseFloat(points[i + 1])
|
|
});
|
|
}
|
|
|
|
// odd number of points is an error
|
|
// if (parsedPoints.length % 2 !== 0) {
|
|
// return null;
|
|
// }
|
|
|
|
return parsedPoints;
|
|
},
|
|
|
|
/**
|
|
* Returns CSS rules for a given SVG document
|
|
* @static
|
|
* @function
|
|
* @memberOf fabric
|
|
* @param {SVGDocument} doc SVG document to parse
|
|
* @return {Object} CSS rules of this document
|
|
*/
|
|
getCSSRules: function(doc) {
|
|
var styles = doc.getElementsByTagName('style'),
|
|
allRules = { }, rules;
|
|
|
|
// very crude parsing of style contents
|
|
for (var i = 0, len = styles.length; i < len; i++) {
|
|
// IE9 doesn't support textContent, but provides text instead.
|
|
var styleContents = styles[i].textContent || styles[i].text;
|
|
|
|
// remove comments
|
|
styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, '');
|
|
if (styleContents.trim() === '') {
|
|
continue;
|
|
}
|
|
rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g);
|
|
rules = rules.map(function(rule) { return rule.trim(); });
|
|
rules.forEach(function(rule) {
|
|
|
|
var match = rule.match(/([\s\S]*?)\s*\{([^}]*)\}/),
|
|
ruleObj = { }, declaration = match[2].trim(),
|
|
propertyValuePairs = declaration.replace(/;$/, '').split(/\s*;\s*/);
|
|
|
|
for (var i = 0, len = propertyValuePairs.length; i < len; i++) {
|
|
var pair = propertyValuePairs[i].split(/\s*:\s*/),
|
|
property = normalizeAttr(pair[0]),
|
|
value = normalizeValue(property, pair[1], pair[0]);
|
|
ruleObj[property] = value;
|
|
}
|
|
rule = match[1];
|
|
rule.split(',').forEach(function(_rule) {
|
|
_rule = _rule.replace(/^svg/i, '').trim();
|
|
if (_rule === '') {
|
|
return;
|
|
}
|
|
if (allRules[_rule]) {
|
|
fabric.util.object.extend(allRules[_rule], ruleObj);
|
|
}
|
|
else {
|
|
allRules[_rule] = fabric.util.object.clone(ruleObj);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
return allRules;
|
|
},
|
|
|
|
/**
|
|
* Takes url corresponding to an SVG document, and parses it into a set of fabric objects.
|
|
* Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)
|
|
* @memberOf fabric
|
|
* @param {String} url
|
|
* @param {Function} callback
|
|
* @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
|
|
*/
|
|
loadSVGFromURL: function(url, callback, reviver) {
|
|
|
|
url = url.replace(/^\n\s*/, '').trim();
|
|
svgCache.has(url, function (hasUrl) {
|
|
if (hasUrl) {
|
|
svgCache.get(url, function (value) {
|
|
var enlivedRecord = _enlivenCachedObject(value);
|
|
callback(enlivedRecord.objects, enlivedRecord.options);
|
|
});
|
|
}
|
|
else {
|
|
new fabric.util.request(url, {
|
|
method: 'get',
|
|
onComplete: onComplete
|
|
});
|
|
}
|
|
});
|
|
|
|
function onComplete(r) {
|
|
|
|
var xml = r.responseXML;
|
|
if (xml && !xml.documentElement && fabric.window.ActiveXObject && r.responseText) {
|
|
xml = new ActiveXObject('Microsoft.XMLDOM');
|
|
xml.async = 'false';
|
|
//IE chokes on DOCTYPE
|
|
xml.loadXML(r.responseText.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*\])*?>/i, ''));
|
|
}
|
|
if (!xml || !xml.documentElement) {
|
|
callback && callback(null);
|
|
}
|
|
|
|
fabric.parseSVGDocument(xml.documentElement, function (results, options) {
|
|
svgCache.set(url, {
|
|
objects: fabric.util.array.invoke(results, 'toObject'),
|
|
options: options
|
|
});
|
|
callback && callback(results, options);
|
|
}, reviver);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Takes string corresponding to an SVG document, and parses it into a set of fabric objects
|
|
* @memberOf fabric
|
|
* @param {String} string
|
|
* @param {Function} callback
|
|
* @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
|
|
*/
|
|
loadSVGFromString: function(string, callback, reviver) {
|
|
string = string.trim();
|
|
var doc;
|
|
if (typeof DOMParser !== 'undefined') {
|
|
var parser = new DOMParser();
|
|
if (parser && parser.parseFromString) {
|
|
doc = parser.parseFromString(string, 'text/xml');
|
|
}
|
|
}
|
|
else if (fabric.window.ActiveXObject) {
|
|
doc = new ActiveXObject('Microsoft.XMLDOM');
|
|
doc.async = 'false';
|
|
// IE chokes on DOCTYPE
|
|
doc.loadXML(string.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*\])*?>/i, ''));
|
|
}
|
|
|
|
fabric.parseSVGDocument(doc.documentElement, function (results, options) {
|
|
callback(results, options);
|
|
}, reviver);
|
|
},
|
|
|
|
/**
|
|
* Creates markup containing SVG font faces,
|
|
* font URLs for font faces must be collected by developers
|
|
* and are not extracted from the DOM by fabricjs
|
|
* @param {Array} objects Array of fabric objects
|
|
* @return {String}
|
|
*/
|
|
createSVGFontFacesMarkup: function(objects) {
|
|
var markup = '', fontList = { }, obj, fontFamily,
|
|
style, row, rowIndex, _char, charIndex,
|
|
fontPaths = fabric.fontPaths;
|
|
|
|
for (var i = 0, len = objects.length; i < len; i++) {
|
|
obj = objects[i];
|
|
fontFamily = obj.fontFamily;
|
|
if (obj.type.indexOf('text') === -1 || fontList[fontFamily] || !fontPaths[fontFamily]) {
|
|
continue;
|
|
}
|
|
fontList[fontFamily] = true;
|
|
if (!obj.styles) {
|
|
continue;
|
|
}
|
|
style = obj.styles;
|
|
for (rowIndex in style) {
|
|
row = style[rowIndex];
|
|
for (charIndex in row) {
|
|
_char = row[charIndex];
|
|
fontFamily = _char.fontFamily;
|
|
if (!fontList[fontFamily] && fontPaths[fontFamily]) {
|
|
fontList[fontFamily] = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var j in fontList) {
|
|
markup += [
|
|
'\t\t@font-face {\n',
|
|
'\t\t\tfont-family: \'', j, '\';\n',
|
|
'\t\t\tsrc: url(\'', fontPaths[j], '\');\n',
|
|
'\t\t}\n'
|
|
].join('');
|
|
}
|
|
|
|
if (markup) {
|
|
markup = [
|
|
'\t<style type="text/css">',
|
|
'<![CDATA[\n',
|
|
markup,
|
|
']]>',
|
|
'</style>\n'
|
|
].join('');
|
|
}
|
|
|
|
return markup;
|
|
},
|
|
|
|
/**
|
|
* Creates markup containing SVG referenced elements like patterns, gradients etc.
|
|
* @param {fabric.Canvas} canvas instance of fabric.Canvas
|
|
* @return {String}
|
|
*/
|
|
createSVGRefElementsMarkup: function(canvas) {
|
|
var markup = [];
|
|
|
|
_createSVGPattern(markup, canvas, 'backgroundColor');
|
|
_createSVGPattern(markup, canvas, 'overlayColor');
|
|
|
|
return markup.join('');
|
|
}
|
|
});
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
fabric.ElementsParser = function(elements, callback, options, reviver) {
|
|
this.elements = elements;
|
|
this.callback = callback;
|
|
this.options = options;
|
|
this.reviver = reviver;
|
|
this.svgUid = (options && options.svgUid) || 0;
|
|
};
|
|
|
|
fabric.ElementsParser.prototype.parse = function() {
|
|
this.instances = new Array(this.elements.length);
|
|
this.numElements = this.elements.length;
|
|
|
|
this.createObjects();
|
|
};
|
|
|
|
fabric.ElementsParser.prototype.createObjects = function() {
|
|
for (var i = 0, len = this.elements.length; i < len; i++) {
|
|
this.elements[i].setAttribute('svgUid', this.svgUid);
|
|
(function(_obj, i) {
|
|
setTimeout(function() {
|
|
_obj.createObject(_obj.elements[i], i);
|
|
}, 0);
|
|
})(this, i);
|
|
}
|
|
};
|
|
|
|
fabric.ElementsParser.prototype.createObject = function(el, index) {
|
|
var klass = fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))];
|
|
if (klass && klass.fromElement) {
|
|
try {
|
|
this._createObject(klass, el, index);
|
|
}
|
|
catch (err) {
|
|
fabric.log(err);
|
|
}
|
|
}
|
|
else {
|
|
this.checkIfDone();
|
|
}
|
|
};
|
|
|
|
fabric.ElementsParser.prototype._createObject = function(klass, el, index) {
|
|
if (klass.async) {
|
|
klass.fromElement(el, this.createCallback(index, el), this.options);
|
|
}
|
|
else {
|
|
var obj = klass.fromElement(el, this.options);
|
|
this.resolveGradient(obj, 'fill');
|
|
this.resolveGradient(obj, 'stroke');
|
|
this.reviver && this.reviver(el, obj);
|
|
this.instances[index] = obj;
|
|
this.checkIfDone();
|
|
}
|
|
};
|
|
|
|
fabric.ElementsParser.prototype.createCallback = function(index, el) {
|
|
var _this = this;
|
|
return function(obj) {
|
|
_this.resolveGradient(obj, 'fill');
|
|
_this.resolveGradient(obj, 'stroke');
|
|
_this.reviver && _this.reviver(el, obj);
|
|
_this.instances[index] = obj;
|
|
_this.checkIfDone();
|
|
};
|
|
};
|
|
|
|
fabric.ElementsParser.prototype.resolveGradient = function(obj, property) {
|
|
|
|
var instanceFillValue = obj.get(property);
|
|
if (!(/^url\(/).test(instanceFillValue)) {
|
|
return;
|
|
}
|
|
var gradientId = instanceFillValue.slice(5, instanceFillValue.length - 1);
|
|
if (fabric.gradientDefs[this.svgUid][gradientId]) {
|
|
obj.set(property,
|
|
fabric.Gradient.fromElement(fabric.gradientDefs[this.svgUid][gradientId], obj));
|
|
}
|
|
};
|
|
|
|
fabric.ElementsParser.prototype.checkIfDone = function() {
|
|
if (--this.numElements === 0) {
|
|
this.instances = this.instances.filter(function(el) {
|
|
// eslint-disable-next-line no-eq-null, eqeqeq
|
|
return el != null;
|
|
});
|
|
this.callback(this.instances);
|
|
}
|
|
};
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
/* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */
|
|
|
|
var fabric = global.fabric || (global.fabric = { });
|
|
|
|
if (fabric.Point) {
|
|
fabric.warn('fabric.Point is already defined');
|
|
return;
|
|
}
|
|
|
|
fabric.Point = Point;
|
|
|
|
/**
|
|
* Point class
|
|
* @class fabric.Point
|
|
* @memberOf fabric
|
|
* @constructor
|
|
* @param {Number} x
|
|
* @param {Number} y
|
|
* @return {fabric.Point} thisArg
|
|
*/
|
|
function Point(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
|
|
Point.prototype = /** @lends fabric.Point.prototype */ {
|
|
|
|
type: 'point',
|
|
|
|
constructor: Point,
|
|
|
|
/**
|
|
* Adds another point to this one and returns another one
|
|
* @param {fabric.Point} that
|
|
* @return {fabric.Point} new Point instance with added values
|
|
*/
|
|
add: function (that) {
|
|
return new Point(this.x + that.x, this.y + that.y);
|
|
},
|
|
|
|
/**
|
|
* Adds another point to this one
|
|
* @param {fabric.Point} that
|
|
* @return {fabric.Point} thisArg
|
|
* @chainable
|
|
*/
|
|
addEquals: function (that) {
|
|
this.x += that.x;
|
|
this.y += that.y;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Adds value to this point and returns a new one
|
|
* @param {Number} scalar
|
|
* @return {fabric.Point} new Point with added value
|
|
*/
|
|
scalarAdd: function (scalar) {
|
|
return new Point(this.x + scalar, this.y + scalar);
|
|
},
|
|
|
|
/**
|
|
* Adds value to this point
|
|
* @param {Number} scalar
|
|
* @return {fabric.Point} thisArg
|
|
* @chainable
|
|
*/
|
|
scalarAddEquals: function (scalar) {
|
|
this.x += scalar;
|
|
this.y += scalar;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Subtracts another point from this point and returns a new one
|
|
* @param {fabric.Point} that
|
|
* @return {fabric.Point} new Point object with subtracted values
|
|
*/
|
|
subtract: function (that) {
|
|
return new Point(this.x - that.x, this.y - that.y);
|
|
},
|
|
|
|
/**
|
|
* Subtracts another point from this point
|
|
* @param {fabric.Point} that
|
|
* @return {fabric.Point} thisArg
|
|
* @chainable
|
|
*/
|
|
subtractEquals: function (that) {
|
|
this.x -= that.x;
|
|
this.y -= that.y;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Subtracts value from this point and returns a new one
|
|
* @param {Number} scalar
|
|
* @return {fabric.Point}
|
|
*/
|
|
scalarSubtract: function (scalar) {
|
|
return new Point(this.x - scalar, this.y - scalar);
|
|
},
|
|
|
|
/**
|
|
* Subtracts value from this point
|
|
* @param {Number} scalar
|
|
* @return {fabric.Point} thisArg
|
|
* @chainable
|
|
*/
|
|
scalarSubtractEquals: function (scalar) {
|
|
this.x -= scalar;
|
|
this.y -= scalar;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Miltiplies this point by a value and returns a new one
|
|
* TODO: rename in scalarMultiply in 2.0
|
|
* @param {Number} scalar
|
|
* @return {fabric.Point}
|
|
*/
|
|
multiply: function (scalar) {
|
|
return new Point(this.x * scalar, this.y * scalar);
|
|
},
|
|
|
|
/**
|
|
* Miltiplies this point by a value
|
|
* TODO: rename in scalarMultiplyEquals in 2.0
|
|
* @param {Number} scalar
|
|
* @return {fabric.Point} thisArg
|
|
* @chainable
|
|
*/
|
|
multiplyEquals: function (scalar) {
|
|
this.x *= scalar;
|
|
this.y *= scalar;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Divides this point by a value and returns a new one
|
|
* TODO: rename in scalarDivide in 2.0
|
|
* @param {Number} scalar
|
|
* @return {fabric.Point}
|
|
*/
|
|
divide: function (scalar) {
|
|
return new Point(this.x / scalar, this.y / scalar);
|
|
},
|
|
|
|
/**
|
|
* Divides this point by a value
|
|
* TODO: rename in scalarDivideEquals in 2.0
|
|
* @param {Number} scalar
|
|
* @return {fabric.Point} thisArg
|
|
* @chainable
|
|
*/
|
|
divideEquals: function (scalar) {
|
|
this.x /= scalar;
|
|
this.y /= scalar;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns true if this point is equal to another one
|
|
* @param {fabric.Point} that
|
|
* @return {Boolean}
|
|
*/
|
|
eq: function (that) {
|
|
return (this.x === that.x && this.y === that.y);
|
|
},
|
|
|
|
/**
|
|
* Returns true if this point is less than another one
|
|
* @param {fabric.Point} that
|
|
* @return {Boolean}
|
|
*/
|
|
lt: function (that) {
|
|
return (this.x < that.x && this.y < that.y);
|
|
},
|
|
|
|
/**
|
|
* Returns true if this point is less than or equal to another one
|
|
* @param {fabric.Point} that
|
|
* @return {Boolean}
|
|
*/
|
|
lte: function (that) {
|
|
return (this.x <= that.x && this.y <= that.y);
|
|
},
|
|
|
|
/**
|
|
|
|
* Returns true if this point is greater another one
|
|
* @param {fabric.Point} that
|
|
* @return {Boolean}
|
|
*/
|
|
gt: function (that) {
|
|
return (this.x > that.x && this.y > that.y);
|
|
},
|
|
|
|
/**
|
|
* Returns true if this point is greater than or equal to another one
|
|
* @param {fabric.Point} that
|
|
* @return {Boolean}
|
|
*/
|
|
gte: function (that) {
|
|
return (this.x >= that.x && this.y >= that.y);
|
|
},
|
|
|
|
/**
|
|
* Returns new point which is the result of linear interpolation with this one and another one
|
|
* @param {fabric.Point} that
|
|
* @param {Number} t , position of interpolation, between 0 and 1 default 0.5
|
|
* @return {fabric.Point}
|
|
*/
|
|
lerp: function (that, t) {
|
|
if (typeof t === 'undefined') {
|
|
t = 0.5;
|
|
}
|
|
t = Math.max(Math.min(1, t), 0);
|
|
return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t);
|
|
},
|
|
|
|
/**
|
|
* Returns distance from this point and another one
|
|
* @param {fabric.Point} that
|
|
* @return {Number}
|
|
*/
|
|
distanceFrom: function (that) {
|
|
var dx = this.x - that.x,
|
|
dy = this.y - that.y;
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
},
|
|
|
|
/**
|
|
* Returns the point between this point and another one
|
|
* @param {fabric.Point} that
|
|
* @return {fabric.Point}
|
|
*/
|
|
midPointFrom: function (that) {
|
|
return this.lerp(that);
|
|
},
|
|
|
|
/**
|
|
* Returns a new point which is the min of this and another one
|
|
* @param {fabric.Point} that
|
|
* @return {fabric.Point}
|
|
*/
|
|
min: function (that) {
|
|
return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y));
|
|
},
|
|
|
|
/**
|
|
* Returns a new point which is the max of this and another one
|
|
* @param {fabric.Point} that
|
|
* @return {fabric.Point}
|
|
*/
|
|
max: function (that) {
|
|
return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y));
|
|
},
|
|
|
|
/**
|
|
* Returns string representation of this point
|
|
* @return {String}
|
|
*/
|
|
toString: function () {
|
|
return this.x + ',' + this.y;
|
|
},
|
|
|
|
/**
|
|
* Sets x/y of this point
|
|
* @param {Number} x
|
|
* @param {Number} y
|
|
* @chainable
|
|
*/
|
|
setXY: function (x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets x of this point
|
|
* @param {Number} x
|
|
* @chainable
|
|
*/
|
|
setX: function (x) {
|
|
this.x = x;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets y of this point
|
|
* @param {Number} y
|
|
* @chainable
|
|
*/
|
|
setY: function (y) {
|
|
this.y = y;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets x/y of this point from another point
|
|
* @param {fabric.Point} that
|
|
* @chainable
|
|
*/
|
|
setFromPoint: function (that) {
|
|
this.x = that.x;
|
|
this.y = that.y;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Swaps x/y of this point and another point
|
|
* @param {fabric.Point} that
|
|
*/
|
|
swap: function (that) {
|
|
var x = this.x,
|
|
y = this.y;
|
|
this.x = that.x;
|
|
this.y = that.y;
|
|
that.x = x;
|
|
that.y = y;
|
|
},
|
|
|
|
/**
|
|
* return a cloned instance of the point
|
|
* @return {fabric.Point}
|
|
*/
|
|
clone: function () {
|
|
return new Point(this.x, this.y);
|
|
}
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
/* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */
|
|
var fabric = global.fabric || (global.fabric = { });
|
|
|
|
if (fabric.Intersection) {
|
|
fabric.warn('fabric.Intersection is already defined');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Intersection class
|
|
* @class fabric.Intersection
|
|
* @memberOf fabric
|
|
* @constructor
|
|
*/
|
|
function Intersection(status) {
|
|
this.status = status;
|
|
this.points = [];
|
|
}
|
|
|
|
fabric.Intersection = Intersection;
|
|
|
|
fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ {
|
|
|
|
constructor: Intersection,
|
|
|
|
/**
|
|
* Appends a point to intersection
|
|
* @param {fabric.Point} point
|
|
* @return {fabric.Intersection} thisArg
|
|
* @chainable
|
|
*/
|
|
appendPoint: function (point) {
|
|
this.points.push(point);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Appends points to intersection
|
|
* @param {Array} points
|
|
* @return {fabric.Intersection} thisArg
|
|
* @chainable
|
|
*/
|
|
appendPoints: function (points) {
|
|
this.points = this.points.concat(points);
|
|
return this;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Checks if one line intersects another
|
|
* TODO: rename in intersectSegmentSegment
|
|
* @static
|
|
* @param {fabric.Point} a1
|
|
* @param {fabric.Point} a2
|
|
* @param {fabric.Point} b1
|
|
* @param {fabric.Point} b2
|
|
* @return {fabric.Intersection}
|
|
*/
|
|
fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) {
|
|
var result,
|
|
uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x),
|
|
ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x),
|
|
uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);
|
|
if (uB !== 0) {
|
|
var ua = uaT / uB,
|
|
ub = ubT / uB;
|
|
if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
|
|
result = new Intersection('Intersection');
|
|
result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y)));
|
|
}
|
|
else {
|
|
result = new Intersection();
|
|
}
|
|
}
|
|
else {
|
|
if (uaT === 0 || ubT === 0) {
|
|
result = new Intersection('Coincident');
|
|
}
|
|
else {
|
|
result = new Intersection('Parallel');
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Checks if line intersects polygon
|
|
* TODO: rename in intersectSegmentPolygon
|
|
* fix detection of coincident
|
|
* @static
|
|
* @param {fabric.Point} a1
|
|
* @param {fabric.Point} a2
|
|
* @param {Array} points
|
|
* @return {fabric.Intersection}
|
|
*/
|
|
fabric.Intersection.intersectLinePolygon = function(a1, a2, points) {
|
|
var result = new Intersection(),
|
|
length = points.length,
|
|
b1, b2, inter;
|
|
|
|
for (var i = 0; i < length; i++) {
|
|
b1 = points[i];
|
|
b2 = points[(i + 1) % length];
|
|
inter = Intersection.intersectLineLine(a1, a2, b1, b2);
|
|
|
|
result.appendPoints(inter.points);
|
|
}
|
|
if (result.points.length > 0) {
|
|
result.status = 'Intersection';
|
|
}
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Checks if polygon intersects another polygon
|
|
* @static
|
|
* @param {Array} points1
|
|
* @param {Array} points2
|
|
* @return {fabric.Intersection}
|
|
*/
|
|
fabric.Intersection.intersectPolygonPolygon = function (points1, points2) {
|
|
var result = new Intersection(),
|
|
length = points1.length;
|
|
|
|
for (var i = 0; i < length; i++) {
|
|
var a1 = points1[i],
|
|
a2 = points1[(i + 1) % length],
|
|
inter = Intersection.intersectLinePolygon(a1, a2, points2);
|
|
|
|
result.appendPoints(inter.points);
|
|
}
|
|
if (result.points.length > 0) {
|
|
result.status = 'Intersection';
|
|
}
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Checks if polygon intersects rectangle
|
|
* @static
|
|
* @param {Array} points
|
|
* @param {fabric.Point} r1
|
|
* @param {fabric.Point} r2
|
|
* @return {fabric.Intersection}
|
|
*/
|
|
fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) {
|
|
var min = r1.min(r2),
|
|
max = r1.max(r2),
|
|
topRight = new fabric.Point(max.x, min.y),
|
|
bottomLeft = new fabric.Point(min.x, max.y),
|
|
inter1 = Intersection.intersectLinePolygon(min, topRight, points),
|
|
inter2 = Intersection.intersectLinePolygon(topRight, max, points),
|
|
inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points),
|
|
inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points),
|
|
result = new Intersection();
|
|
|
|
result.appendPoints(inter1.points);
|
|
result.appendPoints(inter2.points);
|
|
result.appendPoints(inter3.points);
|
|
result.appendPoints(inter4.points);
|
|
|
|
if (result.points.length > 0) {
|
|
result.status = 'Intersection';
|
|
}
|
|
return result;
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { });
|
|
|
|
if (fabric.Color) {
|
|
fabric.warn('fabric.Color is already defined.');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Color class
|
|
* The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations;
|
|
* {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects.
|
|
*
|
|
* @class fabric.Color
|
|
* @param {String} color optional in hex or rgb(a) or hsl format or from known color list
|
|
* @return {fabric.Color} thisArg
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors}
|
|
*/
|
|
function Color(color) {
|
|
if (!color) {
|
|
this.setSource([0, 0, 0, 1]);
|
|
}
|
|
else {
|
|
this._tryParsingColor(color);
|
|
}
|
|
}
|
|
|
|
fabric.Color = Color;
|
|
|
|
fabric.Color.prototype = /** @lends fabric.Color.prototype */ {
|
|
|
|
/**
|
|
* @private
|
|
* @param {String|Array} color Color value to parse
|
|
*/
|
|
_tryParsingColor: function(color) {
|
|
var source;
|
|
|
|
if (color in Color.colorNameMap) {
|
|
color = Color.colorNameMap[color];
|
|
}
|
|
|
|
if (color === 'transparent') {
|
|
source = [255, 255, 255, 0];
|
|
}
|
|
|
|
if (!source) {
|
|
source = Color.sourceFromHex(color);
|
|
}
|
|
if (!source) {
|
|
source = Color.sourceFromRgb(color);
|
|
}
|
|
if (!source) {
|
|
source = Color.sourceFromHsl(color);
|
|
}
|
|
if (!source) {
|
|
//if color is not recognize let's make black as canvas does
|
|
source = [0, 0, 0, 1];
|
|
}
|
|
if (source) {
|
|
this.setSource(source);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adapted from <a href="https://rawgithub.com/mjijackson/mjijackson.github.com/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.html">https://github.com/mjijackson</a>
|
|
* @private
|
|
* @param {Number} r Red color value
|
|
* @param {Number} g Green color value
|
|
* @param {Number} b Blue color value
|
|
* @return {Array} Hsl color
|
|
*/
|
|
_rgbToHsl: function(r, g, b) {
|
|
r /= 255; g /= 255; b /= 255;
|
|
|
|
var h, s, l,
|
|
max = fabric.util.array.max([r, g, b]),
|
|
min = fabric.util.array.min([r, g, b]);
|
|
|
|
l = (max + min) / 2;
|
|
|
|
if (max === min) {
|
|
h = s = 0; // achromatic
|
|
}
|
|
else {
|
|
var d = max - min;
|
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
switch (max) {
|
|
case r:
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
break;
|
|
case g:
|
|
h = (b - r) / d + 2;
|
|
break;
|
|
case b:
|
|
h = (r - g) / d + 4;
|
|
break;
|
|
}
|
|
h /= 6;
|
|
}
|
|
|
|
return [
|
|
Math.round(h * 360),
|
|
Math.round(s * 100),
|
|
Math.round(l * 100)
|
|
];
|
|
},
|
|
|
|
/**
|
|
* Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])
|
|
* @return {Array}
|
|
*/
|
|
getSource: function() {
|
|
return this._source;
|
|
},
|
|
|
|
/**
|
|
* Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])
|
|
* @param {Array} source
|
|
*/
|
|
setSource: function(source) {
|
|
this._source = source;
|
|
},
|
|
|
|
/**
|
|
* Returns color represenation in RGB format
|
|
* @return {String} ex: rgb(0-255,0-255,0-255)
|
|
*/
|
|
toRgb: function() {
|
|
var source = this.getSource();
|
|
return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')';
|
|
},
|
|
|
|
/**
|
|
* Returns color represenation in RGBA format
|
|
* @return {String} ex: rgba(0-255,0-255,0-255,0-1)
|
|
*/
|
|
toRgba: function() {
|
|
var source = this.getSource();
|
|
return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')';
|
|
},
|
|
|
|
/**
|
|
* Returns color represenation in HSL format
|
|
* @return {String} ex: hsl(0-360,0%-100%,0%-100%)
|
|
*/
|
|
toHsl: function() {
|
|
var source = this.getSource(),
|
|
hsl = this._rgbToHsl(source[0], source[1], source[2]);
|
|
|
|
return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)';
|
|
},
|
|
|
|
/**
|
|
* Returns color represenation in HSLA format
|
|
* @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1)
|
|
*/
|
|
toHsla: function() {
|
|
var source = this.getSource(),
|
|
hsl = this._rgbToHsl(source[0], source[1], source[2]);
|
|
|
|
return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')';
|
|
},
|
|
|
|
/**
|
|
* Returns color represenation in HEX format
|
|
* @return {String} ex: FF5555
|
|
*/
|
|
toHex: function() {
|
|
var source = this.getSource(), r, g, b;
|
|
|
|
r = source[0].toString(16);
|
|
r = (r.length === 1) ? ('0' + r) : r;
|
|
|
|
g = source[1].toString(16);
|
|
g = (g.length === 1) ? ('0' + g) : g;
|
|
|
|
b = source[2].toString(16);
|
|
b = (b.length === 1) ? ('0' + b) : b;
|
|
|
|
return r.toUpperCase() + g.toUpperCase() + b.toUpperCase();
|
|
},
|
|
|
|
/**
|
|
* Gets value of alpha channel for this color
|
|
* @return {Number} 0-1
|
|
*/
|
|
getAlpha: function() {
|
|
return this.getSource()[3];
|
|
},
|
|
|
|
/**
|
|
* Sets value of alpha channel for this color
|
|
* @param {Number} alpha Alpha value 0-1
|
|
* @return {fabric.Color} thisArg
|
|
*/
|
|
setAlpha: function(alpha) {
|
|
var source = this.getSource();
|
|
source[3] = alpha;
|
|
this.setSource(source);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Transforms color to its grayscale representation
|
|
* @return {fabric.Color} thisArg
|
|
*/
|
|
toGrayscale: function() {
|
|
var source = this.getSource(),
|
|
average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10),
|
|
currentAlpha = source[3];
|
|
this.setSource([average, average, average, currentAlpha]);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Transforms color to its black and white representation
|
|
* @param {Number} threshold
|
|
* @return {fabric.Color} thisArg
|
|
*/
|
|
toBlackWhite: function(threshold) {
|
|
var source = this.getSource(),
|
|
average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0),
|
|
currentAlpha = source[3];
|
|
|
|
threshold = threshold || 127;
|
|
|
|
average = (Number(average) < Number(threshold)) ? 0 : 255;
|
|
this.setSource([average, average, average, currentAlpha]);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Overlays color with another color
|
|
* @param {String|fabric.Color} otherColor
|
|
* @return {fabric.Color} thisArg
|
|
*/
|
|
overlayWith: function(otherColor) {
|
|
if (!(otherColor instanceof Color)) {
|
|
otherColor = new Color(otherColor);
|
|
}
|
|
|
|
var result = [],
|
|
alpha = this.getAlpha(),
|
|
otherAlpha = 0.5,
|
|
source = this.getSource(),
|
|
otherSource = otherColor.getSource();
|
|
|
|
for (var i = 0; i < 3; i++) {
|
|
result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha)));
|
|
}
|
|
|
|
result[3] = alpha;
|
|
this.setSource(result);
|
|
return this;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))
|
|
* @static
|
|
* @field
|
|
* @memberOf fabric.Color
|
|
*/
|
|
// eslint-disable-next-line max-len
|
|
fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/;
|
|
|
|
/**
|
|
* Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 ))
|
|
* @static
|
|
* @field
|
|
* @memberOf fabric.Color
|
|
*/
|
|
fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/;
|
|
|
|
/**
|
|
* Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff)
|
|
* @static
|
|
* @field
|
|
* @memberOf fabric.Color
|
|
*/
|
|
fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i;
|
|
|
|
/**
|
|
* Map of the 17 basic color names with HEX code
|
|
* @static
|
|
* @field
|
|
* @memberOf fabric.Color
|
|
* @see: http://www.w3.org/TR/CSS2/syndata.html#color-units
|
|
*/
|
|
fabric.Color.colorNameMap = {
|
|
aqua: '#00FFFF',
|
|
black: '#000000',
|
|
blue: '#0000FF',
|
|
fuchsia: '#FF00FF',
|
|
gray: '#808080',
|
|
grey: '#808080',
|
|
green: '#008000',
|
|
lime: '#00FF00',
|
|
maroon: '#800000',
|
|
navy: '#000080',
|
|
olive: '#808000',
|
|
orange: '#FFA500',
|
|
purple: '#800080',
|
|
red: '#FF0000',
|
|
silver: '#C0C0C0',
|
|
teal: '#008080',
|
|
white: '#FFFFFF',
|
|
yellow: '#FFFF00'
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
* @param {Number} p
|
|
* @param {Number} q
|
|
* @param {Number} t
|
|
* @return {Number}
|
|
*/
|
|
function hue2rgb(p, q, t) {
|
|
if (t < 0) {
|
|
t += 1;
|
|
}
|
|
if (t > 1) {
|
|
t -= 1;
|
|
}
|
|
if (t < 1 / 6) {
|
|
return p + (q - p) * 6 * t;
|
|
}
|
|
if (t < 1 / 2) {
|
|
return q;
|
|
}
|
|
if (t < 2 / 3) {
|
|
return p + (q - p) * (2 / 3 - t) * 6;
|
|
}
|
|
return p;
|
|
}
|
|
|
|
/**
|
|
* Returns new color object, when given a color in RGB format
|
|
* @memberOf fabric.Color
|
|
* @param {String} color Color value ex: rgb(0-255,0-255,0-255)
|
|
* @return {fabric.Color}
|
|
*/
|
|
fabric.Color.fromRgb = function(color) {
|
|
return Color.fromSource(Color.sourceFromRgb(color));
|
|
};
|
|
|
|
/**
|
|
* Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format
|
|
* @memberOf fabric.Color
|
|
* @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)
|
|
* @return {Array} source
|
|
*/
|
|
fabric.Color.sourceFromRgb = function(color) {
|
|
var match = color.match(Color.reRGBa);
|
|
if (match) {
|
|
var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1),
|
|
g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1),
|
|
b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1);
|
|
|
|
return [
|
|
parseInt(r, 10),
|
|
parseInt(g, 10),
|
|
parseInt(b, 10),
|
|
match[4] ? parseFloat(match[4]) : 1
|
|
];
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns new color object, when given a color in RGBA format
|
|
* @static
|
|
* @function
|
|
* @memberOf fabric.Color
|
|
* @param {String} color
|
|
* @return {fabric.Color}
|
|
*/
|
|
fabric.Color.fromRgba = Color.fromRgb;
|
|
|
|
/**
|
|
* Returns new color object, when given a color in HSL format
|
|
* @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%)
|
|
* @memberOf fabric.Color
|
|
* @return {fabric.Color}
|
|
*/
|
|
fabric.Color.fromHsl = function(color) {
|
|
return Color.fromSource(Color.sourceFromHsl(color));
|
|
};
|
|
|
|
/**
|
|
* Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.
|
|
* Adapted from <a href="https://rawgithub.com/mjijackson/mjijackson.github.com/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.html">https://github.com/mjijackson</a>
|
|
* @memberOf fabric.Color
|
|
* @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)
|
|
* @return {Array} source
|
|
* @see http://http://www.w3.org/TR/css3-color/#hsl-color
|
|
*/
|
|
fabric.Color.sourceFromHsl = function(color) {
|
|
var match = color.match(Color.reHSLa);
|
|
if (!match) {
|
|
return;
|
|
}
|
|
|
|
var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360,
|
|
s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1),
|
|
l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1),
|
|
r, g, b;
|
|
|
|
if (s === 0) {
|
|
r = g = b = l;
|
|
}
|
|
else {
|
|
var q = l <= 0.5 ? l * (s + 1) : l + s - l * s,
|
|
p = l * 2 - q;
|
|
|
|
r = hue2rgb(p, q, h + 1 / 3);
|
|
g = hue2rgb(p, q, h);
|
|
b = hue2rgb(p, q, h - 1 / 3);
|
|
}
|
|
|
|
return [
|
|
Math.round(r * 255),
|
|
Math.round(g * 255),
|
|
Math.round(b * 255),
|
|
match[4] ? parseFloat(match[4]) : 1
|
|
];
|
|
};
|
|
|
|
/**
|
|
* Returns new color object, when given a color in HSLA format
|
|
* @static
|
|
* @function
|
|
* @memberOf fabric.Color
|
|
* @param {String} color
|
|
* @return {fabric.Color}
|
|
*/
|
|
fabric.Color.fromHsla = Color.fromHsl;
|
|
|
|
/**
|
|
* Returns new color object, when given a color in HEX format
|
|
* @static
|
|
* @memberOf fabric.Color
|
|
* @param {String} color Color value ex: FF5555
|
|
* @return {fabric.Color}
|
|
*/
|
|
fabric.Color.fromHex = function(color) {
|
|
return Color.fromSource(Color.sourceFromHex(color));
|
|
};
|
|
|
|
/**
|
|
* Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format
|
|
* @static
|
|
* @memberOf fabric.Color
|
|
* @param {String} color ex: FF5555 or FF5544CC (RGBa)
|
|
* @return {Array} source
|
|
*/
|
|
fabric.Color.sourceFromHex = function(color) {
|
|
if (color.match(Color.reHex)) {
|
|
var value = color.slice(color.indexOf('#') + 1),
|
|
isShortNotation = (value.length === 3 || value.length === 4),
|
|
isRGBa = (value.length === 8 || value.length === 4),
|
|
r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2),
|
|
g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4),
|
|
b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6),
|
|
a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF';
|
|
|
|
return [
|
|
parseInt(r, 16),
|
|
parseInt(g, 16),
|
|
parseInt(b, 16),
|
|
parseFloat((parseInt(a, 16) / 255).toFixed(2))
|
|
];
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])
|
|
* @static
|
|
* @memberOf fabric.Color
|
|
* @param {Array} source
|
|
* @return {fabric.Color}
|
|
*/
|
|
fabric.Color.fromSource = function(source) {
|
|
var oColor = new Color();
|
|
oColor.setSource(source);
|
|
return oColor;
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function() {
|
|
|
|
/* _FROM_SVG_START_ */
|
|
function getColorStop(el) {
|
|
var style = el.getAttribute('style'),
|
|
offset = el.getAttribute('offset') || 0,
|
|
color, colorAlpha, opacity;
|
|
|
|
// convert percents to absolute values
|
|
offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1);
|
|
offset = offset < 0 ? 0 : offset > 1 ? 1 : offset;
|
|
if (style) {
|
|
var keyValuePairs = style.split(/\s*;\s*/);
|
|
|
|
if (keyValuePairs[keyValuePairs.length - 1] === '') {
|
|
keyValuePairs.pop();
|
|
}
|
|
|
|
for (var i = keyValuePairs.length; i--; ) {
|
|
|
|
var split = keyValuePairs[i].split(/\s*:\s*/),
|
|
key = split[0].trim(),
|
|
value = split[1].trim();
|
|
|
|
if (key === 'stop-color') {
|
|
color = value;
|
|
}
|
|
else if (key === 'stop-opacity') {
|
|
opacity = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!color) {
|
|
color = el.getAttribute('stop-color') || 'rgb(0,0,0)';
|
|
}
|
|
if (!opacity) {
|
|
opacity = el.getAttribute('stop-opacity');
|
|
}
|
|
|
|
color = new fabric.Color(color);
|
|
colorAlpha = color.getAlpha();
|
|
opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity);
|
|
opacity *= colorAlpha;
|
|
|
|
return {
|
|
offset: offset,
|
|
color: color.toRgb(),
|
|
opacity: opacity
|
|
};
|
|
}
|
|
|
|
function getLinearCoords(el) {
|
|
return {
|
|
x1: el.getAttribute('x1') || 0,
|
|
y1: el.getAttribute('y1') || 0,
|
|
x2: el.getAttribute('x2') || '100%',
|
|
y2: el.getAttribute('y2') || 0
|
|
};
|
|
}
|
|
|
|
function getRadialCoords(el) {
|
|
return {
|
|
x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%',
|
|
y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%',
|
|
r1: 0,
|
|
x2: el.getAttribute('cx') || '50%',
|
|
y2: el.getAttribute('cy') || '50%',
|
|
r2: el.getAttribute('r') || '50%'
|
|
};
|
|
}
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Gradient class
|
|
* @class fabric.Gradient
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients}
|
|
* @see {@link fabric.Gradient#initialize} for constructor definition
|
|
*/
|
|
fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ {
|
|
|
|
/**
|
|
* Horizontal offset for aligning gradients coming from SVG when outside pathgroups
|
|
* @type Number
|
|
* @default 0
|
|
*/
|
|
offsetX: 0,
|
|
|
|
/**
|
|
* Vertical offset for aligning gradients coming from SVG when outside pathgroups
|
|
* @type Number
|
|
* @default 0
|
|
*/
|
|
offsetY: 0,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} [options] Options object with type, coords, gradientUnits and colorStops
|
|
* @return {fabric.Gradient} thisArg
|
|
*/
|
|
initialize: function(options) {
|
|
options || (options = { });
|
|
|
|
var coords = { };
|
|
|
|
this.id = fabric.Object.__uid++;
|
|
this.type = options.type || 'linear';
|
|
|
|
coords = {
|
|
x1: options.coords.x1 || 0,
|
|
y1: options.coords.y1 || 0,
|
|
x2: options.coords.x2 || 0,
|
|
y2: options.coords.y2 || 0
|
|
};
|
|
|
|
if (this.type === 'radial') {
|
|
coords.r1 = options.coords.r1 || 0;
|
|
coords.r2 = options.coords.r2 || 0;
|
|
}
|
|
this.coords = coords;
|
|
this.colorStops = options.colorStops.slice();
|
|
if (options.gradientTransform) {
|
|
this.gradientTransform = options.gradientTransform;
|
|
}
|
|
this.offsetX = options.offsetX || this.offsetX;
|
|
this.offsetY = options.offsetY || this.offsetY;
|
|
},
|
|
|
|
/**
|
|
* Adds another colorStop
|
|
* @param {Object} colorStop Object with offset and color
|
|
* @return {fabric.Gradient} thisArg
|
|
*/
|
|
addColorStop: function(colorStop) {
|
|
for (var position in colorStop) {
|
|
var color = new fabric.Color(colorStop[position]);
|
|
this.colorStops.push({
|
|
offset: position,
|
|
color: color.toRgb(),
|
|
opacity: color.getAlpha()
|
|
});
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of a gradient
|
|
* @return {Object}
|
|
*/
|
|
toObject: function() {
|
|
return {
|
|
type: this.type,
|
|
coords: this.coords,
|
|
colorStops: this.colorStops,
|
|
offsetX: this.offsetX,
|
|
offsetY: this.offsetY,
|
|
gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform
|
|
};
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of an gradient
|
|
* @param {Object} object Object to create a gradient for
|
|
* @return {String} SVG representation of an gradient (linear/radial)
|
|
*/
|
|
toSVG: function(object) {
|
|
var coords = fabric.util.object.clone(this.coords),
|
|
markup, commonAttributes;
|
|
|
|
// colorStops must be sorted ascending
|
|
this.colorStops.sort(function(a, b) {
|
|
return a.offset - b.offset;
|
|
});
|
|
|
|
if (!(object.group && object.group.type === 'path-group')) {
|
|
for (var prop in coords) {
|
|
if (prop === 'x1' || prop === 'x2' || prop === 'r2') {
|
|
coords[prop] += this.offsetX - object.width / 2;
|
|
}
|
|
else if (prop === 'y1' || prop === 'y2') {
|
|
coords[prop] += this.offsetY - object.height / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
commonAttributes = 'id="SVGID_' + this.id +
|
|
'" gradientUnits="userSpaceOnUse"';
|
|
if (this.gradientTransform) {
|
|
commonAttributes += ' gradientTransform="matrix(' + this.gradientTransform.join(' ') + ')" ';
|
|
}
|
|
if (this.type === 'linear') {
|
|
markup = [
|
|
'<linearGradient ',
|
|
commonAttributes,
|
|
' x1="', coords.x1,
|
|
'" y1="', coords.y1,
|
|
'" x2="', coords.x2,
|
|
'" y2="', coords.y2,
|
|
'">\n'
|
|
];
|
|
}
|
|
else if (this.type === 'radial') {
|
|
markup = [
|
|
'<radialGradient ',
|
|
commonAttributes,
|
|
' cx="', coords.x2,
|
|
'" cy="', coords.y2,
|
|
'" r="', coords.r2,
|
|
'" fx="', coords.x1,
|
|
'" fy="', coords.y1,
|
|
'">\n'
|
|
];
|
|
}
|
|
|
|
for (var i = 0; i < this.colorStops.length; i++) {
|
|
markup.push(
|
|
'<stop ',
|
|
'offset="', (this.colorStops[i].offset * 100) + '%',
|
|
'" style="stop-color:', this.colorStops[i].color,
|
|
(this.colorStops[i].opacity !== null ? ';stop-opacity: ' + this.colorStops[i].opacity : ';'),
|
|
'"/>\n'
|
|
);
|
|
}
|
|
|
|
markup.push((this.type === 'linear' ? '</linearGradient>\n' : '</radialGradient>\n'));
|
|
|
|
return markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns an instance of CanvasGradient
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Object} object
|
|
* @return {CanvasGradient}
|
|
*/
|
|
toLive: function(ctx, object) {
|
|
var gradient, prop, coords = fabric.util.object.clone(this.coords);
|
|
|
|
if (!this.type) {
|
|
return;
|
|
}
|
|
|
|
if (object.group && object.group.type === 'path-group') {
|
|
for (prop in coords) {
|
|
if (prop === 'x1' || prop === 'x2') {
|
|
coords[prop] += -this.offsetX + object.width / 2;
|
|
}
|
|
else if (prop === 'y1' || prop === 'y2') {
|
|
coords[prop] += -this.offsetY + object.height / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.type === 'linear') {
|
|
gradient = ctx.createLinearGradient(
|
|
coords.x1, coords.y1, coords.x2, coords.y2);
|
|
}
|
|
else if (this.type === 'radial') {
|
|
gradient = ctx.createRadialGradient(
|
|
coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);
|
|
}
|
|
|
|
for (var i = 0, len = this.colorStops.length; i < len; i++) {
|
|
var color = this.colorStops[i].color,
|
|
opacity = this.colorStops[i].opacity,
|
|
offset = this.colorStops[i].offset;
|
|
|
|
if (typeof opacity !== 'undefined') {
|
|
color = new fabric.Color(color).setAlpha(opacity).toRgba();
|
|
}
|
|
gradient.addColorStop(parseFloat(offset), color);
|
|
}
|
|
|
|
return gradient;
|
|
}
|
|
});
|
|
|
|
fabric.util.object.extend(fabric.Gradient, {
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* Returns {@link fabric.Gradient} instance from an SVG element
|
|
* @static
|
|
* @memberOf fabric.Gradient
|
|
* @param {SVGGradientElement} el SVG gradient element
|
|
* @param {fabric.Object} instance
|
|
* @return {fabric.Gradient} Gradient instance
|
|
* @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
|
|
* @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
|
|
*/
|
|
fromElement: function(el, instance) {
|
|
|
|
/**
|
|
* @example:
|
|
*
|
|
* <linearGradient id="linearGrad1">
|
|
* <stop offset="0%" stop-color="white"/>
|
|
* <stop offset="100%" stop-color="black"/>
|
|
* </linearGradient>
|
|
*
|
|
* OR
|
|
*
|
|
* <linearGradient id="linearGrad2">
|
|
* <stop offset="0" style="stop-color:rgb(255,255,255)"/>
|
|
* <stop offset="1" style="stop-color:rgb(0,0,0)"/>
|
|
* </linearGradient>
|
|
*
|
|
* OR
|
|
*
|
|
* <radialGradient id="radialGrad1">
|
|
* <stop offset="0%" stop-color="white" stop-opacity="1" />
|
|
* <stop offset="50%" stop-color="black" stop-opacity="0.5" />
|
|
* <stop offset="100%" stop-color="white" stop-opacity="1" />
|
|
* </radialGradient>
|
|
*
|
|
* OR
|
|
*
|
|
* <radialGradient id="radialGrad2">
|
|
* <stop offset="0" stop-color="rgb(255,255,255)" />
|
|
* <stop offset="0.5" stop-color="rgb(0,0,0)" />
|
|
* <stop offset="1" stop-color="rgb(255,255,255)" />
|
|
* </radialGradient>
|
|
*
|
|
*/
|
|
|
|
var colorStopEls = el.getElementsByTagName('stop'),
|
|
type,
|
|
gradientUnits = el.getAttribute('gradientUnits') || 'objectBoundingBox',
|
|
gradientTransform = el.getAttribute('gradientTransform'),
|
|
colorStops = [],
|
|
coords, ellipseMatrix;
|
|
|
|
if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') {
|
|
type = 'linear';
|
|
}
|
|
else {
|
|
type = 'radial';
|
|
}
|
|
|
|
if (type === 'linear') {
|
|
coords = getLinearCoords(el);
|
|
}
|
|
else if (type === 'radial') {
|
|
coords = getRadialCoords(el);
|
|
}
|
|
|
|
for (var i = colorStopEls.length; i--; ) {
|
|
colorStops.push(getColorStop(colorStopEls[i]));
|
|
}
|
|
|
|
ellipseMatrix = _convertPercentUnitsToValues(instance, coords, gradientUnits);
|
|
|
|
var gradient = new fabric.Gradient({
|
|
type: type,
|
|
coords: coords,
|
|
colorStops: colorStops,
|
|
offsetX: -instance.left,
|
|
offsetY: -instance.top
|
|
});
|
|
|
|
if (gradientTransform || ellipseMatrix !== '') {
|
|
gradient.gradientTransform = fabric.parseTransformAttribute((gradientTransform || '') + ellipseMatrix);
|
|
}
|
|
return gradient;
|
|
},
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns {@link fabric.Gradient} instance from its object representation
|
|
* @static
|
|
* @memberOf fabric.Gradient
|
|
* @param {Object} obj
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
forObject: function(obj, options) {
|
|
options || (options = { });
|
|
_convertPercentUnitsToValues(obj, options.coords, 'userSpaceOnUse');
|
|
return new fabric.Gradient(options);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function _convertPercentUnitsToValues(object, options, gradientUnits) {
|
|
var propValue, addFactor = 0, multFactor = 1, ellipseMatrix = '';
|
|
for (var prop in options) {
|
|
if (options[prop] === 'Infinity') {
|
|
options[prop] = 1;
|
|
}
|
|
else if (options[prop] === '-Infinity') {
|
|
options[prop] = 0;
|
|
}
|
|
propValue = parseFloat(options[prop], 10);
|
|
if (typeof options[prop] === 'string' && /^\d+%$/.test(options[prop])) {
|
|
multFactor = 0.01;
|
|
}
|
|
else {
|
|
multFactor = 1;
|
|
}
|
|
if (prop === 'x1' || prop === 'x2' || prop === 'r2') {
|
|
multFactor *= gradientUnits === 'objectBoundingBox' ? object.width : 1;
|
|
addFactor = gradientUnits === 'objectBoundingBox' ? object.left || 0 : 0;
|
|
}
|
|
else if (prop === 'y1' || prop === 'y2') {
|
|
multFactor *= gradientUnits === 'objectBoundingBox' ? object.height : 1;
|
|
addFactor = gradientUnits === 'objectBoundingBox' ? object.top || 0 : 0;
|
|
}
|
|
options[prop] = propValue * multFactor + addFactor;
|
|
}
|
|
if (object.type === 'ellipse' &&
|
|
options.r2 !== null &&
|
|
gradientUnits === 'objectBoundingBox' &&
|
|
object.rx !== object.ry) {
|
|
|
|
var scaleFactor = object.ry / object.rx;
|
|
ellipseMatrix = ' scale(1, ' + scaleFactor + ')';
|
|
if (options.y1) {
|
|
options.y1 /= scaleFactor;
|
|
}
|
|
if (options.y2) {
|
|
options.y2 /= scaleFactor;
|
|
}
|
|
}
|
|
return ellipseMatrix;
|
|
}
|
|
})();
|
|
|
|
|
|
/**
|
|
* Pattern class
|
|
* @class fabric.Pattern
|
|
* @see {@link http://fabricjs.com/patterns|Pattern demo}
|
|
* @see {@link http://fabricjs.com/dynamic-patterns|DynamicPattern demo}
|
|
* @see {@link fabric.Pattern#initialize} for constructor definition
|
|
*/
|
|
fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ {
|
|
|
|
/**
|
|
* Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
|
|
* @type String
|
|
* @default
|
|
*/
|
|
repeat: 'repeat',
|
|
|
|
/**
|
|
* Pattern horizontal offset from object's left/top corner
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
offsetX: 0,
|
|
|
|
/**
|
|
* Pattern vertical offset from object's left/top corner
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
offsetY: 0,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Pattern} thisArg
|
|
*/
|
|
initialize: function(options) {
|
|
options || (options = { });
|
|
|
|
this.id = fabric.Object.__uid++;
|
|
|
|
if (options.source) {
|
|
if (typeof options.source === 'string') {
|
|
// function string
|
|
if (typeof fabric.util.getFunctionBody(options.source) !== 'undefined') {
|
|
this.source = new Function(fabric.util.getFunctionBody(options.source));
|
|
}
|
|
else {
|
|
// img src string
|
|
var _this = this;
|
|
this.source = fabric.util.createImage();
|
|
fabric.util.loadImage(options.source, function(img) {
|
|
_this.source = img;
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
// img element
|
|
this.source = options.source;
|
|
}
|
|
}
|
|
if (options.repeat) {
|
|
this.repeat = options.repeat;
|
|
}
|
|
if (options.offsetX) {
|
|
this.offsetX = options.offsetX;
|
|
}
|
|
if (options.offsetY) {
|
|
this.offsetY = options.offsetY;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of a pattern
|
|
* @return {Object} Object representation of a pattern instance
|
|
*/
|
|
toObject: function() {
|
|
|
|
var source;
|
|
|
|
// callback
|
|
if (typeof this.source === 'function') {
|
|
source = String(this.source);
|
|
}
|
|
// <img> element
|
|
else if (typeof this.source.src === 'string') {
|
|
source = this.source.src;
|
|
}
|
|
// <canvas> element
|
|
else if (typeof this.source === 'object' && this.source.toDataURL) {
|
|
source = this.source.toDataURL();
|
|
}
|
|
|
|
return {
|
|
source: source,
|
|
repeat: this.repeat,
|
|
offsetX: this.offsetX,
|
|
offsetY: this.offsetY
|
|
};
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of a pattern
|
|
* @param {fabric.Object} object
|
|
* @return {String} SVG representation of a pattern
|
|
*/
|
|
toSVG: function(object) {
|
|
var patternSource = typeof this.source === 'function' ? this.source() : this.source,
|
|
patternWidth = patternSource.width / object.getWidth(),
|
|
patternHeight = patternSource.height / object.getHeight(),
|
|
patternOffsetX = this.offsetX / object.getWidth(),
|
|
patternOffsetY = this.offsetY / object.getHeight(),
|
|
patternImgSrc = '';
|
|
if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') {
|
|
patternHeight = 1;
|
|
}
|
|
if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') {
|
|
patternWidth = 1;
|
|
}
|
|
if (patternSource.src) {
|
|
patternImgSrc = patternSource.src;
|
|
}
|
|
else if (patternSource.toDataURL) {
|
|
patternImgSrc = patternSource.toDataURL();
|
|
}
|
|
|
|
return '<pattern id="SVGID_' + this.id +
|
|
'" x="' + patternOffsetX +
|
|
'" y="' + patternOffsetY +
|
|
'" width="' + patternWidth +
|
|
'" height="' + patternHeight + '">\n' +
|
|
'<image x="0" y="0"' +
|
|
' width="' + patternSource.width +
|
|
'" height="' + patternSource.height +
|
|
'" xlink:href="' + patternImgSrc +
|
|
'"></image>\n' +
|
|
'</pattern>\n';
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns an instance of CanvasPattern
|
|
* @param {CanvasRenderingContext2D} ctx Context to create pattern
|
|
* @return {CanvasPattern}
|
|
*/
|
|
toLive: function(ctx) {
|
|
var source = typeof this.source === 'function'
|
|
? this.source()
|
|
: this.source;
|
|
|
|
// if the image failed to load, return, and allow rest to continue loading
|
|
if (!source) {
|
|
return '';
|
|
}
|
|
|
|
// if an image
|
|
if (typeof source.src !== 'undefined') {
|
|
if (!source.complete) {
|
|
return '';
|
|
}
|
|
if (source.naturalWidth === 0 || source.naturalHeight === 0) {
|
|
return '';
|
|
}
|
|
}
|
|
return ctx.createPattern(source, this.repeat);
|
|
}
|
|
});
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
toFixed = fabric.util.toFixed;
|
|
|
|
if (fabric.Shadow) {
|
|
fabric.warn('fabric.Shadow is already defined.');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Shadow class
|
|
* @class fabric.Shadow
|
|
* @see {@link http://fabricjs.com/shadows|Shadow demo}
|
|
* @see {@link fabric.Shadow#initialize} for constructor definition
|
|
*/
|
|
fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ {
|
|
|
|
/**
|
|
* Shadow color
|
|
* @type String
|
|
* @default
|
|
*/
|
|
color: 'rgb(0,0,0)',
|
|
|
|
/**
|
|
* Shadow blur
|
|
* @type Number
|
|
*/
|
|
blur: 0,
|
|
|
|
/**
|
|
* Shadow horizontal offset
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
offsetX: 0,
|
|
|
|
/**
|
|
* Shadow vertical offset
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
offsetY: 0,
|
|
|
|
/**
|
|
* Whether the shadow should affect stroke operations
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
affectStroke: false,
|
|
|
|
/**
|
|
* Indicates whether toObject should include default values
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
includeDefaultValues: true,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetX properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px, "2px 2px 10px rgba(0,0,0,0.2)")
|
|
* @return {fabric.Shadow} thisArg
|
|
*/
|
|
initialize: function(options) {
|
|
|
|
if (typeof options === 'string') {
|
|
options = this._parseShadow(options);
|
|
}
|
|
|
|
for (var prop in options) {
|
|
this[prop] = options[prop];
|
|
}
|
|
|
|
this.id = fabric.Object.__uid++;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} shadow Shadow value to parse
|
|
* @return {Object} Shadow object with color, offsetX, offsetY and blur
|
|
*/
|
|
_parseShadow: function(shadow) {
|
|
var shadowStr = shadow.trim(),
|
|
offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [],
|
|
color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)';
|
|
|
|
return {
|
|
color: color.trim(),
|
|
offsetX: parseInt(offsetsAndBlur[1], 10) || 0,
|
|
offsetY: parseInt(offsetsAndBlur[2], 10) || 0,
|
|
blur: parseInt(offsetsAndBlur[3], 10) || 0
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Returns a string representation of an instance
|
|
* @see http://www.w3.org/TR/css-text-decor-3/#text-shadow
|
|
* @return {String} Returns CSS3 text-shadow declaration
|
|
*/
|
|
toString: function() {
|
|
return [this.offsetX, this.offsetY, this.blur, this.color].join('px ');
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of a shadow
|
|
* @param {fabric.Object} object
|
|
* @return {String} SVG representation of a shadow
|
|
*/
|
|
toSVG: function(object) {
|
|
var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
|
|
offset = fabric.util.rotateVector(
|
|
{ x: this.offsetX, y: this.offsetY },
|
|
fabric.util.degreesToRadians(-object.angle)),
|
|
BLUR_BOX = 20;
|
|
|
|
if (object.width && object.height) {
|
|
//http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion
|
|
// we add some extra space to filter box to contain the blur ( 20 )
|
|
fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX;
|
|
fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX;
|
|
}
|
|
if (object.flipX) {
|
|
offset.x *= -1;
|
|
}
|
|
if (object.flipY) {
|
|
offset.y *= -1;
|
|
}
|
|
return (
|
|
'<filter id="SVGID_' + this.id + '" y="-' + fBoxY + '%" height="' + (100 + 2 * fBoxY) + '%" ' +
|
|
'x="-' + fBoxX + '%" width="' + (100 + 2 * fBoxX) + '%" ' + '>\n' +
|
|
'\t<feGaussianBlur in="SourceAlpha" stdDeviation="' +
|
|
toFixed(this.blur ? this.blur / 2 : 0, NUM_FRACTION_DIGITS) + '"></feGaussianBlur>\n' +
|
|
'\t<feOffset dx="' + toFixed(offset.x, NUM_FRACTION_DIGITS) +
|
|
'" dy="' + toFixed(offset.y, NUM_FRACTION_DIGITS) + '" result="oBlur" ></feOffset>\n' +
|
|
'\t<feFlood flood-color="' + this.color + '"/>\n' +
|
|
'\t<feComposite in2="oBlur" operator="in" />\n' +
|
|
'\t<feMerge>\n' +
|
|
'\t\t<feMergeNode></feMergeNode>\n' +
|
|
'\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n' +
|
|
'\t</feMerge>\n' +
|
|
'</filter>\n');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns object representation of a shadow
|
|
* @return {Object} Object representation of a shadow instance
|
|
*/
|
|
toObject: function() {
|
|
if (this.includeDefaultValues) {
|
|
return {
|
|
color: this.color,
|
|
blur: this.blur,
|
|
offsetX: this.offsetX,
|
|
offsetY: this.offsetY,
|
|
affectStroke: this.affectStroke
|
|
};
|
|
}
|
|
var obj = { }, proto = fabric.Shadow.prototype;
|
|
|
|
['color', 'blur', 'offsetX', 'offsetY', 'affectStroke'].forEach(function(prop) {
|
|
if (this[prop] !== proto[prop]) {
|
|
obj[prop] = this[prop];
|
|
}
|
|
}, this);
|
|
|
|
return obj;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px")
|
|
* @static
|
|
* @field
|
|
* @memberOf fabric.Shadow
|
|
*/
|
|
// eslint-disable-next-line max-len
|
|
fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:px)?(?:\s?|$))?(-?\d+(?:px)?(?:\s?|$))?(\d+(?:px)?)?(?:\s?|$)(?:$|\s)/;
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(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,
|
|
toFixed = fabric.util.toFixed,
|
|
|
|
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);
|
|
},
|
|
|
|
/**
|
|
* 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}.
|
|
* <b>Backwards incompatibility note:</b> 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}.
|
|
* <b>Backwards incompatibility note:</b> 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,
|
|
|
|
/**
|
|
* The transformation (in the format of Canvas transform) which focuses the viewport
|
|
* @type Array
|
|
* @default
|
|
*/
|
|
viewportTransform: [1, 0, 0, 1, 0, 0],
|
|
|
|
/**
|
|
* if set to false background image is not affected by viewport transform
|
|
* @since 1.6.3
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
backgroundVpt: true,
|
|
|
|
/**
|
|
* if set to false overlya image is not affected by viewport transform
|
|
* @since 1.6.3
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
overlayVpt: true,
|
|
|
|
/**
|
|
* 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) {
|
|
var cb = fabric.StaticCanvas.prototype.renderAll.bind(this);
|
|
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, cb);
|
|
}
|
|
if (options.backgroundImage) {
|
|
this.setBackgroundImage(options.backgroundImage, cb);
|
|
}
|
|
if (options.backgroundColor) {
|
|
this.setBackgroundColor(options.backgroundColor, cb);
|
|
}
|
|
if (options.overlayColor) {
|
|
this.setOverlayColor(options.overlayColor, cb);
|
|
}
|
|
this.calcOffset();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_isRetinaScaling: function() {
|
|
return (fabric.devicePixelRatio !== 1 && this.enableRetinaScaling);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} retinaScaling if applied, otherwise 1;
|
|
*/
|
|
getRetinaScaling: function() {
|
|
return this._isRetinaScaling() ? fabric.devicePixelRatio : 1;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_initRetinaScaling: function() {
|
|
if (!this._isRetinaScaling()) {
|
|
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 <caption>Normal overlayImage with left/top = 0</caption>
|
|
* 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 <caption>overlayImage with different properties</caption>
|
|
* canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
|
|
* opacity: 0.5,
|
|
* angle: 45,
|
|
* left: 400,
|
|
* top: 400,
|
|
* originX: 'left',
|
|
* originY: 'top'
|
|
* });
|
|
* @example <caption>Stretched overlayImage #1 - width/height correspond to canvas width/height</caption>
|
|
* fabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img) {
|
|
* img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
|
|
* canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
|
|
* });
|
|
* @example <caption>Stretched overlayImage #2 - width/height correspond to canvas width/height</caption>
|
|
* canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
|
|
* width: canvas.width,
|
|
* height: canvas.height,
|
|
* // Needed to position overlayImage at 0/0
|
|
* originX: 'left',
|
|
* originY: 'top'
|
|
* });
|
|
* @example <caption>overlayImage loaded from cross-origin</caption>
|
|
* canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
|
|
* opacity: 0.5,
|
|
* angle: 45,
|
|
* left: 400,
|
|
* top: 400,
|
|
* originX: 'left',
|
|
* originY: 'top',
|
|
* crossOrigin: 'anonymous'
|
|
* });
|
|
*/
|
|
setOverlayImage: function (image, callback, options) {
|
|
return this.__setBgOverlayImage('overlayImage', image, callback, options);
|
|
},
|
|
|
|
/**
|
|
* Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas
|
|
* @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to
|
|
* @param {Function} callback Callback to invoke when image is loaded and set as background
|
|
* @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}.
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
* @see {@link http://jsfiddle.net/fabricjs/YH9yD/|jsFiddle demo}
|
|
* @example <caption>Normal backgroundImage with left/top = 0</caption>
|
|
* canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
|
|
* // Needed to position backgroundImage at 0/0
|
|
* originX: 'left',
|
|
* originY: 'top'
|
|
* });
|
|
* @example <caption>backgroundImage with different properties</caption>
|
|
* canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
|
|
* opacity: 0.5,
|
|
* angle: 45,
|
|
* left: 400,
|
|
* top: 400,
|
|
* originX: 'left',
|
|
* originY: 'top'
|
|
* });
|
|
* @example <caption>Stretched backgroundImage #1 - width/height correspond to canvas width/height</caption>
|
|
* fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img) {
|
|
* img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
|
|
* canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
|
* });
|
|
* @example <caption>Stretched backgroundImage #2 - width/height correspond to canvas width/height</caption>
|
|
* canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
|
|
* width: canvas.width,
|
|
* height: canvas.height,
|
|
* // Needed to position backgroundImage at 0/0
|
|
* originX: 'left',
|
|
* originY: 'top'
|
|
* });
|
|
* @example <caption>backgroundImage loaded from cross-origin</caption>
|
|
* canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
|
|
* opacity: 0.5,
|
|
* angle: 45,
|
|
* left: 400,
|
|
* top: 400,
|
|
* originX: 'left',
|
|
* originY: 'top',
|
|
* crossOrigin: 'anonymous'
|
|
* });
|
|
*/
|
|
setBackgroundImage: function (image, callback, options) {
|
|
return this.__setBgOverlayImage('backgroundImage', image, callback, options);
|
|
},
|
|
|
|
/**
|
|
* Sets {@link fabric.StaticCanvas#overlayColor|background color} for this canvas
|
|
* @param {(String|fabric.Pattern)} overlayColor Color or pattern to set background color to
|
|
* @param {Function} callback Callback to invoke when background color is set
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
* @see {@link http://jsfiddle.net/fabricjs/pB55h/|jsFiddle demo}
|
|
* @example <caption>Normal overlayColor - color value</caption>
|
|
* canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
|
|
* @example <caption>fabric.Pattern used as overlayColor</caption>
|
|
* canvas.setOverlayColor({
|
|
* source: 'http://fabricjs.com/assets/escheresque_ste.png'
|
|
* }, canvas.renderAll.bind(canvas));
|
|
* @example <caption>fabric.Pattern used as overlayColor with repeat and offset</caption>
|
|
* canvas.setOverlayColor({
|
|
* source: 'http://fabricjs.com/assets/escheresque_ste.png',
|
|
* repeat: 'repeat',
|
|
* offsetX: 200,
|
|
* offsetY: 100
|
|
* }, canvas.renderAll.bind(canvas));
|
|
*/
|
|
setOverlayColor: function(overlayColor, callback) {
|
|
return this.__setBgOverlayColor('overlayColor', overlayColor, callback);
|
|
},
|
|
|
|
/**
|
|
* Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas
|
|
* @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to
|
|
* @param {Function} callback Callback to invoke when background color is set
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
* @see {@link http://jsfiddle.net/fabricjs/hXzvk/|jsFiddle demo}
|
|
* @example <caption>Normal backgroundColor - color value</caption>
|
|
* canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
|
|
* @example <caption>fabric.Pattern used as backgroundColor</caption>
|
|
* canvas.setBackgroundColor({
|
|
* source: 'http://fabricjs.com/assets/escheresque_ste.png'
|
|
* }, canvas.renderAll.bind(canvas));
|
|
* @example <caption>fabric.Pattern used as backgroundColor with repeat and offset</caption>
|
|
* 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();
|
|
|
|
ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled
|
|
|| ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled;
|
|
ctx.imageSmoothingEnabled = 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) {
|
|
img && (this[property] = new fabric.Image(img, options));
|
|
callback && callback(img);
|
|
}, this, options && options.crossOrigin);
|
|
}
|
|
else {
|
|
options && image.setOptions(options);
|
|
this[property] = image;
|
|
callback && callback(image);
|
|
}
|
|
|
|
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(canvasEl) {
|
|
var element = fabric.util.createCanvasElement(canvasEl)
|
|
if (!element.style) {
|
|
element.style = { };
|
|
}
|
|
if (!element) {
|
|
throw CANVAS_INIT_ERROR;
|
|
}
|
|
if (typeof element.getContext === 'undefined') {
|
|
throw CANVAS_INIT_ERROR;
|
|
}
|
|
return element;
|
|
},
|
|
|
|
/**
|
|
* @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(canvasEl);
|
|
|
|
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._initRetinaScaling();
|
|
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._activeGroup, object;
|
|
this.viewportTransform = vpt;
|
|
for (var i = 0, len = this._objects.length; i < len; i++) {
|
|
object = this._objects[i];
|
|
object.group || object.setCoords();
|
|
}
|
|
if (activeGroup) {
|
|
activeGroup.setCoords();
|
|
}
|
|
this.renderAll();
|
|
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, vpt = this.viewportTransform.slice(0);
|
|
point = fabric.util.transformPoint(point, fabric.util.invertTransform(this.viewportTransform));
|
|
vpt[0] = value;
|
|
vpt[3] = value;
|
|
var after = fabric.util.transformPoint(point, vpt);
|
|
vpt[4] += before.x - after.x;
|
|
vpt[5] += before.y - after.y;
|
|
return this.setViewportTransform(vpt);
|
|
},
|
|
|
|
/**
|
|
* 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) {
|
|
var vpt = this.viewportTransform.slice(0);
|
|
vpt[4] = -point.x;
|
|
vpt[5] = -point.y;
|
|
return this.setViewportTransform(vpt);
|
|
},
|
|
|
|
/**
|
|
* 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;
|
|
},
|
|
|
|
/**
|
|
* @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) {
|
|
this.fire('object:removed', { target: obj });
|
|
obj.fire('removed');
|
|
delete obj.canvas;
|
|
},
|
|
|
|
/**
|
|
* 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;
|
|
this.backgroundImage = null;
|
|
this.overlayImage = null;
|
|
this.backgroundColor = '';
|
|
this.overlayColor = ''
|
|
if (this._hasITextHandlers) {
|
|
this.off('selection:cleared', this._canvasITextSelectionClearedHanlder);
|
|
this.off('object:selected', this._canvasITextSelectionClearedHanlder);
|
|
this.off('mouse:up', this._mouseUpITextHandler);
|
|
this._iTextInstances = null;
|
|
this._hasITextHandlers = false;
|
|
}
|
|
this.clearContext(this.contextContainer);
|
|
this.fire('canvas:cleared');
|
|
this.renderAll();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Renders both the canvas.
|
|
* @return {fabric.Canvas} instance
|
|
* @chainable
|
|
*/
|
|
renderAll: function () {
|
|
var canvasToDrawOn = this.contextContainer;
|
|
this.renderCanvas(canvasToDrawOn, this._objects);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Renders background, objects, overlay and controls.
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {Array} objects to render
|
|
* @return {fabric.Canvas} instance
|
|
* @chainable
|
|
*/
|
|
renderCanvas: function(ctx, objects) {
|
|
this.clearContext(ctx);
|
|
this.fire('before:render');
|
|
if (this.clipTo) {
|
|
fabric.util.clipContext(this, ctx);
|
|
}
|
|
this._renderBackground(ctx);
|
|
|
|
ctx.save();
|
|
//apply viewport transform once for all rendering process
|
|
ctx.transform.apply(ctx, this.viewportTransform);
|
|
this._renderObjects(ctx, objects);
|
|
ctx.restore();
|
|
if (!this.controlsAboveOverlay && this.interactive) {
|
|
this.drawControls(ctx);
|
|
}
|
|
if (this.clipTo) {
|
|
ctx.restore();
|
|
}
|
|
this._renderOverlay(ctx);
|
|
if (this.controlsAboveOverlay && this.interactive) {
|
|
this.drawControls(ctx);
|
|
}
|
|
this.fire('after:render');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Array} objects to render
|
|
*/
|
|
_renderObjects: function(ctx, objects) {
|
|
for (var i = 0, length = objects.length; i < length; ++i) {
|
|
objects[i] && objects[i].render(ctx);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {string} property 'background' or 'overlay'
|
|
*/
|
|
_renderBackgroundOrOverlay: function(ctx, property) {
|
|
var object = this[property + 'Color'];
|
|
if (object) {
|
|
ctx.fillStyle = object.toLive
|
|
? object.toLive(ctx)
|
|
: object;
|
|
|
|
ctx.fillRect(
|
|
object.offsetX || 0,
|
|
object.offsetY || 0,
|
|
this.width,
|
|
this.height);
|
|
}
|
|
object = this[property + 'Image'];
|
|
if (object) {
|
|
if (this[property + 'Vpt']) {
|
|
ctx.save();
|
|
ctx.transform.apply(ctx, this.viewportTransform);
|
|
}
|
|
object.render(ctx);
|
|
this[property + 'Vpt'] && ctx.restore();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderBackground: function(ctx) {
|
|
this._renderBackgroundOrOverlay(ctx, 'background');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderOverlay: function(ctx) {
|
|
this._renderBackgroundOrOverlay(ctx, 'overlay');
|
|
},
|
|
|
|
/**
|
|
* 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 in the canvas
|
|
* 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) {
|
|
return this._centerObject(object, new fabric.Point(this.getCenter().left, object.getCenterPoint().y));
|
|
},
|
|
|
|
/**
|
|
* Centers object vertically in the canvas
|
|
* 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) {
|
|
return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenter().top));
|
|
},
|
|
|
|
/**
|
|
* Centers object vertically and horizontally in the canvas
|
|
* 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();
|
|
|
|
return this._centerObject(object, new fabric.Point(center.left, center.top));
|
|
},
|
|
|
|
/**
|
|
* Centers object vertically and horizontally in the viewport
|
|
* 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
|
|
*/
|
|
viewportCenterObject: function(object) {
|
|
var vpCenter = this.getVpCenter();
|
|
|
|
return this._centerObject(object, vpCenter);
|
|
},
|
|
|
|
/**
|
|
* Centers object horizontally in the viewport, object.top is unchanged
|
|
* 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
|
|
*/
|
|
viewportCenterObjectH: function(object) {
|
|
var vpCenter = this.getVpCenter();
|
|
this._centerObject(object, new fabric.Point(vpCenter.x, object.getCenterPoint().y));
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Centers object Vertically in the viewport, object.top is unchanged
|
|
* 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
|
|
*/
|
|
viewportCenterObjectV: function(object) {
|
|
var vpCenter = this.getVpCenter();
|
|
|
|
return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, vpCenter.y));
|
|
},
|
|
|
|
/**
|
|
* Calculate the point in canvas that correspond to the center of actual viewport.
|
|
* @return {fabric.Point} vpCenter, viewport center
|
|
* @chainable
|
|
*/
|
|
getVpCenter: function() {
|
|
var center = this.getCenter(),
|
|
iVpt = fabric.util.invertTransform(this.viewportTransform);
|
|
return fabric.util.transformPoint({ x: center.left, y: center.top }, iVpt);
|
|
},
|
|
|
|
/**
|
|
* @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');
|
|
this.renderAll();
|
|
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(methodName, propertiesToInclude));
|
|
|
|
fabric.util.populateWithProperties(this, data, propertiesToInclude);
|
|
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_toObjects: function(methodName, propertiesToInclude) {
|
|
return this.getObjects().filter(function(object) {
|
|
return !object.excludeFromExport;
|
|
}).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;
|
|
}
|
|
|
|
var object = instance[methodName](propertiesToInclude);
|
|
if (!this.includeDefaultValues) {
|
|
instance.includeDefaultValues = originalValue;
|
|
}
|
|
return object;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
__serializeBgOverlay: function(methodName, propertiesToInclude) {
|
|
var data = {
|
|
background: (this.backgroundColor && this.backgroundColor.toObject)
|
|
? this.backgroundColor.toObject(propertiesToInclude)
|
|
: this.backgroundColor
|
|
};
|
|
|
|
if (this.overlayColor) {
|
|
data.overlay = this.overlayColor.toObject
|
|
? this.overlayColor.toObject(propertiesToInclude)
|
|
: this.overlayColor;
|
|
}
|
|
if (this.backgroundImage) {
|
|
data.backgroundImage = this._toObject(this.backgroundImage, methodName, propertiesToInclude);
|
|
}
|
|
if (this.overlayImage) {
|
|
data.overlayImage = this._toObject(this.overlayImage, methodName, propertiesToInclude);
|
|
}
|
|
|
|
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 {String} [options.width] desired width of svg with or without units
|
|
* @param {String} [options.height] desired height of svg with or without units
|
|
* @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 <caption>Normal SVG output</caption>
|
|
* var svg = canvas.toSVG();
|
|
* @example <caption>SVG output without preamble (without <?xml ../>)</caption>
|
|
* var svg = canvas.toSVG({suppressPreamble: true});
|
|
* @example <caption>SVG output with viewBox attribute</caption>
|
|
* var svg = canvas.toSVG({
|
|
* viewBox: {
|
|
* x: 100,
|
|
* y: 100,
|
|
* width: 200,
|
|
* height: 300
|
|
* }
|
|
* });
|
|
* @example <caption>SVG output with different encoding (default: UTF-8)</caption>
|
|
* var svg = canvas.toSVG({encoding: 'ISO-8859-1'});
|
|
* @example <caption>Modify SVG output with reviver function</caption>
|
|
* var svg = canvas.toSVG(null, function(svg) {
|
|
* return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', '');
|
|
* });
|
|
*/
|
|
toSVG: function(options, reviver) {
|
|
options || (options = { });
|
|
|
|
var markup = [];
|
|
|
|
this._setSVGPreamble(markup, options);
|
|
this._setSVGHeader(markup, options);
|
|
|
|
this._setSVGBgOverlayColor(markup, 'backgroundColor');
|
|
this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);
|
|
|
|
this._setSVGObjects(markup, reviver);
|
|
|
|
this._setSVGBgOverlayColor(markup, 'overlayColor');
|
|
this._setSVGBgOverlayImage(markup, 'overlayImage', reviver);
|
|
|
|
markup.push('</svg>');
|
|
|
|
return markup.join('');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setSVGPreamble: function(markup, options) {
|
|
if (options.suppressPreamble) {
|
|
return;
|
|
}
|
|
markup.push(
|
|
'<?xml version="1.0" encoding="', (options.encoding || 'UTF-8'), '" standalone="no" ?>\n',
|
|
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ',
|
|
'"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setSVGHeader: function(markup, options) {
|
|
var width = options.width || this.width,
|
|
height = options.height || this.height,
|
|
vpt, viewBox = 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ',
|
|
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
|
|
|
|
if (options.viewBox) {
|
|
viewBox = 'viewBox="' +
|
|
options.viewBox.x + ' ' +
|
|
options.viewBox.y + ' ' +
|
|
options.viewBox.width + ' ' +
|
|
options.viewBox.height + '" ';
|
|
}
|
|
else {
|
|
if (this.svgViewportTransformation) {
|
|
vpt = this.viewportTransform;
|
|
viewBox = 'viewBox="' +
|
|
toFixed(-vpt[4] / vpt[0], NUM_FRACTION_DIGITS) + ' ' +
|
|
toFixed(-vpt[5] / vpt[3], NUM_FRACTION_DIGITS) + ' ' +
|
|
toFixed(this.width / vpt[0], NUM_FRACTION_DIGITS) + ' ' +
|
|
toFixed(this.height / vpt[3], NUM_FRACTION_DIGITS) + '" ';
|
|
}
|
|
}
|
|
|
|
markup.push(
|
|
'<svg ',
|
|
'xmlns="http://www.w3.org/2000/svg" ',
|
|
'xmlns:xlink="http://www.w3.org/1999/xlink" ',
|
|
'version="1.1" ',
|
|
'width="', width, '" ',
|
|
'height="', height, '" ',
|
|
(this.backgroundColor && !this.backgroundColor.toLive
|
|
? 'style="background-color: ' + this.backgroundColor + '" '
|
|
: null),
|
|
viewBox,
|
|
'xml:space="preserve">\n',
|
|
'<desc>Created with Fabric.js ', fabric.version, '</desc>\n',
|
|
'<defs>',
|
|
fabric.createSVGFontFacesMarkup(this.getObjects()),
|
|
fabric.createSVGRefElementsMarkup(this),
|
|
'</defs>\n'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setSVGObjects: function(markup, reviver) {
|
|
var instance;
|
|
for (var i = 0, objects = this.getObjects(), len = objects.length; i < len; i++) {
|
|
instance = objects[i];
|
|
if (instance.excludeFromExport) {
|
|
continue;
|
|
}
|
|
this._setSVGObject(markup, instance, reviver);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* push single object svg representation in the markup
|
|
* @private
|
|
*/
|
|
_setSVGObject: function(markup, instance, reviver) {
|
|
markup.push(instance.toSVG(reviver));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setSVGBgOverlayImage: function(markup, property, reviver) {
|
|
if (this[property] && this[property].toSVG) {
|
|
markup.push(this[property].toSVG(reviver));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setSVGBgOverlayColor: function(markup, property) {
|
|
if (this[property] && this[property].source) {
|
|
markup.push(
|
|
'<rect x="', this[property].offsetX, '" y="', this[property].offsetY, '" ',
|
|
'width="',
|
|
(this[property].repeat === 'repeat-y' || this[property].repeat === 'no-repeat'
|
|
? this[property].source.width
|
|
: this.width),
|
|
'" height="',
|
|
(this[property].repeat === 'repeat-x' || this[property].repeat === 'no-repeat'
|
|
? this[property].source.height
|
|
: this.height),
|
|
'" fill="url(#' + property + 'Pattern)"',
|
|
'></rect>\n'
|
|
);
|
|
}
|
|
else if (this[property] && property === 'overlayColor') {
|
|
markup.push(
|
|
'<rect x="0" y="0" ',
|
|
'width="', this.width,
|
|
'" height="', this.height,
|
|
'" fill="', this[property], '"',
|
|
'></rect>\n'
|
|
);
|
|
}
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Moves an object or the objects of a multiple selection
|
|
* to the bottom of the stack of drawn objects
|
|
* @param {fabric.Object} object Object to send to back
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
sendToBack: function (object) {
|
|
if (!object) {
|
|
return this;
|
|
}
|
|
var activeGroup = this._activeGroup,
|
|
i, obj, objs;
|
|
if (object === activeGroup) {
|
|
objs = activeGroup._objects;
|
|
for (i = objs.length; i--;) {
|
|
obj = objs[i];
|
|
removeFromArray(this._objects, obj);
|
|
this._objects.unshift(obj);
|
|
}
|
|
}
|
|
else {
|
|
removeFromArray(this._objects, object);
|
|
this._objects.unshift(object);
|
|
}
|
|
return this.renderAll && this.renderAll();
|
|
},
|
|
|
|
/**
|
|
* Moves an object or the objects of a multiple selection
|
|
* to the top of the stack of drawn objects
|
|
* @param {fabric.Object} object Object to send
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
bringToFront: function (object) {
|
|
if (!object) {
|
|
return this;
|
|
}
|
|
var activeGroup = this._activeGroup,
|
|
i, obj, objs;
|
|
if (object === activeGroup) {
|
|
objs = activeGroup._objects;
|
|
for (i = 0; i < objs.length; i++) {
|
|
obj = objs[i];
|
|
removeFromArray(this._objects, obj);
|
|
this._objects.push(obj);
|
|
}
|
|
}
|
|
else {
|
|
removeFromArray(this._objects, object);
|
|
this._objects.push(object);
|
|
}
|
|
return this.renderAll && this.renderAll();
|
|
},
|
|
|
|
/**
|
|
* Moves an object or a selection down in stack of drawn objects
|
|
* @param {fabric.Object} object Object to send
|
|
* @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
sendBackwards: function (object, intersecting) {
|
|
if (!object) {
|
|
return this;
|
|
}
|
|
var activeGroup = this._activeGroup,
|
|
i, obj, idx, newIdx, objs;
|
|
|
|
if (object === activeGroup) {
|
|
objs = activeGroup._objects;
|
|
for (i = 0; i < objs.length; i++) {
|
|
obj = objs[i];
|
|
idx = this._objects.indexOf(obj);
|
|
if (idx !== 0) {
|
|
newIdx = idx - 1;
|
|
removeFromArray(this._objects, obj);
|
|
this._objects.splice(newIdx, 0, obj);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
idx = this._objects.indexOf(object);
|
|
if (idx !== 0) {
|
|
// if object is not on the bottom of stack
|
|
newIdx = this._findNewLowerIndex(object, idx, intersecting);
|
|
removeFromArray(this._objects, object);
|
|
this._objects.splice(newIdx, 0, object);
|
|
}
|
|
}
|
|
this.renderAll && this.renderAll();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_findNewLowerIndex: function(object, idx, intersecting) {
|
|
var newIdx;
|
|
|
|
if (intersecting) {
|
|
newIdx = idx;
|
|
|
|
// traverse down the stack looking for the nearest intersecting object
|
|
for (var i = idx - 1; i >= 0; --i) {
|
|
|
|
var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
|
|
object.isContainedWithinObject(this._objects[i]) ||
|
|
this._objects[i].isContainedWithinObject(object);
|
|
|
|
if (isIntersecting) {
|
|
newIdx = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
newIdx = idx - 1;
|
|
}
|
|
|
|
return newIdx;
|
|
},
|
|
|
|
/**
|
|
* Moves an object or a selection up in stack of drawn objects
|
|
* @param {fabric.Object} object Object to send
|
|
* @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
bringForward: function (object, intersecting) {
|
|
if (!object) {
|
|
return this;
|
|
}
|
|
var activeGroup = this._activeGroup,
|
|
i, obj, idx, newIdx, objs;
|
|
|
|
if (object === activeGroup) {
|
|
objs = activeGroup._objects;
|
|
for (i = objs.length; i--;) {
|
|
obj = objs[i];
|
|
idx = this._objects.indexOf(obj);
|
|
if (idx !== this._objects.length - 1) {
|
|
newIdx = idx + 1;
|
|
removeFromArray(this._objects, obj);
|
|
this._objects.splice(newIdx, 0, obj);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
idx = this._objects.indexOf(object);
|
|
if (idx !== this._objects.length - 1) {
|
|
// if object is not on top of stack (last item in an array)
|
|
newIdx = this._findNewUpperIndex(object, idx, intersecting);
|
|
removeFromArray(this._objects, object);
|
|
this._objects.splice(newIdx, 0, object);
|
|
}
|
|
}
|
|
this.renderAll && this.renderAll();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_findNewUpperIndex: function(object, idx, intersecting) {
|
|
var newIdx;
|
|
|
|
if (intersecting) {
|
|
newIdx = idx;
|
|
|
|
// traverse up the stack looking for the nearest intersecting object
|
|
for (var i = idx + 1; i < this._objects.length; ++i) {
|
|
|
|
var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
|
|
object.isContainedWithinObject(this._objects[i]) ||
|
|
this._objects[i].isContainedWithinObject(object);
|
|
|
|
if (isIntersecting) {
|
|
newIdx = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
newIdx = idx + 1;
|
|
}
|
|
|
|
return newIdx;
|
|
},
|
|
|
|
/**
|
|
* Moves an object to specified level in stack of drawn objects
|
|
* @param {fabric.Object} object Object to send
|
|
* @param {Number} index Position to move to
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
moveTo: function (object, index) {
|
|
removeFromArray(this._objects, object);
|
|
this._objects.splice(index, 0, object);
|
|
return this.renderAll && this.renderAll();
|
|
},
|
|
|
|
/**
|
|
* Clears a canvas element and removes all event listeners
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
dispose: function () {
|
|
this.clear();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns a string representation of an instance
|
|
* @return {String} string representation of an instance
|
|
*/
|
|
toString: function () {
|
|
return '#<fabric.Canvas (' + this.complexity() + '): ' +
|
|
'{ objects: ' + this.getObjects().length + ' }>';
|
|
}
|
|
});
|
|
|
|
extend(fabric.StaticCanvas.prototype, fabric.Observable);
|
|
extend(fabric.StaticCanvas.prototype, fabric.Collection);
|
|
extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter);
|
|
|
|
extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ {
|
|
|
|
/**
|
|
* @static
|
|
* @type String
|
|
* @default
|
|
*/
|
|
EMPTY_JSON: '{"objects": [], "background": "white"}',
|
|
|
|
/**
|
|
* Provides a way to check support of some of the canvas methods
|
|
* (either those of HTMLCanvasElement itself, or rendering context)
|
|
*
|
|
* @param {String} methodName Method to check support for;
|
|
* Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash"
|
|
* @return {Boolean | null} `true` if method is supported (or at least exists),
|
|
* `null` if canvas element or context can not be initialized
|
|
*/
|
|
supports: function (methodName) {
|
|
var el = fabric.util.createCanvasElement();
|
|
|
|
if (!el || !el.getContext) {
|
|
return null;
|
|
}
|
|
|
|
var ctx = el.getContext('2d');
|
|
if (!ctx) {
|
|
return null;
|
|
}
|
|
|
|
switch (methodName) {
|
|
|
|
case 'getImageData':
|
|
return typeof ctx.getImageData !== 'undefined';
|
|
|
|
case 'setLineDash':
|
|
return typeof ctx.setLineDash !== 'undefined';
|
|
|
|
case 'toDataURL':
|
|
return typeof el.toDataURL !== 'undefined';
|
|
|
|
case 'toDataURLWithQuality':
|
|
try {
|
|
el.toDataURL('image/jpeg', 0);
|
|
return true;
|
|
}
|
|
catch (e) { }
|
|
return false;
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns JSON representation of canvas
|
|
* @function
|
|
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
|
|
* @return {String} JSON string
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization}
|
|
* @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo}
|
|
* @example <caption>JSON without additional properties</caption>
|
|
* var json = canvas.toJSON();
|
|
* @example <caption>JSON with additional properties included</caption>
|
|
* var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockUniScaling']);
|
|
* @example <caption>JSON without default values</caption>
|
|
* canvas.includeDefaultValues = false;
|
|
* var json = canvas.toJSON();
|
|
*/
|
|
fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject;
|
|
|
|
})();
|
|
|
|
|
|
/**
|
|
* BaseBrush class
|
|
* @class fabric.BaseBrush
|
|
* @see {@link http://fabricjs.com/freedrawing|Freedrawing demo}
|
|
*/
|
|
fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ {
|
|
|
|
/**
|
|
* Color of a brush
|
|
* @type String
|
|
* @default
|
|
*/
|
|
color: 'rgb(0, 0, 0)',
|
|
|
|
/**
|
|
* Width of a brush
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
width: 1,
|
|
|
|
/**
|
|
* Shadow object representing shadow of this shape.
|
|
* <b>Backwards incompatibility note:</b> This property replaces "shadowColor" (String), "shadowOffsetX" (Number),
|
|
* "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12
|
|
* @type fabric.Shadow
|
|
* @default
|
|
*/
|
|
shadow: null,
|
|
|
|
/**
|
|
* Line endings style of a brush (one of "butt", "round", "square")
|
|
* @type String
|
|
* @default
|
|
*/
|
|
strokeLineCap: 'round',
|
|
|
|
/**
|
|
* Corner style of a brush (one of "bevil", "round", "miter")
|
|
* @type String
|
|
* @default
|
|
*/
|
|
strokeLineJoin: 'round',
|
|
|
|
/**
|
|
* Stroke Dash Array.
|
|
* @type Array
|
|
* @default
|
|
*/
|
|
strokeDashArray: null,
|
|
|
|
/**
|
|
* Sets shadow of an object
|
|
* @param {Object|String} [options] Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)")
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
setShadow: function(options) {
|
|
this.shadow = new fabric.Shadow(options);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets brush styles
|
|
* @private
|
|
*/
|
|
_setBrushStyles: function() {
|
|
var ctx = this.canvas.contextTop;
|
|
|
|
ctx.strokeStyle = this.color;
|
|
ctx.lineWidth = this.width;
|
|
ctx.lineCap = this.strokeLineCap;
|
|
ctx.lineJoin = this.strokeLineJoin;
|
|
if (this.strokeDashArray && fabric.StaticCanvas.supports('setLineDash')) {
|
|
ctx.setLineDash(this.strokeDashArray);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets brush shadow styles
|
|
* @private
|
|
*/
|
|
_setShadow: function() {
|
|
if (!this.shadow) {
|
|
return;
|
|
}
|
|
|
|
var ctx = this.canvas.contextTop;
|
|
|
|
ctx.shadowColor = this.shadow.color;
|
|
ctx.shadowBlur = this.shadow.blur;
|
|
ctx.shadowOffsetX = this.shadow.offsetX;
|
|
ctx.shadowOffsetY = this.shadow.offsetY;
|
|
},
|
|
|
|
/**
|
|
* Removes brush shadow styles
|
|
* @private
|
|
*/
|
|
_resetShadow: function() {
|
|
var ctx = this.canvas.contextTop;
|
|
|
|
ctx.shadowColor = '';
|
|
ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
|
|
}
|
|
});
|
|
|
|
|
|
(function() {
|
|
|
|
/**
|
|
* PencilBrush class
|
|
* @class fabric.PencilBrush
|
|
* @extends fabric.BaseBrush
|
|
*/
|
|
fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ {
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {fabric.Canvas} canvas
|
|
* @return {fabric.PencilBrush} Instance of a pencil brush
|
|
*/
|
|
initialize: function(canvas) {
|
|
this.canvas = canvas;
|
|
this._points = [];
|
|
},
|
|
|
|
/**
|
|
* Inovoked on mouse down
|
|
* @param {Object} pointer
|
|
*/
|
|
onMouseDown: function(pointer) {
|
|
this._prepareForDrawing(pointer);
|
|
// capture coordinates immediately
|
|
// this allows to draw dots (when movement never occurs)
|
|
this._captureDrawingPath(pointer);
|
|
this._render();
|
|
},
|
|
|
|
/**
|
|
* Inovoked on mouse move
|
|
* @param {Object} pointer
|
|
*/
|
|
onMouseMove: function(pointer) {
|
|
this._captureDrawingPath(pointer);
|
|
// redraw curve
|
|
// clear top canvas
|
|
this.canvas.clearContext(this.canvas.contextTop);
|
|
this._render();
|
|
},
|
|
|
|
/**
|
|
* Invoked on mouse up
|
|
*/
|
|
onMouseUp: function() {
|
|
this._finalizeAndAddPath();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} pointer Actual mouse position related to the canvas.
|
|
*/
|
|
_prepareForDrawing: function(pointer) {
|
|
|
|
var p = new fabric.Point(pointer.x, pointer.y);
|
|
|
|
this._reset();
|
|
this._addPoint(p);
|
|
|
|
this.canvas.contextTop.moveTo(p.x, p.y);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {fabric.Point} point Point to be added to points array
|
|
*/
|
|
_addPoint: function(point) {
|
|
this._points.push(point);
|
|
},
|
|
|
|
/**
|
|
* Clear points array and set contextTop canvas style.
|
|
* @private
|
|
*/
|
|
_reset: function() {
|
|
this._points.length = 0;
|
|
|
|
this._setBrushStyles();
|
|
this._setShadow();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} pointer Actual mouse position related to the canvas.
|
|
*/
|
|
_captureDrawingPath: function(pointer) {
|
|
var pointerPoint = new fabric.Point(pointer.x, pointer.y);
|
|
this._addPoint(pointerPoint);
|
|
},
|
|
|
|
/**
|
|
* Draw a smooth path on the topCanvas using quadraticCurveTo
|
|
* @private
|
|
*/
|
|
_render: function() {
|
|
var ctx = this.canvas.contextTop,
|
|
v = this.canvas.viewportTransform,
|
|
p1 = this._points[0],
|
|
p2 = this._points[1];
|
|
|
|
ctx.save();
|
|
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
|
|
ctx.beginPath();
|
|
|
|
//if we only have 2 points in the path and they are the same
|
|
//it means that the user only clicked the canvas without moving the mouse
|
|
//then we should be drawing a dot. A path isn't drawn between two identical dots
|
|
//that's why we set them apart a bit
|
|
if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) {
|
|
p1.x -= 0.5;
|
|
p2.x += 0.5;
|
|
}
|
|
ctx.moveTo(p1.x, p1.y);
|
|
|
|
for (var i = 1, len = this._points.length; i < len; i++) {
|
|
// we pick the point between pi + 1 & pi + 2 as the
|
|
// end point and p1 as our control point.
|
|
var midPoint = p1.midPointFrom(p2);
|
|
ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
|
|
|
|
p1 = this._points[i];
|
|
p2 = this._points[i + 1];
|
|
}
|
|
// Draw last line as a straight line while
|
|
// we wait for the next point to be able to calculate
|
|
// the bezier control point
|
|
ctx.lineTo(p1.x, p1.y);
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* Converts points to SVG path
|
|
* @param {Array} points Array of points
|
|
* @return {String} SVG path
|
|
*/
|
|
convertPointsToSVGPath: function(points) {
|
|
var path = [],
|
|
p1 = new fabric.Point(points[0].x, points[0].y),
|
|
p2 = new fabric.Point(points[1].x, points[1].y);
|
|
|
|
path.push('M ', points[0].x, ' ', points[0].y, ' ');
|
|
for (var i = 1, len = points.length; i < len; i++) {
|
|
var midPoint = p1.midPointFrom(p2);
|
|
// p1 is our bezier control point
|
|
// midpoint is our endpoint
|
|
// start point is p(i-1) value.
|
|
path.push('Q ', p1.x, ' ', p1.y, ' ', midPoint.x, ' ', midPoint.y, ' ');
|
|
p1 = new fabric.Point(points[i].x, points[i].y);
|
|
if ((i + 1) < points.length) {
|
|
p2 = new fabric.Point(points[i + 1].x, points[i + 1].y);
|
|
}
|
|
}
|
|
path.push('L ', p1.x, ' ', p1.y, ' ');
|
|
return path;
|
|
},
|
|
|
|
/**
|
|
* Creates fabric.Path object to add on canvas
|
|
* @param {String} pathData Path data
|
|
* @return {fabric.Path} Path to add on canvas
|
|
*/
|
|
createPath: function(pathData) {
|
|
var path = new fabric.Path(pathData, {
|
|
fill: null,
|
|
stroke: this.color,
|
|
strokeWidth: this.width,
|
|
strokeLineCap: this.strokeLineCap,
|
|
strokeLineJoin: this.strokeLineJoin,
|
|
strokeDashArray: this.strokeDashArray,
|
|
originX: 'center',
|
|
originY: 'center'
|
|
});
|
|
|
|
if (this.shadow) {
|
|
this.shadow.affectStroke = true;
|
|
path.setShadow(this.shadow);
|
|
}
|
|
|
|
return path;
|
|
},
|
|
|
|
/**
|
|
* On mouseup after drawing the path on contextTop canvas
|
|
* we use the points captured to create an new fabric path object
|
|
* and add it to the fabric canvas.
|
|
*/
|
|
_finalizeAndAddPath: function() {
|
|
var ctx = this.canvas.contextTop;
|
|
ctx.closePath();
|
|
|
|
var pathData = this.convertPointsToSVGPath(this._points).join('');
|
|
if (pathData === 'M 0 0 Q 0 0 0 0 L 0 0') {
|
|
// do not create 0 width/height paths, as they are
|
|
// rendered inconsistently across browsers
|
|
// Firefox 4, for example, renders a dot,
|
|
// whereas Chrome 10 renders nothing
|
|
this.canvas.renderAll();
|
|
return;
|
|
}
|
|
|
|
var path = this.createPath(pathData);
|
|
|
|
this.canvas.add(path);
|
|
path.setCoords();
|
|
|
|
this.canvas.clearContext(this.canvas.contextTop);
|
|
this._resetShadow();
|
|
this.canvas.renderAll();
|
|
|
|
// fire event 'path' created
|
|
this.canvas.fire('path:created', { path: path });
|
|
}
|
|
});
|
|
})();
|
|
|
|
|
|
/**
|
|
* CircleBrush class
|
|
* @class fabric.CircleBrush
|
|
*/
|
|
fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ {
|
|
|
|
/**
|
|
* Width of a brush
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
width: 10,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {fabric.Canvas} canvas
|
|
* @return {fabric.CircleBrush} Instance of a circle brush
|
|
*/
|
|
initialize: function(canvas) {
|
|
this.canvas = canvas;
|
|
this.points = [];
|
|
},
|
|
|
|
/**
|
|
* Invoked inside on mouse down and mouse move
|
|
* @param {Object} pointer
|
|
*/
|
|
drawDot: function(pointer) {
|
|
var point = this.addPoint(pointer),
|
|
ctx = this.canvas.contextTop,
|
|
v = this.canvas.viewportTransform;
|
|
ctx.save();
|
|
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
|
|
|
|
ctx.fillStyle = point.fill;
|
|
ctx.beginPath();
|
|
ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* Invoked on mouse down
|
|
*/
|
|
onMouseDown: function(pointer) {
|
|
this.points.length = 0;
|
|
this.canvas.clearContext(this.canvas.contextTop);
|
|
this._setShadow();
|
|
this.drawDot(pointer);
|
|
},
|
|
|
|
/**
|
|
* Invoked on mouse move
|
|
* @param {Object} pointer
|
|
*/
|
|
onMouseMove: function(pointer) {
|
|
this.drawDot(pointer);
|
|
},
|
|
|
|
/**
|
|
* Invoked on mouse up
|
|
*/
|
|
onMouseUp: function() {
|
|
var originalRenderOnAddRemove = this.canvas.renderOnAddRemove;
|
|
this.canvas.renderOnAddRemove = false;
|
|
|
|
var circles = [];
|
|
|
|
for (var i = 0, len = this.points.length; i < len; i++) {
|
|
var point = this.points[i],
|
|
circle = new fabric.Circle({
|
|
radius: point.radius,
|
|
left: point.x,
|
|
top: point.y,
|
|
originX: 'center',
|
|
originY: 'center',
|
|
fill: point.fill
|
|
});
|
|
|
|
this.shadow && circle.setShadow(this.shadow);
|
|
|
|
circles.push(circle);
|
|
}
|
|
var group = new fabric.Group(circles, { originX: 'center', originY: 'center' });
|
|
group.canvas = this.canvas;
|
|
|
|
this.canvas.add(group);
|
|
this.canvas.fire('path:created', { path: group });
|
|
|
|
this.canvas.clearContext(this.canvas.contextTop);
|
|
this._resetShadow();
|
|
this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
|
|
this.canvas.renderAll();
|
|
},
|
|
|
|
/**
|
|
* @param {Object} pointer
|
|
* @return {fabric.Point} Just added pointer point
|
|
*/
|
|
addPoint: function(pointer) {
|
|
var pointerPoint = new fabric.Point(pointer.x, pointer.y),
|
|
|
|
circleRadius = fabric.util.getRandomInt(
|
|
Math.max(0, this.width - 20), this.width + 20) / 2,
|
|
|
|
circleColor = new fabric.Color(this.color)
|
|
.setAlpha(fabric.util.getRandomInt(0, 100) / 100)
|
|
.toRgba();
|
|
|
|
pointerPoint.radius = circleRadius;
|
|
pointerPoint.fill = circleColor;
|
|
|
|
this.points.push(pointerPoint);
|
|
|
|
return pointerPoint;
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* SprayBrush class
|
|
* @class fabric.SprayBrush
|
|
*/
|
|
fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ {
|
|
|
|
/**
|
|
* Width of a spray
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
width: 10,
|
|
|
|
/**
|
|
* Density of a spray (number of dots per chunk)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
density: 20,
|
|
|
|
/**
|
|
* Width of spray dots
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
dotWidth: 1,
|
|
|
|
/**
|
|
* Width variance of spray dots
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
dotWidthVariance: 1,
|
|
|
|
/**
|
|
* Whether opacity of a dot should be random
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
randomOpacity: false,
|
|
|
|
/**
|
|
* Whether overlapping dots (rectangles) should be removed (for performance reasons)
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
optimizeOverlapping: true,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {fabric.Canvas} canvas
|
|
* @return {fabric.SprayBrush} Instance of a spray brush
|
|
*/
|
|
initialize: function(canvas) {
|
|
this.canvas = canvas;
|
|
this.sprayChunks = [];
|
|
},
|
|
|
|
/**
|
|
* Invoked on mouse down
|
|
* @param {Object} pointer
|
|
*/
|
|
onMouseDown: function(pointer) {
|
|
this.sprayChunks.length = 0;
|
|
this.canvas.clearContext(this.canvas.contextTop);
|
|
this._setShadow();
|
|
|
|
this.addSprayChunk(pointer);
|
|
this.render();
|
|
},
|
|
|
|
/**
|
|
* Invoked on mouse move
|
|
* @param {Object} pointer
|
|
*/
|
|
onMouseMove: function(pointer) {
|
|
this.addSprayChunk(pointer);
|
|
this.render();
|
|
},
|
|
|
|
/**
|
|
* Invoked on mouse up
|
|
*/
|
|
onMouseUp: function() {
|
|
var originalRenderOnAddRemove = this.canvas.renderOnAddRemove;
|
|
this.canvas.renderOnAddRemove = false;
|
|
|
|
var rects = [];
|
|
|
|
for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) {
|
|
var sprayChunk = this.sprayChunks[i];
|
|
|
|
for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) {
|
|
|
|
var rect = new fabric.Rect({
|
|
width: sprayChunk[j].width,
|
|
height: sprayChunk[j].width,
|
|
left: sprayChunk[j].x + 1,
|
|
top: sprayChunk[j].y + 1,
|
|
originX: 'center',
|
|
originY: 'center',
|
|
fill: this.color
|
|
});
|
|
|
|
this.shadow && rect.setShadow(this.shadow);
|
|
rects.push(rect);
|
|
}
|
|
}
|
|
|
|
if (this.optimizeOverlapping) {
|
|
rects = this._getOptimizedRects(rects);
|
|
}
|
|
|
|
var group = new fabric.Group(rects, { originX: 'center', originY: 'center' });
|
|
group.canvas = this.canvas;
|
|
|
|
this.canvas.add(group);
|
|
this.canvas.fire('path:created', { path: group });
|
|
|
|
this.canvas.clearContext(this.canvas.contextTop);
|
|
this._resetShadow();
|
|
this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
|
|
this.canvas.renderAll();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Array} rects
|
|
*/
|
|
_getOptimizedRects: function(rects) {
|
|
|
|
// avoid creating duplicate rects at the same coordinates
|
|
var uniqueRects = { }, key;
|
|
|
|
for (var i = 0, len = rects.length; i < len; i++) {
|
|
key = rects[i].left + '' + rects[i].top;
|
|
if (!uniqueRects[key]) {
|
|
uniqueRects[key] = rects[i];
|
|
}
|
|
}
|
|
var uniqueRectsArray = [];
|
|
for (key in uniqueRects) {
|
|
uniqueRectsArray.push(uniqueRects[key]);
|
|
}
|
|
|
|
return uniqueRectsArray;
|
|
},
|
|
|
|
/**
|
|
* Renders brush
|
|
*/
|
|
render: function() {
|
|
var ctx = this.canvas.contextTop;
|
|
ctx.fillStyle = this.color;
|
|
|
|
var v = this.canvas.viewportTransform;
|
|
ctx.save();
|
|
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
|
|
|
|
for (var i = 0, len = this.sprayChunkPoints.length; i < len; i++) {
|
|
var point = this.sprayChunkPoints[i];
|
|
if (typeof point.opacity !== 'undefined') {
|
|
ctx.globalAlpha = point.opacity;
|
|
}
|
|
ctx.fillRect(point.x, point.y, point.width, point.width);
|
|
}
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* @param {Object} pointer
|
|
*/
|
|
addSprayChunk: function(pointer) {
|
|
this.sprayChunkPoints = [];
|
|
|
|
var x, y, width, radius = this.width / 2;
|
|
|
|
for (var i = 0; i < this.density; i++) {
|
|
|
|
x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius);
|
|
y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius);
|
|
|
|
if (this.dotWidthVariance) {
|
|
width = fabric.util.getRandomInt(
|
|
// bottom clamp width to 1
|
|
Math.max(1, this.dotWidth - this.dotWidthVariance),
|
|
this.dotWidth + this.dotWidthVariance);
|
|
}
|
|
else {
|
|
width = this.dotWidth;
|
|
}
|
|
|
|
var point = new fabric.Point(x, y);
|
|
point.width = width;
|
|
|
|
if (this.randomOpacity) {
|
|
point.opacity = fabric.util.getRandomInt(0, 100) / 100;
|
|
}
|
|
|
|
this.sprayChunkPoints.push(point);
|
|
}
|
|
|
|
this.sprayChunks.push(this.sprayChunkPoints);
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* PatternBrush class
|
|
* @class fabric.PatternBrush
|
|
* @extends fabric.BaseBrush
|
|
*/
|
|
fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ {
|
|
|
|
getPatternSrc: function() {
|
|
|
|
var dotWidth = 20,
|
|
dotDistance = 5,
|
|
patternCanvas = fabric.document.createElement('canvas'),
|
|
patternCtx = patternCanvas.getContext('2d');
|
|
|
|
patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;
|
|
|
|
patternCtx.fillStyle = this.color;
|
|
patternCtx.beginPath();
|
|
patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false);
|
|
patternCtx.closePath();
|
|
patternCtx.fill();
|
|
|
|
return patternCanvas;
|
|
},
|
|
|
|
getPatternSrcFunction: function() {
|
|
return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"');
|
|
},
|
|
|
|
/**
|
|
* Creates "pattern" instance property
|
|
*/
|
|
getPattern: function() {
|
|
return this.canvas.contextTop.createPattern(this.source || this.getPatternSrc(), 'repeat');
|
|
},
|
|
|
|
/**
|
|
* Sets brush styles
|
|
*/
|
|
_setBrushStyles: function() {
|
|
this.callSuper('_setBrushStyles');
|
|
this.canvas.contextTop.strokeStyle = this.getPattern();
|
|
},
|
|
|
|
/**
|
|
* Creates path
|
|
*/
|
|
createPath: function(pathData) {
|
|
var path = this.callSuper('createPath', pathData),
|
|
topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2);
|
|
|
|
path.stroke = new fabric.Pattern({
|
|
source: this.source || this.getPatternSrcFunction(),
|
|
offsetX: -topLeft.x,
|
|
offsetY: -topLeft.y
|
|
});
|
|
return path;
|
|
}
|
|
});
|
|
|
|
|
|
(function() {
|
|
|
|
var getPointer = fabric.util.getPointer,
|
|
degreesToRadians = fabric.util.degreesToRadians,
|
|
radiansToDegrees = fabric.util.radiansToDegrees,
|
|
atan2 = Math.atan2,
|
|
abs = Math.abs,
|
|
supportLineDash = fabric.StaticCanvas.supports('setLineDash'),
|
|
|
|
STROKE_OFFSET = 0.5;
|
|
|
|
/**
|
|
* Canvas class
|
|
* @class fabric.Canvas
|
|
* @extends fabric.StaticCanvas
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas}
|
|
* @see {@link fabric.Canvas#initialize} for constructor definition
|
|
*
|
|
* @fires object:added
|
|
* @fires object:modified
|
|
* @fires object:rotating
|
|
* @fires object:scaling
|
|
* @fires object:moving
|
|
* @fires object:selected
|
|
*
|
|
* @fires before:selection:cleared
|
|
* @fires selection:cleared
|
|
* @fires selection:created
|
|
*
|
|
* @fires path:created
|
|
* @fires mouse:down
|
|
* @fires mouse:move
|
|
* @fires mouse:up
|
|
* @fires mouse:over
|
|
* @fires mouse:out
|
|
*
|
|
*/
|
|
fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.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);
|
|
this._initInteractive();
|
|
this._createCacheCanvas();
|
|
},
|
|
|
|
/**
|
|
* When true, objects can be transformed by one side (unproportionally)
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
uniScaleTransform: false,
|
|
|
|
/**
|
|
* Indicates which key enable unproportional scaling
|
|
* values: 'altKey', 'shiftKey', 'ctrlKey'.
|
|
* If `null` or 'none' or any other string that is not a modifier key
|
|
* feature is disabled feature disabled.
|
|
* @since 1.6.2
|
|
* @type String
|
|
* @default
|
|
*/
|
|
uniScaleKey: 'shiftKey',
|
|
|
|
/**
|
|
* When true, objects use center point as the origin of scale transformation.
|
|
* <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
|
|
* @since 1.3.4
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
centeredScaling: false,
|
|
|
|
/**
|
|
* When true, objects use center point as the origin of rotate transformation.
|
|
* <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
|
|
* @since 1.3.4
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
centeredRotation: false,
|
|
|
|
/**
|
|
* Indicates which key enable centered Transfrom
|
|
* values: 'altKey', 'shiftKey', 'ctrlKey'.
|
|
* If `null` or 'none' or any other string that is not a modifier key
|
|
* feature is disabled feature disabled.
|
|
* @since 1.6.2
|
|
* @type String
|
|
* @default
|
|
*/
|
|
centeredKey: 'altKey',
|
|
|
|
/**
|
|
* Indicates which key enable alternate action on corner
|
|
* values: 'altKey', 'shiftKey', 'ctrlKey'.
|
|
* If `null` or 'none' or any other string that is not a modifier key
|
|
* feature is disabled feature disabled.
|
|
* @since 1.6.2
|
|
* @type String
|
|
* @default
|
|
*/
|
|
altActionKey: 'shiftKey',
|
|
|
|
/**
|
|
* Indicates that canvas is interactive. This property should not be changed.
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
interactive: true,
|
|
|
|
/**
|
|
* Indicates whether group selection should be enabled
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
selection: true,
|
|
|
|
/**
|
|
* Indicates which key enable multiple click selection
|
|
* values: 'altKey', 'shiftKey', 'ctrlKey'.
|
|
* If `null` or 'none' or any other string that is not a modifier key
|
|
* feature is disabled feature disabled.
|
|
* @since 1.6.2
|
|
* @type String
|
|
* @default
|
|
*/
|
|
selectionKey: 'shiftKey',
|
|
|
|
/**
|
|
* Indicates which key enable alternative selection
|
|
* in case of target overlapping with active object
|
|
* values: 'altKey', 'shiftKey', 'ctrlKey'.
|
|
* If `null` or 'none' or any other string that is not a modifier key
|
|
* feature is disabled feature disabled.
|
|
* @since 1.6.5
|
|
* @type null|String
|
|
* @default
|
|
*/
|
|
altSelectionKey: null,
|
|
|
|
/**
|
|
* Color of selection
|
|
* @type String
|
|
* @default
|
|
*/
|
|
selectionColor: 'rgba(100, 100, 255, 0.3)', // blue
|
|
|
|
/**
|
|
* Default dash array pattern
|
|
* If not empty the selection border is dashed
|
|
* @type Array
|
|
*/
|
|
selectionDashArray: [],
|
|
|
|
/**
|
|
* Color of the border of selection (usually slightly darker than color of selection itself)
|
|
* @type String
|
|
* @default
|
|
*/
|
|
selectionBorderColor: 'rgba(255, 255, 255, 0.3)',
|
|
|
|
/**
|
|
* Width of a line used in object/group selection
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
selectionLineWidth: 1,
|
|
|
|
/**
|
|
* Default cursor value used when hovering over an object on canvas
|
|
* @type String
|
|
* @default
|
|
*/
|
|
hoverCursor: 'move',
|
|
|
|
/**
|
|
* Default cursor value used when moving an object on canvas
|
|
* @type String
|
|
* @default
|
|
*/
|
|
moveCursor: 'move',
|
|
|
|
/**
|
|
* Default cursor value used for the entire canvas
|
|
* @type String
|
|
* @default
|
|
*/
|
|
defaultCursor: 'default',
|
|
|
|
/**
|
|
* Cursor value used during free drawing
|
|
* @type String
|
|
* @default
|
|
*/
|
|
freeDrawingCursor: 'crosshair',
|
|
|
|
/**
|
|
* Cursor value used for rotation point
|
|
* @type String
|
|
* @default
|
|
*/
|
|
rotationCursor: 'crosshair',
|
|
|
|
/**
|
|
* Default element class that's given to wrapper (div) element of canvas
|
|
* @type String
|
|
* @default
|
|
*/
|
|
containerClass: 'canvas-container',
|
|
|
|
/**
|
|
* When true, object detection happens on per-pixel basis rather than on per-bounding-box
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
perPixelTargetFind: false,
|
|
|
|
/**
|
|
* Number of pixels around target pixel to tolerate (consider active) during object detection
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
targetFindTolerance: 0,
|
|
|
|
/**
|
|
* When true, target detection is skipped when hovering over canvas. This can be used to improve performance.
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
skipTargetFind: false,
|
|
|
|
/**
|
|
* When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing.
|
|
* After mousedown, mousemove creates a shape,
|
|
* and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas.
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-4#free_drawing}
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
isDrawingMode: false,
|
|
|
|
/**
|
|
* 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,
|
|
|
|
/**
|
|
* Indicates the angle that an object will lock to while rotating.
|
|
* @type Number
|
|
* @since 1.6.7
|
|
* @default
|
|
*/
|
|
snapAngle: 0,
|
|
|
|
/**
|
|
* Indicates the distance from the snapAngle the rotation will lock to the snapAngle.
|
|
* When `null`, the snapThreshold will default to the snapAngle.
|
|
* @type null|Number
|
|
* @since 1.6.7
|
|
* @default
|
|
*/
|
|
snapThreshold: null,
|
|
|
|
/**
|
|
* Indicates if the right click on canvas can output the context menu or not
|
|
* @type Boolean
|
|
* @since 1.6.5
|
|
* @default
|
|
*/
|
|
stopContextMenu: false,
|
|
|
|
/**
|
|
* Indicates if the canvas can fire right click events
|
|
* @type Boolean
|
|
* @since 1.6.5
|
|
* @default
|
|
*/
|
|
fireRightClick: false,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_initInteractive: function() {
|
|
this._currentTransform = null;
|
|
this._groupSelector = null;
|
|
this._initWrapperElement();
|
|
this._createUpperCanvas();
|
|
this._initEventListeners();
|
|
|
|
this._initRetinaScaling();
|
|
|
|
this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this);
|
|
|
|
this.calcOffset();
|
|
},
|
|
|
|
/**
|
|
* Divides objects in two groups, one to render immediately
|
|
* and one to render as activeGroup.
|
|
* @return {Array} objects to render immediately and pushes the other in the activeGroup.
|
|
*/
|
|
_chooseObjectsToRender: function() {
|
|
var activeGroup = this.getActiveGroup(),
|
|
activeObject = this.getActiveObject(),
|
|
object, objsToRender = [], activeGroupObjects = [];
|
|
|
|
if ((activeGroup || activeObject) && !this.preserveObjectStacking) {
|
|
for (var i = 0, length = this._objects.length; i < length; i++) {
|
|
object = this._objects[i];
|
|
if ((!activeGroup || !activeGroup.contains(object)) && object !== activeObject) {
|
|
objsToRender.push(object);
|
|
}
|
|
else {
|
|
activeGroupObjects.push(object);
|
|
}
|
|
}
|
|
if (activeGroup) {
|
|
activeGroup._set('_objects', activeGroupObjects);
|
|
objsToRender.push(activeGroup);
|
|
}
|
|
activeObject && objsToRender.push(activeObject);
|
|
}
|
|
else {
|
|
objsToRender = this._objects;
|
|
}
|
|
return objsToRender;
|
|
},
|
|
|
|
/**
|
|
* Renders both the top canvas and the secondary container canvas.
|
|
* @return {fabric.Canvas} instance
|
|
* @chainable
|
|
*/
|
|
renderAll: function () {
|
|
if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) {
|
|
this.clearContext(this.contextTop);
|
|
this.contextTopDirty = false;
|
|
}
|
|
var canvasToDrawOn = this.contextContainer;
|
|
this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender());
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 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.clearContext(ctx);
|
|
|
|
// we render the top context - last object
|
|
if (this.selection && this._groupSelector) {
|
|
this._drawSelection(ctx);
|
|
}
|
|
|
|
this.fire('after:render');
|
|
this.contextTopDirty = true;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Resets the current transform to its original values and chooses the type of resizing based on the event
|
|
* @private
|
|
*/
|
|
_resetCurrentTransform: function() {
|
|
var t = this._currentTransform;
|
|
|
|
t.target.set({
|
|
scaleX: t.original.scaleX,
|
|
scaleY: t.original.scaleY,
|
|
skewX: t.original.skewX,
|
|
skewY: t.original.skewY,
|
|
left: t.original.left,
|
|
top: t.original.top
|
|
});
|
|
|
|
if (this._shouldCenterTransform(t.target)) {
|
|
if (t.action === 'rotate') {
|
|
this._setOriginToCenter(t.target);
|
|
}
|
|
else {
|
|
if (t.originX !== 'center') {
|
|
if (t.originX === 'right') {
|
|
t.mouseXSign = -1;
|
|
}
|
|
else {
|
|
t.mouseXSign = 1;
|
|
}
|
|
}
|
|
if (t.originY !== 'center') {
|
|
if (t.originY === 'bottom') {
|
|
t.mouseYSign = -1;
|
|
}
|
|
else {
|
|
t.mouseYSign = 1;
|
|
}
|
|
}
|
|
|
|
t.originX = 'center';
|
|
t.originY = 'center';
|
|
}
|
|
}
|
|
else {
|
|
t.originX = t.original.originX;
|
|
t.originY = t.original.originY;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Checks if point is contained within an area of given object
|
|
* @param {Event} e Event object
|
|
* @param {fabric.Object} target Object to test against
|
|
* @param {Object} [point] x,y object of point coordinates we want to check.
|
|
* @return {Boolean} true if point is contained within an area of given object
|
|
*/
|
|
containsPoint: function (e, target, point) {
|
|
var ignoreZoom = true,
|
|
pointer = point || this.getPointer(e, ignoreZoom),
|
|
xy;
|
|
|
|
if (target.group && target.group === this.getActiveGroup()) {
|
|
xy = this._normalizePointer(target.group, pointer);
|
|
}
|
|
else {
|
|
xy = { x: pointer.x, y: pointer.y };
|
|
}
|
|
// http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
|
|
// http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html
|
|
return (target.containsPoint(xy) || target._findTargetCorner(pointer));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_normalizePointer: function (object, pointer) {
|
|
var m = object.calcTransformMatrix(),
|
|
invertedM = fabric.util.invertTransform(m),
|
|
vpt = this.viewportTransform,
|
|
vptPointer = this.restorePointerVpt(pointer),
|
|
p = fabric.util.transformPoint(vptPointer, invertedM);
|
|
return fabric.util.transformPoint(p, vpt);
|
|
},
|
|
|
|
/**
|
|
* Returns true if object is transparent at a certain location
|
|
* @param {fabric.Object} target Object to check
|
|
* @param {Number} x Left coordinate
|
|
* @param {Number} y Top coordinate
|
|
* @return {Boolean}
|
|
*/
|
|
isTargetTransparent: function (target, x, y) {
|
|
var hasBorders = target.hasBorders,
|
|
transparentCorners = target.transparentCorners,
|
|
ctx = this.contextCache,
|
|
originalColor = target.selectionBackgroundColor;
|
|
|
|
target.hasBorders = target.transparentCorners = false;
|
|
target.selectionBackgroundColor = '';
|
|
|
|
ctx.save();
|
|
ctx.transform.apply(ctx, this.viewportTransform);
|
|
target.render(ctx);
|
|
ctx.restore();
|
|
|
|
target.active && target._renderControls(ctx);
|
|
|
|
target.hasBorders = hasBorders;
|
|
target.transparentCorners = transparentCorners;
|
|
target.selectionBackgroundColor = originalColor;
|
|
|
|
var isTransparent = fabric.util.isTransparent(
|
|
ctx, x, y, this.targetFindTolerance);
|
|
|
|
this.clearContext(ctx);
|
|
|
|
return isTransparent;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object
|
|
* @param {fabric.Object} target
|
|
*/
|
|
_shouldClearSelection: function (e, target) {
|
|
var activeGroup = this.getActiveGroup(),
|
|
activeObject = this.getActiveObject();
|
|
|
|
return (
|
|
!target
|
|
||
|
|
(target &&
|
|
activeGroup &&
|
|
!activeGroup.contains(target) &&
|
|
activeGroup !== target &&
|
|
!e[this.selectionKey])
|
|
||
|
|
(target && !target.evented)
|
|
||
|
|
(target &&
|
|
!target.selectable &&
|
|
activeObject &&
|
|
activeObject !== target)
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {fabric.Object} target
|
|
*/
|
|
_shouldCenterTransform: function (target) {
|
|
if (!target) {
|
|
return;
|
|
}
|
|
|
|
var t = this._currentTransform,
|
|
centerTransform;
|
|
|
|
if (t.action === 'scale' || t.action === 'scaleX' || t.action === 'scaleY') {
|
|
centerTransform = this.centeredScaling || target.centeredScaling;
|
|
}
|
|
else if (t.action === 'rotate') {
|
|
centerTransform = this.centeredRotation || target.centeredRotation;
|
|
}
|
|
|
|
return centerTransform ? !t.altKey : t.altKey;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getOriginFromCorner: function(target, corner) {
|
|
var origin = {
|
|
x: target.originX,
|
|
y: target.originY
|
|
};
|
|
|
|
if (corner === 'ml' || corner === 'tl' || corner === 'bl') {
|
|
origin.x = 'right';
|
|
}
|
|
else if (corner === 'mr' || corner === 'tr' || corner === 'br') {
|
|
origin.x = 'left';
|
|
}
|
|
|
|
if (corner === 'tl' || corner === 'mt' || corner === 'tr') {
|
|
origin.y = 'bottom';
|
|
}
|
|
else if (corner === 'bl' || corner === 'mb' || corner === 'br') {
|
|
origin.y = 'top';
|
|
}
|
|
|
|
return origin;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getActionFromCorner: function(target, corner, e) {
|
|
if (!corner) {
|
|
return 'drag';
|
|
}
|
|
|
|
switch (corner) {
|
|
case 'mtr':
|
|
return 'rotate';
|
|
case 'ml':
|
|
case 'mr':
|
|
return e[this.altActionKey] ? 'skewY' : 'scaleX';
|
|
case 'mt':
|
|
case 'mb':
|
|
return e[this.altActionKey] ? 'skewX' : 'scaleY';
|
|
default:
|
|
return 'scale';
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object
|
|
* @param {fabric.Object} target
|
|
*/
|
|
_setupCurrentTransform: function (e, target) {
|
|
if (!target) {
|
|
return;
|
|
}
|
|
|
|
var pointer = this.getPointer(e),
|
|
corner = target._findTargetCorner(this.getPointer(e, true)),
|
|
action = this._getActionFromCorner(target, corner, e),
|
|
origin = this._getOriginFromCorner(target, corner);
|
|
|
|
this._currentTransform = {
|
|
target: target,
|
|
action: action,
|
|
corner: corner,
|
|
scaleX: target.scaleX,
|
|
scaleY: target.scaleY,
|
|
skewX: target.skewX,
|
|
skewY: target.skewY,
|
|
offsetX: pointer.x - target.left,
|
|
offsetY: pointer.y - target.top,
|
|
originX: origin.x,
|
|
originY: origin.y,
|
|
ex: pointer.x,
|
|
ey: pointer.y,
|
|
lastX: pointer.x,
|
|
lastY: pointer.y,
|
|
left: target.left,
|
|
top: target.top,
|
|
theta: degreesToRadians(target.angle),
|
|
width: target.width * target.scaleX,
|
|
mouseXSign: 1,
|
|
mouseYSign: 1,
|
|
shiftKey: e.shiftKey,
|
|
altKey: e[this.centeredKey]
|
|
};
|
|
|
|
this._currentTransform.original = {
|
|
left: target.left,
|
|
top: target.top,
|
|
scaleX: target.scaleX,
|
|
scaleY: target.scaleY,
|
|
skewX: target.skewX,
|
|
skewY: target.skewY,
|
|
originX: origin.x,
|
|
originY: origin.y
|
|
};
|
|
|
|
this._resetCurrentTransform();
|
|
},
|
|
|
|
/**
|
|
* Translates object by "setting" its left/top
|
|
* @private
|
|
* @param {Number} x pointer's x coordinate
|
|
* @param {Number} y pointer's y coordinate
|
|
* @return {Boolean} true if the translation occurred
|
|
*/
|
|
_translateObject: function (x, y) {
|
|
var transform = this._currentTransform,
|
|
target = transform.target,
|
|
newLeft = x - transform.offsetX,
|
|
newTop = y - transform.offsetY,
|
|
moveX = !target.get('lockMovementX') && target.left !== newLeft,
|
|
moveY = !target.get('lockMovementY') && target.top !== newTop;
|
|
|
|
moveX && target.set('left', newLeft);
|
|
moveY && target.set('top', newTop);
|
|
return moveX || moveY;
|
|
},
|
|
|
|
/**
|
|
* Check if we are increasing a positive skew or lower it,
|
|
* checking mouse direction and pressed corner.
|
|
* @private
|
|
*/
|
|
_changeSkewTransformOrigin: function(mouseMove, t, by) {
|
|
var property = 'originX', origins = { 0: 'center' },
|
|
skew = t.target.skewX, originA = 'left', originB = 'right',
|
|
corner = t.corner === 'mt' || t.corner === 'ml' ? 1 : -1,
|
|
flipSign = 1;
|
|
|
|
mouseMove = mouseMove > 0 ? 1 : -1;
|
|
if (by === 'y') {
|
|
skew = t.target.skewY;
|
|
originA = 'top';
|
|
originB = 'bottom';
|
|
property = 'originY';
|
|
}
|
|
origins[-1] = originA;
|
|
origins[1] = originB;
|
|
|
|
t.target.flipX && (flipSign *= -1);
|
|
t.target.flipY && (flipSign *= -1);
|
|
|
|
if (skew === 0) {
|
|
t.skewSign = -corner * mouseMove * flipSign;
|
|
t[property] = origins[-mouseMove];
|
|
}
|
|
else {
|
|
skew = skew > 0 ? 1 : -1;
|
|
t.skewSign = skew;
|
|
t[property] = origins[skew * corner * flipSign];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Skew object by mouse events
|
|
* @private
|
|
* @param {Number} x pointer's x coordinate
|
|
* @param {Number} y pointer's y coordinate
|
|
* @param {String} by Either 'x' or 'y'
|
|
* @return {Boolean} true if the skewing occurred
|
|
*/
|
|
_skewObject: function (x, y, by) {
|
|
var t = this._currentTransform,
|
|
target = t.target, skewed = false,
|
|
lockSkewingX = target.get('lockSkewingX'),
|
|
lockSkewingY = target.get('lockSkewingY');
|
|
|
|
if ((lockSkewingX && by === 'x') || (lockSkewingY && by === 'y')) {
|
|
return false;
|
|
}
|
|
|
|
// Get the constraint point
|
|
var center = target.getCenterPoint(),
|
|
actualMouseByCenter = target.toLocalPoint(new fabric.Point(x, y), 'center', 'center')[by],
|
|
lastMouseByCenter = target.toLocalPoint(new fabric.Point(t.lastX, t.lastY), 'center', 'center')[by],
|
|
actualMouseByOrigin, constraintPosition, dim = target._getTransformedDimensions();
|
|
|
|
this._changeSkewTransformOrigin(actualMouseByCenter - lastMouseByCenter, t, by);
|
|
actualMouseByOrigin = target.toLocalPoint(new fabric.Point(x, y), t.originX, t.originY)[by];
|
|
constraintPosition = target.translateToOriginPoint(center, t.originX, t.originY);
|
|
// Actually skew the object
|
|
skewed = this._setObjectSkew(actualMouseByOrigin, t, by, dim);
|
|
t.lastX = x;
|
|
t.lastY = y;
|
|
// Make sure the constraints apply
|
|
target.setPositionByOrigin(constraintPosition, t.originX, t.originY);
|
|
return skewed;
|
|
},
|
|
|
|
/**
|
|
* Set object skew
|
|
* @private
|
|
* @return {Boolean} true if the skewing occurred
|
|
*/
|
|
_setObjectSkew: function(localMouse, transform, by, _dim) {
|
|
var target = transform.target, newValue, skewed = false,
|
|
skewSign = transform.skewSign, newDim, dimNoSkew,
|
|
otherBy, _otherBy, _by, newDimMouse, skewX, skewY;
|
|
|
|
if (by === 'x') {
|
|
otherBy = 'y';
|
|
_otherBy = 'Y';
|
|
_by = 'X';
|
|
skewX = 0;
|
|
skewY = target.skewY;
|
|
}
|
|
else {
|
|
otherBy = 'x';
|
|
_otherBy = 'X';
|
|
_by = 'Y';
|
|
skewX = target.skewX;
|
|
skewY = 0;
|
|
}
|
|
|
|
dimNoSkew = target._getTransformedDimensions(skewX, skewY);
|
|
newDimMouse = 2 * Math.abs(localMouse) - dimNoSkew[by];
|
|
if (newDimMouse <= 2) {
|
|
newValue = 0;
|
|
}
|
|
else {
|
|
newValue = skewSign * Math.atan((newDimMouse / target['scale' + _by]) /
|
|
(dimNoSkew[otherBy] / target['scale' + _otherBy]));
|
|
newValue = fabric.util.radiansToDegrees(newValue);
|
|
}
|
|
skewed = target['skew' + _by] !== newValue;
|
|
target.set('skew' + _by, newValue);
|
|
if (target['skew' + _otherBy] !== 0) {
|
|
newDim = target._getTransformedDimensions();
|
|
newValue = (_dim[otherBy] / newDim[otherBy]) * target['scale' + _otherBy];
|
|
target.set('scale' + _otherBy, newValue);
|
|
}
|
|
return skewed;
|
|
},
|
|
|
|
/**
|
|
* Scales object by invoking its scaleX/scaleY methods
|
|
* @private
|
|
* @param {Number} x pointer's x coordinate
|
|
* @param {Number} y pointer's y coordinate
|
|
* @param {String} by Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
|
|
* When not provided, an object is scaled by both dimensions equally
|
|
* @return {Boolean} true if the scaling occurred
|
|
*/
|
|
_scaleObject: function (x, y, by) {
|
|
var t = this._currentTransform,
|
|
target = t.target,
|
|
lockScalingX = target.get('lockScalingX'),
|
|
lockScalingY = target.get('lockScalingY'),
|
|
lockScalingFlip = target.get('lockScalingFlip');
|
|
|
|
if (lockScalingX && lockScalingY) {
|
|
return false;
|
|
}
|
|
|
|
// Get the constraint point
|
|
var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY),
|
|
localMouse = target.toLocalPoint(new fabric.Point(x, y), t.originX, t.originY),
|
|
dim = target._getTransformedDimensions(), scaled = false;
|
|
|
|
this._setLocalMouse(localMouse, t);
|
|
|
|
// Actually scale the object
|
|
scaled = this._setObjectScale(localMouse, t, lockScalingX, lockScalingY, by, lockScalingFlip, dim);
|
|
|
|
// Make sure the constraints apply
|
|
target.setPositionByOrigin(constraintPosition, t.originX, t.originY);
|
|
return scaled;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Boolean} true if the scaling occurred
|
|
*/
|
|
_setObjectScale: function(localMouse, transform, lockScalingX, lockScalingY, by, lockScalingFlip, _dim) {
|
|
var target = transform.target, forbidScalingX = false, forbidScalingY = false, scaled = false,
|
|
changeX, changeY, scaleX, scaleY;
|
|
|
|
scaleX = localMouse.x * target.scaleX / _dim.x;
|
|
scaleY = localMouse.y * target.scaleY / _dim.y;
|
|
changeX = target.scaleX !== scaleX;
|
|
changeY = target.scaleY !== scaleY;
|
|
|
|
if (lockScalingFlip && scaleX <= 0 && scaleX < target.scaleX) {
|
|
forbidScalingX = true;
|
|
}
|
|
|
|
if (lockScalingFlip && scaleY <= 0 && scaleY < target.scaleY) {
|
|
forbidScalingY = true;
|
|
}
|
|
|
|
if (by === 'equally' && !lockScalingX && !lockScalingY) {
|
|
forbidScalingX || forbidScalingY || (scaled = this._scaleObjectEqually(localMouse, target, transform, _dim));
|
|
}
|
|
else if (!by) {
|
|
forbidScalingX || lockScalingX || (target.set('scaleX', scaleX) && (scaled = scaled || changeX));
|
|
forbidScalingY || lockScalingY || (target.set('scaleY', scaleY) && (scaled = scaled || changeY));
|
|
}
|
|
else if (by === 'x' && !target.get('lockUniScaling')) {
|
|
forbidScalingX || lockScalingX || (target.set('scaleX', scaleX) && (scaled = scaled || changeX));
|
|
}
|
|
else if (by === 'y' && !target.get('lockUniScaling')) {
|
|
forbidScalingY || lockScalingY || (target.set('scaleY', scaleY) && (scaled = scaled || changeY));
|
|
}
|
|
transform.newScaleX = scaleX;
|
|
transform.newScaleY = scaleY;
|
|
forbidScalingX || forbidScalingY || this._flipObject(transform, by);
|
|
return scaled;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Boolean} true if the scaling occurred
|
|
*/
|
|
_scaleObjectEqually: function(localMouse, target, transform, _dim) {
|
|
|
|
var dist = localMouse.y + localMouse.x,
|
|
lastDist = _dim.y * transform.original.scaleY / target.scaleY +
|
|
_dim.x * transform.original.scaleX / target.scaleX,
|
|
scaled;
|
|
|
|
// We use transform.scaleX/Y instead of target.scaleX/Y
|
|
// because the object may have a min scale and we'll loose the proportions
|
|
transform.newScaleX = transform.original.scaleX * dist / lastDist;
|
|
transform.newScaleY = transform.original.scaleY * dist / lastDist;
|
|
scaled = transform.newScaleX !== target.scaleX || transform.newScaleY !== target.scaleY;
|
|
target.set('scaleX', transform.newScaleX);
|
|
target.set('scaleY', transform.newScaleY);
|
|
return scaled;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_flipObject: function(transform, by) {
|
|
if (transform.newScaleX < 0 && by !== 'y') {
|
|
if (transform.originX === 'left') {
|
|
transform.originX = 'right';
|
|
}
|
|
else if (transform.originX === 'right') {
|
|
transform.originX = 'left';
|
|
}
|
|
}
|
|
|
|
if (transform.newScaleY < 0 && by !== 'x') {
|
|
if (transform.originY === 'top') {
|
|
transform.originY = 'bottom';
|
|
}
|
|
else if (transform.originY === 'bottom') {
|
|
transform.originY = 'top';
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setLocalMouse: function(localMouse, t) {
|
|
var target = t.target;
|
|
|
|
if (t.originX === 'right') {
|
|
localMouse.x *= -1;
|
|
}
|
|
else if (t.originX === 'center') {
|
|
localMouse.x *= t.mouseXSign * 2;
|
|
if (localMouse.x < 0) {
|
|
t.mouseXSign = -t.mouseXSign;
|
|
}
|
|
}
|
|
|
|
if (t.originY === 'bottom') {
|
|
localMouse.y *= -1;
|
|
}
|
|
else if (t.originY === 'center') {
|
|
localMouse.y *= t.mouseYSign * 2;
|
|
if (localMouse.y < 0) {
|
|
t.mouseYSign = -t.mouseYSign;
|
|
}
|
|
}
|
|
|
|
// adjust the mouse coordinates when dealing with padding
|
|
if (abs(localMouse.x) > target.padding) {
|
|
if (localMouse.x < 0) {
|
|
localMouse.x += target.padding;
|
|
}
|
|
else {
|
|
localMouse.x -= target.padding;
|
|
}
|
|
}
|
|
else { // mouse is within the padding, set to 0
|
|
localMouse.x = 0;
|
|
}
|
|
|
|
if (abs(localMouse.y) > target.padding) {
|
|
if (localMouse.y < 0) {
|
|
localMouse.y += target.padding;
|
|
}
|
|
else {
|
|
localMouse.y -= target.padding;
|
|
}
|
|
}
|
|
else {
|
|
localMouse.y = 0;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Rotates object by invoking its rotate method
|
|
* @private
|
|
* @param {Number} x pointer's x coordinate
|
|
* @param {Number} y pointer's y coordinate
|
|
* @return {Boolean} true if the rotation occurred
|
|
*/
|
|
_rotateObject: function (x, y) {
|
|
|
|
var t = this._currentTransform;
|
|
|
|
if (t.target.get('lockRotation')) {
|
|
return false;
|
|
}
|
|
|
|
var lastAngle = atan2(t.ey - t.top, t.ex - t.left),
|
|
curAngle = atan2(y - t.top, x - t.left),
|
|
angle = radiansToDegrees(curAngle - lastAngle + t.theta),
|
|
hasRoated = true;
|
|
|
|
// normalize angle to positive value
|
|
if (angle < 0) {
|
|
angle = 360 + angle;
|
|
}
|
|
|
|
angle %= 360
|
|
|
|
if (t.target.snapAngle > 0) {
|
|
var snapAngle = t.target.snapAngle,
|
|
snapThreshold = t.target.snapThreshold || snapAngle,
|
|
rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle,
|
|
leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle;
|
|
|
|
if (Math.abs(angle - leftAngleLocked) < snapThreshold) {
|
|
angle = leftAngleLocked;
|
|
}
|
|
else if (Math.abs(angle - rightAngleLocked) < snapThreshold) {
|
|
angle = rightAngleLocked;
|
|
}
|
|
|
|
if (t.target.angle === angle) {
|
|
hasRoated = false
|
|
}
|
|
}
|
|
|
|
t.target.angle = angle;
|
|
return hasRoated;
|
|
},
|
|
|
|
/**
|
|
* Set the cursor type of the canvas element
|
|
* @param {String} value Cursor type of the canvas element.
|
|
* @see http://www.w3.org/TR/css3-ui/#cursor
|
|
*/
|
|
setCursor: function (value) {
|
|
this.upperCanvasEl.style.cursor = value;
|
|
},
|
|
|
|
/**
|
|
* @param {fabric.Object} target to reset transform
|
|
* @private
|
|
*/
|
|
_resetObjectTransform: function (target) {
|
|
target.scaleX = 1;
|
|
target.scaleY = 1;
|
|
target.skewX = 0;
|
|
target.skewY = 0;
|
|
target.setAngle(0);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx to draw the selection on
|
|
*/
|
|
_drawSelection: function (ctx) {
|
|
var groupSelector = this._groupSelector,
|
|
left = groupSelector.left,
|
|
top = groupSelector.top,
|
|
aleft = abs(left),
|
|
atop = abs(top);
|
|
|
|
if (this.selectionColor) {
|
|
ctx.fillStyle = this.selectionColor;
|
|
|
|
ctx.fillRect(
|
|
groupSelector.ex - ((left > 0) ? 0 : -left),
|
|
groupSelector.ey - ((top > 0) ? 0 : -top),
|
|
aleft,
|
|
atop
|
|
);
|
|
}
|
|
|
|
if (!this.selectionLineWidth || !this.selectionBorderColor) {
|
|
return;
|
|
}
|
|
ctx.lineWidth = this.selectionLineWidth;
|
|
ctx.strokeStyle = this.selectionBorderColor;
|
|
|
|
// selection border
|
|
if (this.selectionDashArray.length > 1 && !supportLineDash) {
|
|
|
|
var px = groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),
|
|
py = groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop);
|
|
|
|
ctx.beginPath();
|
|
|
|
fabric.util.drawDashedLine(ctx, px, py, px + aleft, py, this.selectionDashArray);
|
|
fabric.util.drawDashedLine(ctx, px, py + atop - 1, px + aleft, py + atop - 1, this.selectionDashArray);
|
|
fabric.util.drawDashedLine(ctx, px, py, px, py + atop, this.selectionDashArray);
|
|
fabric.util.drawDashedLine(ctx, px + aleft - 1, py, px + aleft - 1, py + atop, this.selectionDashArray);
|
|
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
}
|
|
else {
|
|
fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray);
|
|
ctx.strokeRect(
|
|
groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),
|
|
groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop),
|
|
aleft,
|
|
atop
|
|
);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method that determines what object we are clicking on
|
|
* @param {Event} e mouse event
|
|
* @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through
|
|
*/
|
|
findTarget: function (e, skipGroup) {
|
|
if (this.skipTargetFind) {
|
|
return;
|
|
}
|
|
|
|
var ignoreZoom = true,
|
|
pointer = this.getPointer(e, ignoreZoom),
|
|
activeGroup = this.getActiveGroup(),
|
|
activeObject = this.getActiveObject(),
|
|
activeTarget;
|
|
|
|
// first check current group (if one exists)
|
|
// active group does not check sub targets like normal groups.
|
|
// if active group just exits.
|
|
if (activeGroup && !skipGroup && this._checkTarget(pointer, activeGroup)) {
|
|
this._fireOverOutEvents(activeGroup, e);
|
|
return activeGroup;
|
|
}
|
|
// if we hit the corner of an activeObject, let's return that.
|
|
if (activeObject && activeObject._findTargetCorner(pointer)) {
|
|
this._fireOverOutEvents(activeObject, e);
|
|
return activeObject;
|
|
}
|
|
if (activeObject && this._checkTarget(pointer, activeObject)) {
|
|
if (!this.preserveObjectStacking) {
|
|
this._fireOverOutEvents(activeObject, e);
|
|
return activeObject;
|
|
}
|
|
else {
|
|
activeTarget = activeObject;
|
|
}
|
|
}
|
|
|
|
this.targets = [];
|
|
|
|
var target = this._searchPossibleTargets(this._objects, pointer);
|
|
if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) {
|
|
target = activeTarget;
|
|
}
|
|
this._fireOverOutEvents(target, e);
|
|
return target;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_fireOverOutEvents: function(target, e) {
|
|
if (target) {
|
|
if (this._hoveredTarget !== target) {
|
|
if (this._hoveredTarget) {
|
|
this.fire('mouse:out', { target: this._hoveredTarget, e: e });
|
|
this._hoveredTarget.fire('mouseout');
|
|
}
|
|
this.fire('mouse:over', { target: target, e: e });
|
|
target.fire('mouseover');
|
|
this._hoveredTarget = target;
|
|
}
|
|
}
|
|
else if (this._hoveredTarget) {
|
|
this.fire('mouse:out', { target: this._hoveredTarget, e: e });
|
|
this._hoveredTarget.fire('mouseout');
|
|
this._hoveredTarget = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_checkTarget: function(pointer, obj) {
|
|
if (obj &&
|
|
obj.visible &&
|
|
obj.evented &&
|
|
this.containsPoint(null, obj, pointer)){
|
|
if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) {
|
|
var isTransparent = this.isTargetTransparent(obj, pointer.x, pointer.y);
|
|
if (!isTransparent) {
|
|
return true;
|
|
}
|
|
}
|
|
else {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_searchPossibleTargets: function(objects, pointer) {
|
|
|
|
// Cache all targets where their bounding box contains point.
|
|
var target, i = objects.length, normalizedPointer, subTarget;
|
|
// Do not check for currently grouped objects, since we check the parent group itself.
|
|
// untill we call this function specifically to search inside the activeGroup
|
|
while (i--) {
|
|
if (this._checkTarget(pointer, objects[i])) {
|
|
target = objects[i];
|
|
if (target.type === 'group' && target.subTargetCheck) {
|
|
normalizedPointer = this._normalizePointer(target, pointer);
|
|
subTarget = this._searchPossibleTargets(target._objects, normalizedPointer);
|
|
subTarget && this.targets.push(subTarget);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
return target;
|
|
},
|
|
|
|
/**
|
|
* Returns pointer coordinates without the effect of the viewport
|
|
* @param {Object} pointer with "x" and "y" number values
|
|
* @return {Object} object with "x" and "y" number values
|
|
*/
|
|
restorePointerVpt: function(pointer) {
|
|
return fabric.util.transformPoint(
|
|
pointer,
|
|
fabric.util.invertTransform(this.viewportTransform)
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Returns pointer coordinates relative to canvas.
|
|
* @param {Event} e
|
|
* @param {Boolean} ignoreZoom
|
|
* @return {Object} object with "x" and "y" number values
|
|
*/
|
|
getPointer: function (e, ignoreZoom, upperCanvasEl) {
|
|
if (!upperCanvasEl) {
|
|
upperCanvasEl = this.upperCanvasEl;
|
|
}
|
|
var pointer = getPointer(e),
|
|
bounds = upperCanvasEl.getBoundingClientRect(),
|
|
boundsWidth = bounds.width || 0,
|
|
boundsHeight = bounds.height || 0,
|
|
cssScale;
|
|
|
|
if (!boundsWidth || !boundsHeight ) {
|
|
if ('top' in bounds && 'bottom' in bounds) {
|
|
boundsHeight = Math.abs( bounds.top - bounds.bottom );
|
|
}
|
|
if ('right' in bounds && 'left' in bounds) {
|
|
boundsWidth = Math.abs( bounds.right - bounds.left );
|
|
}
|
|
}
|
|
|
|
this.calcOffset();
|
|
|
|
pointer.x = pointer.x - this._offset.left;
|
|
pointer.y = pointer.y - this._offset.top;
|
|
if (!ignoreZoom) {
|
|
pointer = this.restorePointerVpt(pointer);
|
|
}
|
|
|
|
if (boundsWidth === 0 || boundsHeight === 0) {
|
|
// If bounds are not available (i.e. not visible), do not apply scale.
|
|
cssScale = { width: 1, height: 1 };
|
|
}
|
|
else {
|
|
cssScale = {
|
|
width: upperCanvasEl.width / boundsWidth,
|
|
height: upperCanvasEl.height / boundsHeight
|
|
};
|
|
}
|
|
|
|
return {
|
|
x: pointer.x * cssScale.width,
|
|
y: pointer.y * cssScale.height
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @throws {CANVAS_INIT_ERROR} If canvas can not be initialized
|
|
*/
|
|
_createUpperCanvas: function () {
|
|
var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, '');
|
|
|
|
this.upperCanvasEl = this._createCanvasElement();
|
|
fabric.util.addClass(this.upperCanvasEl, 'upper-canvas ' + lowerCanvasClass);
|
|
|
|
this.wrapperEl.appendChild(this.upperCanvasEl);
|
|
|
|
this._copyCanvasStyle(this.lowerCanvasEl, this.upperCanvasEl);
|
|
this._applyCanvasStyle(this.upperCanvasEl);
|
|
this.contextTop = this.upperCanvasEl.getContext('2d');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_createCacheCanvas: function () {
|
|
this.cacheCanvasEl = this._createCanvasElement();
|
|
this.cacheCanvasEl.setAttribute('width', this.width);
|
|
this.cacheCanvasEl.setAttribute('height', this.height);
|
|
this.contextCache = this.cacheCanvasEl.getContext('2d');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_initWrapperElement: function () {
|
|
this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {
|
|
'class': this.containerClass
|
|
});
|
|
fabric.util.setStyle(this.wrapperEl, {
|
|
width: this.getWidth() + 'px',
|
|
height: this.getHeight() + 'px',
|
|
position: 'relative'
|
|
});
|
|
fabric.util.makeElementUnselectable(this.wrapperEl);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {HTMLElement} element canvas element to apply styles on
|
|
*/
|
|
_applyCanvasStyle: function (element) {
|
|
var width = this.getWidth() || element.width,
|
|
height = this.getHeight() || element.height;
|
|
|
|
fabric.util.setStyle(element, {
|
|
position: 'absolute',
|
|
width: width + 'px',
|
|
height: height + 'px',
|
|
left: 0,
|
|
top: 0
|
|
});
|
|
element.width = width;
|
|
element.height = height;
|
|
fabric.util.makeElementUnselectable(element);
|
|
},
|
|
|
|
/**
|
|
* Copys the the entire inline style from one element (fromEl) to another (toEl)
|
|
* @private
|
|
* @param {Element} fromEl Element style is copied from
|
|
* @param {Element} toEl Element copied style is applied to
|
|
*/
|
|
_copyCanvasStyle: function (fromEl, toEl) {
|
|
toEl.style.cssText = fromEl.style.cssText;
|
|
},
|
|
|
|
/**
|
|
* Returns context of canvas where object selection is drawn
|
|
* @return {CanvasRenderingContext2D}
|
|
*/
|
|
getSelectionContext: function() {
|
|
return this.contextTop;
|
|
},
|
|
|
|
/**
|
|
* Returns <canvas> element on which object selection is drawn
|
|
* @return {HTMLCanvasElement}
|
|
*/
|
|
getSelectionElement: function () {
|
|
return this.upperCanvasEl;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} object
|
|
*/
|
|
_setActiveObject: function(object) {
|
|
if (this._activeObject) {
|
|
this._activeObject.set('active', false);
|
|
}
|
|
this._activeObject = object;
|
|
object.set('active', true);
|
|
},
|
|
|
|
/**
|
|
* Sets given object as the only active object on canvas
|
|
* @param {fabric.Object} object Object to set as an active one
|
|
* @param {Event} [e] Event (passed along when firing "object:selected")
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
setActiveObject: function (object, e) {
|
|
this._setActiveObject(object);
|
|
this.renderAll();
|
|
this.fire('object:selected', { target: object, e: e });
|
|
object.fire('selected', { e: e });
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns currently active object
|
|
* @return {fabric.Object} active object
|
|
*/
|
|
getActiveObject: function () {
|
|
return this._activeObject;
|
|
},
|
|
|
|
/**
|
|
* @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', { target: obj });
|
|
obj.fire('deselected');
|
|
}
|
|
this.callSuper('_onObjectRemoved', obj);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_discardActiveObject: function() {
|
|
if (this._activeObject) {
|
|
this._activeObject.set('active', false);
|
|
}
|
|
this._activeObject = null;
|
|
},
|
|
|
|
/**
|
|
* Discards currently active object and fire events
|
|
* @param {event} e
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
discardActiveObject: function (e) {
|
|
var activeObject = this._activeObject;
|
|
this.fire('before:selection:cleared', { target: activeObject, e: e });
|
|
this._discardActiveObject();
|
|
this.fire('selection:cleared', { e: e });
|
|
activeObject && activeObject.fire('deselected', { e: e });
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {fabric.Group} group
|
|
*/
|
|
_setActiveGroup: function(group) {
|
|
this._activeGroup = group;
|
|
if (group) {
|
|
group.set('active', true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets active group to a specified one
|
|
* @param {fabric.Group} group Group to set as a current one
|
|
* @param {Event} e Event object
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
setActiveGroup: function (group, e) {
|
|
this._setActiveGroup(group);
|
|
if (group) {
|
|
this.fire('object:selected', { target: group, e: e });
|
|
group.fire('selected', { e: e });
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns currently active group
|
|
* @return {fabric.Group} Current group
|
|
*/
|
|
getActiveGroup: function () {
|
|
return this._activeGroup;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_discardActiveGroup: function() {
|
|
var g = this.getActiveGroup();
|
|
if (g) {
|
|
g.destroy();
|
|
}
|
|
this.setActiveGroup(null);
|
|
},
|
|
|
|
/**
|
|
* Discards currently active group and fire events
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
discardActiveGroup: function (e) {
|
|
var g = this.getActiveGroup();
|
|
this.fire('before:selection:cleared', { e: e, target: g });
|
|
this._discardActiveGroup();
|
|
this.fire('selection:cleared', { e: e });
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Deactivates all objects on canvas, removing any active group or object
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
deactivateAll: function () {
|
|
var allObjects = this.getObjects(),
|
|
i = 0,
|
|
len = allObjects.length;
|
|
for ( ; i < len; i++) {
|
|
allObjects[i].set('active', false);
|
|
}
|
|
this._discardActiveGroup();
|
|
this._discardActiveObject();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Deactivates all objects and dispatches appropriate events
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
deactivateAllWithDispatch: function (e) {
|
|
var activeGroup = this.getActiveGroup(),
|
|
activeObject = this.getActiveObject();
|
|
if (activeObject || activeGroup) {
|
|
this.fire('before:selection:cleared', { target: activeObject || activeGroup, e: e });
|
|
}
|
|
this.deactivateAll();
|
|
if (activeObject || activeGroup) {
|
|
this.fire('selection:cleared', { e: e, target: activeObject });
|
|
activeObject && activeObject.fire('deselected');
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Clears a canvas element and removes all event listeners
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
dispose: function () {
|
|
this.callSuper('dispose');
|
|
var wrapper = this.wrapperEl;
|
|
this.removeListeners();
|
|
wrapper.removeChild(this.upperCanvasEl);
|
|
wrapper.removeChild(this.lowerCanvasEl);
|
|
delete this.upperCanvasEl;
|
|
if (wrapper.parentNode) {
|
|
wrapper.parentNode.replaceChild(this.lowerCanvasEl, this.wrapperEl);
|
|
}
|
|
delete this.wrapperEl;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Clears all contexts (background, main, top) of an instance
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
clear: function () {
|
|
this.discardActiveGroup();
|
|
this.discardActiveObject();
|
|
this.clearContext(this.contextTop);
|
|
return this.callSuper('clear');
|
|
},
|
|
|
|
/**
|
|
* Draws objects' controls (borders/controls)
|
|
* @param {CanvasRenderingContext2D} ctx Context to render controls on
|
|
*/
|
|
drawControls: function(ctx) {
|
|
var activeGroup = this.getActiveGroup();
|
|
|
|
if (activeGroup) {
|
|
activeGroup._renderControls(ctx);
|
|
}
|
|
else {
|
|
this._drawObjectsControls(ctx);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_drawObjectsControls: function(ctx) {
|
|
for (var i = 0, len = this._objects.length; i < len; ++i) {
|
|
if (!this._objects[i] || !this._objects[i].active) {
|
|
continue;
|
|
}
|
|
this._objects[i]._renderControls(ctx);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_toObject: function(instance, methodName, propertiesToInclude) {
|
|
//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 = this.callSuper('_toObject', instance, methodName, propertiesToInclude);
|
|
//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
|
|
*/
|
|
_setSVGObject: function(markup, instance, reviver) {
|
|
var originalProperties;
|
|
//If the object is in a selection group, simulate what would happen to that
|
|
//object when the group is deselected
|
|
originalProperties = this._realizeGroupTransformOnObject(instance);
|
|
this.callSuper('_setSVGObject', markup, instance, reviver);
|
|
this._unwindGroupTransformOnObject(instance, originalProperties);
|
|
},
|
|
});
|
|
|
|
// copying static properties manually to work around Opera's bug,
|
|
// where "prototype" property is enumerable and overrides existing prototype
|
|
for (var prop in fabric.StaticCanvas) {
|
|
if (prop !== 'prototype') {
|
|
fabric.Canvas[prop] = fabric.StaticCanvas[prop];
|
|
}
|
|
}
|
|
|
|
if (fabric.isTouchSupported) {
|
|
/** @ignore */
|
|
fabric.Canvas.prototype._setCursorFromEvent = function() { };
|
|
}
|
|
|
|
/**
|
|
* @ignore
|
|
* @class fabric.Element
|
|
* @alias fabric.Canvas
|
|
* @deprecated Use {@link fabric.Canvas} instead.
|
|
* @constructor
|
|
*/
|
|
fabric.Element = fabric.Canvas;
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
var cursorOffset = {
|
|
mt: 0, // n
|
|
tr: 1, // ne
|
|
mr: 2, // e
|
|
br: 3, // se
|
|
mb: 4, // s
|
|
bl: 5, // sw
|
|
ml: 6, // w
|
|
tl: 7 // nw
|
|
},
|
|
addListener = fabric.util.addListener,
|
|
removeListener = fabric.util.removeListener;
|
|
|
|
fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
|
|
|
|
/**
|
|
* Map of cursor style values for each of the object controls
|
|
* @private
|
|
*/
|
|
cursorMap: [
|
|
'n-resize',
|
|
'ne-resize',
|
|
'e-resize',
|
|
'se-resize',
|
|
's-resize',
|
|
'sw-resize',
|
|
'w-resize',
|
|
'nw-resize'
|
|
],
|
|
|
|
/**
|
|
* Adds mouse listeners to canvas
|
|
* @private
|
|
*/
|
|
_initEventListeners: function () {
|
|
|
|
this._bindEvents();
|
|
|
|
addListener(fabric.window, 'resize', this._onResize);
|
|
|
|
// mouse events
|
|
addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
|
|
addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
|
|
addListener(this.upperCanvasEl, 'mouseout', this._onMouseOut);
|
|
addListener(this.upperCanvasEl, 'mouseenter', this._onMouseEnter);
|
|
addListener(this.upperCanvasEl, 'wheel', this._onMouseWheel);
|
|
addListener(this.upperCanvasEl, 'contextmenu', this._onContextMenu);
|
|
|
|
// touch events
|
|
addListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
|
|
addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
|
|
|
|
if (typeof eventjs !== 'undefined' && 'add' in eventjs) {
|
|
eventjs.add(this.upperCanvasEl, 'gesture', this._onGesture);
|
|
eventjs.add(this.upperCanvasEl, 'drag', this._onDrag);
|
|
eventjs.add(this.upperCanvasEl, 'orientation', this._onOrientationChange);
|
|
eventjs.add(this.upperCanvasEl, 'shake', this._onShake);
|
|
eventjs.add(this.upperCanvasEl, 'longpress', this._onLongPress);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_bindEvents: function() {
|
|
this._onMouseDown = this._onMouseDown.bind(this);
|
|
this._onMouseMove = this._onMouseMove.bind(this);
|
|
this._onMouseUp = this._onMouseUp.bind(this);
|
|
this._onResize = this._onResize.bind(this);
|
|
this._onGesture = this._onGesture.bind(this);
|
|
this._onDrag = this._onDrag.bind(this);
|
|
this._onShake = this._onShake.bind(this);
|
|
this._onLongPress = this._onLongPress.bind(this);
|
|
this._onOrientationChange = this._onOrientationChange.bind(this);
|
|
this._onMouseWheel = this._onMouseWheel.bind(this);
|
|
this._onMouseOut = this._onMouseOut.bind(this);
|
|
this._onMouseEnter = this._onMouseEnter.bind(this);
|
|
this._onContextMenu = this._onContextMenu.bind(this);
|
|
},
|
|
|
|
/**
|
|
* Removes all event listeners
|
|
*/
|
|
removeListeners: function() {
|
|
removeListener(fabric.window, 'resize', this._onResize);
|
|
|
|
removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
|
|
removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
|
|
removeListener(this.upperCanvasEl, 'mouseout', this._onMouseOut);
|
|
removeListener(this.upperCanvasEl, 'mouseenter', this._onMouseEnter);
|
|
removeListener(this.upperCanvasEl, 'wheel', this._onMouseWheel);
|
|
removeListener(this.upperCanvasEl, 'contextmenu', this._onContextMenu);
|
|
|
|
removeListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
|
|
removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
|
|
|
|
if (typeof eventjs !== 'undefined' && 'remove' in eventjs) {
|
|
eventjs.remove(this.upperCanvasEl, 'gesture', this._onGesture);
|
|
eventjs.remove(this.upperCanvasEl, 'drag', this._onDrag);
|
|
eventjs.remove(this.upperCanvasEl, 'orientation', this._onOrientationChange);
|
|
eventjs.remove(this.upperCanvasEl, 'shake', this._onShake);
|
|
eventjs.remove(this.upperCanvasEl, 'longpress', this._onLongPress);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} [e] Event object fired on Event.js gesture
|
|
* @param {Event} [self] Inner Event object
|
|
*/
|
|
_onGesture: function(e, self) {
|
|
this.__onTransformGesture && this.__onTransformGesture(e, self);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} [e] Event object fired on Event.js drag
|
|
* @param {Event} [self] Inner Event object
|
|
*/
|
|
_onDrag: function(e, self) {
|
|
this.__onDrag && this.__onDrag(e, self);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} [e] Event object fired on wheel event
|
|
*/
|
|
_onMouseWheel: function(e) {
|
|
this.__onMouseWheel(e);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mousedown
|
|
*/
|
|
_onMouseOut: function(e) {
|
|
var target = this._hoveredTarget;
|
|
this.fire('mouse:out', { target: target, e: e });
|
|
this._hoveredTarget = null;
|
|
target && target.fire('mouseout', { e: e });
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mouseenter
|
|
*/
|
|
_onMouseEnter: function(e) {
|
|
if (!this.findTarget(e)) {
|
|
this.fire('mouse:over', { target: null, e: e });
|
|
this._hoveredTarget = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} [e] Event object fired on Event.js orientation change
|
|
* @param {Event} [self] Inner Event object
|
|
*/
|
|
_onOrientationChange: function(e, self) {
|
|
this.__onOrientationChange && this.__onOrientationChange(e, self);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} [e] Event object fired on Event.js shake
|
|
* @param {Event} [self] Inner Event object
|
|
*/
|
|
_onShake: function(e, self) {
|
|
this.__onShake && this.__onShake(e, self);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} [e] Event object fired on Event.js shake
|
|
* @param {Event} [self] Inner Event object
|
|
*/
|
|
_onLongPress: function(e, self) {
|
|
this.__onLongPress && this.__onLongPress(e, self);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mousedown
|
|
*/
|
|
_onContextMenu: function (e) {
|
|
if (this.stopContextMenu) {
|
|
e.stopPropagation()
|
|
e.preventDefault();
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mousedown
|
|
*/
|
|
_onMouseDown: function (e) {
|
|
this.__onMouseDown(e);
|
|
|
|
addListener(fabric.document, 'touchend', this._onMouseUp);
|
|
addListener(fabric.document, 'touchmove', this._onMouseMove);
|
|
|
|
removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
|
|
removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
|
|
|
|
if (e.type === 'touchstart') {
|
|
// Unbind mousedown to prevent double triggers from touch devices
|
|
removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
|
|
}
|
|
else {
|
|
addListener(fabric.document, 'mouseup', this._onMouseUp);
|
|
addListener(fabric.document, 'mousemove', this._onMouseMove);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mouseup
|
|
*/
|
|
_onMouseUp: function (e) {
|
|
this.__onMouseUp(e);
|
|
|
|
removeListener(fabric.document, 'mouseup', this._onMouseUp);
|
|
removeListener(fabric.document, 'touchend', this._onMouseUp);
|
|
|
|
removeListener(fabric.document, 'mousemove', this._onMouseMove);
|
|
removeListener(fabric.document, 'touchmove', this._onMouseMove);
|
|
|
|
addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
|
|
addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
|
|
|
|
if (e.type === 'touchend') {
|
|
// Wait 400ms before rebinding mousedown to prevent double triggers
|
|
// from touch devices
|
|
var _this = this;
|
|
setTimeout(function() {
|
|
addListener(_this.upperCanvasEl, 'mousedown', _this._onMouseDown);
|
|
}, 400);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mousemove
|
|
*/
|
|
_onMouseMove: function (e) {
|
|
!this.allowTouchScrolling && e.preventDefault && e.preventDefault();
|
|
this.__onMouseMove(e);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_onResize: function () {
|
|
this.calcOffset();
|
|
},
|
|
|
|
/**
|
|
* Decides whether the canvas should be redrawn in mouseup and mousedown events.
|
|
* @private
|
|
* @param {Object} target
|
|
* @param {Object} pointer
|
|
*/
|
|
_shouldRender: function(target, pointer) {
|
|
var activeObject = this.getActiveGroup() || this.getActiveObject();
|
|
|
|
return !!(
|
|
(target && (
|
|
target.isMoving ||
|
|
target !== activeObject))
|
|
||
|
|
(!target && !!activeObject)
|
|
||
|
|
(!target && !activeObject && !this._groupSelector)
|
|
||
|
|
(pointer &&
|
|
this._previousPointer &&
|
|
this.selection && (
|
|
pointer.x !== this._previousPointer.x ||
|
|
pointer.y !== this._previousPointer.y))
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Method that defines the actions when mouse is released on canvas.
|
|
* The method resets the currentTransform parameters, store the image corner
|
|
* position in the image object and render the canvas on top.
|
|
* @private
|
|
* @param {Event} e Event object fired on mouseup
|
|
*/
|
|
__onMouseUp: function (e) {
|
|
var target, searchTarget = true, transform = this._currentTransform,
|
|
groupSelector = this._groupSelector,
|
|
isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0));
|
|
|
|
if (this.isDrawingMode && this._isCurrentlyDrawing) {
|
|
this._onMouseUpInDrawingMode(e);
|
|
return;
|
|
}
|
|
|
|
if (transform) {
|
|
this._finalizeCurrentTransform();
|
|
searchTarget = !transform.actionPerformed;
|
|
}
|
|
|
|
target = searchTarget ? this.findTarget(e, true) : transform.target;
|
|
|
|
var shouldRender = this._shouldRender(target, this.getPointer(e));
|
|
|
|
if (target || !isClick) {
|
|
this._maybeGroupObjects(e);
|
|
}
|
|
else {
|
|
// those are done by default on mouse up
|
|
// by _maybeGroupObjects, we are skipping it in case of no target find
|
|
this._groupSelector = null;
|
|
this._currentTransform = null;
|
|
}
|
|
|
|
if (target) {
|
|
target.isMoving = false;
|
|
}
|
|
|
|
this._handleCursorAndEvent(e, target, 'up');
|
|
target && (target.__corner = 0);
|
|
shouldRender && this.renderAll();
|
|
},
|
|
|
|
/**
|
|
* set cursor for mouse up and handle mouseUp event
|
|
* @param {Event} e event from mouse
|
|
* @param {fabric.Object} target receiving event
|
|
* @param {String} eventType event to fire (up, down or move)
|
|
*/
|
|
_handleCursorAndEvent: function(e, target, eventType) {
|
|
this._setCursorFromEvent(e, target);
|
|
this._handleEvent(e, eventType, target ? target : null);
|
|
},
|
|
|
|
/**
|
|
* Handle event firing for target and subtargets
|
|
* @param {Event} e event from mouse
|
|
* @param {String} eventType event to fire (up, down or move)
|
|
* @param {fabric.Object} targetObj receiving event
|
|
*/
|
|
_handleEvent: function(e, eventType, targetObj) {
|
|
var target = typeof targetObj === undefined ? this.findTarget(e) : targetObj,
|
|
targets = this.targets || [],
|
|
options = { e: e, target: target, subTargets: targets };
|
|
|
|
this.fire('mouse:' + eventType, options);
|
|
target && target.fire('mouse' + eventType, options);
|
|
for (var i = 0; i < targets.length; i++) {
|
|
targets[i].fire('mouse' + eventType, options);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_finalizeCurrentTransform: function() {
|
|
|
|
var transform = this._currentTransform,
|
|
target = transform.target;
|
|
|
|
if (target._scaling) {
|
|
target._scaling = false;
|
|
}
|
|
|
|
target.setCoords();
|
|
this._restoreOriginXY(target);
|
|
|
|
if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) {
|
|
this.fire('object:modified', { target: target });
|
|
target.fire('modified');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} target Object to restore
|
|
*/
|
|
_restoreOriginXY: function(target) {
|
|
if (this._previousOriginX && this._previousOriginY) {
|
|
|
|
var originPoint = target.translateToOriginPoint(
|
|
target.getCenterPoint(),
|
|
this._previousOriginX,
|
|
this._previousOriginY);
|
|
|
|
target.originX = this._previousOriginX;
|
|
target.originY = this._previousOriginY;
|
|
|
|
target.left = originPoint.x;
|
|
target.top = originPoint.y;
|
|
|
|
this._previousOriginX = null;
|
|
this._previousOriginY = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mousedown
|
|
*/
|
|
_onMouseDownInDrawingMode: function(e) {
|
|
this._isCurrentlyDrawing = true;
|
|
this.discardActiveObject(e).renderAll();
|
|
if (this.clipTo) {
|
|
fabric.util.clipContext(this, this.contextTop);
|
|
}
|
|
var pointer = this.getPointer(e);
|
|
this.freeDrawingBrush.onMouseDown(pointer);
|
|
this._handleEvent(e, 'down');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mousemove
|
|
*/
|
|
_onMouseMoveInDrawingMode: function(e) {
|
|
if (this._isCurrentlyDrawing) {
|
|
var pointer = this.getPointer(e);
|
|
this.freeDrawingBrush.onMouseMove(pointer);
|
|
}
|
|
this.setCursor(this.freeDrawingCursor);
|
|
this._handleEvent(e, 'move');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object fired on mouseup
|
|
*/
|
|
_onMouseUpInDrawingMode: function(e) {
|
|
this._isCurrentlyDrawing = false;
|
|
if (this.clipTo) {
|
|
this.contextTop.restore();
|
|
}
|
|
this.freeDrawingBrush.onMouseUp();
|
|
this._handleEvent(e, 'up');
|
|
},
|
|
|
|
/**
|
|
* Method that defines the actions when mouse is clic ked on canvas.
|
|
* The method inits the currentTransform parameters and renders all the
|
|
* canvas so the current image can be placed on the top canvas and the rest
|
|
* in on the container one.
|
|
* @private
|
|
* @param {Event} e Event object fired on mousedown
|
|
*/
|
|
__onMouseDown: function (e) {
|
|
|
|
var target = this.findTarget(e),
|
|
pointer = this.getPointer(e, true);
|
|
|
|
// if right click just fire events
|
|
var isRightClick = 'which' in e ? e.which === 3 : e.button === 2;
|
|
if (isRightClick) {
|
|
if (this.fireRightClick) {
|
|
this._handleEvent(e, 'down', target ? target : null);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (this.isDrawingMode) {
|
|
this._onMouseDownInDrawingMode(e);
|
|
return;
|
|
}
|
|
|
|
// ignore if some object is being transformed at this moment
|
|
if (this._currentTransform) {
|
|
return;
|
|
}
|
|
|
|
// save pointer for check in __onMouseUp event
|
|
this._previousPointer = pointer;
|
|
|
|
var shouldRender = this._shouldRender(target, pointer),
|
|
shouldGroup = this._shouldGroup(e, target);
|
|
|
|
if (this._shouldClearSelection(e, target)) {
|
|
this._clearSelection(e, target, pointer);
|
|
}
|
|
else if (shouldGroup) {
|
|
this._handleGrouping(e, target);
|
|
target = this.getActiveGroup();
|
|
}
|
|
|
|
if (target) {
|
|
if (target.selectable && (target.__corner || !shouldGroup)) {
|
|
this._beforeTransform(e, target);
|
|
this._setupCurrentTransform(e, target);
|
|
}
|
|
|
|
if (target !== this.getActiveGroup() && target !== this.getActiveObject()) {
|
|
this.deactivateAll();
|
|
target.selectable && this.setActiveObject(target, e);
|
|
}
|
|
}
|
|
this._handleEvent(e, 'down', target ? target : null);
|
|
// we must renderAll so that we update the visuals
|
|
shouldRender && this.renderAll();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_beforeTransform: function(e, target) {
|
|
this.stateful && target.saveState();
|
|
|
|
// determine if it's a drag or rotate case
|
|
if (target._findTargetCorner(this.getPointer(e))) {
|
|
this.onBeforeScaleRotate(target);
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_clearSelection: function(e, target, pointer) {
|
|
this.deactivateAllWithDispatch(e);
|
|
|
|
if (target && target.selectable) {
|
|
this.setActiveObject(target, e);
|
|
}
|
|
else if (this.selection) {
|
|
this._groupSelector = {
|
|
ex: pointer.x,
|
|
ey: pointer.y,
|
|
top: 0,
|
|
left: 0
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} target Object for that origin is set to center
|
|
*/
|
|
_setOriginToCenter: function(target) {
|
|
this._previousOriginX = this._currentTransform.target.originX;
|
|
this._previousOriginY = this._currentTransform.target.originY;
|
|
|
|
var center = target.getCenterPoint();
|
|
|
|
target.originX = 'center';
|
|
target.originY = 'center';
|
|
|
|
target.left = center.x;
|
|
target.top = center.y;
|
|
|
|
this._currentTransform.left = target.left;
|
|
this._currentTransform.top = target.top;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} target Object for that center is set to origin
|
|
*/
|
|
_setCenterToOrigin: function(target) {
|
|
var originPoint = target.translateToOriginPoint(
|
|
target.getCenterPoint(),
|
|
this._previousOriginX,
|
|
this._previousOriginY);
|
|
|
|
target.originX = this._previousOriginX;
|
|
target.originY = this._previousOriginY;
|
|
|
|
target.left = originPoint.x;
|
|
target.top = originPoint.y;
|
|
|
|
this._previousOriginX = null;
|
|
this._previousOriginY = null;
|
|
},
|
|
|
|
/**
|
|
* Method that defines the actions when mouse is hovering the canvas.
|
|
* The currentTransform parameter will definde whether the user is rotating/scaling/translating
|
|
* an image or neither of them (only hovering). A group selection is also possible and would cancel
|
|
* all any other type of action.
|
|
* In case of an image transformation only the top canvas will be rendered.
|
|
* @private
|
|
* @param {Event} e Event object fired on mousemove
|
|
*/
|
|
__onMouseMove: function (e) {
|
|
|
|
var target, pointer;
|
|
|
|
if (this.isDrawingMode) {
|
|
this._onMouseMoveInDrawingMode(e);
|
|
return;
|
|
}
|
|
if (typeof e.touches !== 'undefined' && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
|
|
var groupSelector = this._groupSelector;
|
|
|
|
// We initially clicked in an empty area, so we draw a box for multiple selection
|
|
if (groupSelector) {
|
|
pointer = this.getPointer(e, true);
|
|
|
|
groupSelector.left = pointer.x - groupSelector.ex;
|
|
groupSelector.top = pointer.y - groupSelector.ey;
|
|
|
|
this.renderTop();
|
|
}
|
|
else if (!this._currentTransform) {
|
|
target = this.findTarget(e);
|
|
this._setCursorFromEvent(e, target);
|
|
}
|
|
else {
|
|
this._transformObject(e);
|
|
}
|
|
this._handleEvent(e, 'move', target ? target : null);
|
|
},
|
|
|
|
/**
|
|
* Method that defines actions when an Event Mouse Wheel
|
|
* @param {Event} e Event object fired on mouseup
|
|
*/
|
|
__onMouseWheel: function(e) {
|
|
this.fire('mouse:wheel', {
|
|
e: e
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event fired on mousemove
|
|
*/
|
|
_transformObject: function(e) {
|
|
var pointer = this.getPointer(e),
|
|
transform = this._currentTransform;
|
|
|
|
transform.reset = false;
|
|
transform.target.isMoving = true;
|
|
|
|
this._beforeScaleTransform(e, transform);
|
|
this._performTransformAction(e, transform, pointer);
|
|
|
|
transform.actionPerformed && this.renderAll();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_performTransformAction: function(e, transform, pointer) {
|
|
var x = pointer.x,
|
|
y = pointer.y,
|
|
target = transform.target,
|
|
action = transform.action,
|
|
actionPerformed = false;
|
|
|
|
if (action === 'rotate') {
|
|
(actionPerformed = this._rotateObject(x, y)) && this._fire('rotating', target, e);
|
|
}
|
|
else if (action === 'scale') {
|
|
(actionPerformed = this._onScale(e, transform, x, y)) && this._fire('scaling', target, e);
|
|
}
|
|
else if (action === 'scaleX') {
|
|
(actionPerformed = this._scaleObject(x, y, 'x')) && this._fire('scaling', target, e);
|
|
}
|
|
else if (action === 'scaleY') {
|
|
(actionPerformed = this._scaleObject(x, y, 'y')) && this._fire('scaling', target, e);
|
|
}
|
|
else if (action === 'skewX') {
|
|
(actionPerformed = this._skewObject(x, y, 'x')) && this._fire('skewing', target, e);
|
|
}
|
|
else if (action === 'skewY') {
|
|
(actionPerformed = this._skewObject(x, y, 'y')) && this._fire('skewing', target, e);
|
|
}
|
|
else {
|
|
actionPerformed = this._translateObject(x, y);
|
|
if (actionPerformed) {
|
|
this._fire('moving', target, e);
|
|
this.setCursor(target.moveCursor || this.moveCursor);
|
|
}
|
|
}
|
|
transform.actionPerformed = actionPerformed;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_fire: function(eventName, target, e) {
|
|
this.fire('object:' + eventName, { target: target, e: e });
|
|
target.fire(eventName, { e: e });
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_beforeScaleTransform: function(e, transform) {
|
|
if (transform.action === 'scale' || transform.action === 'scaleX' || transform.action === 'scaleY') {
|
|
var centerTransform = this._shouldCenterTransform(transform.target);
|
|
|
|
// Switch from a normal resize to center-based
|
|
if ((centerTransform && (transform.originX !== 'center' || transform.originY !== 'center')) ||
|
|
// Switch from center-based resize to normal one
|
|
(!centerTransform && transform.originX === 'center' && transform.originY === 'center')
|
|
) {
|
|
this._resetCurrentTransform();
|
|
transform.reset = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object
|
|
* @param {Object} transform current tranform
|
|
* @param {Number} x mouse position x from origin
|
|
* @param {Number} y mouse poistion y from origin
|
|
* @return {Boolean} true if the scaling occurred
|
|
*/
|
|
_onScale: function(e, transform, x, y) {
|
|
if ((e[this.uniScaleKey] || this.uniScaleTransform) && !transform.target.get('lockUniScaling')) {
|
|
transform.currentAction = 'scale';
|
|
return this._scaleObject(x, y);
|
|
}
|
|
else {
|
|
// Switch from a normal resize to proportional
|
|
if (!transform.reset && transform.currentAction === 'scale') {
|
|
this._resetCurrentTransform();
|
|
}
|
|
|
|
transform.currentAction = 'scaleEqually';
|
|
return this._scaleObject(x, y, 'equally');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the cursor depending on where the canvas is being hovered.
|
|
* Note: very buggy in Opera
|
|
* @param {Event} e Event object
|
|
* @param {Object} target Object that the mouse is hovering, if so.
|
|
*/
|
|
_setCursorFromEvent: function (e, target) {
|
|
if (!target) {
|
|
this.setCursor(this.defaultCursor);
|
|
return false;
|
|
}
|
|
|
|
var hoverCursor = target.hoverCursor || this.hoverCursor;
|
|
if (!target.selectable) {
|
|
//let's skip _findTargetCorner if object is not selectable
|
|
this.setCursor(hoverCursor);
|
|
}
|
|
else {
|
|
var activeGroup = this.getActiveGroup(),
|
|
// only show proper corner when group selection is not active
|
|
corner = target._findTargetCorner
|
|
&& (!activeGroup || !activeGroup.contains(target))
|
|
&& target._findTargetCorner(this.getPointer(e, true));
|
|
|
|
if (!corner) {
|
|
this.setCursor(hoverCursor);
|
|
}
|
|
else {
|
|
this._setCornerCursor(corner, target, e);
|
|
}
|
|
}
|
|
//actually unclear why it should return something
|
|
//is never evaluated
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setCornerCursor: function(corner, target, e) {
|
|
if (corner in cursorOffset) {
|
|
this.setCursor(this._getRotatedCornerCursor(corner, target, e));
|
|
}
|
|
else if (corner === 'mtr' && target.hasRotatingPoint) {
|
|
this.setCursor(this.rotationCursor);
|
|
}
|
|
else {
|
|
this.setCursor(this.defaultCursor);
|
|
return false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getRotatedCornerCursor: function(corner, target, e) {
|
|
var n = Math.round((target.getAngle() % 360) / 45);
|
|
|
|
if (n < 0) {
|
|
n += 8; // full circle ahead
|
|
}
|
|
n += cursorOffset[corner];
|
|
if (e[this.altActionKey] && cursorOffset[corner] % 2 === 0) {
|
|
//if we are holding shift and we are on a mx corner...
|
|
n += 2;
|
|
}
|
|
// normalize n to be from 0 to 7
|
|
n %= 8;
|
|
|
|
return this.cursorMap[n];
|
|
}
|
|
});
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
var min = Math.min,
|
|
max = Math.max;
|
|
|
|
fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object
|
|
* @param {fabric.Object} target
|
|
* @return {Boolean}
|
|
*/
|
|
_shouldGroup: function(e, target) {
|
|
var activeObject = this.getActiveObject();
|
|
return e[this.selectionKey] && target && target.selectable &&
|
|
(this.getActiveGroup() || (activeObject && activeObject !== target))
|
|
&& this.selection;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object
|
|
* @param {fabric.Object} target
|
|
*/
|
|
_handleGrouping: function (e, target) {
|
|
var activeGroup = this.getActiveGroup();
|
|
|
|
if (target === activeGroup) {
|
|
// if it's a group, find target again, using activeGroup objects
|
|
target = this.findTarget(e, true);
|
|
// if even object is not found, bail out
|
|
if (!target) {
|
|
return;
|
|
}
|
|
}
|
|
if (activeGroup) {
|
|
this._updateActiveGroup(target, e);
|
|
}
|
|
else {
|
|
this._createActiveGroup(target, e);
|
|
}
|
|
|
|
if (this._activeGroup) {
|
|
this._activeGroup.saveCoords();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_updateActiveGroup: function(target, e) {
|
|
var activeGroup = this.getActiveGroup();
|
|
|
|
if (activeGroup.contains(target)) {
|
|
|
|
activeGroup.removeWithUpdate(target);
|
|
target.set('active', false);
|
|
|
|
if (activeGroup.size() === 1) {
|
|
// remove group alltogether if after removal it only contains 1 object
|
|
this.discardActiveGroup(e);
|
|
// activate last remaining object
|
|
this.setActiveObject(activeGroup.item(0));
|
|
return;
|
|
}
|
|
}
|
|
else {
|
|
activeGroup.addWithUpdate(target);
|
|
}
|
|
this.fire('selection:created', { target: activeGroup, e: e });
|
|
activeGroup.set('active', true);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_createActiveGroup: function(target, e) {
|
|
|
|
if (this._activeObject && target !== this._activeObject) {
|
|
|
|
var group = this._createGroup(target);
|
|
group.addWithUpdate();
|
|
|
|
this.setActiveGroup(group);
|
|
this._activeObject = null;
|
|
|
|
this.fire('selection:created', { target: group, e: e });
|
|
}
|
|
|
|
target.set('active', true);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} target
|
|
*/
|
|
_createGroup: function(target) {
|
|
|
|
var objects = this.getObjects(),
|
|
isActiveLower = objects.indexOf(this._activeObject) < objects.indexOf(target),
|
|
groupObjects = isActiveLower
|
|
? [this._activeObject, target]
|
|
: [target, this._activeObject];
|
|
this._activeObject.isEditing && this._activeObject.exitEditing();
|
|
return new fabric.Group(groupObjects, {
|
|
canvas: this
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e mouse event
|
|
*/
|
|
_groupSelectedObjects: function (e) {
|
|
|
|
var group = this._collectObjects();
|
|
|
|
// do not create group for 1 element only
|
|
if (group.length === 1) {
|
|
this.setActiveObject(group[0], e);
|
|
}
|
|
else if (group.length > 1) {
|
|
group = new fabric.Group(group.reverse(), {
|
|
canvas: this
|
|
});
|
|
group.addWithUpdate();
|
|
this.setActiveGroup(group, e);
|
|
group.saveCoords();
|
|
this.fire('selection:created', { target: group });
|
|
this.renderAll();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_collectObjects: function() {
|
|
var group = [],
|
|
currentObject,
|
|
x1 = this._groupSelector.ex,
|
|
y1 = this._groupSelector.ey,
|
|
x2 = x1 + this._groupSelector.left,
|
|
y2 = y1 + this._groupSelector.top,
|
|
selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)),
|
|
selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)),
|
|
isClick = x1 === x2 && y1 === y2;
|
|
|
|
for (var i = this._objects.length; i--; ) {
|
|
currentObject = this._objects[i];
|
|
|
|
if (!currentObject || !currentObject.selectable || !currentObject.visible) {
|
|
continue;
|
|
}
|
|
|
|
if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||
|
|
currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2) ||
|
|
currentObject.containsPoint(selectionX1Y1) ||
|
|
currentObject.containsPoint(selectionX2Y2)
|
|
) {
|
|
currentObject.set('active', true);
|
|
group.push(currentObject);
|
|
|
|
// only add one object if it's a click
|
|
if (isClick) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return group;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_maybeGroupObjects: function(e) {
|
|
if (this.selection && this._groupSelector) {
|
|
this._groupSelectedObjects(e);
|
|
}
|
|
|
|
var activeGroup = this.getActiveGroup();
|
|
if (activeGroup) {
|
|
activeGroup.setObjectsCoords().setCoords();
|
|
activeGroup.isMoving = false;
|
|
this.setCursor(this.defaultCursor);
|
|
}
|
|
|
|
// clear selection and current transformation
|
|
this._groupSelector = null;
|
|
this._currentTransform = null;
|
|
}
|
|
});
|
|
|
|
})();
|
|
|
|
|
|
(function () {
|
|
|
|
var supportQuality = fabric.StaticCanvas.supports('toDataURLWithQuality');
|
|
|
|
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
|
|
|
|
/**
|
|
* Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
|
|
* @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
|
|
* @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo}
|
|
* @example <caption>Generate jpeg dataURL with lower quality</caption>
|
|
* var dataURL = canvas.toDataURL({
|
|
* format: 'jpeg',
|
|
* quality: 0.8
|
|
* });
|
|
* @example <caption>Generate cropped png dataURL (clipping of canvas)</caption>
|
|
* var dataURL = canvas.toDataURL({
|
|
* format: 'png',
|
|
* left: 100,
|
|
* top: 100,
|
|
* width: 200,
|
|
* height: 200
|
|
* });
|
|
* @example <caption>Generate double scaled png dataURL</caption>
|
|
* var dataURL = canvas.toDataURL({
|
|
* format: 'png',
|
|
* multiplier: 2
|
|
* });
|
|
*/
|
|
toDataURL: function (options) {
|
|
options || (options = { });
|
|
|
|
var format = options.format || 'png',
|
|
quality = options.quality || 1,
|
|
multiplier = options.multiplier || 1,
|
|
cropping = {
|
|
left: options.left || 0,
|
|
top: options.top || 0,
|
|
width: options.width || 0,
|
|
height: options.height || 0,
|
|
};
|
|
return this.__toDataURLWithMultiplier(format, quality, cropping, multiplier);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
__toDataURLWithMultiplier: function(format, quality, cropping, multiplier) {
|
|
|
|
var origWidth = this.getWidth(),
|
|
origHeight = this.getHeight(),
|
|
scaledWidth = (cropping.width || this.getWidth()) * multiplier,
|
|
scaledHeight = (cropping.height || this.getHeight()) * multiplier,
|
|
zoom = this.getZoom(),
|
|
newZoom = zoom * multiplier,
|
|
vp = this.viewportTransform,
|
|
translateX = (vp[4] - cropping.left) * multiplier,
|
|
translateY = (vp[5] - cropping.top) * multiplier,
|
|
newVp = [newZoom, 0, 0, newZoom, translateX, translateY],
|
|
originalInteractive = this.interactive;
|
|
|
|
this.viewportTransform = newVp;
|
|
// setting interactive to false avoid exporting controls
|
|
this.interactive && (this.interactive = false);
|
|
if (origWidth !== scaledWidth || origHeight !== scaledHeight) {
|
|
// this.setDimensions is going to renderAll also;
|
|
this.setDimensions({ width: scaledWidth, height: scaledHeight });
|
|
}
|
|
else {
|
|
this.renderAll();
|
|
}
|
|
var data = this.__toDataURL(format, quality, cropping);
|
|
originalInteractive && (this.interactive = originalInteractive);
|
|
this.viewportTransform = vp;
|
|
//setDimensions with no option object is taking care of:
|
|
//this.width, this.height, this.renderAll()
|
|
this.setDimensions({ width: origWidth, height: origHeight });
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
__toDataURL: function(format, quality) {
|
|
|
|
var canvasEl = this.contextContainer.canvas;
|
|
// to avoid common confusion https://github.com/kangax/fabric.js/issues/806
|
|
if (format === 'jpg') {
|
|
format = 'jpeg';
|
|
}
|
|
|
|
var data = supportQuality
|
|
? canvasEl.toDataURL('image/' + format, quality)
|
|
: canvasEl.toDataURL('image/' + format);
|
|
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Exports canvas element to a dataurl image (allowing to change image size via multiplier).
|
|
* @deprecated since 1.0.13
|
|
* @param {String} format (png|jpeg)
|
|
* @param {Number} multiplier
|
|
* @param {Number} quality (0..1)
|
|
* @return {String}
|
|
*/
|
|
toDataURLWithMultiplier: function (format, multiplier, quality) {
|
|
return this.toDataURL({
|
|
format: format,
|
|
multiplier: multiplier,
|
|
quality: quality
|
|
});
|
|
},
|
|
});
|
|
|
|
})();
|
|
|
|
|
|
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
|
|
|
|
/**
|
|
* Populates canvas with data from the specified dataless JSON.
|
|
* JSON format must conform to the one of {@link fabric.Canvas#toDatalessJSON}
|
|
* @deprecated since 1.2.2
|
|
* @param {String|Object} json JSON string or object
|
|
* @param {Function} callback Callback, invoked when json is parsed
|
|
* and corresponding objects (e.g: {@link fabric.Image})
|
|
* are initialized
|
|
* @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
|
|
* @return {fabric.Canvas} instance
|
|
* @chainable
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization}
|
|
*/
|
|
loadFromDatalessJSON: function (json, callback, reviver) {
|
|
return this.loadFromJSON(json, callback, reviver);
|
|
},
|
|
|
|
/**
|
|
* Populates canvas with data from the specified JSON.
|
|
* JSON format must conform to the one of {@link fabric.Canvas#toJSON}
|
|
* @param {String|Object} json JSON string or object
|
|
* @param {Function} callback Callback, invoked when json is parsed
|
|
* and corresponding objects (e.g: {@link fabric.Image})
|
|
* are initialized
|
|
* @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
|
|
* @return {fabric.Canvas} instance
|
|
* @chainable
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization}
|
|
* @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo}
|
|
* @example <caption>loadFromJSON</caption>
|
|
* canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
|
|
* @example <caption>loadFromJSON with reviver</caption>
|
|
* canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
|
|
* // `o` = json object
|
|
* // `object` = fabric.Object instance
|
|
* // ... do some stuff ...
|
|
* });
|
|
*/
|
|
loadFromJSON: function (json, callback, reviver) {
|
|
if (!json) {
|
|
return;
|
|
}
|
|
|
|
// serialize if it wasn't already
|
|
var serialized = (typeof json === 'string')
|
|
? JSON.parse(json)
|
|
: fabric.util.object.clone(json);
|
|
|
|
this.clear();
|
|
|
|
var _this = this;
|
|
this._enlivenObjects(serialized.objects, function () {
|
|
_this._setBgOverlay(serialized, function () {
|
|
// remove parts i cannot set as options
|
|
delete serialized.objects;
|
|
delete serialized.backgroundImage;
|
|
delete serialized.overlayImage;
|
|
delete serialized.background;
|
|
delete serialized.overlay;
|
|
// this._initOptions does too many things to just
|
|
// call it. Normally loading an Object from JSON
|
|
// create the Object instance. Here the Canvas is
|
|
// already an instance and we are just loading things over it
|
|
for (var prop in serialized) {
|
|
_this[prop] = serialized[prop];
|
|
}
|
|
callback && callback();
|
|
});
|
|
}, reviver);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} serialized Object with background and overlay information
|
|
* @param {Function} callback Invoked after all background and overlay images/patterns loaded
|
|
*/
|
|
_setBgOverlay: function(serialized, callback) {
|
|
var _this = this,
|
|
loaded = {
|
|
backgroundColor: false,
|
|
overlayColor: false,
|
|
backgroundImage: false,
|
|
overlayImage: false
|
|
};
|
|
|
|
if (!serialized.backgroundImage && !serialized.overlayImage && !serialized.background && !serialized.overlay) {
|
|
callback && callback();
|
|
return;
|
|
}
|
|
|
|
var cbIfLoaded = function () {
|
|
if (loaded.backgroundImage && loaded.overlayImage && loaded.backgroundColor && loaded.overlayColor) {
|
|
_this.renderAll();
|
|
callback && callback();
|
|
}
|
|
};
|
|
|
|
this.__setBgOverlay('backgroundImage', serialized.backgroundImage, loaded, cbIfLoaded);
|
|
this.__setBgOverlay('overlayImage', serialized.overlayImage, loaded, cbIfLoaded);
|
|
this.__setBgOverlay('backgroundColor', serialized.background, loaded, cbIfLoaded);
|
|
this.__setBgOverlay('overlayColor', serialized.overlay, loaded, cbIfLoaded);
|
|
|
|
cbIfLoaded();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} property Property to set (backgroundImage, overlayImage, backgroundColor, overlayColor)
|
|
* @param {(Object|String)} value Value to set
|
|
* @param {Object} loaded Set loaded property to true if property is set
|
|
* @param {Object} callback Callback function to invoke after property is set
|
|
*/
|
|
__setBgOverlay: function(property, value, loaded, callback) {
|
|
var _this = this;
|
|
|
|
if (!value) {
|
|
loaded[property] = true;
|
|
return;
|
|
}
|
|
|
|
if (property === 'backgroundImage' || property === 'overlayImage') {
|
|
fabric.Image.fromObject(value, function(img) {
|
|
_this[property] = img;
|
|
loaded[property] = true;
|
|
callback && callback();
|
|
});
|
|
}
|
|
else {
|
|
this['set' + fabric.util.string.capitalize(property, true)](value, function() {
|
|
loaded[property] = true;
|
|
callback && callback();
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Array} objects
|
|
* @param {Function} callback
|
|
* @param {Function} [reviver]
|
|
*/
|
|
_enlivenObjects: function (objects, callback, reviver) {
|
|
var _this = this;
|
|
|
|
if (!objects || objects.length === 0) {
|
|
callback && callback();
|
|
return;
|
|
}
|
|
|
|
var renderOnAddRemove = this.renderOnAddRemove;
|
|
this.renderOnAddRemove = false;
|
|
|
|
fabric.util.enlivenObjects(objects, function(enlivenedObjects) {
|
|
enlivenedObjects.forEach(function(obj, index) {
|
|
// we splice the array just in case some custom classes restored from JSON
|
|
// will add more object to canvas at canvas init.
|
|
_this.insertAt(obj, index);
|
|
});
|
|
|
|
_this.renderOnAddRemove = renderOnAddRemove;
|
|
callback && callback();
|
|
}, null, reviver);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} format
|
|
* @param {Function} callback
|
|
*/
|
|
_toDataURL: function (format, callback) {
|
|
this.clone(function (clone) {
|
|
callback(clone.toDataURL(format));
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} format
|
|
* @param {Number} multiplier
|
|
* @param {Function} callback
|
|
*/
|
|
_toDataURLWithMultiplier: function (format, multiplier, callback) {
|
|
this.clone(function (clone) {
|
|
callback(clone.toDataURLWithMultiplier(format, multiplier));
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Clones canvas instance
|
|
* @param {Object} [callback] Receives cloned instance as a first argument
|
|
* @param {Array} [properties] Array of properties to include in the cloned canvas and children
|
|
*/
|
|
clone: function (callback, properties) {
|
|
var data = JSON.stringify(this.toJSON(properties));
|
|
this.cloneWithoutData(function(clone) {
|
|
clone.loadFromJSON(data, function() {
|
|
callback && callback(clone);
|
|
});
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Clones canvas instance without cloning existing data.
|
|
* This essentially copies canvas dimensions, clipping properties, etc.
|
|
* but leaves data empty (so that you can populate it with your own)
|
|
* @param {Object} [callback] Receives cloned instance as a first argument
|
|
*/
|
|
cloneWithoutData: function(callback) {
|
|
var el = fabric.document.createElement('canvas');
|
|
|
|
el.width = this.getWidth();
|
|
el.height = this.getHeight();
|
|
|
|
var clone = new fabric.Canvas(el);
|
|
clone.clipTo = this.clipTo;
|
|
if (this.backgroundImage) {
|
|
clone.setBackgroundImage(this.backgroundImage.src, function() {
|
|
clone.renderAll();
|
|
callback && callback(clone);
|
|
});
|
|
clone.backgroundImageOpacity = this.backgroundImageOpacity;
|
|
clone.backgroundImageStretch = this.backgroundImageStretch;
|
|
}
|
|
else {
|
|
callback && callback(clone);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
(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 deselected
|
|
* @fires modified
|
|
* @fires rotating
|
|
* @fires scaling
|
|
* @fires moving
|
|
* @fires skewing
|
|
*
|
|
* @fires mousedown
|
|
* @fires mouseup
|
|
* @fires mouseover
|
|
* @fires mouseout
|
|
*/
|
|
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}
|
|
*/
|
|
|
|
/**
|
|
* 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.).
|
|
* Note that this property is meant to be read-only and not meant to be modified.
|
|
* If you modify, certain parts of Fabric (such as JSON loading) won't work correctly.
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'object',
|
|
|
|
/**
|
|
* Horizontal origin of transformation of an object (one of "left", "right", "center")
|
|
* See http://jsfiddle.net/1ow02gea/40/ on how originX/originY affect objects in groups
|
|
* @type String
|
|
* @default
|
|
*/
|
|
originX: 'left',
|
|
|
|
/**
|
|
* Vertical origin of transformation of an object (one of "top", "bottom", "center")
|
|
* See http://jsfiddle.net/1ow02gea/40/ on how originX/originY affect objects in groups
|
|
* @type String
|
|
* @default
|
|
*/
|
|
originY: 'top',
|
|
|
|
/**
|
|
* Top position of an object. Note that by default it's relative to object top. 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 left. 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,
|
|
|
|
/**
|
|
* Angle of skew on x axes of an object (in degrees)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
skewX: 0,
|
|
|
|
/**
|
|
* Angle of skew on y axes of an object (in degrees)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
skewY: 0,
|
|
|
|
/**
|
|
* Size of object's controlling corners (in pixels)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
cornerSize: 13,
|
|
|
|
/**
|
|
* 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,
|
|
|
|
/**
|
|
* Default cursor value used when moving this object on canvas
|
|
* @type String
|
|
* @default
|
|
*/
|
|
moveCursor: 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)',
|
|
|
|
/**
|
|
* Array specifying dash pattern of an object's borders (hasBorder must be true)
|
|
* @since 1.6.2
|
|
* @type Array
|
|
*/
|
|
borderDashArray: null,
|
|
|
|
/**
|
|
* Color of controlling corners of an object (when it's active)
|
|
* @type String
|
|
* @default
|
|
*/
|
|
cornerColor: 'rgba(102,153,255,0.5)',
|
|
|
|
/**
|
|
* Color of controlling corners of an object (when it's active and transparentCorners false)
|
|
* @since 1.6.2
|
|
* @type String
|
|
* @default
|
|
*/
|
|
cornerStrokeColor: null,
|
|
|
|
/**
|
|
* Specify style of control, 'rect' or 'circle'
|
|
* @since 1.6.2
|
|
* @type String
|
|
*/
|
|
cornerStyle: 'rect',
|
|
|
|
/**
|
|
* Array specifying dash pattern of an object's control (hasBorder must be true)
|
|
* @since 1.6.2
|
|
* @type Array
|
|
*/
|
|
cornerDashArray: null,
|
|
|
|
/**
|
|
* When true, this object will use center point as the origin of transformation
|
|
* when being scaled via the controls.
|
|
* <b>Backwards incompatibility note:</b> 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.
|
|
* <b>Backwards incompatibility note:</b> 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
|
|
* accepted values are nonzero, evenodd
|
|
* <b>Backwards incompatibility note:</b> This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead)
|
|
* @type String
|
|
* @default
|
|
*/
|
|
fillRule: 'nonzero',
|
|
|
|
/**
|
|
* Composite rule used for canvas globalCompositeOperation
|
|
* @type String
|
|
* @default
|
|
*/
|
|
globalCompositeOperation: 'source-over',
|
|
|
|
/**
|
|
* Background color of an object. Only works with text objects at the moment.
|
|
* @type String
|
|
* @default
|
|
*/
|
|
backgroundColor: '',
|
|
|
|
/**
|
|
* Selection Background color of an object. colored layer behind the object when it is active.
|
|
* does not mix good with globalCompositeOperation methods.
|
|
* @type String
|
|
* @default
|
|
*/
|
|
selectionBackgroundColor: '',
|
|
|
|
/**
|
|
* 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,
|
|
|
|
/**
|
|
* When `true`, object horizontal skewing is locked
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
lockSkewingX: false,
|
|
|
|
/**
|
|
* When `true`, object vertical skewing is locked
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
lockSkewingY: false,
|
|
|
|
/**
|
|
* When `true`, object cannot be flipped by scaling into negative values
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
|
|
lockScalingFlip: false,
|
|
|
|
/**
|
|
* When `true`, object is not exported in SVG or OBJECT/JSON
|
|
* since 1.6.3
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
|
|
excludeFromExport: 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 globalCompositeOperation shadow clipTo visible backgroundColor ' +
|
|
'skewX skewY'
|
|
).split(' '),
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
initialize: function(options) {
|
|
if (options) {
|
|
this.setOptions(options);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
_initGradient: function(options) {
|
|
if (options.fill && options.fill.colorStops && !(options.fill instanceof fabric.Gradient)) {
|
|
this.set('fill', new fabric.Gradient(options.fill));
|
|
}
|
|
if (options.stroke && options.stroke.colorStops && !(options.stroke instanceof fabric.Gradient)) {
|
|
this.set('stroke', new fabric.Gradient(options.stroke));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
_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
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
_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._transformDone && this.group === this.canvas._activeGroup) {
|
|
this.group.transform(ctx);
|
|
}
|
|
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)
|
|
);
|
|
ctx.transform(1, 0, Math.tan(degreesToRadians(this.skewX)), 1, 0, 0);
|
|
ctx.transform(1, Math.tan(degreesToRadians(this.skewY)), 0, 1, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* 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 ? this.strokeDashArray.concat() : 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,
|
|
fillRule: this.fillRule,
|
|
globalCompositeOperation: this.globalCompositeOperation,
|
|
transformMatrix: this.transformMatrix ? this.transformMatrix.concat() : this.transformMatrix,
|
|
skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS),
|
|
skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS)
|
|
};
|
|
|
|
fabric.util.populateWithProperties(this, object, propertiesToInclude);
|
|
|
|
if (!this.includeDefaultValues) {
|
|
object = this._removeDefaultValues(object);
|
|
}
|
|
|
|
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];
|
|
}
|
|
var isArray = Object.prototype.toString.call(object[prop]) === '[object Array]' &&
|
|
Object.prototype.toString.call(prototype[prop]) === '[object Array]';
|
|
|
|
// basically a check for [] === []
|
|
if (isArray && object[prop].length === 0 && prototype[prop].length === 0) {
|
|
delete object[prop];
|
|
}
|
|
});
|
|
|
|
return object;
|
|
},
|
|
|
|
/**
|
|
* Returns a string representation of an instance
|
|
* @return {String}
|
|
*/
|
|
toString: function() {
|
|
return '#<fabric.' + capitalize(this.type) + '>';
|
|
},
|
|
|
|
/**
|
|
* Basic getter
|
|
* @param {String} property Property name
|
|
* @return {*} value of a property
|
|
*/
|
|
get: function(property) {
|
|
return this[property];
|
|
},
|
|
|
|
/**
|
|
* Return the object scale factor counting also the group scaling
|
|
* @return {Object} object with scaleX and scaleY properties
|
|
*/
|
|
getObjectScaling: function() {
|
|
var scaleX = this.scaleX, scaleY = this.scaleY;
|
|
if (this.group) {
|
|
var scaling = this.group.getObjectScaling();
|
|
scaleX *= scaling.scaleX;
|
|
scaleY *= scaling.scaleY;
|
|
}
|
|
return { scaleX: scaleX, scaleY: scaleY };
|
|
},
|
|
|
|
/**
|
|
* @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 {*} 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 === 'shadow' && value && !(value instanceof fabric.Shadow)) {
|
|
value = new fabric.Shadow(value);
|
|
}
|
|
|
|
this[key] = value;
|
|
|
|
if (key === 'width' || key === 'height') {
|
|
this.minScaleLimit = Math.min(0.1, 1 / Math.max(this.width, this.height));
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* This callback function is called by the parent group of an object every
|
|
* time a non-delegated property changes on the group. It is passed the key
|
|
* and value as parameters. Not adding in this function's signature to avoid
|
|
* Travis build error about unused variables.
|
|
*/
|
|
setOnGroup: function() {
|
|
// implemented by sub-classes, as needed.
|
|
},
|
|
|
|
/**
|
|
* 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._setupCompositeOperation(ctx);
|
|
this.drawSelectionBackground(ctx);
|
|
if (!noTransform) {
|
|
this.transform(ctx);
|
|
}
|
|
this._setOpacity(ctx);
|
|
this._setShadow(ctx);
|
|
this._renderBackground(ctx);
|
|
this._setStrokeStyles(ctx);
|
|
this._setFillStyles(ctx);
|
|
if (this.transformMatrix) {
|
|
ctx.transform.apply(ctx, this.transformMatrix);
|
|
}
|
|
this.clipTo && fabric.util.clipContext(this, ctx);
|
|
this._render(ctx, noTransform);
|
|
this.clipTo && ctx.restore();
|
|
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* Draws a background for the object big as its width and height;
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderBackground: function(ctx) {
|
|
if (!this.backgroundColor) {
|
|
return;
|
|
}
|
|
|
|
ctx.fillStyle = this.backgroundColor;
|
|
|
|
ctx.fillRect(
|
|
-this.width / 2,
|
|
-this.height / 2,
|
|
this.width,
|
|
this.height
|
|
);
|
|
// if there is background color no other shadows
|
|
// should be casted
|
|
this._removeShadow(ctx);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_setOpacity: function(ctx) {
|
|
if (this.group) {
|
|
this.group._setOpacity(ctx);
|
|
}
|
|
ctx.globalAlpha *= this.opacity;
|
|
},
|
|
|
|
_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)
|
|
: this.stroke;
|
|
}
|
|
},
|
|
|
|
_setFillStyles: function(ctx) {
|
|
if (this.fill) {
|
|
ctx.fillStyle = this.fill.toLive
|
|
? this.fill.toLive(ctx, this)
|
|
: this.fill;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Sets line dash
|
|
* @param {CanvasRenderingContext2D} ctx Context to set the dash line on
|
|
* @param {Array} dashArray array representing dashes
|
|
* @param {Function} alternative function to call if browaser does not support lineDash
|
|
*/
|
|
_setLineDash: function(ctx, dashArray, alternative) {
|
|
if (!dashArray) {
|
|
return;
|
|
}
|
|
// Spec requires the concatenation of two copies the dash list when the number of elements is odd
|
|
if (1 & dashArray.length) {
|
|
dashArray.push.apply(dashArray, dashArray);
|
|
}
|
|
if (supportsLineDash) {
|
|
ctx.setLineDash(dashArray);
|
|
}
|
|
else {
|
|
alternative && alternative(ctx);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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) {
|
|
if (!this.active || noTransform
|
|
|| (this.group && this.group !== this.canvas.getActiveGroup())) {
|
|
return;
|
|
}
|
|
|
|
var vpt = this.getViewportTransform(),
|
|
matrix = this.calcTransformMatrix(),
|
|
options;
|
|
matrix = fabric.util.multiplyTransformMatrices(vpt, matrix);
|
|
options = fabric.util.qrDecompose(matrix);
|
|
|
|
ctx.save();
|
|
ctx.translate(options.translateX, options.translateY);
|
|
ctx.lineWidth = 1 * this.borderScaleFactor;
|
|
ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
|
|
|
|
if (this.group && this.group === this.canvas.getActiveGroup()) {
|
|
ctx.rotate(degreesToRadians(options.angle));
|
|
this.drawBordersInGroup(ctx, options);
|
|
}
|
|
else {
|
|
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;
|
|
}
|
|
|
|
var multX = (this.canvas && this.canvas.viewportTransform[0]) || 1,
|
|
multY = (this.canvas && this.canvas.viewportTransform[3]) || 1,
|
|
scaling = this.getObjectScaling();
|
|
if (this.canvas && this.canvas._isRetinaScaling()) {
|
|
multX *= fabric.devicePixelRatio;
|
|
multY *= fabric.devicePixelRatio;
|
|
}
|
|
ctx.shadowColor = this.shadow.color;
|
|
ctx.shadowBlur = this.shadow.blur * (multX + multY) * (scaling.scaleX + scaling.scaleY) / 4;
|
|
ctx.shadowOffsetX = this.shadow.offsetX * multX * scaling.scaleX;
|
|
ctx.shadowOffsetY = this.shadow.offsetY * multY * scaling.scaleY;
|
|
},
|
|
|
|
/**
|
|
* @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;
|
|
}
|
|
|
|
ctx.save();
|
|
if (this.fill.gradientTransform) {
|
|
var g = this.fill.gradientTransform;
|
|
ctx.transform.apply(ctx, g);
|
|
}
|
|
if (this.fill.toLive) {
|
|
ctx.translate(
|
|
-this.width / 2 + this.fill.offsetX || 0,
|
|
-this.height / 2 + this.fill.offsetY || 0);
|
|
}
|
|
if (this.fillRule === 'evenodd') {
|
|
ctx.fill('evenodd');
|
|
}
|
|
else {
|
|
ctx.fill();
|
|
}
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderStroke: function(ctx) {
|
|
if (!this.stroke || this.strokeWidth === 0) {
|
|
return;
|
|
}
|
|
|
|
if (this.shadow && !this.shadow.affectStroke) {
|
|
this._removeShadow(ctx);
|
|
}
|
|
|
|
ctx.save();
|
|
|
|
this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke);
|
|
if (this.stroke.gradientTransform) {
|
|
var g = this.stroke.gradientTransform;
|
|
ctx.transform.apply(ctx, g);
|
|
}
|
|
if (this.stroke.toLive) {
|
|
ctx.translate(
|
|
-this.width / 2 + this.stroke.offsetX || 0,
|
|
-this.height / 2 + this.stroke.offsetY || 0);
|
|
}
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* Clones an instance, some objects are async, so using callback method will work for every object.
|
|
* Using the direct return does not work for images and groups.
|
|
* @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 {Function} callback callback, invoked with an instance as a first argument
|
|
* @param {Object} [options] for clone as image, passed to toDataURL
|
|
* @param {Boolean} [options.enableRetinaScaling] enable retina scaling for the cloned image
|
|
* @return {fabric.Object} thisArg
|
|
*/
|
|
cloneAsImage: function(callback, options) {
|
|
var dataUrl = this.toDataURL(options);
|
|
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
|
|
* @param {Boolean} [options.enableRetina] Enable retina scaling for clone image. Introduce in 1.6.4
|
|
* @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.StaticCanvas(el, { enableRetinaScaling: options.enableRetinaScaling });
|
|
// 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(canvas.getWidth() / 2, canvas.getHeight() / 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 {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
|
|
* <b>Backwards incompatibility note:</b> 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'}
|
|
* @param {Object} [options.gradientTransform] transforMatrix for gradient
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
* @see {@link http://jsfiddle.net/fabricjs/58y8b/|jsFiddle demo}
|
|
* @example <caption>Set linear gradient</caption>
|
|
* 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 <caption>Set radial gradient</caption>
|
|
* 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;
|
|
}
|
|
|
|
options.gradientTransform && (gradient.gradientTransform = options.gradientTransform);
|
|
|
|
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 <caption>Set pattern</caption>
|
|
* 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 <caption>Set shadow with string notation</caption>
|
|
* object.setShadow('2px 2px 10px rgba(0,0,0,0.2)');
|
|
* canvas.renderAll();
|
|
* @example <caption>Set shadow with object notation</caption>
|
|
* 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 (in degrees)
|
|
* @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 && this.canvas.centerObjectH(this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Centers object horizontally on current viewport of 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
|
|
*/
|
|
viewportCenterH: function () {
|
|
this.canvas && this.canvas.viewportCenterObjectH(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 && this.canvas.centerObjectV(this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Centers object vertically on current viewport of 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
|
|
*/
|
|
viewportCenterV: function () {
|
|
this.canvas && this.canvas.viewportCenterObjectV(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 && this.canvas.centerObject(this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Centers object on current viewport of 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
|
|
*/
|
|
viewportCenter: function () {
|
|
this.canvas && this.canvas.viewportCenterObject(this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Removes object from canvas to which it was added last
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
remove: function() {
|
|
this.canvas && 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 pClicked = new fabric.Point(pointer.x, pointer.y),
|
|
objectLeftTop = this._getLeftTopCoords();
|
|
if (this.angle) {
|
|
pClicked = fabric.util.rotatePoint(
|
|
pClicked, objectLeftTop, fabric.util.degreesToRadians(-this.angle));
|
|
}
|
|
return {
|
|
x: pClicked.x - objectLeftTop.x,
|
|
y: pClicked.y - objectLeftTop.y
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Sets canvas globalCompositeOperation for specific object
|
|
* custom composition operation for the particular object can be specifed using globalCompositeOperation property
|
|
* @param {CanvasRenderingContext2D} ctx Rendering canvas context
|
|
*/
|
|
_setupCompositeOperation: function (ctx) {
|
|
if (this.globalCompositeOperation) {
|
|
ctx.globalCompositeOperation = this.globalCompositeOperation;
|
|
}
|
|
}
|
|
});
|
|
|
|
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);
|
|
|
|
|
|
(function() {
|
|
|
|
var degreesToRadians = fabric.util.degreesToRadians,
|
|
originXOffset = {
|
|
left: -0.5,
|
|
center: 0,
|
|
right: 0.5
|
|
},
|
|
originYOffset = {
|
|
top: -0.5,
|
|
center: 0,
|
|
bottom: 0.5
|
|
};
|
|
|
|
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
|
|
|
/**
|
|
* Translates the coordinates from origin to center coordinates (based on the object's dimensions)
|
|
* @param {fabric.Point} point The point which corresponds to the originX and originY params
|
|
* @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right'
|
|
* @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom'
|
|
* @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right'
|
|
* @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom'
|
|
* @return {fabric.Point}
|
|
*/
|
|
translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
|
|
var x = point.x,
|
|
y = point.y,
|
|
offsetX, offsetY, dim;
|
|
|
|
if (typeof fromOriginX === 'string') {
|
|
fromOriginX = originXOffset[fromOriginX];
|
|
}
|
|
else {
|
|
fromOriginX -= 0.5;
|
|
}
|
|
|
|
if (typeof toOriginX === 'string') {
|
|
toOriginX = originXOffset[toOriginX];
|
|
}
|
|
else {
|
|
toOriginX -= 0.5;
|
|
}
|
|
|
|
offsetX = toOriginX - fromOriginX;
|
|
|
|
if (typeof fromOriginY === 'string') {
|
|
fromOriginY = originYOffset[fromOriginY];
|
|
}
|
|
else {
|
|
fromOriginY -= 0.5;
|
|
}
|
|
|
|
if (typeof toOriginY === 'string') {
|
|
toOriginY = originYOffset[toOriginY];
|
|
}
|
|
else {
|
|
toOriginY -= 0.5;
|
|
}
|
|
|
|
offsetY = toOriginY - fromOriginY;
|
|
|
|
if (offsetX || offsetY) {
|
|
dim = this._getTransformedDimensions();
|
|
x = point.x + offsetX * dim.x;
|
|
y = point.y + offsetY * dim.y;
|
|
}
|
|
|
|
return new fabric.Point(x, y);
|
|
},
|
|
|
|
/**
|
|
* Translates the coordinates from origin to center coordinates (based on the object's dimensions)
|
|
* @param {fabric.Point} point The point which corresponds to the originX and originY params
|
|
* @param {String} originX Horizontal origin: 'left', 'center' or 'right'
|
|
* @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
|
|
* @return {fabric.Point}
|
|
*/
|
|
translateToCenterPoint: function(point, originX, originY) {
|
|
var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center');
|
|
if (this.angle) {
|
|
return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle));
|
|
}
|
|
return p;
|
|
},
|
|
|
|
/**
|
|
* Translates the coordinates from center to origin coordinates (based on the object's dimensions)
|
|
* @param {fabric.Point} center The point which corresponds to center of the object
|
|
* @param {String} originX Horizontal origin: 'left', 'center' or 'right'
|
|
* @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
|
|
* @return {fabric.Point}
|
|
*/
|
|
translateToOriginPoint: function(center, originX, originY) {
|
|
var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
|
|
if (this.angle) {
|
|
return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle));
|
|
}
|
|
return p;
|
|
},
|
|
|
|
/**
|
|
* Returns the real center coordinates of the object
|
|
* @return {fabric.Point}
|
|
*/
|
|
getCenterPoint: function() {
|
|
var leftTop = new fabric.Point(this.left, this.top);
|
|
return this.translateToCenterPoint(leftTop, this.originX, this.originY);
|
|
},
|
|
|
|
/**
|
|
* Returns the coordinates of the object based on center coordinates
|
|
* @param {fabric.Point} point The point which corresponds to the originX and originY params
|
|
* @return {fabric.Point}
|
|
*/
|
|
// getOriginPoint: function(center) {
|
|
// return this.translateToOriginPoint(center, this.originX, this.originY);
|
|
// },
|
|
|
|
/**
|
|
* Returns the coordinates of the object as if it has a different origin
|
|
* @param {String} originX Horizontal origin: 'left', 'center' or 'right'
|
|
* @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
|
|
* @return {fabric.Point}
|
|
*/
|
|
getPointByOrigin: function(originX, originY) {
|
|
var center = this.getCenterPoint();
|
|
return this.translateToOriginPoint(center, originX, originY);
|
|
},
|
|
|
|
/**
|
|
* Returns the point in local coordinates
|
|
* @param {fabric.Point} point The point relative to the global coordinate system
|
|
* @param {String} originX Horizontal origin: 'left', 'center' or 'right'
|
|
* @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
|
|
* @return {fabric.Point}
|
|
*/
|
|
toLocalPoint: function(point, originX, originY) {
|
|
var center = this.getCenterPoint(),
|
|
p, p2;
|
|
|
|
if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) {
|
|
p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
|
|
}
|
|
else {
|
|
p = new fabric.Point(this.left, this.top);
|
|
}
|
|
|
|
p2 = new fabric.Point(point.x, point.y);
|
|
if (this.angle) {
|
|
p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle));
|
|
}
|
|
return p2.subtractEquals(p);
|
|
},
|
|
|
|
/**
|
|
* Returns the point in global coordinates
|
|
* @param {fabric.Point} The point relative to the local coordinate system
|
|
* @return {fabric.Point}
|
|
*/
|
|
// toGlobalPoint: function(point) {
|
|
// return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top));
|
|
// },
|
|
|
|
/**
|
|
* Sets the position of the object taking into consideration the object's origin
|
|
* @param {fabric.Point} pos The new position of the object
|
|
* @param {String} originX Horizontal origin: 'left', 'center' or 'right'
|
|
* @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
|
|
* @return {void}
|
|
*/
|
|
setPositionByOrigin: function(pos, originX, originY) {
|
|
var center = this.translateToCenterPoint(pos, originX, originY),
|
|
position = this.translateToOriginPoint(center, this.originX, this.originY);
|
|
|
|
this.set('left', position.x);
|
|
this.set('top', position.y);
|
|
},
|
|
|
|
/**
|
|
* @param {String} to One of 'left', 'center', 'right'
|
|
*/
|
|
adjustPosition: function(to) {
|
|
var angle = degreesToRadians(this.angle),
|
|
hypotFull = this.getWidth(),
|
|
xFull = Math.cos(angle) * hypotFull,
|
|
yFull = Math.sin(angle) * hypotFull,
|
|
offsetFrom, offsetTo;
|
|
|
|
//TODO: this function does not consider mixed situation like top, center.
|
|
if (typeof this.originX === 'string') {
|
|
offsetFrom = originXOffset[this.originX];
|
|
}
|
|
else {
|
|
offsetFrom = this.originX - 0.5;
|
|
}
|
|
if (typeof to === 'string') {
|
|
offsetTo = originXOffset[to];
|
|
}
|
|
else {
|
|
offsetTo = to - 0.5;
|
|
}
|
|
this.left += xFull * (offsetTo - offsetFrom);
|
|
this.top += yFull * (offsetTo - offsetFrom);
|
|
this.setCoords();
|
|
this.originX = to;
|
|
},
|
|
|
|
/**
|
|
* Sets the origin/position of the object to it's center point
|
|
* @private
|
|
* @return {void}
|
|
*/
|
|
_setOriginToCenter: function() {
|
|
this._originalOriginX = this.originX;
|
|
this._originalOriginY = this.originY;
|
|
|
|
var center = this.getCenterPoint();
|
|
|
|
this.originX = 'center';
|
|
this.originY = 'center';
|
|
|
|
this.left = center.x;
|
|
this.top = center.y;
|
|
},
|
|
|
|
/**
|
|
* Resets the origin/position of the object to it's original origin
|
|
* @private
|
|
* @return {void}
|
|
*/
|
|
_resetOrigin: function() {
|
|
var originPoint = this.translateToOriginPoint(
|
|
this.getCenterPoint(),
|
|
this._originalOriginX,
|
|
this._originalOriginY);
|
|
|
|
this.originX = this._originalOriginX;
|
|
this.originY = this._originalOriginY;
|
|
|
|
this.left = originPoint.x;
|
|
this.top = originPoint.y;
|
|
|
|
this._originalOriginX = null;
|
|
this._originalOriginY = null;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getLeftTopCoords: function() {
|
|
return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top');
|
|
}
|
|
});
|
|
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
function getCoords(oCoords) {
|
|
return [
|
|
new fabric.Point(oCoords.tl.x, oCoords.tl.y),
|
|
new fabric.Point(oCoords.tr.x, oCoords.tr.y),
|
|
new fabric.Point(oCoords.br.x, oCoords.br.y),
|
|
new fabric.Point(oCoords.bl.x, oCoords.bl.y)
|
|
];
|
|
}
|
|
|
|
var degreesToRadians = fabric.util.degreesToRadians,
|
|
multiplyMatrices = fabric.util.multiplyTransformMatrices;
|
|
|
|
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
|
|
|
/**
|
|
* Object containing coordinates of object's controls
|
|
* @type Object
|
|
* @default
|
|
*/
|
|
oCoords: null,
|
|
|
|
/**
|
|
* Checks if object intersects with an area formed by 2 points
|
|
* @param {Object} pointTL top-left point of area
|
|
* @param {Object} pointBR bottom-right point of area
|
|
* @return {Boolean} true if object intersects with an area formed by 2 points
|
|
*/
|
|
intersectsWithRect: function(pointTL, pointBR) {
|
|
var oCoords = getCoords(this.oCoords),
|
|
intersection = fabric.Intersection.intersectPolygonRectangle(
|
|
oCoords,
|
|
pointTL,
|
|
pointBR
|
|
);
|
|
return intersection.status === 'Intersection';
|
|
},
|
|
|
|
/**
|
|
* Checks if object intersects with another object
|
|
* @param {Object} other Object to test
|
|
* @return {Boolean} true if object intersects with another object
|
|
*/
|
|
intersectsWithObject: function(other) {
|
|
var intersection = fabric.Intersection.intersectPolygonPolygon(
|
|
getCoords(this.oCoords),
|
|
getCoords(other.oCoords)
|
|
);
|
|
|
|
return intersection.status === 'Intersection'
|
|
|| other.isContainedWithinObject(this)
|
|
|| this.isContainedWithinObject(other);
|
|
},
|
|
|
|
/**
|
|
* Checks if object is fully contained within area of another object
|
|
* @param {Object} other Object to test
|
|
* @return {Boolean} true if object is fully contained within area of another object
|
|
*/
|
|
isContainedWithinObject: function(other) {
|
|
var points = getCoords(this.oCoords),
|
|
i = 0;
|
|
for (; i < 4; i++) {
|
|
if (!other.containsPoint(points[i])) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Checks if object is fully contained within area formed by 2 points
|
|
* @param {Object} pointTL top-left point of area
|
|
* @param {Object} pointBR bottom-right point of area
|
|
* @return {Boolean} true if object is fully contained within area formed by 2 points
|
|
*/
|
|
isContainedWithinRect: function(pointTL, pointBR) {
|
|
var boundingRect = this.getBoundingRect();
|
|
|
|
return (
|
|
boundingRect.left >= pointTL.x &&
|
|
boundingRect.left + boundingRect.width <= pointBR.x &&
|
|
boundingRect.top >= pointTL.y &&
|
|
boundingRect.top + boundingRect.height <= pointBR.y
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Checks if point is inside the object
|
|
* @param {fabric.Point} point Point to check against
|
|
* @return {Boolean} true if point is inside the object
|
|
*/
|
|
containsPoint: function(point) {
|
|
if (!this.oCoords) {
|
|
this.setCoords();
|
|
}
|
|
var lines = this._getImageLines(this.oCoords),
|
|
xPoints = this._findCrossPoints(point, lines);
|
|
|
|
// if xPoints is odd then point is inside the object
|
|
return (xPoints !== 0 && xPoints % 2 === 1);
|
|
},
|
|
|
|
/**
|
|
* Method that returns an object with the object edges in it, given the coordinates of the corners
|
|
* @private
|
|
* @param {Object} oCoords Coordinates of the object corners
|
|
*/
|
|
_getImageLines: function(oCoords) {
|
|
return {
|
|
topline: {
|
|
o: oCoords.tl,
|
|
d: oCoords.tr
|
|
},
|
|
rightline: {
|
|
o: oCoords.tr,
|
|
d: oCoords.br
|
|
},
|
|
bottomline: {
|
|
o: oCoords.br,
|
|
d: oCoords.bl
|
|
},
|
|
leftline: {
|
|
o: oCoords.bl,
|
|
d: oCoords.tl
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Helper method to determine how many cross points are between the 4 object edges
|
|
* and the horizontal line determined by a point on canvas
|
|
* @private
|
|
* @param {fabric.Point} point Point to check
|
|
* @param {Object} oCoords Coordinates of the object being evaluated
|
|
*/
|
|
// remove yi, not used but left code here just in case.
|
|
_findCrossPoints: function(point, oCoords) {
|
|
var b1, b2, a1, a2, xi, // yi,
|
|
xcount = 0,
|
|
iLine;
|
|
|
|
for (var lineKey in oCoords) {
|
|
iLine = oCoords[lineKey];
|
|
// optimisation 1: line below point. no cross
|
|
if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) {
|
|
continue;
|
|
}
|
|
// optimisation 2: line above point. no cross
|
|
if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) {
|
|
continue;
|
|
}
|
|
// optimisation 3: vertical line case
|
|
if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) {
|
|
xi = iLine.o.x;
|
|
// yi = point.y;
|
|
}
|
|
// calculate the intersection point
|
|
else {
|
|
b1 = 0;
|
|
b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x);
|
|
a1 = point.y - b1 * point.x;
|
|
a2 = iLine.o.y - b2 * iLine.o.x;
|
|
|
|
xi = -(a1 - a2) / (b1 - b2);
|
|
// yi = a1 + b1 * xi;
|
|
}
|
|
// dont count xi < point.x cases
|
|
if (xi >= point.x) {
|
|
xcount += 1;
|
|
}
|
|
// optimisation 4: specific for square images
|
|
if (xcount === 2) {
|
|
break;
|
|
}
|
|
}
|
|
return xcount;
|
|
},
|
|
|
|
/**
|
|
* Returns width of an object's bounding rectangle
|
|
* @deprecated since 1.0.4
|
|
* @return {Number} width value
|
|
*/
|
|
getBoundingRectWidth: function() {
|
|
return this.getBoundingRect().width;
|
|
},
|
|
|
|
/**
|
|
* Returns height of an object's bounding rectangle
|
|
* @deprecated since 1.0.4
|
|
* @return {Number} height value
|
|
*/
|
|
getBoundingRectHeight: function() {
|
|
return this.getBoundingRect().height;
|
|
},
|
|
|
|
/**
|
|
* Returns coordinates of object's bounding rectangle (left, top, width, height)
|
|
* @return {Object} Object with left, top, width, height properties
|
|
*/
|
|
getBoundingRect: function() {
|
|
this.oCoords || this.setCoords();
|
|
return fabric.util.makeBoundingBoxFromPoints([
|
|
this.oCoords.tl,
|
|
this.oCoords.tr,
|
|
this.oCoords.br,
|
|
this.oCoords.bl
|
|
]);
|
|
},
|
|
|
|
/**
|
|
* Returns width of an object bounding box counting transformations
|
|
* @return {Number} width value
|
|
*/
|
|
getWidth: function() {
|
|
return this._getTransformedDimensions().x;
|
|
},
|
|
|
|
/**
|
|
* Returns height of an object bounding box counting transformations
|
|
* to be renamed in 2.0
|
|
* @return {Number} height value
|
|
*/
|
|
getHeight: function() {
|
|
return this._getTransformedDimensions().y;
|
|
},
|
|
|
|
/**
|
|
* Makes sure the scale is valid and modifies it if necessary
|
|
* @private
|
|
* @param {Number} value
|
|
* @return {Number}
|
|
*/
|
|
_constrainScale: function(value) {
|
|
if (Math.abs(value) < this.minScaleLimit) {
|
|
if (value < 0) {
|
|
return -this.minScaleLimit;
|
|
}
|
|
else {
|
|
return this.minScaleLimit;
|
|
}
|
|
}
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Scales an object (equally by x and y)
|
|
* @param {Number} value Scale factor
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
scale: function(value) {
|
|
value = this._constrainScale(value);
|
|
|
|
if (value < 0) {
|
|
this.flipX = !this.flipX;
|
|
this.flipY = !this.flipY;
|
|
value *= -1;
|
|
}
|
|
|
|
this.scaleX = value;
|
|
this.scaleY = value;
|
|
this.setCoords();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
|
|
* @param {Number} value New width value
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
scaleToWidth: function(value) {
|
|
// adjust to bounding rect factor so that rotated shapes would fit as well
|
|
var boundingRectFactor = this.getBoundingRect().width / this.getWidth();
|
|
return this.scale(value / this.width / boundingRectFactor);
|
|
},
|
|
|
|
/**
|
|
* Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
|
|
* @param {Number} value New height value
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
scaleToHeight: function(value) {
|
|
// adjust to bounding rect factor so that rotated shapes would fit as well
|
|
var boundingRectFactor = this.getBoundingRect().height / this.getHeight();
|
|
return this.scale(value / this.height / boundingRectFactor);
|
|
},
|
|
|
|
/**
|
|
* Sets corner position coordinates based on current angle, width and height
|
|
* See https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
setCoords: function() {
|
|
var theta = degreesToRadians(this.angle),
|
|
vpt = this.getViewportTransform(),
|
|
dim = this._calculateCurrentDimensions(),
|
|
currentWidth = dim.x, currentHeight = dim.y;
|
|
|
|
// If width is negative, make postive. Fixes path selection issue
|
|
if (currentWidth < 0) {
|
|
currentWidth = Math.abs(currentWidth);
|
|
}
|
|
|
|
var sinTh = Math.sin(theta),
|
|
cosTh = Math.cos(theta),
|
|
_angle = currentWidth > 0 ? Math.atan(currentHeight / currentWidth) : 0,
|
|
_hypotenuse = (currentWidth / Math.cos(_angle)) / 2,
|
|
offsetX = Math.cos(_angle + theta) * _hypotenuse,
|
|
offsetY = Math.sin(_angle + theta) * _hypotenuse,
|
|
|
|
// offset added for rotate and scale actions
|
|
coords = fabric.util.transformPoint(this.getCenterPoint(), vpt),
|
|
tl = new fabric.Point(coords.x - offsetX, coords.y - offsetY),
|
|
tr = new fabric.Point(tl.x + (currentWidth * cosTh), tl.y + (currentWidth * sinTh)),
|
|
bl = new fabric.Point(tl.x - (currentHeight * sinTh), tl.y + (currentHeight * cosTh)),
|
|
br = new fabric.Point(coords.x + offsetX, coords.y + offsetY),
|
|
ml = new fabric.Point((tl.x + bl.x) / 2, (tl.y + bl.y) / 2),
|
|
mt = new fabric.Point((tr.x + tl.x) / 2, (tr.y + tl.y) / 2),
|
|
mr = new fabric.Point((br.x + tr.x) / 2, (br.y + tr.y) / 2),
|
|
mb = new fabric.Point((br.x + bl.x) / 2, (br.y + bl.y) / 2),
|
|
mtr = new fabric.Point(mt.x + sinTh * this.rotatingPointOffset, mt.y - cosTh * this.rotatingPointOffset);
|
|
// debugging
|
|
|
|
/* setTimeout(function() {
|
|
canvas.contextTop.fillStyle = 'green';
|
|
canvas.contextTop.fillRect(mb.x, mb.y, 3, 3);
|
|
canvas.contextTop.fillRect(bl.x, bl.y, 3, 3);
|
|
canvas.contextTop.fillRect(br.x, br.y, 3, 3);
|
|
canvas.contextTop.fillRect(tl.x, tl.y, 3, 3);
|
|
canvas.contextTop.fillRect(tr.x, tr.y, 3, 3);
|
|
canvas.contextTop.fillRect(ml.x, ml.y, 3, 3);
|
|
canvas.contextTop.fillRect(mr.x, mr.y, 3, 3);
|
|
canvas.contextTop.fillRect(mt.x, mt.y, 3, 3);
|
|
canvas.contextTop.fillRect(mtr.x, mtr.y, 3, 3);
|
|
}, 50); */
|
|
|
|
this.oCoords = {
|
|
// corners
|
|
tl: tl, tr: tr, br: br, bl: bl,
|
|
// middle
|
|
ml: ml, mt: mt, mr: mr, mb: mb,
|
|
// rotating point
|
|
mtr: mtr
|
|
};
|
|
|
|
// set coordinates of the draggable boxes in the corners used to scale/rotate the image
|
|
this._setCornerCoords && this._setCornerCoords();
|
|
|
|
return this;
|
|
},
|
|
|
|
/*
|
|
* calculate rotation matrix of an object
|
|
* @return {Array} rotation matrix for the object
|
|
*/
|
|
_calcRotateMatrix: function() {
|
|
if (this.angle) {
|
|
var theta = degreesToRadians(this.angle), cos = Math.cos(theta), sin = Math.sin(theta);
|
|
return [cos, sin, -sin, cos, 0, 0];
|
|
}
|
|
return [1, 0, 0, 1, 0, 0];
|
|
},
|
|
|
|
/*
|
|
* calculate trasform Matrix that represent current transformation from
|
|
* object properties.
|
|
* @return {Array} matrix Transform Matrix for the object
|
|
*/
|
|
calcTransformMatrix: function() {
|
|
var center = this.getCenterPoint(),
|
|
translateMatrix = [1, 0, 0, 1, center.x, center.y],
|
|
rotateMatrix = this._calcRotateMatrix(),
|
|
dimensionMatrix = this._calcDimensionsTransformMatrix(this.skewX, this.skewY, true),
|
|
matrix = this.group ? this.group.calcTransformMatrix() : [1, 0, 0, 1, 0, 0];
|
|
matrix = multiplyMatrices(matrix, translateMatrix);
|
|
matrix = multiplyMatrices(matrix, rotateMatrix);
|
|
matrix = multiplyMatrices(matrix, dimensionMatrix);
|
|
return matrix;
|
|
},
|
|
|
|
_calcDimensionsTransformMatrix: function(skewX, skewY, flipping) {
|
|
var skewMatrixX = [1, 0, Math.tan(degreesToRadians(skewX)), 1],
|
|
skewMatrixY = [1, Math.tan(degreesToRadians(skewY)), 0, 1],
|
|
scaleX = this.scaleX * (flipping && this.flipX ? -1 : 1),
|
|
scaleY = this.scaleY * (flipping && this.flipY ? -1 : 1),
|
|
scaleMatrix = [scaleX, 0, 0, scaleY],
|
|
m = multiplyMatrices(scaleMatrix, skewMatrixX, true);
|
|
return multiplyMatrices(m, skewMatrixY, true);
|
|
}
|
|
});
|
|
})();
|
|
|
|
|
|
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
|
|
|
/**
|
|
* Moves an object to the bottom of the stack of drawn objects
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
sendToBack: function() {
|
|
if (this.group) {
|
|
fabric.StaticCanvas.prototype.sendToBack.call(this.group, this);
|
|
}
|
|
else {
|
|
this.canvas.sendToBack(this);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Moves an object to the top of the stack of drawn objects
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
bringToFront: function() {
|
|
if (this.group) {
|
|
fabric.StaticCanvas.prototype.bringToFront.call(this.group, this);
|
|
}
|
|
else {
|
|
this.canvas.bringToFront(this);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Moves an object down in stack of drawn objects
|
|
* @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
sendBackwards: function(intersecting) {
|
|
if (this.group) {
|
|
fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting);
|
|
}
|
|
else {
|
|
this.canvas.sendBackwards(this, intersecting);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Moves an object up in stack of drawn objects
|
|
* @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
bringForward: function(intersecting) {
|
|
if (this.group) {
|
|
fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting);
|
|
}
|
|
else {
|
|
this.canvas.bringForward(this, intersecting);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Moves an object to specified level in stack of drawn objects
|
|
* @param {Number} index New position of object
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
moveTo: function(index) {
|
|
if (this.group) {
|
|
fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index);
|
|
}
|
|
else {
|
|
this.canvas.moveTo(this, index);
|
|
}
|
|
return this;
|
|
}
|
|
});
|
|
|
|
|
|
/* _TO_SVG_START_ */
|
|
(function() {
|
|
|
|
function getSvgColorString(prop, value) {
|
|
if (!value) {
|
|
return prop + ': none; ';
|
|
}
|
|
else if (value.toLive) {
|
|
return prop + ': url(#SVGID_' + value.id + '); ';
|
|
}
|
|
else {
|
|
var color = new fabric.Color(value),
|
|
str = prop + ': ' + color.toRgb() + '; ',
|
|
opacity = color.getAlpha();
|
|
if (opacity !== 1) {
|
|
//change the color in rgb + opacity
|
|
str += prop + '-opacity: ' + opacity.toString() + '; ';
|
|
}
|
|
return str;
|
|
}
|
|
}
|
|
|
|
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
|
/**
|
|
* Returns styles-string for svg-export
|
|
* @param {Boolean} skipShadow a boolean to skip shadow filter output
|
|
* @return {String}
|
|
*/
|
|
getSvgStyles: function(skipShadow) {
|
|
|
|
var fillRule = this.fillRule,
|
|
strokeWidth = this.strokeWidth ? this.strokeWidth : '0',
|
|
strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none',
|
|
strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt',
|
|
strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter',
|
|
strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4',
|
|
opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1',
|
|
visibility = this.visible ? '' : ' visibility: hidden;',
|
|
filter = skipShadow ? '' : this.getSvgFilter(),
|
|
fill = getSvgColorString('fill', this.fill),
|
|
stroke = getSvgColorString('stroke', this.stroke);
|
|
|
|
return [
|
|
stroke,
|
|
'stroke-width: ', strokeWidth, '; ',
|
|
'stroke-dasharray: ', strokeDashArray, '; ',
|
|
'stroke-linecap: ', strokeLineCap, '; ',
|
|
'stroke-linejoin: ', strokeLineJoin, '; ',
|
|
'stroke-miterlimit: ', strokeMiterLimit, '; ',
|
|
fill,
|
|
'fill-rule: ', fillRule, '; ',
|
|
'opacity: ', opacity, ';',
|
|
filter,
|
|
visibility
|
|
].join('');
|
|
},
|
|
|
|
/**
|
|
* Returns filter for svg shadow
|
|
* @return {String}
|
|
*/
|
|
getSvgFilter: function() {
|
|
return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : '';
|
|
},
|
|
|
|
/**
|
|
* Returns id attribute for svg output
|
|
* @return {String}
|
|
*/
|
|
getSvgId: function() {
|
|
return this.id ? 'id="' + this.id + '" ' : '';
|
|
},
|
|
|
|
/**
|
|
* Returns transform-string for svg-export
|
|
* @return {String}
|
|
*/
|
|
getSvgTransform: function() {
|
|
if (this.group && this.group.type === 'path-group') {
|
|
return '';
|
|
}
|
|
var toFixed = fabric.util.toFixed,
|
|
angle = this.getAngle(),
|
|
skewX = (this.getSkewX() % 360),
|
|
skewY = (this.getSkewY() % 360),
|
|
center = this.getCenterPoint(),
|
|
|
|
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
|
|
|
|
translatePart = this.type === 'path-group' ? '' : 'translate(' +
|
|
toFixed(center.x, NUM_FRACTION_DIGITS) +
|
|
' ' +
|
|
toFixed(center.y, NUM_FRACTION_DIGITS) +
|
|
')',
|
|
|
|
anglePart = angle !== 0
|
|
? (' rotate(' + toFixed(angle, NUM_FRACTION_DIGITS) + ')')
|
|
: '',
|
|
|
|
scalePart = (this.scaleX === 1 && this.scaleY === 1)
|
|
? '' :
|
|
(' scale(' +
|
|
toFixed(this.scaleX, NUM_FRACTION_DIGITS) +
|
|
' ' +
|
|
toFixed(this.scaleY, NUM_FRACTION_DIGITS) +
|
|
')'),
|
|
|
|
skewXPart = skewX !== 0 ? ' skewX(' + toFixed(skewX, NUM_FRACTION_DIGITS) + ')' : '',
|
|
|
|
skewYPart = skewY !== 0 ? ' skewY(' + toFixed(skewY, NUM_FRACTION_DIGITS) + ')' : '',
|
|
|
|
addTranslateX = this.type === 'path-group' ? this.width : 0,
|
|
|
|
flipXPart = this.flipX ? ' matrix(-1 0 0 1 ' + addTranslateX + ' 0) ' : '',
|
|
|
|
addTranslateY = this.type === 'path-group' ? this.height : 0,
|
|
|
|
flipYPart = this.flipY ? ' matrix(1 0 0 -1 0 ' + addTranslateY + ')' : '';
|
|
|
|
return [
|
|
translatePart, anglePart, scalePart, flipXPart, flipYPart, skewXPart, skewYPart
|
|
].join('');
|
|
},
|
|
|
|
/**
|
|
* Returns transform-string for svg-export from the transform matrix of single elements
|
|
* @return {String}
|
|
*/
|
|
getSvgTransformMatrix: function() {
|
|
return this.transformMatrix ? ' matrix(' + this.transformMatrix.join(' ') + ') ' : '';
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_createBaseSVGMarkup: 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));
|
|
}
|
|
if (this.shadow) {
|
|
markup.push(this.shadow.toSVG(this));
|
|
}
|
|
return markup;
|
|
}
|
|
});
|
|
})();
|
|
/* _TO_SVG_END_ */
|
|
|
|
|
|
(function() {
|
|
|
|
var extend = fabric.util.object.extend;
|
|
|
|
/*
|
|
Depends on `stateProperties`
|
|
*/
|
|
function saveProps(origin, destination, props) {
|
|
var tmpObj = { }, deep = true;
|
|
props.forEach(function(prop) {
|
|
tmpObj[prop] = origin[prop];
|
|
});
|
|
extend(origin[destination], tmpObj, deep);
|
|
}
|
|
|
|
function _isEqual(origValue, currentValue) {
|
|
if (!fabric.isLikelyNode && origValue instanceof Element) {
|
|
// avoid checking deep html elements
|
|
return origValue === currentValue;
|
|
}
|
|
else if (origValue instanceof Array) {
|
|
if (origValue.length !== currentValue.length) {
|
|
return false
|
|
}
|
|
var _currentValue = currentValue.concat().sort(),
|
|
_origValue = origValue.concat().sort();
|
|
return !_origValue.some(function(v, i) {
|
|
return !_isEqual(_currentValue[i], v);
|
|
});
|
|
}
|
|
else if (origValue instanceof Object) {
|
|
for (var key in origValue) {
|
|
if (!_isEqual(origValue[key], currentValue[key])) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
else {
|
|
return origValue === currentValue;
|
|
}
|
|
}
|
|
|
|
|
|
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
|
|
|
/**
|
|
* Returns true if object state (one of its state properties) was changed
|
|
* @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called
|
|
*/
|
|
hasStateChanged: function() {
|
|
return !_isEqual(this.originalState, this);
|
|
},
|
|
|
|
/**
|
|
* Saves state of an object
|
|
* @param {Object} [options] Object with additional `stateProperties` array to include when saving state
|
|
* @return {fabric.Object} thisArg
|
|
*/
|
|
saveState: function(options) {
|
|
saveProps(this, 'originalState', this.stateProperties);
|
|
if (options && options.stateProperties) {
|
|
saveProps(this, 'originalState', options.stateProperties);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Setups state of an object
|
|
* @param {Object} [options] Object with additional `stateProperties` array to include when saving state
|
|
* @return {fabric.Object} thisArg
|
|
*/
|
|
setupState: function(options) {
|
|
this.originalState = { };
|
|
this.saveState(options);
|
|
return this;
|
|
}
|
|
});
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
var degreesToRadians = fabric.util.degreesToRadians,
|
|
/* eslint-disable camelcase */
|
|
isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; };
|
|
/* eslint-enable camelcase */
|
|
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
|
|
|
/**
|
|
* The object interactivity controls.
|
|
* @private
|
|
*/
|
|
_controlsVisibility: null,
|
|
|
|
/**
|
|
* Determines which corner has been clicked
|
|
* @private
|
|
* @param {Object} pointer The pointer indicating the mouse position
|
|
* @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found
|
|
*/
|
|
_findTargetCorner: function(pointer) {
|
|
if (!this.hasControls || !this.active) {
|
|
return false;
|
|
}
|
|
|
|
var ex = pointer.x,
|
|
ey = pointer.y,
|
|
xPoints,
|
|
lines;
|
|
this.__corner = 0;
|
|
for (var i in this.oCoords) {
|
|
|
|
if (!this.isControlVisible(i)) {
|
|
continue;
|
|
}
|
|
|
|
if (i === 'mtr' && !this.hasRotatingPoint) {
|
|
continue;
|
|
}
|
|
|
|
if (this.get('lockUniScaling') &&
|
|
(i === 'mt' || i === 'mr' || i === 'mb' || i === 'ml')) {
|
|
continue;
|
|
}
|
|
|
|
lines = this._getImageLines(this.oCoords[i].corner);
|
|
|
|
// debugging
|
|
|
|
// canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2);
|
|
// canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2);
|
|
|
|
// canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2);
|
|
// canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2);
|
|
|
|
// canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2);
|
|
// canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2);
|
|
|
|
// canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2);
|
|
// canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2);
|
|
|
|
xPoints = this._findCrossPoints({ x: ex, y: ey }, lines);
|
|
if (xPoints !== 0 && xPoints % 2 === 1) {
|
|
this.__corner = i;
|
|
return i;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Sets the coordinates of the draggable boxes in the corners of
|
|
* the image used to scale/rotate it.
|
|
* @private
|
|
*/
|
|
_setCornerCoords: function() {
|
|
var coords = this.oCoords,
|
|
newTheta = degreesToRadians(45 - this.angle),
|
|
/* Math.sqrt(2 * Math.pow(this.cornerSize, 2)) / 2, */
|
|
/* 0.707106 stands for sqrt(2)/2 */
|
|
cornerHypotenuse = this.cornerSize * 0.707106,
|
|
cosHalfOffset = cornerHypotenuse * Math.cos(newTheta),
|
|
sinHalfOffset = cornerHypotenuse * Math.sin(newTheta),
|
|
x, y;
|
|
|
|
for (var point in coords) {
|
|
x = coords[point].x;
|
|
y = coords[point].y;
|
|
coords[point].corner = {
|
|
tl: {
|
|
x: x - sinHalfOffset,
|
|
y: y - cosHalfOffset
|
|
},
|
|
tr: {
|
|
x: x + cosHalfOffset,
|
|
y: y - sinHalfOffset
|
|
},
|
|
bl: {
|
|
x: x - cosHalfOffset,
|
|
y: y + sinHalfOffset
|
|
},
|
|
br: {
|
|
x: x + sinHalfOffset,
|
|
y: y + cosHalfOffset
|
|
}
|
|
};
|
|
}
|
|
},
|
|
|
|
/*
|
|
* Calculate object dimensions from its properties
|
|
* @private
|
|
*/
|
|
_getNonTransformedDimensions: function() {
|
|
var strokeWidth = this.strokeWidth,
|
|
w = this.width,
|
|
h = this.height,
|
|
addStrokeToW = true,
|
|
addStrokeToH = true;
|
|
|
|
if (this.type === 'line' && this.strokeLineCap === 'butt') {
|
|
addStrokeToH = w;
|
|
addStrokeToW = h;
|
|
}
|
|
|
|
if (addStrokeToH) {
|
|
h += h < 0 ? -strokeWidth : strokeWidth;
|
|
}
|
|
|
|
if (addStrokeToW) {
|
|
w += w < 0 ? -strokeWidth : strokeWidth;
|
|
}
|
|
|
|
return { x: w, y: h };
|
|
},
|
|
|
|
/*
|
|
* @private
|
|
*/
|
|
_getTransformedDimensions: function(skewX, skewY) {
|
|
if (typeof skewX === 'undefined') {
|
|
skewX = this.skewX;
|
|
}
|
|
if (typeof skewY === 'undefined') {
|
|
skewY = this.skewY;
|
|
}
|
|
var dimensions = this._getNonTransformedDimensions(),
|
|
dimX = dimensions.x / 2, dimY = dimensions.y / 2,
|
|
points = [
|
|
{
|
|
x: -dimX,
|
|
y: -dimY
|
|
},
|
|
{
|
|
x: dimX,
|
|
y: -dimY
|
|
},
|
|
{
|
|
x: -dimX,
|
|
y: dimY
|
|
},
|
|
{
|
|
x: dimX,
|
|
y: dimY
|
|
}],
|
|
i, transformMatrix = this._calcDimensionsTransformMatrix(skewX, skewY, false),
|
|
bbox;
|
|
for (i = 0; i < points.length; i++) {
|
|
points[i] = fabric.util.transformPoint(points[i], transformMatrix);
|
|
}
|
|
bbox = fabric.util.makeBoundingBoxFromPoints(points);
|
|
return { x: bbox.width, y: bbox.height };
|
|
},
|
|
|
|
/*
|
|
* private
|
|
*/
|
|
_calculateCurrentDimensions: function() {
|
|
var vpt = this.getViewportTransform(),
|
|
dim = this._getTransformedDimensions(),
|
|
w = dim.x, h = dim.y,
|
|
p = fabric.util.transformPoint(new fabric.Point(w, h), vpt, true);
|
|
|
|
return p.scalarAdd(2 * this.padding);
|
|
},
|
|
|
|
/**
|
|
* Draws a colored layer behind the object, inside its selection borders.
|
|
* Requires public options: padding, selectionBackgroundColor
|
|
* this function is called when the context is transformed
|
|
* @param {CanvasRenderingContext2D} ctx Context to draw on
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
drawSelectionBackground: function(ctx) {
|
|
if (!this.selectionBackgroundColor || this.group || !this.active) {
|
|
return this;
|
|
}
|
|
ctx.save();
|
|
var center = this.getCenterPoint(), wh = this._calculateCurrentDimensions(),
|
|
vpt = this.canvas.viewportTransform;
|
|
ctx.translate(center.x, center.y);
|
|
ctx.scale(1 / vpt[0], 1 / vpt[3]);
|
|
ctx.rotate(degreesToRadians(this.angle));
|
|
ctx.fillStyle = this.selectionBackgroundColor;
|
|
ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y);
|
|
ctx.restore();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Draws borders of an object's bounding box.
|
|
* Requires public properties: width, height
|
|
* Requires public options: padding, borderColor
|
|
* @param {CanvasRenderingContext2D} ctx Context to draw on
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
drawBorders: function(ctx) {
|
|
if (!this.hasBorders) {
|
|
return this;
|
|
}
|
|
|
|
var wh = this._calculateCurrentDimensions(),
|
|
strokeWidth = 1 / this.borderScaleFactor,
|
|
width = wh.x + strokeWidth,
|
|
height = wh.y + strokeWidth;
|
|
|
|
ctx.save();
|
|
ctx.strokeStyle = this.borderColor;
|
|
this._setLineDash(ctx, this.borderDashArray, null);
|
|
|
|
ctx.strokeRect(
|
|
-width / 2,
|
|
-height / 2,
|
|
width,
|
|
height
|
|
);
|
|
|
|
if (this.hasRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && this.hasControls) {
|
|
|
|
var rotateHeight = -height / 2;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, rotateHeight);
|
|
ctx.lineTo(0, rotateHeight - this.rotatingPointOffset);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
}
|
|
|
|
ctx.restore();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Draws borders of an object's bounding box when it is inside a group.
|
|
* Requires public properties: width, height
|
|
* Requires public options: padding, borderColor
|
|
* @param {CanvasRenderingContext2D} ctx Context to draw on
|
|
* @param {object} options object representing current object parameters
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
drawBordersInGroup: function(ctx, options) {
|
|
if (!this.hasBorders) {
|
|
return this;
|
|
}
|
|
|
|
var p = this._getNonTransformedDimensions(),
|
|
matrix = fabric.util.customTransformMatrix(options.scaleX, options.scaleY, options.skewX),
|
|
wh = fabric.util.transformPoint(p, matrix),
|
|
strokeWidth = 1 / this.borderScaleFactor,
|
|
width = wh.x + strokeWidth + 2 * this.padding,
|
|
height = wh.y + strokeWidth + 2 * this.padding;
|
|
|
|
ctx.save();
|
|
this._setLineDash(ctx, this.borderDashArray, null);
|
|
ctx.strokeStyle = this.borderColor;
|
|
|
|
ctx.strokeRect(
|
|
-width / 2,
|
|
-height / 2,
|
|
width,
|
|
height
|
|
);
|
|
|
|
ctx.restore();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Draws corners of an object's bounding box.
|
|
* Requires public properties: width, height
|
|
* Requires public options: cornerSize, padding
|
|
* @param {CanvasRenderingContext2D} ctx Context to draw on
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
drawControls: function(ctx) {
|
|
if (!this.hasControls) {
|
|
return this;
|
|
}
|
|
|
|
var wh = this._calculateCurrentDimensions(),
|
|
width = wh.x,
|
|
height = wh.y,
|
|
scaleOffset = this.cornerSize,
|
|
left = -(width + scaleOffset) / 2,
|
|
top = -(height + scaleOffset) / 2,
|
|
methodName = this.transparentCorners ? 'stroke' : 'fill';
|
|
|
|
ctx.save();
|
|
ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
|
|
if (!this.transparentCorners) {
|
|
ctx.strokeStyle = this.cornerStrokeColor;
|
|
}
|
|
this._setLineDash(ctx, this.cornerDashArray, null);
|
|
|
|
// top-left
|
|
this._drawControl('tl', ctx, methodName,
|
|
left,
|
|
top);
|
|
|
|
// top-right
|
|
this._drawControl('tr', ctx, methodName,
|
|
left + width,
|
|
top);
|
|
|
|
// bottom-left
|
|
this._drawControl('bl', ctx, methodName,
|
|
left,
|
|
top + height);
|
|
|
|
// bottom-right
|
|
this._drawControl('br', ctx, methodName,
|
|
left + width,
|
|
top + height);
|
|
|
|
if (!this.get('lockUniScaling')) {
|
|
|
|
// middle-top
|
|
this._drawControl('mt', ctx, methodName,
|
|
left + width / 2,
|
|
top);
|
|
|
|
// middle-bottom
|
|
this._drawControl('mb', ctx, methodName,
|
|
left + width / 2,
|
|
top + height);
|
|
|
|
// middle-right
|
|
this._drawControl('mr', ctx, methodName,
|
|
left + width,
|
|
top + height / 2);
|
|
|
|
// middle-left
|
|
this._drawControl('ml', ctx, methodName,
|
|
left,
|
|
top + height / 2);
|
|
}
|
|
|
|
// middle-top-rotate
|
|
if (this.hasRotatingPoint) {
|
|
this._drawControl('mtr', ctx, methodName,
|
|
left + width / 2,
|
|
top - this.rotatingPointOffset);
|
|
}
|
|
|
|
ctx.restore();
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_drawControl: function(control, ctx, methodName, left, top) {
|
|
if (!this.isControlVisible(control)) {
|
|
return;
|
|
}
|
|
var size = this.cornerSize, stroke = !this.transparentCorners && this.cornerStrokeColor;
|
|
switch (this.cornerStyle) {
|
|
case 'circle':
|
|
ctx.beginPath();
|
|
ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
|
|
ctx[methodName]();
|
|
if (stroke) {
|
|
ctx.stroke();
|
|
}
|
|
break;
|
|
default:
|
|
isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
|
|
ctx[methodName + 'Rect'](left, top, size, size);
|
|
if (stroke) {
|
|
ctx.strokeRect(left, top, size, size);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns true if the specified control is visible, false otherwise.
|
|
* @param {String} controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
|
|
* @returns {Boolean} true if the specified control is visible, false otherwise
|
|
*/
|
|
isControlVisible: function(controlName) {
|
|
return this._getControlsVisibility()[controlName];
|
|
},
|
|
|
|
/**
|
|
* Sets the visibility of the specified control.
|
|
* @param {String} controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
|
|
* @param {Boolean} visible true to set the specified control visible, false otherwise
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
setControlVisible: function(controlName, visible) {
|
|
this._getControlsVisibility()[controlName] = visible;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets the visibility state of object controls.
|
|
* @param {Object} [options] Options object
|
|
* @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it
|
|
* @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it
|
|
* @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it
|
|
* @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it
|
|
* @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it
|
|
* @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it
|
|
* @param {Boolean} [options.tl] true to enable the top-left control, false to disable it
|
|
* @param {Boolean} [options.tr] true to enable the top-right control, false to disable it
|
|
* @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
setControlsVisibility: function(options) {
|
|
options || (options = { });
|
|
|
|
for (var p in options) {
|
|
this.setControlVisible(p, options[p]);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns the instance of the control visibility set for this object.
|
|
* @private
|
|
* @returns {Object}
|
|
*/
|
|
_getControlsVisibility: function() {
|
|
if (!this._controlsVisibility) {
|
|
this._controlsVisibility = {
|
|
tl: true,
|
|
tr: true,
|
|
br: true,
|
|
bl: true,
|
|
ml: true,
|
|
mt: true,
|
|
mr: true,
|
|
mb: true,
|
|
mtr: true
|
|
};
|
|
}
|
|
return this._controlsVisibility;
|
|
}
|
|
});
|
|
})();
|
|
|
|
|
|
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
|
|
|
|
/**
|
|
* Animation duration (in ms) for fx* methods
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
FX_DURATION: 500,
|
|
|
|
/**
|
|
* Centers object horizontally with animation.
|
|
* @param {fabric.Object} object Object to center
|
|
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
|
|
* @param {Function} [callbacks.onComplete] Invoked on completion
|
|
* @param {Function} [callbacks.onChange] Invoked on every step of animation
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
fxCenterObjectH: function (object, callbacks) {
|
|
callbacks = callbacks || { };
|
|
|
|
var empty = function() { },
|
|
onComplete = callbacks.onComplete || empty,
|
|
onChange = callbacks.onChange || empty,
|
|
_this = this;
|
|
|
|
fabric.util.animate({
|
|
startValue: object.get('left'),
|
|
endValue: this.getCenter().left,
|
|
duration: this.FX_DURATION,
|
|
onChange: function(value) {
|
|
object.set('left', value);
|
|
_this.renderAll();
|
|
onChange();
|
|
},
|
|
onComplete: function() {
|
|
object.setCoords();
|
|
onComplete();
|
|
}
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Centers object vertically with animation.
|
|
* @param {fabric.Object} object Object to center
|
|
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
|
|
* @param {Function} [callbacks.onComplete] Invoked on completion
|
|
* @param {Function} [callbacks.onChange] Invoked on every step of animation
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
fxCenterObjectV: function (object, callbacks) {
|
|
callbacks = callbacks || { };
|
|
|
|
var empty = function() { },
|
|
onComplete = callbacks.onComplete || empty,
|
|
onChange = callbacks.onChange || empty,
|
|
_this = this;
|
|
|
|
fabric.util.animate({
|
|
startValue: object.get('top'),
|
|
endValue: this.getCenter().top,
|
|
duration: this.FX_DURATION,
|
|
onChange: function(value) {
|
|
object.set('top', value);
|
|
_this.renderAll();
|
|
onChange();
|
|
},
|
|
onComplete: function() {
|
|
object.setCoords();
|
|
onComplete();
|
|
}
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Same as `fabric.Canvas#remove` but animated
|
|
* @param {fabric.Object} object Object to remove
|
|
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
|
|
* @param {Function} [callbacks.onComplete] Invoked on completion
|
|
* @param {Function} [callbacks.onChange] Invoked on every step of animation
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
fxRemove: function (object, callbacks) {
|
|
callbacks = callbacks || { };
|
|
|
|
var empty = function() { },
|
|
onComplete = callbacks.onComplete || empty,
|
|
onChange = callbacks.onChange || empty,
|
|
_this = this;
|
|
|
|
fabric.util.animate({
|
|
startValue: object.get('opacity'),
|
|
endValue: 0,
|
|
duration: this.FX_DURATION,
|
|
onStart: function() {
|
|
object.set('active', false);
|
|
},
|
|
onChange: function(value) {
|
|
object.set('opacity', value);
|
|
_this.renderAll();
|
|
onChange();
|
|
},
|
|
onComplete: function () {
|
|
_this.remove(object);
|
|
onComplete();
|
|
}
|
|
});
|
|
|
|
return this;
|
|
}
|
|
});
|
|
|
|
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
|
/**
|
|
* Animates object's properties
|
|
* @param {String|Object} property Property to animate (if string) or properties to animate (if object)
|
|
* @param {Number|Object} value Value to animate property to (if string was given first) or options object
|
|
* @return {fabric.Object} thisArg
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation}
|
|
* @chainable
|
|
*
|
|
* As object — multiple properties
|
|
*
|
|
* object.animate({ left: ..., top: ... });
|
|
* object.animate({ left: ..., top: ... }, { duration: ... });
|
|
*
|
|
* As string — one property
|
|
*
|
|
* object.animate('left', ...);
|
|
* object.animate('left', { duration: ... });
|
|
*
|
|
*/
|
|
animate: function() {
|
|
if (arguments[0] && typeof arguments[0] === 'object') {
|
|
var propsToAnimate = [], prop, skipCallbacks;
|
|
for (prop in arguments[0]) {
|
|
propsToAnimate.push(prop);
|
|
}
|
|
for (var i = 0, len = propsToAnimate.length; i < len; i++) {
|
|
prop = propsToAnimate[i];
|
|
skipCallbacks = i !== len - 1;
|
|
this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks);
|
|
}
|
|
}
|
|
else {
|
|
this._animate.apply(this, arguments);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} property Property to animate
|
|
* @param {String} to Value to animate to
|
|
* @param {Object} [options] Options object
|
|
* @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked
|
|
*/
|
|
_animate: function(property, to, options, skipCallbacks) {
|
|
var _this = this, propPair;
|
|
|
|
to = to.toString();
|
|
|
|
if (!options) {
|
|
options = { };
|
|
}
|
|
else {
|
|
options = fabric.util.object.clone(options);
|
|
}
|
|
|
|
if (~property.indexOf('.')) {
|
|
propPair = property.split('.');
|
|
}
|
|
|
|
var currentValue = propPair
|
|
? this.get(propPair[0])[propPair[1]]
|
|
: this.get(property);
|
|
|
|
if (!('from' in options)) {
|
|
options.from = currentValue;
|
|
}
|
|
|
|
if (~to.indexOf('=')) {
|
|
to = currentValue + parseFloat(to.replace('=', ''));
|
|
}
|
|
else {
|
|
to = parseFloat(to);
|
|
}
|
|
|
|
fabric.util.animate({
|
|
startValue: options.from,
|
|
endValue: to,
|
|
byValue: options.by,
|
|
easing: options.easing,
|
|
duration: options.duration,
|
|
abort: options.abort && function() {
|
|
return options.abort.call(_this);
|
|
},
|
|
onChange: function(value) {
|
|
if (propPair) {
|
|
_this[propPair[0]][propPair[1]] = value;
|
|
}
|
|
else {
|
|
_this.set(property, value);
|
|
}
|
|
if (skipCallbacks) {
|
|
return;
|
|
}
|
|
options.onChange && options.onChange();
|
|
},
|
|
onComplete: function() {
|
|
if (skipCallbacks) {
|
|
return;
|
|
}
|
|
|
|
_this.setCoords();
|
|
options.onComplete && options.onComplete();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 },
|
|
supportsLineDash = fabric.StaticCanvas.supports('setLineDash');
|
|
|
|
if (fabric.Line) {
|
|
fabric.warn('fabric.Line is already defined');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Line class
|
|
* @class fabric.Line
|
|
* @extends fabric.Object
|
|
* @see {@link fabric.Line#initialize} for constructor definition
|
|
*/
|
|
fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'line',
|
|
|
|
/**
|
|
* x value or first line edge
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
x1: 0,
|
|
|
|
/**
|
|
* y value or first line edge
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
y1: 0,
|
|
|
|
/**
|
|
* x value or second line edge
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
x2: 0,
|
|
|
|
/**
|
|
* y value or second line edge
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
y2: 0,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Array} [points] Array of points
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Line} thisArg
|
|
*/
|
|
initialize: function(points, options) {
|
|
options = options || { };
|
|
|
|
if (!points) {
|
|
points = [0, 0, 0, 0];
|
|
}
|
|
|
|
this.callSuper('initialize', options);
|
|
|
|
this.set('x1', points[0]);
|
|
this.set('y1', points[1]);
|
|
this.set('x2', points[2]);
|
|
this.set('y2', points[3]);
|
|
|
|
this._setWidthHeight(options);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} [options] Options
|
|
*/
|
|
_setWidthHeight: function(options) {
|
|
options || (options = { });
|
|
|
|
this.width = Math.abs(this.x2 - this.x1);
|
|
this.height = Math.abs(this.y2 - this.y1);
|
|
|
|
this.left = 'left' in options
|
|
? options.left
|
|
: this._getLeftToOriginX();
|
|
|
|
this.top = 'top' in options
|
|
? options.top
|
|
: this._getTopToOriginY();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} key
|
|
* @param {*} value
|
|
*/
|
|
_set: function(key, value) {
|
|
this.callSuper('_set', key, value);
|
|
if (typeof coordProps[key] !== 'undefined') {
|
|
this._setWidthHeight();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line.
|
|
*/
|
|
_getLeftToOriginX: makeEdgeToOriginGetter(
|
|
{ // property names
|
|
origin: 'originX',
|
|
axis1: 'x1',
|
|
axis2: 'x2',
|
|
dimension: 'width'
|
|
},
|
|
{ // possible values of origin
|
|
nearest: 'left',
|
|
center: 'center',
|
|
farthest: 'right'
|
|
}
|
|
),
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} topToOriginY Distance from top edge of canvas to originY of Line.
|
|
*/
|
|
_getTopToOriginY: makeEdgeToOriginGetter(
|
|
{ // property names
|
|
origin: 'originY',
|
|
axis1: 'y1',
|
|
axis2: 'y2',
|
|
dimension: 'height'
|
|
},
|
|
{ // possible values of origin
|
|
nearest: 'top',
|
|
center: 'center',
|
|
farthest: 'bottom'
|
|
}
|
|
),
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
_render: function(ctx, noTransform) {
|
|
ctx.beginPath();
|
|
|
|
if (noTransform) {
|
|
// Line coords are distances from left-top of canvas to origin of line.
|
|
// To render line in a path-group, we need to translate them to
|
|
// distances from center of path-group to center of line.
|
|
var cp = this.getCenterPoint();
|
|
ctx.translate(
|
|
cp.x - this.strokeWidth / 2,
|
|
cp.y - this.strokeWidth / 2
|
|
);
|
|
}
|
|
|
|
if (!this.strokeDashArray || this.strokeDashArray && supportsLineDash) {
|
|
// move from center (of virtual box) to its left/top corner
|
|
// we can't assume x1, y1 is top left and x2, y2 is bottom right
|
|
var p = this.calcLinePoints();
|
|
ctx.moveTo(p.x1, p.y1);
|
|
ctx.lineTo(p.x2, p.y2);
|
|
}
|
|
|
|
ctx.lineWidth = this.strokeWidth;
|
|
|
|
// TODO: test this
|
|
// make sure setting "fill" changes color of a line
|
|
// (by copying fillStyle to strokeStyle, since line is stroked, not filled)
|
|
var origStrokeStyle = ctx.strokeStyle;
|
|
ctx.strokeStyle = this.stroke || ctx.fillStyle;
|
|
this.stroke && this._renderStroke(ctx);
|
|
ctx.strokeStyle = origStrokeStyle;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderDashedStroke: function(ctx) {
|
|
var p = this.calcLinePoints();
|
|
|
|
ctx.beginPath();
|
|
fabric.util.drawDashedLine(ctx, p.x1, p.y1, p.x2, p.y2, this.strokeDashArray);
|
|
ctx.closePath();
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @methd toObject
|
|
* @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 extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints());
|
|
},
|
|
|
|
/**
|
|
* Recalculates line points given width and height
|
|
* @private
|
|
*/
|
|
calcLinePoints: function() {
|
|
var xMult = this.x1 <= this.x2 ? -1 : 1,
|
|
yMult = this.y1 <= this.y2 ? -1 : 1,
|
|
x1 = (xMult * this.width * 0.5),
|
|
y1 = (yMult * this.height * 0.5),
|
|
x2 = (xMult * this.width * -0.5),
|
|
y2 = (yMult * this.height * -0.5);
|
|
|
|
return {
|
|
x1: x1,
|
|
x2: x2,
|
|
y1: y1,
|
|
y2: y2
|
|
};
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = this._createBaseSVGMarkup(),
|
|
p = { x1: this.x1, x2: this.x2, y1: this.y1, y2: this.y2 };
|
|
|
|
if (!(this.group && this.group.type === 'path-group')) {
|
|
p = this.calcLinePoints();
|
|
}
|
|
markup.push(
|
|
'<line ', this.getSvgId(),
|
|
'x1="', p.x1,
|
|
'" y1="', p.y1,
|
|
'" x2="', p.x2,
|
|
'" y2="', p.y2,
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(),
|
|
this.getSvgTransformMatrix(),
|
|
'"/>\n'
|
|
);
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity
|
|
*/
|
|
complexity: function() {
|
|
return 1;
|
|
}
|
|
});
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement})
|
|
* @static
|
|
* @memberOf fabric.Line
|
|
* @see http://www.w3.org/TR/SVG/shapes.html#LineElement
|
|
*/
|
|
fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' '));
|
|
|
|
/**
|
|
* Returns fabric.Line instance from an SVG element
|
|
* @static
|
|
* @memberOf fabric.Line
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Line} instance of fabric.Line
|
|
*/
|
|
fabric.Line.fromElement = function(element, options) {
|
|
var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES),
|
|
points = [
|
|
parsedAttributes.x1 || 0,
|
|
parsedAttributes.y1 || 0,
|
|
parsedAttributes.x2 || 0,
|
|
parsedAttributes.y2 || 0
|
|
];
|
|
return new fabric.Line(points, extend(parsedAttributes, options));
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns fabric.Line instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Line
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {function} [callback] invoked with new instance as first argument
|
|
* @return {fabric.Line} instance of fabric.Line
|
|
*/
|
|
fabric.Line.fromObject = function(object, callback) {
|
|
var points = [object.x1, object.y1, object.x2, object.y2],
|
|
line = new fabric.Line(points, object);
|
|
callback && callback(line);
|
|
return line;
|
|
};
|
|
|
|
/**
|
|
* Produces a function that calculates distance from canvas edge to Line origin.
|
|
*/
|
|
function makeEdgeToOriginGetter(propertyNames, originValues) {
|
|
var origin = propertyNames.origin,
|
|
axis1 = propertyNames.axis1,
|
|
axis2 = propertyNames.axis2,
|
|
dimension = propertyNames.dimension,
|
|
nearest = originValues.nearest,
|
|
center = originValues.center,
|
|
farthest = originValues.farthest;
|
|
|
|
return function() {
|
|
switch (this.get(origin)) {
|
|
case nearest:
|
|
return Math.min(this.get(axis1), this.get(axis2));
|
|
case center:
|
|
return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension));
|
|
case farthest:
|
|
return Math.max(this.get(axis1), this.get(axis2));
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
pi = Math.PI,
|
|
extend = fabric.util.object.extend;
|
|
|
|
if (fabric.Circle) {
|
|
fabric.warn('fabric.Circle is already defined.');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Circle class
|
|
* @class fabric.Circle
|
|
* @extends fabric.Object
|
|
* @see {@link fabric.Circle#initialize} for constructor definition
|
|
*/
|
|
fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'circle',
|
|
|
|
/**
|
|
* Radius of this circle
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
radius: 0,
|
|
|
|
/**
|
|
* Start angle of the circle, moving clockwise
|
|
* @type Number
|
|
* @default 0
|
|
*/
|
|
startAngle: 0,
|
|
|
|
/**
|
|
* End angle of the circle
|
|
* @type Number
|
|
* @default 2Pi
|
|
*/
|
|
endAngle: pi * 2,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Circle} thisArg
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
|
|
this.callSuper('initialize', options);
|
|
this.set('radius', options.radius || 0);
|
|
|
|
this.startAngle = options.startAngle || this.startAngle;
|
|
this.endAngle = options.endAngle || this.endAngle;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} key
|
|
* @param {*} value
|
|
* @return {fabric.Circle} thisArg
|
|
*/
|
|
_set: function(key, value) {
|
|
this.callSuper('_set', key, value);
|
|
|
|
if (key === 'radius') {
|
|
this.setRadius(value);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns 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) {
|
|
return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude));
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = this._createBaseSVGMarkup(), x = 0, y = 0,
|
|
angle = (this.endAngle - this.startAngle) % ( 2 * pi);
|
|
|
|
if (angle === 0) {
|
|
if (this.group && this.group.type === 'path-group') {
|
|
x = this.left + this.radius;
|
|
y = this.top + this.radius;
|
|
}
|
|
markup.push(
|
|
'<circle ', this.getSvgId(),
|
|
'cx="' + x + '" cy="' + y + '" ',
|
|
'r="', this.radius,
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(),
|
|
' ', this.getSvgTransformMatrix(),
|
|
'"/>\n'
|
|
);
|
|
}
|
|
else {
|
|
var startX = Math.cos(this.startAngle) * this.radius,
|
|
startY = Math.sin(this.startAngle) * this.radius,
|
|
endX = Math.cos(this.endAngle) * this.radius,
|
|
endY = Math.sin(this.endAngle) * this.radius,
|
|
largeFlag = angle > pi ? '1' : '0';
|
|
|
|
markup.push(
|
|
'<path d="M ' + startX + ' ' + startY,
|
|
' A ' + this.radius + ' ' + this.radius,
|
|
' 0 ', +largeFlag + ' 1', ' ' + endX + ' ' + endY,
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(),
|
|
' ', this.getSvgTransformMatrix(),
|
|
'"/>\n'
|
|
);
|
|
}
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx context to render on
|
|
* @param {Boolean} [noTransform] When true, context is not transformed
|
|
*/
|
|
_render: function(ctx, noTransform) {
|
|
ctx.beginPath();
|
|
ctx.arc(noTransform ? this.left + this.radius : 0,
|
|
noTransform ? this.top + this.radius : 0,
|
|
this.radius,
|
|
this.startAngle,
|
|
this.endAngle, false);
|
|
this._renderFill(ctx);
|
|
this._renderStroke(ctx);
|
|
},
|
|
|
|
/**
|
|
* Returns horizontal radius of an object (according to how an object is scaled)
|
|
* @return {Number}
|
|
*/
|
|
getRadiusX: function() {
|
|
return this.get('radius') * this.get('scaleX');
|
|
},
|
|
|
|
/**
|
|
* Returns vertical radius of an object (according to how an object is scaled)
|
|
* @return {Number}
|
|
*/
|
|
getRadiusY: function() {
|
|
return this.get('radius') * this.get('scaleY');
|
|
},
|
|
|
|
/**
|
|
* Sets radius of an object (and updates width accordingly)
|
|
* @return {fabric.Circle} thisArg
|
|
*/
|
|
setRadius: function(value) {
|
|
this.radius = value;
|
|
return this.set('width', value * 2).set('height', value * 2);
|
|
},
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity of this instance
|
|
*/
|
|
complexity: function() {
|
|
return 1;
|
|
}
|
|
});
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement})
|
|
* @static
|
|
* @memberOf fabric.Circle
|
|
* @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement
|
|
*/
|
|
fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' '));
|
|
|
|
/**
|
|
* Returns {@link fabric.Circle} instance from an SVG element
|
|
* @static
|
|
* @memberOf fabric.Circle
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Object} [options] Options object
|
|
* @throws {Error} If value of `r` attribute is missing or invalid
|
|
* @return {fabric.Circle} 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');
|
|
}
|
|
|
|
parsedAttributes.left = parsedAttributes.left || 0;
|
|
parsedAttributes.top = parsedAttributes.top || 0;
|
|
|
|
var obj = new fabric.Circle(extend(parsedAttributes, options));
|
|
|
|
obj.left -= obj.radius;
|
|
obj.top -= obj.radius;
|
|
return obj;
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
function isValidRadius(attributes) {
|
|
return (('radius' in attributes) && (attributes.radius >= 0));
|
|
}
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns {@link fabric.Circle} instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Circle
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {function} [callback] invoked with new instance as first argument
|
|
* @return {Object} Instance of fabric.Circle
|
|
*/
|
|
fabric.Circle.fromObject = function(object, callback) {
|
|
var circle = new fabric.Circle(object);
|
|
callback && callback(circle);
|
|
return circle;
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { });
|
|
|
|
if (fabric.Triangle) {
|
|
fabric.warn('fabric.Triangle is already defined');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Triangle class
|
|
* @class fabric.Triangle
|
|
* @extends fabric.Object
|
|
* @return {fabric.Triangle} thisArg
|
|
* @see {@link fabric.Triangle#initialize} for constructor definition
|
|
*/
|
|
fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'triangle',
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} [options] Options object
|
|
* @return {Object} thisArg
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
|
|
this.callSuper('initialize', options);
|
|
|
|
this.set('width', options.width || 100)
|
|
.set('height', options.height || 100);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_render: function(ctx) {
|
|
var widthBy2 = this.width / 2,
|
|
heightBy2 = this.height / 2;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(-widthBy2, heightBy2);
|
|
ctx.lineTo(0, -heightBy2);
|
|
ctx.lineTo(widthBy2, heightBy2);
|
|
ctx.closePath();
|
|
|
|
this._renderFill(ctx);
|
|
this._renderStroke(ctx);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderDashedStroke: function(ctx) {
|
|
var widthBy2 = this.width / 2,
|
|
heightBy2 = this.height / 2;
|
|
|
|
ctx.beginPath();
|
|
fabric.util.drawDashedLine(ctx, -widthBy2, heightBy2, 0, -heightBy2, this.strokeDashArray);
|
|
fabric.util.drawDashedLine(ctx, 0, -heightBy2, widthBy2, heightBy2, this.strokeDashArray);
|
|
fabric.util.drawDashedLine(ctx, widthBy2, heightBy2, -widthBy2, heightBy2, this.strokeDashArray);
|
|
ctx.closePath();
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = this._createBaseSVGMarkup(),
|
|
widthBy2 = this.width / 2,
|
|
heightBy2 = this.height / 2,
|
|
points = [
|
|
-widthBy2 + ' ' + heightBy2,
|
|
'0 ' + -heightBy2,
|
|
widthBy2 + ' ' + heightBy2
|
|
]
|
|
.join(',');
|
|
|
|
markup.push(
|
|
'<polygon ', this.getSvgId(),
|
|
'points="', points,
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(),
|
|
'"/>'
|
|
);
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity of this instance
|
|
*/
|
|
complexity: function() {
|
|
return 1;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns fabric.Triangle instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Triangle
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} [callback] Callback to invoke when an fabric.Triangle instance is created
|
|
* @return {Object} instance of Canvas.Triangle
|
|
*/
|
|
fabric.Triangle.fromObject = function(object, callback) {
|
|
var triangle = new fabric.Triangle(object);
|
|
callback && callback(triangle);
|
|
return triangle;
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
piBy2 = Math.PI * 2,
|
|
extend = fabric.util.object.extend;
|
|
|
|
if (fabric.Ellipse) {
|
|
fabric.warn('fabric.Ellipse is already defined.');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Ellipse class
|
|
* @class fabric.Ellipse
|
|
* @extends fabric.Object
|
|
* @return {fabric.Ellipse} thisArg
|
|
* @see {@link fabric.Ellipse#initialize} for constructor definition
|
|
*/
|
|
fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'ellipse',
|
|
|
|
/**
|
|
* Horizontal radius
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
rx: 0,
|
|
|
|
/**
|
|
* Vertical radius
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
ry: 0,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Ellipse} thisArg
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
|
|
this.callSuper('initialize', options);
|
|
|
|
this.set('rx', options.rx || 0);
|
|
this.set('ry', options.ry || 0);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} key
|
|
* @param {*} value
|
|
* @return {fabric.Ellipse} thisArg
|
|
*/
|
|
_set: function(key, value) {
|
|
this.callSuper('_set', key, value);
|
|
switch (key) {
|
|
|
|
case 'rx':
|
|
this.rx = value;
|
|
this.set('width', value * 2);
|
|
break;
|
|
|
|
case 'ry':
|
|
this.ry = value;
|
|
this.set('height', value * 2);
|
|
break;
|
|
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns horizontal radius of an object (according to how an object is scaled)
|
|
* @return {Number}
|
|
*/
|
|
getRx: function() {
|
|
return this.get('rx') * this.get('scaleX');
|
|
},
|
|
|
|
/**
|
|
* Returns Vertical radius of an object (according to how an object is scaled)
|
|
* @return {Number}
|
|
*/
|
|
getRy: function() {
|
|
return this.get('ry') * this.get('scaleY');
|
|
},
|
|
|
|
/**
|
|
* Returns 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) {
|
|
return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude));
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = this._createBaseSVGMarkup(), x = 0, y = 0;
|
|
if (this.group && this.group.type === 'path-group') {
|
|
x = this.left + this.rx;
|
|
y = this.top + this.ry;
|
|
}
|
|
markup.push(
|
|
'<ellipse ', this.getSvgId(),
|
|
'cx="', x, '" cy="', y, '" ',
|
|
'rx="', this.rx,
|
|
'" ry="', this.ry,
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(),
|
|
this.getSvgTransformMatrix(),
|
|
'"/>\n'
|
|
);
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx context to render on
|
|
* @param {Boolean} [noTransform] When true, context is not transformed
|
|
*/
|
|
_render: function(ctx, noTransform) {
|
|
ctx.beginPath();
|
|
ctx.save();
|
|
ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0);
|
|
ctx.arc(
|
|
noTransform ? this.left + this.rx : 0,
|
|
noTransform ? (this.top + this.ry) * this.rx / this.ry : 0,
|
|
this.rx,
|
|
0,
|
|
piBy2,
|
|
false);
|
|
ctx.restore();
|
|
this._renderFill(ctx);
|
|
this._renderStroke(ctx);
|
|
},
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity
|
|
*/
|
|
complexity: function() {
|
|
return 1;
|
|
}
|
|
});
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement})
|
|
* @static
|
|
* @memberOf fabric.Ellipse
|
|
* @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement
|
|
*/
|
|
fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' '));
|
|
|
|
/**
|
|
* Returns {@link fabric.Ellipse} instance from an SVG element
|
|
* @static
|
|
* @memberOf fabric.Ellipse
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Ellipse}
|
|
*/
|
|
fabric.Ellipse.fromElement = function(element, options) {
|
|
options || (options = { });
|
|
|
|
var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES);
|
|
|
|
parsedAttributes.left = parsedAttributes.left || 0;
|
|
parsedAttributes.top = parsedAttributes.top || 0;
|
|
|
|
var ellipse = new fabric.Ellipse(extend(parsedAttributes, options));
|
|
|
|
ellipse.top -= ellipse.ry;
|
|
ellipse.left -= ellipse.rx;
|
|
return ellipse;
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns {@link fabric.Ellipse} instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Ellipse
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {function} [callback] invoked with new instance as first argument
|
|
* @return {fabric.Ellipse}
|
|
*/
|
|
fabric.Ellipse.fromObject = function(object, callback) {
|
|
var ellipse = new fabric.Ellipse(object);
|
|
callback && callback(ellipse);
|
|
return ellipse;
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend;
|
|
|
|
if (fabric.Rect) {
|
|
fabric.warn('fabric.Rect is already defined');
|
|
return;
|
|
}
|
|
|
|
var stateProperties = fabric.Object.prototype.stateProperties.concat();
|
|
stateProperties.push('rx', 'ry', 'x', 'y');
|
|
|
|
/**
|
|
* Rectangle class
|
|
* @class fabric.Rect
|
|
* @extends fabric.Object
|
|
* @return {fabric.Rect} thisArg
|
|
* @see {@link fabric.Rect#initialize} for constructor definition
|
|
*/
|
|
fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ {
|
|
|
|
/**
|
|
* List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged})
|
|
* as well as for history (undo/redo) purposes
|
|
* @type Array
|
|
*/
|
|
stateProperties: stateProperties,
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'rect',
|
|
|
|
/**
|
|
* Horizontal border radius
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
rx: 0,
|
|
|
|
/**
|
|
* Vertical border radius
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
ry: 0,
|
|
|
|
/**
|
|
* Used to specify dash pattern for stroke on this object
|
|
* @type Array
|
|
*/
|
|
strokeDashArray: null,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} [options] Options object
|
|
* @return {Object} thisArg
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
|
|
this.callSuper('initialize', options);
|
|
this._initRxRy();
|
|
|
|
},
|
|
|
|
/**
|
|
* Initializes rx/ry attributes
|
|
* @private
|
|
*/
|
|
_initRxRy: function() {
|
|
if (this.rx && !this.ry) {
|
|
this.ry = this.rx;
|
|
}
|
|
else if (this.ry && !this.rx) {
|
|
this.rx = this.ry;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
_render: function(ctx, noTransform) {
|
|
|
|
// optimize 1x1 case (used in spray brush)
|
|
if (this.width === 1 && this.height === 1) {
|
|
ctx.fillRect(-0.5, -0.5, 1, 1);
|
|
return;
|
|
}
|
|
|
|
var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0,
|
|
ry = this.ry ? Math.min(this.ry, this.height / 2) : 0,
|
|
w = this.width,
|
|
h = this.height,
|
|
x = noTransform ? this.left : -this.width / 2,
|
|
y = noTransform ? this.top : -this.height / 2,
|
|
isRounded = rx !== 0 || ry !== 0,
|
|
/* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */
|
|
k = 1 - 0.5522847498;
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(x + rx, y);
|
|
|
|
ctx.lineTo(x + w - rx, y);
|
|
isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);
|
|
|
|
ctx.lineTo(x + w, y + h - ry);
|
|
isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);
|
|
|
|
ctx.lineTo(x + rx, y + h);
|
|
isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);
|
|
|
|
ctx.lineTo(x, y + ry);
|
|
isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);
|
|
|
|
ctx.closePath();
|
|
|
|
this._renderFill(ctx);
|
|
this._renderStroke(ctx);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderDashedStroke: function(ctx) {
|
|
var x = -this.width / 2,
|
|
y = -this.height / 2,
|
|
w = this.width,
|
|
h = this.height;
|
|
|
|
ctx.beginPath();
|
|
fabric.util.drawDashedLine(ctx, x, y, x + w, y, this.strokeDashArray);
|
|
fabric.util.drawDashedLine(ctx, x + w, y, x + w, y + h, this.strokeDashArray);
|
|
fabric.util.drawDashedLine(ctx, x + w, y + h, x, y + h, this.strokeDashArray);
|
|
fabric.util.drawDashedLine(ctx, x, y + h, x, y, this.strokeDashArray);
|
|
ctx.closePath();
|
|
},
|
|
|
|
/**
|
|
* Returns 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) {
|
|
return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude));
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = this._createBaseSVGMarkup(), x = this.left, y = this.top;
|
|
if (!(this.group && this.group.type === 'path-group')) {
|
|
x = -this.width / 2;
|
|
y = -this.height / 2;
|
|
}
|
|
markup.push(
|
|
'<rect ', this.getSvgId(),
|
|
'x="', x, '" y="', y,
|
|
'" rx="', this.get('rx'), '" ry="', this.get('ry'),
|
|
'" width="', this.width, '" height="', this.height,
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(),
|
|
this.getSvgTransformMatrix(),
|
|
'"/>\n');
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity
|
|
*/
|
|
complexity: function() {
|
|
return 1;
|
|
}
|
|
});
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
|
|
* @static
|
|
* @memberOf fabric.Rect
|
|
* @see: http://www.w3.org/TR/SVG/shapes.html#RectElement
|
|
*/
|
|
fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' '));
|
|
|
|
/**
|
|
* Returns {@link fabric.Rect} instance from an SVG element
|
|
* @static
|
|
* @memberOf fabric.Rect
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Rect} Instance of fabric.Rect
|
|
*/
|
|
fabric.Rect.fromElement = function(element, options) {
|
|
if (!element) {
|
|
return null;
|
|
}
|
|
options = options || { };
|
|
|
|
var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES);
|
|
|
|
parsedAttributes.left = parsedAttributes.left || 0;
|
|
parsedAttributes.top = parsedAttributes.top || 0;
|
|
var rect = new fabric.Rect(extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
|
|
rect.visible = rect.visible && rect.width > 0 && rect.height > 0;
|
|
return rect;
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns {@link fabric.Rect} instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Rect
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} [callback] Callback to invoke when an fabric.Rect instance is created
|
|
* @return {Object} instance of fabric.Rect
|
|
*/
|
|
fabric.Rect.fromObject = function(object, callback) {
|
|
var rect = new fabric.Rect(object);
|
|
callback && callback(rect);
|
|
return rect;
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { });
|
|
|
|
if (fabric.Polyline) {
|
|
fabric.warn('fabric.Polyline is already defined');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Polyline class
|
|
* @class fabric.Polyline
|
|
* @extends fabric.Object
|
|
* @see {@link fabric.Polyline#initialize} for constructor definition
|
|
*/
|
|
fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'polyline',
|
|
|
|
/**
|
|
* Points array
|
|
* @type Array
|
|
* @default
|
|
*/
|
|
points: null,
|
|
|
|
/**
|
|
* Minimum X from points values, necessary to offset points
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
minX: 0,
|
|
|
|
/**
|
|
* Minimum Y from points values, necessary to offset points
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
minY: 0,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Array} points Array of points (where each point is an object with x and y)
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Polyline} thisArg
|
|
* @example
|
|
* var poly = new fabric.Polyline([
|
|
* { x: 10, y: 10 },
|
|
* { x: 50, y: 30 },
|
|
* { x: 40, y: 70 },
|
|
* { x: 60, y: 50 },
|
|
* { x: 100, y: 150 },
|
|
* { x: 40, y: 100 }
|
|
* ], {
|
|
* stroke: 'red',
|
|
* left: 100,
|
|
* top: 100
|
|
* });
|
|
*/
|
|
initialize: function(points, options) {
|
|
return fabric.Polygon.prototype.initialize.call(this, points, options);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_calcDimensions: function() {
|
|
return fabric.Polygon.prototype._calcDimensions.call(this);
|
|
},
|
|
|
|
/**
|
|
* Returns 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) {
|
|
return fabric.Polygon.prototype.toObject.call(this, propertiesToInclude);
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
return fabric.Polygon.prototype.toSVG.call(this, reviver);
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
_render: function(ctx, noTransform) {
|
|
if (!fabric.Polygon.prototype.commonRender.call(this, ctx, noTransform)) {
|
|
return;
|
|
}
|
|
this._renderFill(ctx);
|
|
this._renderStroke(ctx);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderDashedStroke: function(ctx) {
|
|
var p1, p2;
|
|
|
|
ctx.beginPath();
|
|
for (var i = 0, len = this.points.length; i < len; i++) {
|
|
p1 = this.points[i];
|
|
p2 = this.points[i + 1] || p1;
|
|
fabric.util.drawDashedLine(ctx, p1.x, p1.y, p2.x, p2.y, this.strokeDashArray);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity of this instance
|
|
*/
|
|
complexity: function() {
|
|
return this.get('points').length;
|
|
}
|
|
});
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement})
|
|
* @static
|
|
* @memberOf fabric.Polyline
|
|
* @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement
|
|
*/
|
|
fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat();
|
|
|
|
/**
|
|
* Returns fabric.Polyline instance from an SVG element
|
|
* @static
|
|
* @memberOf fabric.Polyline
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Polyline} Instance of fabric.Polyline
|
|
*/
|
|
fabric.Polyline.fromElement = function(element, options) {
|
|
if (!element) {
|
|
return null;
|
|
}
|
|
options || (options = { });
|
|
|
|
var points = fabric.parsePointsAttribute(element.getAttribute('points')),
|
|
parsedAttributes = fabric.parseAttributes(element, fabric.Polyline.ATTRIBUTE_NAMES);
|
|
|
|
return new fabric.Polyline(points, fabric.util.object.extend(parsedAttributes, options));
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns fabric.Polyline instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Polyline
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} [callback] Callback to invoke when an fabric.Path instance is created
|
|
* @return {fabric.Polyline} Instance of fabric.Polyline
|
|
*/
|
|
fabric.Polyline.fromObject = function(object, callback) {
|
|
var polyline = new fabric.Polyline(object.points, object);
|
|
callback && callback(polyline);
|
|
return polyline;
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
min = fabric.util.array.min,
|
|
max = fabric.util.array.max,
|
|
toFixed = fabric.util.toFixed;
|
|
|
|
if (fabric.Polygon) {
|
|
fabric.warn('fabric.Polygon is already defined');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Polygon class
|
|
* @class fabric.Polygon
|
|
* @extends fabric.Object
|
|
* @see {@link fabric.Polygon#initialize} for constructor definition
|
|
*/
|
|
fabric.Polygon = fabric.util.createClass(fabric.Object, /** @lends fabric.Polygon.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'polygon',
|
|
|
|
/**
|
|
* Points array
|
|
* @type Array
|
|
* @default
|
|
*/
|
|
points: null,
|
|
|
|
/**
|
|
* Minimum X from points values, necessary to offset points
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
minX: 0,
|
|
|
|
/**
|
|
* Minimum Y from points values, necessary to offset points
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
minY: 0,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Array} points Array of points
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Polygon} thisArg
|
|
*/
|
|
initialize: function(points, options) {
|
|
options = options || { };
|
|
this.points = points || [];
|
|
this.callSuper('initialize', options);
|
|
this._calcDimensions();
|
|
if (!('top' in options)) {
|
|
this.top = this.minY;
|
|
}
|
|
if (!('left' in options)) {
|
|
this.left = this.minX;
|
|
}
|
|
this.pathOffset = {
|
|
x: this.minX + this.width / 2,
|
|
y: this.minY + this.height / 2
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_calcDimensions: function() {
|
|
|
|
var points = this.points,
|
|
minX = min(points, 'x'),
|
|
minY = min(points, 'y'),
|
|
maxX = max(points, 'x'),
|
|
maxY = max(points, 'y');
|
|
|
|
this.width = (maxX - minX) || 0;
|
|
this.height = (maxY - minY) || 0;
|
|
this.minX = minX || 0;
|
|
this.minY = minY || 0;
|
|
},
|
|
|
|
/**
|
|
* Returns 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) {
|
|
return extend(this.callSuper('toObject', propertiesToInclude), {
|
|
points: this.points.concat()
|
|
});
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var points = [], addTransform,
|
|
markup = this._createBaseSVGMarkup();
|
|
|
|
for (var i = 0, len = this.points.length; i < len; i++) {
|
|
points.push(toFixed(this.points[i].x, 2), ',', toFixed(this.points[i].y, 2), ' ');
|
|
}
|
|
if (!(this.group && this.group.type === 'path-group')) {
|
|
addTransform = ' translate(' + (-this.pathOffset.x) + ', ' + (-this.pathOffset.y) + ') ';
|
|
}
|
|
markup.push(
|
|
'<', this.type, ' ', this.getSvgId(),
|
|
'points="', points.join(''),
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(), addTransform,
|
|
' ', this.getSvgTransformMatrix(),
|
|
'"/>\n'
|
|
);
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
_render: function(ctx, noTransform) {
|
|
if (!this.commonRender(ctx, noTransform)) {
|
|
return;
|
|
}
|
|
this._renderFill(ctx);
|
|
if (this.stroke || this.strokeDashArray) {
|
|
ctx.closePath();
|
|
this._renderStroke(ctx);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
commonRender: function(ctx, noTransform) {
|
|
var point, len = this.points.length;
|
|
|
|
if (!len || isNaN(this.points[len - 1].y)) {
|
|
// do not draw if no points or odd points
|
|
// NaN comes from parseFloat of a empty string in parser
|
|
return false;
|
|
}
|
|
|
|
noTransform || ctx.translate(-this.pathOffset.x, -this.pathOffset.y);
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.points[0].x, this.points[0].y);
|
|
for (var i = 0; i < len; i++) {
|
|
point = this.points[i];
|
|
ctx.lineTo(point.x, point.y);
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderDashedStroke: function(ctx) {
|
|
fabric.Polyline.prototype._renderDashedStroke.call(this, ctx);
|
|
ctx.closePath();
|
|
},
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity of this instance
|
|
*/
|
|
complexity: function() {
|
|
return this.points.length;
|
|
}
|
|
});
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
|
|
* @static
|
|
* @memberOf fabric.Polygon
|
|
* @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement
|
|
*/
|
|
fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat();
|
|
|
|
/**
|
|
* Returns {@link fabric.Polygon} instance from an SVG element
|
|
* @static
|
|
* @memberOf fabric.Polygon
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Polygon} Instance of fabric.Polygon
|
|
*/
|
|
fabric.Polygon.fromElement = function(element, options) {
|
|
if (!element) {
|
|
return null;
|
|
}
|
|
|
|
options || (options = { });
|
|
|
|
var points = fabric.parsePointsAttribute(element.getAttribute('points')),
|
|
parsedAttributes = fabric.parseAttributes(element, fabric.Polygon.ATTRIBUTE_NAMES);
|
|
|
|
return new fabric.Polygon(points, extend(parsedAttributes, options));
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns fabric.Polygon instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Polygon
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} [callback] Callback to invoke when an fabric.Path instance is created
|
|
* @return {fabric.Polygon} Instance of fabric.Polygon
|
|
*/
|
|
fabric.Polygon.fromObject = function(object, callback) {
|
|
var polygon = new fabric.Polygon(object.points, object);
|
|
callback && callback(polygon);
|
|
return polygon;
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
min = fabric.util.array.min,
|
|
max = fabric.util.array.max,
|
|
extend = fabric.util.object.extend,
|
|
_toString = Object.prototype.toString,
|
|
drawArc = fabric.util.drawArc,
|
|
commandLengths = {
|
|
m: 2,
|
|
l: 2,
|
|
h: 1,
|
|
v: 1,
|
|
c: 6,
|
|
s: 4,
|
|
q: 4,
|
|
t: 2,
|
|
a: 7
|
|
},
|
|
repeatedCommands = {
|
|
m: 'l',
|
|
M: 'L'
|
|
};
|
|
|
|
if (fabric.Path) {
|
|
fabric.warn('fabric.Path is already defined');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Path class
|
|
* @class fabric.Path
|
|
* @extends fabric.Object
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup}
|
|
* @see {@link fabric.Path#initialize} for constructor definition
|
|
*/
|
|
fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'path',
|
|
|
|
/**
|
|
* Array of path points
|
|
* @type Array
|
|
* @default
|
|
*/
|
|
path: null,
|
|
|
|
/**
|
|
* Minimum X from points values, necessary to offset points
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
minX: 0,
|
|
|
|
/**
|
|
* Minimum Y from points values, necessary to offset points
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
minY: 0,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens)
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Path} thisArg
|
|
*/
|
|
initialize: function(path, options) {
|
|
options = options || { };
|
|
|
|
this.setOptions(options);
|
|
|
|
if (!path) {
|
|
path = [];
|
|
}
|
|
|
|
var fromArray = _toString.call(path) === '[object Array]';
|
|
|
|
this.path = fromArray
|
|
? path
|
|
// one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values)
|
|
: path.match && path.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi);
|
|
|
|
if (!this.path) {
|
|
return;
|
|
}
|
|
|
|
if (!fromArray) {
|
|
this.path = this._parsePath();
|
|
}
|
|
|
|
this._setPositionDimensions(options);
|
|
|
|
if (options.sourcePath) {
|
|
this.setSourcePath(options.sourcePath);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} options Options object
|
|
*/
|
|
_setPositionDimensions: function(options) {
|
|
var calcDim = this._parseDimensions();
|
|
|
|
this.minX = calcDim.left;
|
|
this.minY = calcDim.top;
|
|
this.width = calcDim.width;
|
|
this.height = calcDim.height;
|
|
|
|
if (typeof options.left === 'undefined') {
|
|
this.left = calcDim.left + (this.originX === 'center'
|
|
? this.width / 2
|
|
: this.originX === 'right'
|
|
? this.width
|
|
: 0);
|
|
}
|
|
|
|
if (typeof options.top === 'undefined') {
|
|
this.top = calcDim.top + (this.originY === 'center'
|
|
? this.height / 2
|
|
: this.originY === 'bottom'
|
|
? this.height
|
|
: 0);
|
|
}
|
|
|
|
this.pathOffset = this.pathOffset || {
|
|
x: this.minX + this.width / 2,
|
|
y: this.minY + this.height / 2
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx context to render path on
|
|
*/
|
|
_renderPathCommands: function(ctx) {
|
|
var current, // current instruction
|
|
previous = null,
|
|
subpathStartX = 0,
|
|
subpathStartY = 0,
|
|
x = 0, // current x
|
|
y = 0, // current y
|
|
controlX = 0, // current control point x
|
|
controlY = 0, // current control point y
|
|
tempX,
|
|
tempY,
|
|
l = -this.pathOffset.x,
|
|
t = -this.pathOffset.y;
|
|
|
|
if (this.group && this.group.type === 'path-group') {
|
|
l = 0;
|
|
t = 0;
|
|
}
|
|
|
|
ctx.beginPath();
|
|
|
|
for (var i = 0, len = this.path.length; i < len; ++i) {
|
|
|
|
current = this.path[i];
|
|
|
|
switch (current[0]) { // first letter
|
|
|
|
case 'l': // lineto, relative
|
|
x += current[1];
|
|
y += current[2];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'L': // lineto, absolute
|
|
x = current[1];
|
|
y = current[2];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'h': // horizontal lineto, relative
|
|
x += current[1];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'H': // horizontal lineto, absolute
|
|
x = current[1];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'v': // vertical lineto, relative
|
|
y += current[1];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'V': // verical lineto, absolute
|
|
y = current[1];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'm': // moveTo, relative
|
|
x += current[1];
|
|
y += current[2];
|
|
subpathStartX = x;
|
|
subpathStartY = y;
|
|
ctx.moveTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'M': // moveTo, absolute
|
|
x = current[1];
|
|
y = current[2];
|
|
subpathStartX = x;
|
|
subpathStartY = y;
|
|
ctx.moveTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'c': // bezierCurveTo, relative
|
|
tempX = x + current[5];
|
|
tempY = y + current[6];
|
|
controlX = x + current[3];
|
|
controlY = y + current[4];
|
|
ctx.bezierCurveTo(
|
|
x + current[1] + l, // x1
|
|
y + current[2] + t, // y1
|
|
controlX + l, // x2
|
|
controlY + t, // y2
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'C': // bezierCurveTo, absolute
|
|
x = current[5];
|
|
y = current[6];
|
|
controlX = current[3];
|
|
controlY = current[4];
|
|
ctx.bezierCurveTo(
|
|
current[1] + l,
|
|
current[2] + t,
|
|
controlX + l,
|
|
controlY + t,
|
|
x + l,
|
|
y + t
|
|
);
|
|
break;
|
|
|
|
case 's': // shorthand cubic bezierCurveTo, relative
|
|
|
|
// transform to absolute x,y
|
|
tempX = x + current[3];
|
|
tempY = y + current[4];
|
|
|
|
if (previous[0].match(/[CcSs]/) === null) {
|
|
// If there is no previous command or if the previous command was not a C, c, S, or s,
|
|
// the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control points
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
|
|
ctx.bezierCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
x + current[1] + l,
|
|
y + current[2] + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
// set control point to 2nd one of this command
|
|
// "... the first control point is assumed to be
|
|
// the reflection of the second control point on
|
|
// the previous command relative to the current point."
|
|
controlX = x + current[1];
|
|
controlY = y + current[2];
|
|
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'S': // shorthand cubic bezierCurveTo, absolute
|
|
tempX = current[3];
|
|
tempY = current[4];
|
|
if (previous[0].match(/[CcSs]/) === null) {
|
|
// If there is no previous command or if the previous command was not a C, c, S, or s,
|
|
// the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control points
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
ctx.bezierCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
current[1] + l,
|
|
current[2] + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
|
|
// set control point to 2nd one of this command
|
|
// "... the first control point is assumed to be
|
|
// the reflection of the second control point on
|
|
// the previous command relative to the current point."
|
|
controlX = current[1];
|
|
controlY = current[2];
|
|
|
|
break;
|
|
|
|
case 'q': // quadraticCurveTo, relative
|
|
// transform to absolute x,y
|
|
tempX = x + current[3];
|
|
tempY = y + current[4];
|
|
|
|
controlX = x + current[1];
|
|
controlY = y + current[2];
|
|
|
|
ctx.quadraticCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'Q': // quadraticCurveTo, absolute
|
|
tempX = current[3];
|
|
tempY = current[4];
|
|
|
|
ctx.quadraticCurveTo(
|
|
current[1] + l,
|
|
current[2] + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
controlX = current[1];
|
|
controlY = current[2];
|
|
break;
|
|
|
|
case 't': // shorthand quadraticCurveTo, relative
|
|
|
|
// transform to absolute x,y
|
|
tempX = x + current[1];
|
|
tempY = y + current[2];
|
|
|
|
if (previous[0].match(/[QqTt]/) === null) {
|
|
// If there is no previous command or if the previous command was not a Q, q, T or t,
|
|
// assume the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control point
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
|
|
ctx.quadraticCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
|
|
break;
|
|
|
|
case 'T':
|
|
tempX = current[1];
|
|
tempY = current[2];
|
|
|
|
if (previous[0].match(/[QqTt]/) === null) {
|
|
// If there is no previous command or if the previous command was not a Q, q, T or t,
|
|
// assume the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control point
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
ctx.quadraticCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'a':
|
|
// TODO: optimize this
|
|
drawArc(ctx, x + l, y + t, [
|
|
current[1],
|
|
current[2],
|
|
current[3],
|
|
current[4],
|
|
current[5],
|
|
current[6] + x + l,
|
|
current[7] + y + t
|
|
]);
|
|
x += current[6];
|
|
y += current[7];
|
|
break;
|
|
|
|
case 'A':
|
|
// TODO: optimize this
|
|
drawArc(ctx, x + l, y + t, [
|
|
current[1],
|
|
current[2],
|
|
current[3],
|
|
current[4],
|
|
current[5],
|
|
current[6] + l,
|
|
current[7] + t
|
|
]);
|
|
x = current[6];
|
|
y = current[7];
|
|
break;
|
|
|
|
case 'z':
|
|
case 'Z':
|
|
x = subpathStartX;
|
|
y = subpathStartY;
|
|
ctx.closePath();
|
|
break;
|
|
}
|
|
previous = current;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx context to render path on
|
|
*/
|
|
_render: function(ctx) {
|
|
this._renderPathCommands(ctx);
|
|
this._renderFill(ctx);
|
|
this._renderStroke(ctx);
|
|
},
|
|
|
|
/**
|
|
* Returns string representation of an instance
|
|
* @return {String} string representation of an instance
|
|
*/
|
|
toString: function() {
|
|
return '#<fabric.Path (' + this.complexity() +
|
|
'): { "top": ' + this.top + ', "left": ' + this.left + ' }>';
|
|
},
|
|
|
|
/**
|
|
* Returns 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 o = extend(this.callSuper('toObject', ['sourcePath', 'pathOffset'].concat(propertiesToInclude)), {
|
|
path: this.path.map(function(item) { return item.slice() })
|
|
});
|
|
return o;
|
|
},
|
|
|
|
/**
|
|
* 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) {
|
|
var o = this.toObject(propertiesToInclude);
|
|
if (this.sourcePath) {
|
|
o.path = this.sourcePath;
|
|
}
|
|
delete o.sourcePath;
|
|
return o;
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var chunks = [],
|
|
markup = this._createBaseSVGMarkup(), addTransform = '';
|
|
|
|
for (var i = 0, len = this.path.length; i < len; i++) {
|
|
chunks.push(this.path[i].join(' '));
|
|
}
|
|
var path = chunks.join(' ');
|
|
if (!(this.group && this.group.type === 'path-group')) {
|
|
addTransform = ' translate(' + (-this.pathOffset.x) + ', ' + (-this.pathOffset.y) + ') ';
|
|
}
|
|
markup.push(
|
|
'<path ', this.getSvgId(),
|
|
'd="', path,
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(), addTransform,
|
|
this.getSvgTransformMatrix(), '" stroke-linecap="round" ',
|
|
'/>\n'
|
|
);
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns number representation of an instance complexity
|
|
* @return {Number} complexity of this instance
|
|
*/
|
|
complexity: function() {
|
|
return this.path.length;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_parsePath: function() {
|
|
var result = [],
|
|
coords = [],
|
|
currentPath,
|
|
parsed,
|
|
re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/ig,
|
|
match,
|
|
coordsStr;
|
|
|
|
for (var i = 0, coordsParsed, len = this.path.length; i < len; i++) {
|
|
currentPath = this.path[i];
|
|
|
|
coordsStr = currentPath.slice(1).trim();
|
|
coords.length = 0;
|
|
|
|
while ((match = re.exec(coordsStr))) {
|
|
coords.push(match[0]);
|
|
}
|
|
|
|
coordsParsed = [currentPath.charAt(0)];
|
|
|
|
for (var j = 0, jlen = coords.length; j < jlen; j++) {
|
|
parsed = parseFloat(coords[j]);
|
|
if (!isNaN(parsed)) {
|
|
coordsParsed.push(parsed);
|
|
}
|
|
}
|
|
|
|
var command = coordsParsed[0],
|
|
commandLength = commandLengths[command.toLowerCase()],
|
|
repeatedCommand = repeatedCommands[command] || command;
|
|
|
|
if (coordsParsed.length - 1 > commandLength) {
|
|
for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) {
|
|
result.push([command].concat(coordsParsed.slice(k, k + commandLength)));
|
|
command = repeatedCommand;
|
|
}
|
|
}
|
|
else {
|
|
result.push(coordsParsed);
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_parseDimensions: function() {
|
|
|
|
var aX = [],
|
|
aY = [],
|
|
current, // current instruction
|
|
previous = null,
|
|
subpathStartX = 0,
|
|
subpathStartY = 0,
|
|
x = 0, // current x
|
|
y = 0, // current y
|
|
controlX = 0, // current control point x
|
|
controlY = 0, // current control point y
|
|
tempX,
|
|
tempY,
|
|
bounds;
|
|
|
|
for (var i = 0, len = this.path.length; i < len; ++i) {
|
|
|
|
current = this.path[i];
|
|
|
|
switch (current[0]) { // first letter
|
|
|
|
case 'l': // lineto, relative
|
|
x += current[1];
|
|
y += current[2];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'L': // lineto, absolute
|
|
x = current[1];
|
|
y = current[2];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'h': // horizontal lineto, relative
|
|
x += current[1];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'H': // horizontal lineto, absolute
|
|
x = current[1];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'v': // vertical lineto, relative
|
|
y += current[1];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'V': // verical lineto, absolute
|
|
y = current[1];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'm': // moveTo, relative
|
|
x += current[1];
|
|
y += current[2];
|
|
subpathStartX = x;
|
|
subpathStartY = y;
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'M': // moveTo, absolute
|
|
x = current[1];
|
|
y = current[2];
|
|
subpathStartX = x;
|
|
subpathStartY = y;
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'c': // bezierCurveTo, relative
|
|
tempX = x + current[5];
|
|
tempY = y + current[6];
|
|
controlX = x + current[3];
|
|
controlY = y + current[4];
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
x + current[1], // x1
|
|
y + current[2], // y1
|
|
controlX, // x2
|
|
controlY, // y2
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'C': // bezierCurveTo, absolute
|
|
x = current[5];
|
|
y = current[6];
|
|
controlX = current[3];
|
|
controlY = current[4];
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
current[1],
|
|
current[2],
|
|
controlX,
|
|
controlY,
|
|
x,
|
|
y
|
|
);
|
|
break;
|
|
|
|
case 's': // shorthand cubic bezierCurveTo, relative
|
|
|
|
// transform to absolute x,y
|
|
tempX = x + current[3];
|
|
tempY = y + current[4];
|
|
|
|
if (previous[0].match(/[CcSs]/) === null) {
|
|
// If there is no previous command or if the previous command was not a C, c, S, or s,
|
|
// the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control points
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
x + current[1],
|
|
y + current[2],
|
|
tempX,
|
|
tempY
|
|
);
|
|
// set control point to 2nd one of this command
|
|
// "... the first control point is assumed to be
|
|
// the reflection of the second control point on
|
|
// the previous command relative to the current point."
|
|
controlX = x + current[1];
|
|
controlY = y + current[2];
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'S': // shorthand cubic bezierCurveTo, absolute
|
|
tempX = current[3];
|
|
tempY = current[4];
|
|
if (previous[0].match(/[CcSs]/) === null) {
|
|
// If there is no previous command or if the previous command was not a C, c, S, or s,
|
|
// the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control points
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
current[1],
|
|
current[2],
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
// set control point to 2nd one of this command
|
|
// "... the first control point is assumed to be
|
|
// the reflection of the second control point on
|
|
// the previous command relative to the current point."
|
|
controlX = current[1];
|
|
controlY = current[2];
|
|
break;
|
|
|
|
case 'q': // quadraticCurveTo, relative
|
|
// transform to absolute x,y
|
|
tempX = x + current[3];
|
|
tempY = y + current[4];
|
|
controlX = x + current[1];
|
|
controlY = y + current[2];
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
controlX,
|
|
controlY,
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'Q': // quadraticCurveTo, absolute
|
|
controlX = current[1];
|
|
controlY = current[2];
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
controlX,
|
|
controlY,
|
|
current[3],
|
|
current[4]
|
|
);
|
|
x = current[3];
|
|
y = current[4];
|
|
break;
|
|
|
|
case 't': // shorthand quadraticCurveTo, relative
|
|
// transform to absolute x,y
|
|
tempX = x + current[1];
|
|
tempY = y + current[2];
|
|
if (previous[0].match(/[QqTt]/) === null) {
|
|
// If there is no previous command or if the previous command was not a Q, q, T or t,
|
|
// assume the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control point
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
controlX,
|
|
controlY,
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
|
|
break;
|
|
|
|
case 'T':
|
|
tempX = current[1];
|
|
tempY = current[2];
|
|
|
|
if (previous[0].match(/[QqTt]/) === null) {
|
|
// If there is no previous command or if the previous command was not a Q, q, T or t,
|
|
// assume the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control point
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
controlX,
|
|
controlY,
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'a':
|
|
// TODO: optimize this
|
|
bounds = fabric.util.getBoundsOfArc(x, y,
|
|
current[1],
|
|
current[2],
|
|
current[3],
|
|
current[4],
|
|
current[5],
|
|
current[6] + x,
|
|
current[7] + y
|
|
);
|
|
x += current[6];
|
|
y += current[7];
|
|
break;
|
|
|
|
case 'A':
|
|
// TODO: optimize this
|
|
bounds = fabric.util.getBoundsOfArc(x, y,
|
|
current[1],
|
|
current[2],
|
|
current[3],
|
|
current[4],
|
|
current[5],
|
|
current[6],
|
|
current[7]
|
|
);
|
|
x = current[6];
|
|
y = current[7];
|
|
break;
|
|
|
|
case 'z':
|
|
case 'Z':
|
|
x = subpathStartX;
|
|
y = subpathStartY;
|
|
break;
|
|
}
|
|
previous = current;
|
|
bounds.forEach(function (point) {
|
|
aX.push(point.x);
|
|
aY.push(point.y);
|
|
});
|
|
aX.push(x);
|
|
aY.push(y);
|
|
}
|
|
|
|
var minX = min(aX) || 0,
|
|
minY = min(aY) || 0,
|
|
maxX = max(aX) || 0,
|
|
maxY = max(aY) || 0,
|
|
deltaX = maxX - minX,
|
|
deltaY = maxY - minY,
|
|
|
|
o = {
|
|
left: minX,
|
|
top: minY,
|
|
width: deltaX,
|
|
height: deltaY
|
|
};
|
|
|
|
return o;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Creates an instance of fabric.Path from an object
|
|
* @static
|
|
* @memberOf fabric.Path
|
|
* @param {Object} object
|
|
* @param {Function} [callback] Callback to invoke when an fabric.Path instance is created
|
|
*/
|
|
fabric.Path.fromObject = function(object, callback) {
|
|
// remove this pattern rom 2.0, accept just object.
|
|
var path;
|
|
if (typeof object.path === 'string') {
|
|
fabric.loadSVGFromURL(object.path, function (elements) {
|
|
var pathUrl = object.path;
|
|
path = elements[0];
|
|
delete object.path;
|
|
|
|
fabric.util.object.extend(path, object);
|
|
path.setSourcePath(pathUrl);
|
|
|
|
callback && callback(path);
|
|
});
|
|
}
|
|
else {
|
|
path = new fabric.Path(object.path, object);
|
|
callback && callback(path);
|
|
return path;
|
|
}
|
|
};
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`)
|
|
* @static
|
|
* @memberOf fabric.Path
|
|
* @see http://www.w3.org/TR/SVG/paths.html#PathElement
|
|
*/
|
|
fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']);
|
|
|
|
/**
|
|
* Creates an instance of fabric.Path from an SVG <path> element
|
|
* @static
|
|
* @memberOf fabric.Path
|
|
* @param {SVGElement} element to parse
|
|
* @param {Function} callback Callback to invoke when an fabric.Path instance is created
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
fabric.Path.fromElement = function(element, callback, options) {
|
|
var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES);
|
|
callback && callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options)));
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Indicates that instances of this type are async
|
|
* @static
|
|
* @memberOf fabric.Path
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
fabric.Path.async = true;
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
invoke = fabric.util.array.invoke,
|
|
parentToObject = fabric.Object.prototype.toObject;
|
|
|
|
if (fabric.PathGroup) {
|
|
fabric.warn('fabric.PathGroup is already defined');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Path group class
|
|
* @class fabric.PathGroup
|
|
* @extends fabric.Path
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup}
|
|
* @see {@link fabric.PathGroup#initialize} for constructor definition
|
|
*/
|
|
fabric.PathGroup = fabric.util.createClass(fabric.Path, /** @lends fabric.PathGroup.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'path-group',
|
|
|
|
/**
|
|
* Fill value
|
|
* @type String
|
|
* @default
|
|
*/
|
|
fill: '',
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Array} paths
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.PathGroup} thisArg
|
|
*/
|
|
initialize: function(paths, options) {
|
|
|
|
options = options || { };
|
|
this.paths = paths || [];
|
|
|
|
for (var i = this.paths.length; i--;) {
|
|
this.paths[i].group = this;
|
|
}
|
|
|
|
if (options.toBeParsed) {
|
|
this.parseDimensionsFromPaths(options);
|
|
delete options.toBeParsed;
|
|
}
|
|
this.setOptions(options);
|
|
this.setCoords();
|
|
|
|
if (options.sourcePath) {
|
|
this.setSourcePath(options.sourcePath);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Calculate width and height based on paths contained
|
|
*/
|
|
parseDimensionsFromPaths: function(options) {
|
|
var points, p, xC = [], yC = [], path, height, width,
|
|
m;
|
|
for (var j = this.paths.length; j--;) {
|
|
path = this.paths[j];
|
|
height = path.height + path.strokeWidth;
|
|
width = path.width + path.strokeWidth;
|
|
points = [
|
|
{ x: path.left, y: path.top },
|
|
{ x: path.left + width, y: path.top },
|
|
{ x: path.left, y: path.top + height },
|
|
{ x: path.left + width, y: path.top + height }
|
|
];
|
|
m = this.paths[j].transformMatrix;
|
|
for (var i = 0; i < points.length; i++) {
|
|
p = points[i];
|
|
if (m) {
|
|
p = fabric.util.transformPoint(p, m, false);
|
|
}
|
|
xC.push(p.x);
|
|
yC.push(p.y);
|
|
}
|
|
}
|
|
options.width = Math.max.apply(null, xC);
|
|
options.height = Math.max.apply(null, yC);
|
|
},
|
|
|
|
/**
|
|
* Renders this group on a specified context
|
|
* @param {CanvasRenderingContext2D} ctx Context to render this instance on
|
|
*/
|
|
render: function(ctx) {
|
|
// do not render if object is not visible
|
|
if (!this.visible) {
|
|
return;
|
|
}
|
|
|
|
ctx.save();
|
|
|
|
if (this.transformMatrix) {
|
|
ctx.transform.apply(ctx, this.transformMatrix);
|
|
}
|
|
this.transform(ctx);
|
|
|
|
this._setShadow(ctx);
|
|
this.clipTo && fabric.util.clipContext(this, ctx);
|
|
ctx.translate(-this.width / 2, -this.height / 2);
|
|
for (var i = 0, l = this.paths.length; i < l; ++i) {
|
|
this.paths[i].render(ctx, true);
|
|
}
|
|
this.clipTo && ctx.restore();
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* Sets certain property to a certain value
|
|
* @param {String} prop
|
|
* @param {*} value
|
|
* @return {fabric.PathGroup} thisArg
|
|
*/
|
|
_set: function(prop, value) {
|
|
|
|
if (prop === 'fill' && value && this.isSameColor()) {
|
|
var i = this.paths.length;
|
|
while (i--) {
|
|
this.paths[i]._set(prop, value);
|
|
}
|
|
}
|
|
|
|
return this.callSuper('_set', prop, value);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of this path group
|
|
* @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 o = extend(parentToObject.call(this, ['sourcePath'].concat(propertiesToInclude)), {
|
|
paths: invoke(this.getObjects(), 'toObject', propertiesToInclude)
|
|
});
|
|
return o;
|
|
},
|
|
|
|
/**
|
|
* Returns dataless object representation of this path group
|
|
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
|
|
* @return {Object} dataless object representation of an instance
|
|
*/
|
|
toDatalessObject: function(propertiesToInclude) {
|
|
var o = this.toObject(propertiesToInclude);
|
|
if (this.sourcePath) {
|
|
o.paths = this.sourcePath;
|
|
}
|
|
return o;
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var objects = this.getObjects(),
|
|
p = this.getPointByOrigin('left', 'top'),
|
|
translatePart = 'translate(' + p.x + ' ' + p.y + ')',
|
|
markup = this._createBaseSVGMarkup();
|
|
markup.push(
|
|
'<g ', this.getSvgId(),
|
|
'style="', this.getSvgStyles(), '" ',
|
|
'transform="', this.getSvgTransformMatrix(), translatePart, this.getSvgTransform(), '" ',
|
|
'>\n'
|
|
);
|
|
|
|
for (var i = 0, len = objects.length; i < len; i++) {
|
|
markup.push('\t', objects[i].toSVG(reviver));
|
|
}
|
|
markup.push('</g>\n');
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns a string representation of this path group
|
|
* @return {String} string representation of an object
|
|
*/
|
|
toString: function() {
|
|
return '#<fabric.PathGroup (' + this.complexity() +
|
|
'): { top: ' + this.top + ', left: ' + this.left + ' }>';
|
|
},
|
|
|
|
/**
|
|
* Returns true if all paths in this group are of same color
|
|
* @return {Boolean} true if all paths are of the same color (`fill`)
|
|
*/
|
|
isSameColor: function() {
|
|
var firstPathFill = this.getObjects()[0].get('fill') || '';
|
|
if (typeof firstPathFill !== 'string') {
|
|
return false;
|
|
}
|
|
firstPathFill = firstPathFill.toLowerCase();
|
|
return this.getObjects().every(function(path) {
|
|
var pathFill = path.get('fill') || '';
|
|
return typeof pathFill === 'string' && (pathFill).toLowerCase() === firstPathFill;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns number representation of object's complexity
|
|
* @return {Number} complexity
|
|
*/
|
|
complexity: function() {
|
|
return this.paths.reduce(function(total, path) {
|
|
return total + ((path && path.complexity) ? path.complexity() : 0);
|
|
}, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns all paths in this path group
|
|
* @return {Array} array of path objects included in this path group
|
|
*/
|
|
getObjects: function() {
|
|
return this.paths;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Creates fabric.PathGroup instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.PathGroup
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} [callback] Callback to invoke when an fabric.PathGroup instance is created
|
|
*/
|
|
fabric.PathGroup.fromObject = function(object, callback) {
|
|
// remove this pattern from 2.0 accepts only object
|
|
if (typeof object.paths === 'string') {
|
|
fabric.loadSVGFromURL(object.paths, function (elements) {
|
|
|
|
var pathUrl = object.paths;
|
|
delete object.paths;
|
|
|
|
var pathGroup = fabric.util.groupSVGElements(elements, object, pathUrl);
|
|
|
|
callback(pathGroup);
|
|
});
|
|
}
|
|
else {
|
|
fabric.util.enlivenObjects(object.paths, function(enlivenedObjects) {
|
|
delete object.paths;
|
|
callback(new fabric.PathGroup(enlivenedObjects, object));
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Indicates that instances of this type are async
|
|
* @static
|
|
* @memberOf fabric.PathGroup
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
fabric.PathGroup.async = true;
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
min = fabric.util.array.min,
|
|
max = fabric.util.array.max,
|
|
invoke = fabric.util.array.invoke;
|
|
|
|
if (fabric.Group) {
|
|
return;
|
|
}
|
|
|
|
// lock-related properties, for use in fabric.Group#get
|
|
// to enable locking behavior on group
|
|
// when one of its objects has lock-related properties set
|
|
var _lockProperties = {
|
|
lockMovementX: true,
|
|
lockMovementY: true,
|
|
lockRotation: true,
|
|
lockScalingX: true,
|
|
lockScalingY: true,
|
|
lockUniScaling: true
|
|
};
|
|
|
|
/**
|
|
* Group class
|
|
* @class fabric.Group
|
|
* @extends fabric.Object
|
|
* @mixes fabric.Collection
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups}
|
|
* @see {@link fabric.Group#initialize} for constructor definition
|
|
*/
|
|
fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'group',
|
|
|
|
/**
|
|
* Width of stroke
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
strokeWidth: 0,
|
|
|
|
/**
|
|
* Indicates if click events should also check for subtargets
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
subTargetCheck: false,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} objects Group objects
|
|
* @param {Object} [options] Options object
|
|
* @param {Boolean} [isAlreadyGrouped] if true, objects have been grouped already.
|
|
* @return {Object} thisArg
|
|
*/
|
|
initialize: function(objects, options, isAlreadyGrouped) {
|
|
options = options || { };
|
|
|
|
this._objects = [];
|
|
// if objects enclosed in a group have been grouped already,
|
|
// we cannot change properties of objects.
|
|
// Thus we need to set options to group without objects,
|
|
// because delegatedProperties propagate to objects.
|
|
isAlreadyGrouped && this.callSuper('initialize', options);
|
|
|
|
this._objects = objects || [];
|
|
for (var i = this._objects.length; i--; ) {
|
|
this._objects[i].group = this;
|
|
}
|
|
|
|
this.originalState = { };
|
|
|
|
if (options.originX) {
|
|
this.originX = options.originX;
|
|
}
|
|
if (options.originY) {
|
|
this.originY = options.originY;
|
|
}
|
|
|
|
if (isAlreadyGrouped) {
|
|
// do not change coordinate of objects enclosed in a group,
|
|
// because objects coordinate system have been group coodinate system already.
|
|
this._updateObjectsCoords(true);
|
|
}
|
|
else {
|
|
this._calcBounds();
|
|
this._updateObjectsCoords();
|
|
this.callSuper('initialize', options);
|
|
}
|
|
|
|
this.setCoords();
|
|
this.saveCoords();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Boolean} [skipCoordsChange] if true, coordinates of objects enclosed in a group do not change
|
|
*/
|
|
_updateObjectsCoords: function(skipCoordsChange) {
|
|
for (var i = this._objects.length; i--; ){
|
|
this._updateObjectCoords(this._objects[i], skipCoordsChange);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} object
|
|
* @param {Boolean} [skipCoordsChange] if true, coordinates of object dose not change
|
|
*/
|
|
_updateObjectCoords: function(object, skipCoordsChange) {
|
|
// do not display corners of objects enclosed in a group
|
|
object.__origHasControls = object.hasControls;
|
|
object.hasControls = false;
|
|
|
|
if (skipCoordsChange) {
|
|
return;
|
|
}
|
|
|
|
var objectLeft = object.getLeft(),
|
|
objectTop = object.getTop(),
|
|
center = this.getCenterPoint();
|
|
|
|
object.set({
|
|
originalLeft: objectLeft,
|
|
originalTop: objectTop,
|
|
left: objectLeft - center.x,
|
|
top: objectTop - center.y
|
|
});
|
|
object.setCoords();
|
|
},
|
|
|
|
/**
|
|
* Returns string represenation of a group
|
|
* @return {String}
|
|
*/
|
|
toString: function() {
|
|
return '#<fabric.Group: (' + this.complexity() + ')>';
|
|
},
|
|
|
|
/**
|
|
* Adds an object to a group; Then recalculates group's dimension, position.
|
|
* @param {Object} object
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
addWithUpdate: function(object) {
|
|
this._restoreObjectsState();
|
|
fabric.util.resetObjectTransform(this);
|
|
if (object) {
|
|
this._objects.push(object);
|
|
object.group = this;
|
|
object._set('canvas', this.canvas);
|
|
}
|
|
// since _restoreObjectsState set objects inactive
|
|
this.forEachObject(this._setObjectActive, this);
|
|
this._calcBounds();
|
|
this._updateObjectsCoords();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setObjectActive: function(object) {
|
|
object.set('active', true);
|
|
object.group = this;
|
|
},
|
|
|
|
/**
|
|
* Removes an object from a group; Then recalculates group's dimension, position.
|
|
* @param {Object} object
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
removeWithUpdate: function(object) {
|
|
this._restoreObjectsState();
|
|
fabric.util.resetObjectTransform(this);
|
|
// since _restoreObjectsState set objects inactive
|
|
this.forEachObject(this._setObjectActive, this);
|
|
|
|
this.remove(object);
|
|
this._calcBounds();
|
|
this._updateObjectsCoords();
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_onObjectAdded: function(object) {
|
|
object.group = this;
|
|
object._set('canvas', this.canvas);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_onObjectRemoved: function(object) {
|
|
delete object.group;
|
|
object.set('active', false);
|
|
},
|
|
|
|
/**
|
|
* Properties that are delegated to group objects when reading/writing
|
|
* @param {Object} delegatedProperties
|
|
*/
|
|
delegatedProperties: {
|
|
fill: true,
|
|
stroke: true,
|
|
strokeWidth: true,
|
|
fontFamily: true,
|
|
fontWeight: true,
|
|
fontSize: true,
|
|
fontStyle: true,
|
|
lineHeight: true,
|
|
textDecoration: true,
|
|
textAlign: true,
|
|
backgroundColor: true
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_set: function(key, value) {
|
|
var i = this._objects.length;
|
|
|
|
if (this.delegatedProperties[key] || key === 'canvas') {
|
|
while (i--) {
|
|
this._objects[i].set(key, value);
|
|
}
|
|
}
|
|
else {
|
|
while (i--) {
|
|
this._objects[i].setOnGroup(key, value);
|
|
}
|
|
}
|
|
|
|
this.callSuper('_set', key, value);
|
|
},
|
|
|
|
/**
|
|
* Returns 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) {
|
|
return extend(this.callSuper('toObject', propertiesToInclude), {
|
|
objects: invoke(this._objects, 'toObject', propertiesToInclude)
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Renders instance on a given context
|
|
* @param {CanvasRenderingContext2D} ctx context to render instance on
|
|
*/
|
|
render: function(ctx) {
|
|
// do not render if object is not visible
|
|
if (!this.visible) {
|
|
return;
|
|
}
|
|
|
|
ctx.save();
|
|
if (this.transformMatrix) {
|
|
ctx.transform.apply(ctx, this.transformMatrix);
|
|
}
|
|
this.transform(ctx);
|
|
this._setShadow(ctx);
|
|
this.clipTo && fabric.util.clipContext(this, ctx);
|
|
this._transformDone = true;
|
|
// the array is now sorted in order of highest first, so start from end
|
|
for (var i = 0, len = this._objects.length; i < len; i++) {
|
|
this._renderObject(this._objects[i], ctx);
|
|
}
|
|
|
|
this.clipTo && ctx.restore();
|
|
ctx.restore();
|
|
this._transformDone = false;
|
|
},
|
|
|
|
/**
|
|
* 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) {
|
|
this.callSuper('_renderControls', ctx, noTransform);
|
|
for (var i = 0, len = this._objects.length; i < len; i++) {
|
|
this._objects[i]._renderControls(ctx);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_renderObject: function(object, ctx) {
|
|
// do not render if object is not visible
|
|
if (!object.visible) {
|
|
return;
|
|
}
|
|
|
|
var originalHasRotatingPoint = object.hasRotatingPoint;
|
|
object.hasRotatingPoint = false;
|
|
object.render(ctx);
|
|
object.hasRotatingPoint = originalHasRotatingPoint;
|
|
},
|
|
|
|
/**
|
|
* Retores original state of each of group objects (original state is that which was before group was created).
|
|
* @private
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
_restoreObjectsState: function() {
|
|
this._objects.forEach(this._restoreObjectState, this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Realises the transform from this group onto the supplied object
|
|
* i.e. it tells you what would happen if the supplied object was in
|
|
* the group, and then the group was destroyed. It mutates the supplied
|
|
* object.
|
|
* @param {fabric.Object} object
|
|
* @return {fabric.Object} transformedObject
|
|
*/
|
|
realizeTransform: function(object) {
|
|
var matrix = object.calcTransformMatrix(),
|
|
options = fabric.util.qrDecompose(matrix),
|
|
center = new fabric.Point(options.translateX, options.translateY);
|
|
object.scaleX = options.scaleX;
|
|
object.scaleY = options.scaleY;
|
|
object.skewX = options.skewX;
|
|
object.skewY = options.skewY;
|
|
object.angle = options.angle;
|
|
object.flipX = false;
|
|
object.flipY = false;
|
|
object.setPositionByOrigin(center, 'center', 'center');
|
|
return object;
|
|
},
|
|
|
|
/**
|
|
* Restores original state of a specified object in group
|
|
* @private
|
|
* @param {fabric.Object} object
|
|
* @return {fabric.Group} thisArg
|
|
*/
|
|
_restoreObjectState: function(object) {
|
|
this.realizeTransform(object);
|
|
object.setCoords();
|
|
object.hasControls = object.__origHasControls;
|
|
delete object.__origHasControls;
|
|
object.set('active', false);
|
|
delete object.group;
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Destroys a group (restoring state of its objects)
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
destroy: function() {
|
|
return this._restoreObjectsState();
|
|
},
|
|
|
|
/**
|
|
* Saves coordinates of this instance (to be used together with `hasMoved`)
|
|
* @saveCoords
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
saveCoords: function() {
|
|
this._originalLeft = this.get('left');
|
|
this._originalTop = this.get('top');
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Checks whether this group was moved (since `saveCoords` was called last)
|
|
* @return {Boolean} true if an object was moved (since fabric.Group#saveCoords was called)
|
|
*/
|
|
hasMoved: function() {
|
|
return this._originalLeft !== this.get('left') ||
|
|
this._originalTop !== this.get('top');
|
|
},
|
|
|
|
/**
|
|
* Sets coordinates of all group objects
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
setObjectsCoords: function() {
|
|
this.forEachObject(function(object) {
|
|
object.setCoords();
|
|
});
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_calcBounds: function(onlyWidthHeight) {
|
|
var aX = [],
|
|
aY = [],
|
|
o, prop,
|
|
props = ['tr', 'br', 'bl', 'tl'],
|
|
i = 0, iLen = this._objects.length,
|
|
j, jLen = props.length;
|
|
|
|
for ( ; i < iLen; ++i) {
|
|
o = this._objects[i];
|
|
o.setCoords();
|
|
for (j = 0; j < jLen; j++) {
|
|
prop = props[j];
|
|
aX.push(o.oCoords[prop].x);
|
|
aY.push(o.oCoords[prop].y);
|
|
}
|
|
}
|
|
|
|
this.set(this._getBounds(aX, aY, onlyWidthHeight));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getBounds: function(aX, aY, onlyWidthHeight) {
|
|
var ivt = fabric.util.invertTransform(this.getViewportTransform()),
|
|
minXY = fabric.util.transformPoint(new fabric.Point(min(aX), min(aY)), ivt),
|
|
maxXY = fabric.util.transformPoint(new fabric.Point(max(aX), max(aY)), ivt),
|
|
obj = {
|
|
width: (maxXY.x - minXY.x) || 0,
|
|
height: (maxXY.y - minXY.y) || 0
|
|
};
|
|
|
|
if (!onlyWidthHeight) {
|
|
obj.left = minXY.x || 0;
|
|
obj.top = minXY.y || 0;
|
|
if (this.originX === 'center') {
|
|
obj.left += obj.width / 2;
|
|
}
|
|
if (this.originX === 'right') {
|
|
obj.left += obj.width;
|
|
}
|
|
if (this.originY === 'center') {
|
|
obj.top += obj.height / 2;
|
|
}
|
|
if (this.originY === 'bottom') {
|
|
obj.top += obj.height;
|
|
}
|
|
}
|
|
return obj;
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = this._createBaseSVGMarkup();
|
|
markup.push(
|
|
'<g ', this.getSvgId(), 'transform="',
|
|
/* avoiding styles intentionally */
|
|
this.getSvgTransform(),
|
|
this.getSvgTransformMatrix(),
|
|
'" style="',
|
|
this.getSvgFilter(),
|
|
'">\n'
|
|
);
|
|
|
|
for (var i = 0, len = this._objects.length; i < len; i++) {
|
|
markup.push('\t', this._objects[i].toSVG(reviver));
|
|
}
|
|
|
|
markup.push('</g>\n');
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns requested property
|
|
* @param {String} prop Property to get
|
|
* @return {*}
|
|
*/
|
|
get: function(prop) {
|
|
if (prop in _lockProperties) {
|
|
if (this[prop]) {
|
|
return this[prop];
|
|
}
|
|
else {
|
|
for (var i = 0, len = this._objects.length; i < len; i++) {
|
|
if (this._objects[i][prop]) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
else {
|
|
if (prop in this.delegatedProperties) {
|
|
return this._objects[0] && this._objects[0].get(prop);
|
|
}
|
|
return this[prop];
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns {@link fabric.Group} instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Group
|
|
* @param {Object} object Object to create a group from
|
|
* @param {Function} [callback] Callback to invoke when an group instance is created
|
|
*/
|
|
fabric.Group.fromObject = function(object, callback) {
|
|
fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
|
|
delete object.objects;
|
|
callback && callback(new fabric.Group(enlivenedObjects, object, true));
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Indicates that instances of this type are async
|
|
* @static
|
|
* @memberOf fabric.Group
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
fabric.Group.async = true;
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var extend = fabric.util.object.extend;
|
|
|
|
if (!global.fabric) {
|
|
global.fabric = { };
|
|
}
|
|
|
|
if (global.fabric.Image) {
|
|
fabric.warn('fabric.Image is already defined.');
|
|
return;
|
|
}
|
|
|
|
var stateProperties = fabric.Object.prototype.stateProperties.concat();
|
|
stateProperties.push(
|
|
'alignX',
|
|
'alignY',
|
|
'meetOrSlice'
|
|
);
|
|
|
|
/**
|
|
* Image class
|
|
* @class fabric.Image
|
|
* @extends fabric.Object
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images}
|
|
* @see {@link fabric.Image#initialize} for constructor definition
|
|
*/
|
|
fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'image',
|
|
|
|
/**
|
|
* crossOrigin value (one of "", "anonymous", "use-credentials")
|
|
* @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
|
|
* @type String
|
|
* @default
|
|
*/
|
|
crossOrigin: '',
|
|
|
|
/**
|
|
* AlignX value, part of preserveAspectRatio (one of "none", "mid", "min", "max")
|
|
* @see http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
|
|
* This parameter defines how the picture is aligned to its viewport when image element width differs from image width.
|
|
* @type String
|
|
* @default
|
|
*/
|
|
alignX: 'none',
|
|
|
|
/**
|
|
* AlignY value, part of preserveAspectRatio (one of "none", "mid", "min", "max")
|
|
* @see http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
|
|
* This parameter defines how the picture is aligned to its viewport when image element height differs from image height.
|
|
* @type String
|
|
* @default
|
|
*/
|
|
alignY: 'none',
|
|
|
|
/**
|
|
* meetOrSlice value, part of preserveAspectRatio (one of "meet", "slice").
|
|
* if meet the image is always fully visibile, if slice the viewport is always filled with image.
|
|
* @see http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
|
|
* @type String
|
|
* @default
|
|
*/
|
|
meetOrSlice: 'meet',
|
|
|
|
/**
|
|
* Width of a stroke.
|
|
* For image quality a stroke multiple of 2 gives better results.
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
strokeWidth: 0,
|
|
|
|
/**
|
|
* private
|
|
* contains last value of scaleX to detect
|
|
* if the Image got resized after the last Render
|
|
* @type Number
|
|
*/
|
|
_lastScaleX: 1,
|
|
|
|
/**
|
|
* private
|
|
* contains last value of scaleY to detect
|
|
* if the Image got resized after the last Render
|
|
* @type Number
|
|
*/
|
|
_lastScaleY: 1,
|
|
|
|
/**
|
|
* minimum scale factor under which any resizeFilter is triggered to resize the image
|
|
* 0 will disable the automatic resize. 1 will trigger automatically always.
|
|
* number bigger than 1 can be used in case we want to scale with some filter above
|
|
* the natural image dimensions
|
|
* @type Number
|
|
*/
|
|
minimumScaleTrigger: 0.5,
|
|
|
|
/**
|
|
* List of properties to consider when checking if
|
|
* state of an object is changed ({@link fabric.Object#hasStateChanged})
|
|
* as well as for history (undo/redo) purposes
|
|
* @type Array
|
|
*/
|
|
stateProperties: stateProperties,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {HTMLImageElement | String} element Image element
|
|
* @param {Object} [options] Options object
|
|
* @param {function} [callback] callback function to call after eventual filters applied.
|
|
* @return {fabric.Image} thisArg
|
|
*/
|
|
initialize: function(element, options, callback) {
|
|
options || (options = { });
|
|
this.filters = [];
|
|
this.resizeFilters = [];
|
|
this.callSuper('initialize', options);
|
|
this._initElement(element, options, callback);
|
|
},
|
|
|
|
/**
|
|
* Returns image element which this instance if based on
|
|
* @return {HTMLImageElement} Image element
|
|
*/
|
|
getElement: function() {
|
|
return this._element;
|
|
},
|
|
|
|
/**
|
|
* Sets image element for this instance to a specified one.
|
|
* If filters defined they are applied to new image.
|
|
* You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area.
|
|
* @param {HTMLImageElement} element
|
|
* @param {Function} [callback] Callback is invoked when all filters have been applied and new image is generated
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Image} thisArg
|
|
* @chainable
|
|
*/
|
|
setElement: function(element, callback, options) {
|
|
|
|
var _callback, _this;
|
|
|
|
this._element = element;
|
|
this._originalElement = element;
|
|
this._initConfig(options);
|
|
|
|
if (this.resizeFilters.length === 0) {
|
|
_callback = callback;
|
|
}
|
|
else {
|
|
_this = this;
|
|
_callback = function() {
|
|
_this.applyFilters(callback, _this.resizeFilters, _this._filteredEl || _this._originalElement, true);
|
|
};
|
|
}
|
|
|
|
if (this.filters.length !== 0) {
|
|
this.applyFilters(_callback);
|
|
}
|
|
else if (_callback) {
|
|
_callback(this);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets crossOrigin value (on an instance and corresponding image element)
|
|
* @return {fabric.Image} thisArg
|
|
* @chainable
|
|
*/
|
|
setCrossOrigin: function(value) {
|
|
this.crossOrigin = value;
|
|
this._element.crossOrigin = value;
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns original size of an image
|
|
* @return {Object} Object with "width" and "height" properties
|
|
*/
|
|
getOriginalSize: function() {
|
|
var element = this.getElement();
|
|
return {
|
|
width: element.width,
|
|
height: element.height
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_stroke: function(ctx) {
|
|
if (!this.stroke || this.strokeWidth === 0) {
|
|
return;
|
|
}
|
|
var w = this.width / 2, h = this.height / 2;
|
|
ctx.beginPath();
|
|
ctx.moveTo(-w, -h);
|
|
ctx.lineTo(w, -h);
|
|
ctx.lineTo(w, h);
|
|
ctx.lineTo(-w, h);
|
|
ctx.lineTo(-w, -h);
|
|
ctx.closePath();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderDashedStroke: function(ctx) {
|
|
var x = -this.width / 2,
|
|
y = -this.height / 2,
|
|
w = this.width,
|
|
h = this.height;
|
|
|
|
ctx.save();
|
|
this._setStrokeStyles(ctx);
|
|
|
|
ctx.beginPath();
|
|
fabric.util.drawDashedLine(ctx, x, y, x + w, y, this.strokeDashArray);
|
|
fabric.util.drawDashedLine(ctx, x + w, y, x + w, y + h, this.strokeDashArray);
|
|
fabric.util.drawDashedLine(ctx, x + w, y + h, x, y + h, this.strokeDashArray);
|
|
fabric.util.drawDashedLine(ctx, x, y + h, x, y, this.strokeDashArray);
|
|
ctx.closePath();
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* Returns 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 filters = [], resizeFilters = [],
|
|
scaleX = 1, scaleY = 1;
|
|
|
|
this.filters.forEach(function(filterObj) {
|
|
if (filterObj) {
|
|
if (filterObj.type === 'Resize') {
|
|
scaleX *= filterObj.scaleX;
|
|
scaleY *= filterObj.scaleY;
|
|
}
|
|
filters.push(filterObj.toObject());
|
|
}
|
|
});
|
|
|
|
this.resizeFilters.forEach(function(filterObj) {
|
|
filterObj && resizeFilters.push(filterObj.toObject());
|
|
});
|
|
var object = extend(
|
|
this.callSuper(
|
|
'toObject',
|
|
['crossOrigin', 'alignX', 'alignY', 'meetOrSlice'].concat(propertiesToInclude)
|
|
), {
|
|
src: this.getSrc(),
|
|
filters: filters,
|
|
resizeFilters: resizeFilters,
|
|
});
|
|
|
|
object.width /= scaleX;
|
|
object.height /= scaleY;
|
|
|
|
return object;
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = this._createBaseSVGMarkup(), x = -this.width / 2, y = -this.height / 2,
|
|
preserveAspectRatio = 'none', filtered = true;
|
|
if (this.group && this.group.type === 'path-group') {
|
|
x = this.left;
|
|
y = this.top;
|
|
}
|
|
if (this.alignX !== 'none' && this.alignY !== 'none') {
|
|
preserveAspectRatio = 'x' + this.alignX + 'Y' + this.alignY + ' ' + this.meetOrSlice;
|
|
}
|
|
markup.push(
|
|
'<g transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '">\n',
|
|
'<image ', this.getSvgId(), 'xlink:href="', this.getSvgSrc(filtered),
|
|
'" x="', x, '" y="', y,
|
|
'" style="', this.getSvgStyles(),
|
|
// we're essentially moving origin of transformation from top/left corner to the center of the shape
|
|
// by wrapping it in container <g> element with actual transformation, then offsetting object to the top/left
|
|
// so that object's center aligns with container's left/top
|
|
'" width="', this.width,
|
|
'" height="', this.height,
|
|
'" preserveAspectRatio="', preserveAspectRatio, '"',
|
|
'></image>\n'
|
|
);
|
|
|
|
if (this.stroke || this.strokeDashArray) {
|
|
var origFill = this.fill;
|
|
this.fill = null;
|
|
markup.push(
|
|
'<rect ',
|
|
'x="', x, '" y="', y,
|
|
'" width="', this.width, '" height="', this.height,
|
|
'" style="', this.getSvgStyles(),
|
|
'"/>\n'
|
|
);
|
|
this.fill = origFill;
|
|
}
|
|
|
|
markup.push('</g>\n');
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns source of an image
|
|
* @param {Boolean} filtered indicates if the src is needed for svg
|
|
* @return {String} Source of an image
|
|
*/
|
|
getSrc: function(filtered) {
|
|
var element = filtered ? this._element : this._originalElement;
|
|
if (element) {
|
|
return fabric.isLikelyNode ? element._src : element.src;
|
|
}
|
|
else {
|
|
return this.src || '';
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets source of an image
|
|
* @param {String} src Source string (URL)
|
|
* @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied)
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Image} thisArg
|
|
* @chainable
|
|
*/
|
|
setSrc: function(src, callback, options) {
|
|
fabric.util.loadImage(src, function(img) {
|
|
return this.setElement(img, callback, options);
|
|
}, this, options && options.crossOrigin);
|
|
},
|
|
|
|
/**
|
|
* Returns string representation of an instance
|
|
* @return {String} String representation of an instance
|
|
*/
|
|
toString: function() {
|
|
return '#<fabric.Image: { src: "' + this.getSrc() + '" }>';
|
|
},
|
|
|
|
/**
|
|
* Applies filters assigned to this image (from "filters" array)
|
|
* @method applyFilters
|
|
* @param {Function} callback Callback is invoked when all filters have been applied and new image is generated
|
|
* @param {Array} filters to be applied
|
|
* @param {fabric.Image} imgElement image to filter ( default to this._element )
|
|
* @param {Boolean} forResizing
|
|
* @return {CanvasElement} canvasEl to be drawn immediately
|
|
* @chainable
|
|
*/
|
|
applyFilters: function(callback, filters, imgElement, forResizing) {
|
|
|
|
filters = filters || this.filters;
|
|
imgElement = imgElement || this._originalElement;
|
|
|
|
if (!imgElement) {
|
|
return;
|
|
}
|
|
|
|
var replacement = fabric.util.createImage(),
|
|
retinaScaling = this.canvas ? this.canvas.getRetinaScaling() : fabric.devicePixelRatio,
|
|
minimumScale = this.minimumScaleTrigger / retinaScaling,
|
|
_this = this, scaleX, scaleY;
|
|
|
|
if (filters.length === 0) {
|
|
this._element = imgElement;
|
|
callback && callback(this);
|
|
return imgElement;
|
|
}
|
|
|
|
var canvasEl = fabric.util.createCanvasElement();
|
|
canvasEl.width = imgElement.width;
|
|
canvasEl.height = imgElement.height;
|
|
canvasEl.getContext('2d').drawImage(imgElement, 0, 0, imgElement.width, imgElement.height);
|
|
|
|
filters.forEach(function(filter) {
|
|
if (!filter) {
|
|
return;
|
|
}
|
|
if (forResizing) {
|
|
scaleX = _this.scaleX < minimumScale ? _this.scaleX : 1;
|
|
scaleY = _this.scaleY < minimumScale ? _this.scaleY : 1;
|
|
if (scaleX * retinaScaling < 1) {
|
|
scaleX *= retinaScaling;
|
|
}
|
|
if (scaleY * retinaScaling < 1) {
|
|
scaleY *= retinaScaling;
|
|
}
|
|
}
|
|
else {
|
|
scaleX = filter.scaleX;
|
|
scaleY = filter.scaleY;
|
|
}
|
|
filter.applyTo(canvasEl, scaleX, scaleY);
|
|
if (!forResizing && filter.type === 'Resize') {
|
|
_this.width *= filter.scaleX;
|
|
_this.height *= filter.scaleY;
|
|
}
|
|
});
|
|
|
|
/** @ignore */
|
|
replacement.width = canvasEl.width;
|
|
replacement.height = canvasEl.height;
|
|
if (fabric.isLikelyNode) {
|
|
replacement.src = canvasEl.toBuffer(undefined, fabric.Image.pngCompression);
|
|
// onload doesn't fire in some node versions, so we invoke callback manually
|
|
_this._element = replacement;
|
|
!forResizing && (_this._filteredEl = replacement);
|
|
callback && callback(_this);
|
|
}
|
|
else {
|
|
replacement.onload = function() {
|
|
_this._element = replacement;
|
|
!forResizing && (_this._filteredEl = replacement);
|
|
callback && callback(_this);
|
|
replacement.onload = canvasEl = null;
|
|
};
|
|
replacement.src = canvasEl.toDataURL('image/png');
|
|
}
|
|
return canvasEl;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
_render: function(ctx, noTransform) {
|
|
var x, y, imageMargins = this._findMargins(), elementToDraw;
|
|
|
|
x = (noTransform ? this.left : -this.width / 2);
|
|
y = (noTransform ? this.top : -this.height / 2);
|
|
|
|
if (this.meetOrSlice === 'slice') {
|
|
ctx.beginPath();
|
|
ctx.rect(x, y, this.width, this.height);
|
|
ctx.clip();
|
|
}
|
|
|
|
if (this.isMoving === false && this.resizeFilters.length && this._needsResize()) {
|
|
this._lastScaleX = this.scaleX;
|
|
this._lastScaleY = this.scaleY;
|
|
elementToDraw = this.applyFilters(null, this.resizeFilters, this._filteredEl || this._originalElement, true);
|
|
}
|
|
else {
|
|
elementToDraw = this._element;
|
|
}
|
|
elementToDraw && ctx.drawImage(elementToDraw,
|
|
x + imageMargins.marginX,
|
|
y + imageMargins.marginY,
|
|
imageMargins.width,
|
|
imageMargins.height
|
|
);
|
|
|
|
this._stroke(ctx);
|
|
this._renderStroke(ctx);
|
|
},
|
|
|
|
/**
|
|
* @private, needed to check if image needs resize
|
|
*/
|
|
_needsResize: function() {
|
|
return (this.scaleX !== this._lastScaleX || this.scaleY !== this._lastScaleY);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_findMargins: function() {
|
|
var width = this.width, height = this.height, scales,
|
|
scale, marginX = 0, marginY = 0;
|
|
|
|
if (this.alignX !== 'none' || this.alignY !== 'none') {
|
|
scales = [this.width / this._element.width, this.height / this._element.height];
|
|
scale = this.meetOrSlice === 'meet'
|
|
? Math.min.apply(null, scales) : Math.max.apply(null, scales);
|
|
width = this._element.width * scale;
|
|
height = this._element.height * scale;
|
|
if (this.alignX === 'Mid') {
|
|
marginX = (this.width - width) / 2;
|
|
}
|
|
if (this.alignX === 'Max') {
|
|
marginX = this.width - width;
|
|
}
|
|
if (this.alignY === 'Mid') {
|
|
marginY = (this.height - height) / 2;
|
|
}
|
|
if (this.alignY === 'Max') {
|
|
marginY = this.height - height;
|
|
}
|
|
}
|
|
return {
|
|
width: width,
|
|
height: height,
|
|
marginX: marginX,
|
|
marginY: marginY
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_resetWidthHeight: function() {
|
|
var element = this.getElement();
|
|
|
|
this.set('width', element.width);
|
|
this.set('height', element.height);
|
|
},
|
|
|
|
/**
|
|
* The Image class's initialization method. This method is automatically
|
|
* called by the constructor.
|
|
* @private
|
|
* @param {HTMLImageElement|String} element The element representing the image
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
_initElement: function(element, options, callback) {
|
|
this.setElement(fabric.util.getById(element), callback, options);
|
|
fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
_initConfig: function(options) {
|
|
options || (options = { });
|
|
this.setOptions(options);
|
|
this._setWidthHeight(options);
|
|
if (this._element && this.crossOrigin) {
|
|
this._element.crossOrigin = this.crossOrigin;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Array} filters to be initialized
|
|
* @param {Function} callback Callback to invoke when all fabric.Image.filters instances are created
|
|
*/
|
|
_initFilters: function(filters, callback) {
|
|
if (filters && filters.length) {
|
|
fabric.util.enlivenObjects(filters, function(enlivenedObjects) {
|
|
callback && callback(enlivenedObjects);
|
|
}, 'fabric.Image.filters');
|
|
}
|
|
else {
|
|
callback && callback();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} [options] Object with width/height properties
|
|
*/
|
|
_setWidthHeight: function(options) {
|
|
this.width = 'width' in options
|
|
? options.width
|
|
: (this.getElement()
|
|
? this.getElement().width || 0
|
|
: 0);
|
|
|
|
this.height = 'height' in options
|
|
? options.height
|
|
: (this.getElement()
|
|
? this.getElement().height || 0
|
|
: 0);
|
|
},
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity of this instance
|
|
*/
|
|
complexity: function() {
|
|
return 1;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Default CSS class name for canvas
|
|
* @static
|
|
* @type String
|
|
* @default
|
|
*/
|
|
fabric.Image.CSS_CANVAS = 'canvas-img';
|
|
|
|
/**
|
|
* Alias for getSrc
|
|
* @static
|
|
*/
|
|
fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc;
|
|
|
|
/**
|
|
* Creates an instance of fabric.Image from its object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} callback Callback to invoke when an image instance is created
|
|
*/
|
|
fabric.Image.fromObject = function(object, callback) {
|
|
fabric.util.loadImage(object.src, function(img) {
|
|
fabric.Image.prototype._initFilters.call(object, object.filters, function(filters) {
|
|
object.filters = filters || [];
|
|
fabric.Image.prototype._initFilters.call(object, object.resizeFilters, function(resizeFilters) {
|
|
object.resizeFilters = resizeFilters || [];
|
|
return new fabric.Image(img, object, callback);
|
|
});
|
|
});
|
|
}, null, object.crossOrigin);
|
|
};
|
|
|
|
/**
|
|
* Creates an instance of fabric.Image from an URL string
|
|
* @static
|
|
* @param {String} url URL to create an image from
|
|
* @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument)
|
|
* @param {Object} [imgOptions] Options object
|
|
*/
|
|
fabric.Image.fromURL = function(url, callback, imgOptions) {
|
|
fabric.util.loadImage(url, function(img) {
|
|
callback && callback(new fabric.Image(img, imgOptions));
|
|
}, null, imgOptions && imgOptions.crossOrigin);
|
|
};
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement})
|
|
* @static
|
|
* @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement}
|
|
*/
|
|
fabric.Image.ATTRIBUTE_NAMES =
|
|
fabric.SHARED_ATTRIBUTES.concat('x y width height preserveAspectRatio xlink:href'.split(' '));
|
|
|
|
/**
|
|
* Returns {@link fabric.Image} instance from an SVG element
|
|
* @static
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Function} callback Callback to execute when fabric.Image object is created
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Image} Instance of fabric.Image
|
|
*/
|
|
fabric.Image.fromElement = function(element, callback, options) {
|
|
var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES),
|
|
preserveAR;
|
|
|
|
if (parsedAttributes.preserveAspectRatio) {
|
|
preserveAR = fabric.util.parsePreserveAspectRatioAttribute(parsedAttributes.preserveAspectRatio);
|
|
extend(parsedAttributes, preserveAR);
|
|
}
|
|
|
|
fabric.Image.fromURL(parsedAttributes['xlink:href'], callback,
|
|
extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Indicates that instances of this type are async
|
|
* @static
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
fabric.Image.async = true;
|
|
|
|
/**
|
|
* Indicates compression level used when generating PNG under Node (in applyFilters). Any of 0-9
|
|
* @static
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
fabric.Image.pngCompression = 1;
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} angle value
|
|
*/
|
|
_getAngleValueForStraighten: function() {
|
|
var angle = this.getAngle() % 360;
|
|
if (angle > 0) {
|
|
return Math.round((angle - 1) / 90) * 90;
|
|
}
|
|
return Math.round(angle / 90) * 90;
|
|
},
|
|
|
|
/**
|
|
* Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
straighten: function() {
|
|
this.setAngle(this._getAngleValueForStraighten());
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Same as {@link fabric.Object.prototype.straighten} but with animation
|
|
* @param {Object} callbacks Object with callback functions
|
|
* @param {Function} [callbacks.onComplete] Invoked on completion
|
|
* @param {Function} [callbacks.onChange] Invoked on every step of animation
|
|
* @return {fabric.Object} thisArg
|
|
* @chainable
|
|
*/
|
|
fxStraighten: function(callbacks) {
|
|
callbacks = callbacks || { };
|
|
|
|
var empty = function() { },
|
|
onComplete = callbacks.onComplete || empty,
|
|
onChange = callbacks.onChange || empty,
|
|
_this = this;
|
|
|
|
fabric.util.animate({
|
|
startValue: this.get('angle'),
|
|
endValue: this._getAngleValueForStraighten(),
|
|
duration: this.FX_DURATION,
|
|
onChange: function(value) {
|
|
_this.setAngle(value);
|
|
onChange();
|
|
},
|
|
onComplete: function() {
|
|
_this.setCoords();
|
|
onComplete();
|
|
},
|
|
onStart: function() {
|
|
_this.set('active', false);
|
|
}
|
|
});
|
|
|
|
return this;
|
|
}
|
|
});
|
|
|
|
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
|
|
|
|
/**
|
|
* Straightens object, then rerenders canvas
|
|
* @param {fabric.Object} object Object to straighten
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
straightenObject: function (object) {
|
|
object.straighten();
|
|
this.renderAll();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Same as {@link fabric.Canvas.prototype.straightenObject}, but animated
|
|
* @param {fabric.Object} object Object to straighten
|
|
* @return {fabric.Canvas} thisArg
|
|
* @chainable
|
|
*/
|
|
fxStraightenObject: function (object) {
|
|
object.fxStraighten({
|
|
onChange: this.renderAll.bind(this)
|
|
});
|
|
return this;
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* @namespace fabric.Image.filters
|
|
* @memberOf fabric.Image
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters}
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
*/
|
|
fabric.Image.filters = fabric.Image.filters || { };
|
|
|
|
/**
|
|
* Root filter class from which all filter classes inherit from
|
|
* @class fabric.Image.filters.BaseFilter
|
|
* @memberOf fabric.Image.filters
|
|
*/
|
|
fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'BaseFilter',
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
initialize: function(options) {
|
|
if (options) {
|
|
this.setOptions(options);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets filter's properties from options
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
setOptions: function(options) {
|
|
for (var prop in options) {
|
|
this[prop] = options[prop];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return { type: this.type };
|
|
},
|
|
|
|
/**
|
|
* Returns a JSON representation of an instance
|
|
* @return {Object} JSON
|
|
*/
|
|
toJSON: function() {
|
|
// delegate, not alias
|
|
return this.toObject();
|
|
}
|
|
});
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Brightness filter class
|
|
* @class fabric.Image.filters.Brightness
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Brightness({
|
|
* brightness: 200
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Brightness',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Brightness.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Number} [options.brightness=0] Value to brighten the image up (-255..255)
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
this.brightness = options.brightness || 0;
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
brightness = this.brightness;
|
|
|
|
for (var i = 0, len = data.length; i < len; i += 4) {
|
|
data[i] += brightness;
|
|
data[i + 1] += brightness;
|
|
data[i + 2] += brightness;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
brightness: this.brightness
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.Brightness} Instance of fabric.Image.filters.Brightness
|
|
*/
|
|
fabric.Image.filters.Brightness.fromObject = function(object) {
|
|
return new fabric.Image.filters.Brightness(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Adapted from <a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">html5rocks article</a>
|
|
* @class fabric.Image.filters.Convolute
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.Convolute#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example <caption>Sharpen filter</caption>
|
|
* var filter = new fabric.Image.filters.Convolute({
|
|
* matrix: [ 0, -1, 0,
|
|
* -1, 5, -1,
|
|
* 0, -1, 0 ]
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
* @example <caption>Blur filter</caption>
|
|
* var filter = new fabric.Image.filters.Convolute({
|
|
* matrix: [ 1/9, 1/9, 1/9,
|
|
* 1/9, 1/9, 1/9,
|
|
* 1/9, 1/9, 1/9 ]
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
* @example <caption>Emboss filter</caption>
|
|
* var filter = new fabric.Image.filters.Convolute({
|
|
* matrix: [ 1, 1, 1,
|
|
* 1, 0.7, -1,
|
|
* -1, -1, -1 ]
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
* @example <caption>Emboss filter with opaqueness</caption>
|
|
* var filter = new fabric.Image.filters.Convolute({
|
|
* opaque: true,
|
|
* matrix: [ 1, 1, 1,
|
|
* 1, 0.7, -1,
|
|
* -1, -1, -1 ]
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Convolute',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Convolute.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Boolean} [options.opaque=false] Opaque value (true/false)
|
|
* @param {Array} [options.matrix] Filter matrix
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
|
|
this.opaque = options.opaque;
|
|
this.matrix = options.matrix || [
|
|
0, 0, 0,
|
|
0, 1, 0,
|
|
0, 0, 0
|
|
];
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
|
|
var weights = this.matrix,
|
|
context = canvasEl.getContext('2d'),
|
|
pixels = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
|
|
side = Math.round(Math.sqrt(weights.length)),
|
|
halfSide = Math.floor(side / 2),
|
|
src = pixels.data,
|
|
sw = pixels.width,
|
|
sh = pixels.height,
|
|
output = context.createImageData(sw, sh),
|
|
dst = output.data,
|
|
// go through the destination image pixels
|
|
alphaFac = this.opaque ? 1 : 0,
|
|
r, g, b, a, dstOff,
|
|
scx, scy, srcOff, wt;
|
|
|
|
for (var y = 0; y < sh; y++) {
|
|
for (var x = 0; x < sw; x++) {
|
|
dstOff = (y * sw + x) * 4;
|
|
// calculate the weighed sum of the source image pixels that
|
|
// fall under the convolution matrix
|
|
r = 0; g = 0; b = 0; a = 0;
|
|
|
|
for (var cy = 0; cy < side; cy++) {
|
|
for (var cx = 0; cx < side; cx++) {
|
|
scy = y + cy - halfSide;
|
|
scx = x + cx - halfSide;
|
|
|
|
// eslint-disable-next-line max-depth
|
|
if (scy < 0 || scy > sh || scx < 0 || scx > sw) {
|
|
continue;
|
|
}
|
|
|
|
srcOff = (scy * sw + scx) * 4;
|
|
wt = weights[cy * side + cx];
|
|
|
|
r += src[srcOff] * wt;
|
|
g += src[srcOff + 1] * wt;
|
|
b += src[srcOff + 2] * wt;
|
|
a += src[srcOff + 3] * wt;
|
|
}
|
|
}
|
|
dst[dstOff] = r;
|
|
dst[dstOff + 1] = g;
|
|
dst[dstOff + 2] = b;
|
|
dst[dstOff + 3] = a + alphaFac * (255 - a);
|
|
}
|
|
}
|
|
|
|
context.putImageData(output, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
opaque: this.opaque,
|
|
matrix: this.matrix
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.Convolute} Instance of fabric.Image.filters.Convolute
|
|
*/
|
|
fabric.Image.filters.Convolute.fromObject = function(object) {
|
|
return new fabric.Image.filters.Convolute(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* GradientTransparency filter class
|
|
* @class fabric.Image.filters.GradientTransparency
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.GradientTransparency#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.GradientTransparency({
|
|
* threshold: 200
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
// eslint-disable-next-line max-len
|
|
filters.GradientTransparency = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.GradientTransparency.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'GradientTransparency',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.GradientTransparency.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Number} [options.threshold=100] Threshold value
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
this.threshold = options.threshold || 100;
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
threshold = this.threshold,
|
|
total = data.length;
|
|
|
|
for (var i = 0, len = data.length; i < len; i += 4) {
|
|
data[i + 3] = threshold + 255 * (total - i) / total;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
threshold: this.threshold
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.GradientTransparency} Instance of fabric.Image.filters.GradientTransparency
|
|
*/
|
|
fabric.Image.filters.GradientTransparency.fromObject = function(object) {
|
|
return new fabric.Image.filters.GradientTransparency(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Grayscale image filter class
|
|
* @class fabric.Image.filters.Grayscale
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Grayscale();
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Grayscale',
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @memberOf fabric.Image.filters.Grayscale.prototype
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
len = imageData.width * imageData.height * 4,
|
|
index = 0,
|
|
average;
|
|
|
|
while (index < len) {
|
|
average = (data[index] + data[index + 1] + data[index + 2]) / 3;
|
|
data[index] = average;
|
|
data[index + 1] = average;
|
|
data[index + 2] = average;
|
|
index += 4;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale
|
|
*/
|
|
fabric.Image.filters.Grayscale.fromObject = function() {
|
|
return new fabric.Image.filters.Grayscale();
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Invert filter class
|
|
* @class fabric.Image.filters.Invert
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Invert();
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Invert',
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @memberOf fabric.Image.filters.Invert.prototype
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
iLen = data.length, i;
|
|
|
|
for (i = 0; i < iLen; i += 4) {
|
|
data[i] = 255 - data[i];
|
|
data[i + 1] = 255 - data[i + 1];
|
|
data[i + 2] = 255 - data[i + 2];
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @return {fabric.Image.filters.Invert} Instance of fabric.Image.filters.Invert
|
|
*/
|
|
fabric.Image.filters.Invert.fromObject = function() {
|
|
return new fabric.Image.filters.Invert();
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Mask filter class
|
|
* See http://resources.aleph-1.com/mask/
|
|
* @class fabric.Image.filters.Mask
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.Mask#initialize} for constructor definition
|
|
*/
|
|
filters.Mask = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Mask.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Mask',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Mask.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {fabric.Image} [options.mask] Mask image object
|
|
* @param {Number} [options.channel=0] Rgb channel (0, 1, 2 or 3)
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
|
|
this.mask = options.mask;
|
|
this.channel = [0, 1, 2, 3].indexOf(options.channel) > -1 ? options.channel : 0;
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
if (!this.mask) {
|
|
return;
|
|
}
|
|
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
maskEl = this.mask.getElement(),
|
|
maskCanvasEl = fabric.util.createCanvasElement(),
|
|
channel = this.channel,
|
|
i,
|
|
iLen = imageData.width * imageData.height * 4;
|
|
|
|
maskCanvasEl.width = canvasEl.width;
|
|
maskCanvasEl.height = canvasEl.height;
|
|
|
|
maskCanvasEl.getContext('2d').drawImage(maskEl, 0, 0, canvasEl.width, canvasEl.height);
|
|
|
|
var maskImageData = maskCanvasEl.getContext('2d').getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
maskData = maskImageData.data;
|
|
|
|
for (i = 0; i < iLen; i += 4) {
|
|
data[i + 3] = maskData[i + channel];
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
mask: this.mask.toObject(),
|
|
channel: this.channel
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} [callback] Callback to invoke when a mask filter instance is created
|
|
*/
|
|
fabric.Image.filters.Mask.fromObject = function(object, callback) {
|
|
fabric.util.loadImage(object.mask.src, function(img) {
|
|
object.mask = new fabric.Image(img, object.mask);
|
|
callback && callback(new fabric.Image.filters.Mask(object));
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Indicates that instances of this type are async
|
|
* @static
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
fabric.Image.filters.Mask.async = true;
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Noise filter class
|
|
* @class fabric.Image.filters.Noise
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.Noise#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Noise({
|
|
* noise: 700
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Noise',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Noise.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Number} [options.noise=0] Noise value
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
this.noise = options.noise || 0;
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
noise = this.noise, rand;
|
|
|
|
for (var i = 0, len = data.length; i < len; i += 4) {
|
|
|
|
rand = (0.5 - Math.random()) * noise;
|
|
|
|
data[i] += rand;
|
|
data[i + 1] += rand;
|
|
data[i + 2] += rand;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
noise: this.noise
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.Noise} Instance of fabric.Image.filters.Noise
|
|
*/
|
|
fabric.Image.filters.Noise.fromObject = function(object) {
|
|
return new fabric.Image.filters.Noise(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Pixelate filter class
|
|
* @class fabric.Image.filters.Pixelate
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.Pixelate#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Pixelate({
|
|
* blocksize: 8
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Pixelate',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Pixelate.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Number} [options.blocksize=4] Blocksize for pixelate
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
this.blocksize = options.blocksize || 4;
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
iLen = imageData.height,
|
|
jLen = imageData.width,
|
|
index, i, j, r, g, b, a;
|
|
|
|
for (i = 0; i < iLen; i += this.blocksize) {
|
|
for (j = 0; j < jLen; j += this.blocksize) {
|
|
|
|
index = (i * 4) * jLen + (j * 4);
|
|
|
|
r = data[index];
|
|
g = data[index + 1];
|
|
b = data[index + 2];
|
|
a = data[index + 3];
|
|
|
|
/*
|
|
blocksize: 4
|
|
|
|
[1,x,x,x,1]
|
|
[x,x,x,x,1]
|
|
[x,x,x,x,1]
|
|
[x,x,x,x,1]
|
|
[1,1,1,1,1]
|
|
*/
|
|
|
|
for (var _i = i, _ilen = i + this.blocksize; _i < _ilen; _i++) {
|
|
for (var _j = j, _jlen = j + this.blocksize; _j < _jlen; _j++) {
|
|
index = (_i * 4) * jLen + (_j * 4);
|
|
data[index] = r;
|
|
data[index + 1] = g;
|
|
data[index + 2] = b;
|
|
data[index + 3] = a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
blocksize: this.blocksize
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.Pixelate} Instance of fabric.Image.filters.Pixelate
|
|
*/
|
|
fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|
return new fabric.Image.filters.Pixelate(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Remove white filter class
|
|
* @class fabric.Image.filters.RemoveWhite
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.RemoveWhite#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.RemoveWhite({
|
|
* threshold: 40,
|
|
* distance: 140
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.RemoveWhite = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveWhite.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'RemoveWhite',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.RemoveWhite.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Number} [options.threshold=30] Threshold value
|
|
* @param {Number} [options.distance=20] Distance value
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
this.threshold = options.threshold || 30;
|
|
this.distance = options.distance || 20;
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
threshold = this.threshold,
|
|
distance = this.distance,
|
|
limit = 255 - threshold,
|
|
abs = Math.abs,
|
|
r, g, b;
|
|
|
|
for (var i = 0, len = data.length; i < len; i += 4) {
|
|
r = data[i];
|
|
g = data[i + 1];
|
|
b = data[i + 2];
|
|
|
|
if (r > limit &&
|
|
g > limit &&
|
|
b > limit &&
|
|
abs(r - g) < distance &&
|
|
abs(r - b) < distance &&
|
|
abs(g - b) < distance
|
|
) {
|
|
data[i + 3] = 0;
|
|
}
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
threshold: this.threshold,
|
|
distance: this.distance
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.RemoveWhite} Instance of fabric.Image.filters.RemoveWhite
|
|
*/
|
|
fabric.Image.filters.RemoveWhite.fromObject = function(object) {
|
|
return new fabric.Image.filters.RemoveWhite(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Sepia filter class
|
|
* @class fabric.Image.filters.Sepia
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Sepia();
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Sepia = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Sepia.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Sepia',
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @memberOf fabric.Image.filters.Sepia.prototype
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
iLen = data.length, i, avg;
|
|
|
|
for (i = 0; i < iLen; i += 4) {
|
|
avg = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
|
|
data[i] = avg + 100;
|
|
data[i + 1] = avg + 50;
|
|
data[i + 2] = avg + 255;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @return {fabric.Image.filters.Sepia} Instance of fabric.Image.filters.Sepia
|
|
*/
|
|
fabric.Image.filters.Sepia.fromObject = function() {
|
|
return new fabric.Image.filters.Sepia();
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Sepia2 filter class
|
|
* @class fabric.Image.filters.Sepia2
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Sepia2();
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Sepia2 = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Sepia2.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Sepia2',
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @memberOf fabric.Image.filters.Sepia.prototype
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
iLen = data.length, i, r, g, b;
|
|
|
|
for (i = 0; i < iLen; i += 4) {
|
|
r = data[i];
|
|
g = data[i + 1];
|
|
b = data[i + 2];
|
|
|
|
data[i] = (r * 0.393 + g * 0.769 + b * 0.189 ) / 1.351;
|
|
data[i + 1] = (r * 0.349 + g * 0.686 + b * 0.168 ) / 1.203;
|
|
data[i + 2] = (r * 0.272 + g * 0.534 + b * 0.131 ) / 2.140;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @return {fabric.Image.filters.Sepia2} Instance of fabric.Image.filters.Sepia2
|
|
*/
|
|
fabric.Image.filters.Sepia2.fromObject = function() {
|
|
return new fabric.Image.filters.Sepia2();
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Tint filter class
|
|
* Adapted from <a href="https://github.com/mezzoblue/PaintbrushJS">https://github.com/mezzoblue/PaintbrushJS</a>
|
|
* @class fabric.Image.filters.Tint
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.Tint#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example <caption>Tint filter with hex color and opacity</caption>
|
|
* var filter = new fabric.Image.filters.Tint({
|
|
* color: '#3513B0',
|
|
* opacity: 0.5
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
* @example <caption>Tint filter with rgba color</caption>
|
|
* var filter = new fabric.Image.filters.Tint({
|
|
* color: 'rgba(53, 21, 176, 0.5)'
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Tint = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Tint.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Tint',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Tint.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {String} [options.color=#000000] Color to tint the image with
|
|
* @param {Number} [options.opacity] Opacity value that controls the tint effect's transparency (0..1)
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
|
|
this.color = options.color || '#000000';
|
|
this.opacity = typeof options.opacity !== 'undefined'
|
|
? options.opacity
|
|
: new fabric.Color(this.color).getAlpha();
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
iLen = data.length, i,
|
|
tintR, tintG, tintB,
|
|
r, g, b, alpha1,
|
|
source;
|
|
|
|
source = new fabric.Color(this.color).getSource();
|
|
|
|
tintR = source[0] * this.opacity;
|
|
tintG = source[1] * this.opacity;
|
|
tintB = source[2] * this.opacity;
|
|
|
|
alpha1 = 1 - this.opacity;
|
|
|
|
for (i = 0; i < iLen; i += 4) {
|
|
r = data[i];
|
|
g = data[i + 1];
|
|
b = data[i + 2];
|
|
|
|
// alpha compositing
|
|
data[i] = tintR + r * alpha1;
|
|
data[i + 1] = tintG + g * alpha1;
|
|
data[i + 2] = tintB + b * alpha1;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
color: this.color,
|
|
opacity: this.opacity
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.Tint} Instance of fabric.Image.filters.Tint
|
|
*/
|
|
fabric.Image.filters.Tint.fromObject = function(object) {
|
|
return new fabric.Image.filters.Tint(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Multiply filter class
|
|
* Adapted from <a href="http://www.laurenscorijn.com/articles/colormath-basics">http://www.laurenscorijn.com/articles/colormath-basics</a>
|
|
* @class fabric.Image.filters.Multiply
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @example <caption>Multiply filter with hex color</caption>
|
|
* var filter = new fabric.Image.filters.Multiply({
|
|
* color: '#F0F'
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
* @example <caption>Multiply filter with rgb color</caption>
|
|
* var filter = new fabric.Image.filters.Multiply({
|
|
* color: 'rgb(53, 21, 176)'
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Multiply = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Multiply.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Multiply',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Multiply.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {String} [options.color=#000000] Color to multiply the image pixels with
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
|
|
this.color = options.color || '#000000';
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
iLen = data.length, i,
|
|
source;
|
|
|
|
source = new fabric.Color(this.color).getSource();
|
|
|
|
for (i = 0; i < iLen; i += 4) {
|
|
data[i] *= source[0] / 255;
|
|
data[i + 1] *= source[1] / 255;
|
|
data[i + 2] *= source[2] / 255;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
color: this.color
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.Multiply} Instance of fabric.Image.filters.Multiply
|
|
*/
|
|
fabric.Image.filters.Multiply.fromObject = function(object) {
|
|
return new fabric.Image.filters.Multiply(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
'use strict';
|
|
|
|
var fabric = global.fabric,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Color Blend filter class
|
|
* @class fabric.Image.filter.Blend
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Blend({
|
|
* color: '#000',
|
|
* mode: 'multiply'
|
|
* });
|
|
*
|
|
* var filter = new fabric.Image.filters.Blend({
|
|
* image: fabricImageObject,
|
|
* mode: 'multiply',
|
|
* alpha: 0.5
|
|
* });
|
|
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
|
|
filters.Blend = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ {
|
|
type: 'Blend',
|
|
|
|
initialize: function(options) {
|
|
options = options || {};
|
|
this.color = options.color || '#000';
|
|
this.image = options.image || false;
|
|
this.mode = options.mode || 'multiply';
|
|
this.alpha = options.alpha || 1;
|
|
},
|
|
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
tr, tg, tb,
|
|
r, g, b,
|
|
_r, _g, _b,
|
|
source,
|
|
isImage = false;
|
|
|
|
if (this.image) {
|
|
// Blend images
|
|
isImage = true;
|
|
|
|
var _el = fabric.util.createCanvasElement();
|
|
_el.width = this.image.width;
|
|
_el.height = this.image.height;
|
|
|
|
var tmpCanvas = new fabric.StaticCanvas(_el);
|
|
tmpCanvas.add(this.image);
|
|
var context2 = tmpCanvas.getContext('2d');
|
|
source = context2.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height).data;
|
|
}
|
|
else {
|
|
// Blend color
|
|
source = new fabric.Color(this.color).getSource();
|
|
|
|
tr = source[0] * this.alpha;
|
|
tg = source[1] * this.alpha;
|
|
tb = source[2] * this.alpha;
|
|
}
|
|
|
|
for (var i = 0, len = data.length; i < len; i += 4) {
|
|
|
|
r = data[i];
|
|
g = data[i + 1];
|
|
b = data[i + 2];
|
|
|
|
if (isImage) {
|
|
tr = source[i] * this.alpha;
|
|
tg = source[i + 1] * this.alpha;
|
|
tb = source[i + 2] * this.alpha;
|
|
}
|
|
|
|
switch (this.mode) {
|
|
case 'multiply':
|
|
data[i] = r * tr / 255;
|
|
data[i + 1] = g * tg / 255;
|
|
data[i + 2] = b * tb / 255;
|
|
break;
|
|
case 'screen':
|
|
data[i] = 1 - (1 - r) * (1 - tr);
|
|
data[i + 1] = 1 - (1 - g) * (1 - tg);
|
|
data[i + 2] = 1 - (1 - b) * (1 - tb);
|
|
break;
|
|
case 'add':
|
|
data[i] = Math.min(255, r + tr);
|
|
data[i + 1] = Math.min(255, g + tg);
|
|
data[i + 2] = Math.min(255, b + tb);
|
|
break;
|
|
case 'diff':
|
|
case 'difference':
|
|
data[i] = Math.abs(r - tr);
|
|
data[i + 1] = Math.abs(g - tg);
|
|
data[i + 2] = Math.abs(b - tb);
|
|
break;
|
|
case 'subtract':
|
|
_r = r - tr;
|
|
_g = g - tg;
|
|
_b = b - tb;
|
|
|
|
data[i] = (_r < 0) ? 0 : _r;
|
|
data[i + 1] = (_g < 0) ? 0 : _g;
|
|
data[i + 2] = (_b < 0) ? 0 : _b;
|
|
break;
|
|
case 'darken':
|
|
data[i] = Math.min(r, tr);
|
|
data[i + 1] = Math.min(g, tg);
|
|
data[i + 2] = Math.min(b, tb);
|
|
break;
|
|
case 'lighten':
|
|
data[i] = Math.max(r, tr);
|
|
data[i + 1] = Math.max(g, tg);
|
|
data[i + 2] = Math.max(b, tb);
|
|
break;
|
|
}
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return {
|
|
color: this.color,
|
|
image: this.image,
|
|
mode: this.mode,
|
|
alpha: this.alpha
|
|
};
|
|
}
|
|
});
|
|
|
|
fabric.Image.filters.Blend.fromObject = function(object) {
|
|
return new fabric.Image.filters.Blend(object);
|
|
};
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor,
|
|
sqrt = Math.sqrt, abs = Math.abs, max = Math.max, round = Math.round, sin = Math.sin,
|
|
ceil = Math.ceil,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Resize image filter class
|
|
* @class fabric.Image.filters.Resize
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Resize();
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Resize',
|
|
|
|
/**
|
|
* Resize type
|
|
* @param {String} resizeType
|
|
* @default
|
|
*/
|
|
resizeType: 'hermite',
|
|
|
|
/**
|
|
* Scale factor for resizing, x axis
|
|
* @param {Number} scaleX
|
|
* @default
|
|
*/
|
|
scaleX: 0,
|
|
|
|
/**
|
|
* Scale factor for resizing, y axis
|
|
* @param {Number} scaleY
|
|
* @default
|
|
*/
|
|
scaleY: 0,
|
|
|
|
/**
|
|
* LanczosLobes parameter for lanczos filter
|
|
* @param {Number} lanczosLobes
|
|
* @default
|
|
*/
|
|
lanczosLobes: 3,
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @memberOf fabric.Image.filters.Resize.prototype
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
* @param {Number} scaleX
|
|
* @param {Number} scaleY
|
|
*/
|
|
applyTo: function(canvasEl, scaleX, scaleY) {
|
|
if (scaleX === 1 && scaleY === 1) {
|
|
return;
|
|
}
|
|
|
|
this.rcpScaleX = 1 / scaleX;
|
|
this.rcpScaleY = 1 / scaleY;
|
|
|
|
var oW = canvasEl.width, oH = canvasEl.height,
|
|
dW = round(oW * scaleX), dH = round(oH * scaleY),
|
|
imageData;
|
|
|
|
if (this.resizeType === 'sliceHack') {
|
|
imageData = this.sliceByTwo(canvasEl, oW, oH, dW, dH);
|
|
}
|
|
if (this.resizeType === 'hermite') {
|
|
imageData = this.hermiteFastResize(canvasEl, oW, oH, dW, dH);
|
|
}
|
|
if (this.resizeType === 'bilinear') {
|
|
imageData = this.bilinearFiltering(canvasEl, oW, oH, dW, dH);
|
|
}
|
|
if (this.resizeType === 'lanczos') {
|
|
imageData = this.lanczosResize(canvasEl, oW, oH, dW, dH);
|
|
}
|
|
canvasEl.width = dW;
|
|
canvasEl.height = dH;
|
|
canvasEl.getContext('2d').putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Filter sliceByTwo
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
* @param {Number} oW Original Width
|
|
* @param {Number} oH Original Height
|
|
* @param {Number} dW Destination Width
|
|
* @param {Number} dH Destination Height
|
|
* @returns {ImageData}
|
|
*/
|
|
sliceByTwo: function(canvasEl, oW, oH, dW, dH) {
|
|
var context = canvasEl.getContext('2d'), imageData,
|
|
multW = 0.5, multH = 0.5, signW = 1, signH = 1,
|
|
doneW = false, doneH = false, stepW = oW, stepH = oH,
|
|
tmpCanvas = fabric.util.createCanvasElement(),
|
|
tmpCtx = tmpCanvas.getContext('2d');
|
|
dW = floor(dW);
|
|
dH = floor(dH);
|
|
tmpCanvas.width = max(dW, oW);
|
|
tmpCanvas.height = max(dH, oH);
|
|
|
|
if (dW > oW) {
|
|
multW = 2;
|
|
signW = -1;
|
|
}
|
|
if (dH > oH) {
|
|
multH = 2;
|
|
signH = -1;
|
|
}
|
|
imageData = context.getImageData(0, 0, oW, oH);
|
|
canvasEl.width = max(dW, oW);
|
|
canvasEl.height = max(dH, oH);
|
|
context.putImageData(imageData, 0, 0);
|
|
|
|
while (!doneW || !doneH) {
|
|
oW = stepW;
|
|
oH = stepH;
|
|
if (dW * signW < floor(stepW * multW * signW)) {
|
|
stepW = floor(stepW * multW);
|
|
}
|
|
else {
|
|
stepW = dW;
|
|
doneW = true;
|
|
}
|
|
if (dH * signH < floor(stepH * multH * signH)) {
|
|
stepH = floor(stepH * multH);
|
|
}
|
|
else {
|
|
stepH = dH;
|
|
doneH = true;
|
|
}
|
|
imageData = context.getImageData(0, 0, oW, oH);
|
|
tmpCtx.putImageData(imageData, 0, 0);
|
|
context.clearRect(0, 0, stepW, stepH);
|
|
context.drawImage(tmpCanvas, 0, 0, oW, oH, 0, 0, stepW, stepH);
|
|
}
|
|
return context.getImageData(0, 0, dW, dH);
|
|
},
|
|
|
|
/**
|
|
* Filter lanczosResize
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
* @param {Number} oW Original Width
|
|
* @param {Number} oH Original Height
|
|
* @param {Number} dW Destination Width
|
|
* @param {Number} dH Destination Height
|
|
* @returns {ImageData}
|
|
*/
|
|
lanczosResize: function(canvasEl, oW, oH, dW, dH) {
|
|
|
|
function lanczosCreate(lobes) {
|
|
return function(x) {
|
|
if (x > lobes) {
|
|
return 0;
|
|
}
|
|
x *= Math.PI;
|
|
if (abs(x) < 1e-16) {
|
|
return 1;
|
|
}
|
|
var xx = x / lobes;
|
|
return sin(x) * sin(xx) / x / xx;
|
|
};
|
|
}
|
|
|
|
function process(u) {
|
|
var v, i, weight, idx, a, red, green,
|
|
blue, alpha, fX, fY;
|
|
center.x = (u + 0.5) * ratioX;
|
|
icenter.x = floor(center.x);
|
|
for (v = 0; v < dH; v++) {
|
|
center.y = (v + 0.5) * ratioY;
|
|
icenter.y = floor(center.y);
|
|
a = 0; red = 0; green = 0; blue = 0; alpha = 0;
|
|
for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) {
|
|
if (i < 0 || i >= oW) {
|
|
continue;
|
|
}
|
|
fX = floor(1000 * abs(i - center.x));
|
|
if (!cacheLanc[fX]) {
|
|
cacheLanc[fX] = { };
|
|
}
|
|
for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) {
|
|
if (j < 0 || j >= oH) {
|
|
continue;
|
|
}
|
|
fY = floor(1000 * abs(j - center.y));
|
|
if (!cacheLanc[fX][fY]) {
|
|
cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000);
|
|
}
|
|
weight = cacheLanc[fX][fY];
|
|
if (weight > 0) {
|
|
idx = (j * oW + i) * 4;
|
|
a += weight;
|
|
red += weight * srcData[idx];
|
|
green += weight * srcData[idx + 1];
|
|
blue += weight * srcData[idx + 2];
|
|
alpha += weight * srcData[idx + 3];
|
|
}
|
|
}
|
|
}
|
|
idx = (v * dW + u) * 4;
|
|
destData[idx] = red / a;
|
|
destData[idx + 1] = green / a;
|
|
destData[idx + 2] = blue / a;
|
|
destData[idx + 3] = alpha / a;
|
|
}
|
|
|
|
if (++u < dW) {
|
|
return process(u);
|
|
}
|
|
else {
|
|
return destImg;
|
|
}
|
|
}
|
|
|
|
var context = canvasEl.getContext('2d'),
|
|
srcImg = context.getImageData(0, 0, oW, oH),
|
|
destImg = context.getImageData(0, 0, dW, dH),
|
|
srcData = srcImg.data, destData = destImg.data,
|
|
lanczos = lanczosCreate(this.lanczosLobes),
|
|
ratioX = this.rcpScaleX, ratioY = this.rcpScaleY,
|
|
rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY,
|
|
range2X = ceil(ratioX * this.lanczosLobes / 2),
|
|
range2Y = ceil(ratioY * this.lanczosLobes / 2),
|
|
cacheLanc = { }, center = { }, icenter = { };
|
|
|
|
return process(0);
|
|
},
|
|
|
|
/**
|
|
* bilinearFiltering
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
* @param {Number} oW Original Width
|
|
* @param {Number} oH Original Height
|
|
* @param {Number} dW Destination Width
|
|
* @param {Number} dH Destination Height
|
|
* @returns {ImageData}
|
|
*/
|
|
bilinearFiltering: function(canvasEl, oW, oH, dW, dH) {
|
|
var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl,
|
|
color, offset = 0, origPix, ratioX = this.rcpScaleX,
|
|
ratioY = this.rcpScaleY, context = canvasEl.getContext('2d'),
|
|
w4 = 4 * (oW - 1), img = context.getImageData(0, 0, oW, oH),
|
|
pixels = img.data, destImage = context.getImageData(0, 0, dW, dH),
|
|
destPixels = destImage.data;
|
|
for (i = 0; i < dH; i++) {
|
|
for (j = 0; j < dW; j++) {
|
|
x = floor(ratioX * j);
|
|
y = floor(ratioY * i);
|
|
xDiff = ratioX * j - x;
|
|
yDiff = ratioY * i - y;
|
|
origPix = 4 * (y * oW + x);
|
|
|
|
for (chnl = 0; chnl < 4; chnl++) {
|
|
a = pixels[origPix + chnl];
|
|
b = pixels[origPix + 4 + chnl];
|
|
c = pixels[origPix + w4 + chnl];
|
|
d = pixels[origPix + w4 + 4 + chnl];
|
|
color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) +
|
|
c * yDiff * (1 - xDiff) + d * xDiff * yDiff;
|
|
destPixels[offset++] = color;
|
|
}
|
|
}
|
|
}
|
|
return destImage;
|
|
},
|
|
|
|
/**
|
|
* hermiteFastResize
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
* @param {Number} oW Original Width
|
|
* @param {Number} oH Original Height
|
|
* @param {Number} dW Destination Width
|
|
* @param {Number} dH Destination Height
|
|
* @returns {ImageData}
|
|
*/
|
|
hermiteFastResize: function(canvasEl, oW, oH, dW, dH) {
|
|
var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY,
|
|
ratioWHalf = ceil(ratioW / 2),
|
|
ratioHHalf = ceil(ratioH / 2),
|
|
context = canvasEl.getContext('2d'),
|
|
img = context.getImageData(0, 0, oW, oH), data = img.data,
|
|
img2 = context.getImageData(0, 0, dW, dH), data2 = img2.data;
|
|
for (var j = 0; j < dH; j++) {
|
|
for (var i = 0; i < dW; i++) {
|
|
var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0,
|
|
gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH;
|
|
for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) {
|
|
var dy = abs(centerY - (yy + 0.5)) / ratioHHalf,
|
|
centerX = (i + 0.5) * ratioW, w0 = dy * dy;
|
|
for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) {
|
|
var dx = abs(centerX - (xx + 0.5)) / ratioWHalf,
|
|
w = sqrt(w0 + dx * dx);
|
|
/* eslint-disable max-depth */
|
|
if (w > 1 && w < -1) {
|
|
continue;
|
|
}
|
|
//hermite filter
|
|
weight = 2 * w * w * w - 3 * w * w + 1;
|
|
if (weight > 0) {
|
|
dx = 4 * (xx + yy * oW);
|
|
//alpha
|
|
gxA += weight * data[dx + 3];
|
|
weightsAlpha += weight;
|
|
//colors
|
|
if (data[dx + 3] < 255) {
|
|
weight = weight * data[dx + 3] / 250;
|
|
}
|
|
gxR += weight * data[dx];
|
|
gxG += weight * data[dx + 1];
|
|
gxB += weight * data[dx + 2];
|
|
weights += weight;
|
|
}
|
|
/* eslint-enable max-depth */
|
|
}
|
|
}
|
|
data2[x2] = gxR / weights;
|
|
data2[x2 + 1] = gxG / weights;
|
|
data2[x2 + 2] = gxB / weights;
|
|
data2[x2 + 3] = gxA / weightsAlpha;
|
|
}
|
|
}
|
|
return img2;
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return {
|
|
type: this.type,
|
|
scaleX: this.scaleX,
|
|
scaleY: this.scaleY,
|
|
resizeType: this.resizeType,
|
|
lanczosLobes: this.lanczosLobes
|
|
};
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @return {fabric.Image.filters.Resize} Instance of fabric.Image.filters.Resize
|
|
*/
|
|
fabric.Image.filters.Resize.fromObject = function(object) {
|
|
return new fabric.Image.filters.Resize(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Color Matrix filter class
|
|
* @class fabric.Image.filters.ColorMatrix
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php}
|
|
* @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl}
|
|
* @example <caption>Kodachrome filter</caption>
|
|
* var filter = new fabric.Image.filters.ColorMatrix({
|
|
* matrix: [
|
|
1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502,
|
|
-0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203,
|
|
-0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946,
|
|
0, 0, 0, 1, 0
|
|
]
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'ColorMatrix',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.ColorMatrix.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Array} [options.matrix] Color Matrix to modify the image data with
|
|
*/
|
|
initialize: function( options ) {
|
|
options || ( options = {} );
|
|
this.matrix = options.matrix || [
|
|
1, 0, 0, 0, 0,
|
|
0, 1, 0, 0, 0,
|
|
0, 0, 1, 0, 0,
|
|
0, 0, 0, 1, 0
|
|
];
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function( canvasEl ) {
|
|
var context = canvasEl.getContext( '2d' ),
|
|
imageData = context.getImageData( 0, 0, canvasEl.width, canvasEl.height ),
|
|
data = imageData.data,
|
|
iLen = data.length,
|
|
i,
|
|
r,
|
|
g,
|
|
b,
|
|
a,
|
|
m = this.matrix;
|
|
|
|
for ( i = 0; i < iLen; i += 4 ) {
|
|
r = data[ i ];
|
|
g = data[ i + 1 ];
|
|
b = data[ i + 2 ];
|
|
a = data[ i + 3 ];
|
|
|
|
data[ i ] = r * m[ 0 ] + g * m[ 1 ] + b * m[ 2 ] + a * m[ 3 ] + m[ 4 ];
|
|
data[ i + 1 ] = r * m[ 5 ] + g * m[ 6 ] + b * m[ 7 ] + a * m[ 8 ] + m[ 9 ];
|
|
data[ i + 2 ] = r * m[ 10 ] + g * m[ 11 ] + b * m[ 12 ] + a * m[ 13 ] + m[ 14 ];
|
|
data[ i + 3 ] = r * m[ 15 ] + g * m[ 16 ] + b * m[ 17 ] + a * m[ 18 ] + m[ 19 ];
|
|
}
|
|
|
|
context.putImageData( imageData, 0, 0 );
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
type: this.type,
|
|
matrix: this.matrix
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.ColorMatrix} Instance of fabric.Image.filters.ColorMatrix
|
|
*/
|
|
fabric.Image.filters.ColorMatrix.fromObject = function( object ) {
|
|
return new fabric.Image.filters.ColorMatrix( object );
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Contrast filter class
|
|
* @class fabric.Image.filters.Contrast
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Contrast({
|
|
* contrast: 40
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Contrast',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Contrast.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Number} [options.contrast=0] Value to contrast the image up (-255...255)
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
this.contrast = options.contrast || 0;
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
contrastF = 259 * (this.contrast + 255) / (255 * (259 - this.contrast));
|
|
|
|
for (var i = 0, len = data.length; i < len; i += 4) {
|
|
data[i] = contrastF * (data[i] - 128) + 128;
|
|
data[i + 1] = contrastF * (data[i + 1] - 128) + 128;
|
|
data[i + 2] = contrastF * (data[i + 2] - 128) + 128;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
contrast: this.contrast
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.Contrast} Instance of fabric.Image.filters.Contrast
|
|
*/
|
|
fabric.Image.filters.Contrast.fromObject = function(object) {
|
|
return new fabric.Image.filters.Contrast(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
filters = fabric.Image.filters,
|
|
createClass = fabric.util.createClass;
|
|
|
|
/**
|
|
* Saturate filter class
|
|
* @class fabric.Image.filters.Saturate
|
|
* @memberOf fabric.Image.filters
|
|
* @extends fabric.Image.filters.BaseFilter
|
|
* @see {@link fabric.Image.filters.Saturate#initialize} for constructor definition
|
|
* @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
|
|
* @example
|
|
* var filter = new fabric.Image.filters.Saturate({
|
|
* saturate: 100
|
|
* });
|
|
* object.filters.push(filter);
|
|
* object.applyFilters(canvas.renderAll.bind(canvas));
|
|
*/
|
|
filters.Saturate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturate.prototype */ {
|
|
|
|
/**
|
|
* Filter type
|
|
* @param {String} type
|
|
* @default
|
|
*/
|
|
type: 'Saturate',
|
|
|
|
/**
|
|
* Constructor
|
|
* @memberOf fabric.Image.filters.Saturate.prototype
|
|
* @param {Object} [options] Options object
|
|
* @param {Number} [options.saturate=0] Value to saturate the image (-100...100)
|
|
*/
|
|
initialize: function(options) {
|
|
options = options || { };
|
|
this.saturate = options.saturate || 0;
|
|
},
|
|
|
|
/**
|
|
* Applies filter to canvas element
|
|
* @param {Object} canvasEl Canvas element to apply filter to
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
max, adjust = -this.saturate * 0.01;
|
|
|
|
for (var i = 0, len = data.length; i < len; i += 4) {
|
|
max = Math.max(data[i], data[i + 1], data[i + 2]);
|
|
data[i] += max !== data[i] ? (max - data[i]) * adjust : 0;
|
|
data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0;
|
|
data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @return {Object} Object representation of an instance
|
|
*/
|
|
toObject: function() {
|
|
return extend(this.callSuper('toObject'), {
|
|
saturate: this.saturate
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns filter instance from an object representation
|
|
* @static
|
|
* @param {Object} object Object to create an instance from
|
|
* @return {fabric.Image.filters.Saturate} Instance of fabric.Image.filters.Saturate
|
|
*/
|
|
fabric.Image.filters.Saturate.fromObject = function(object) {
|
|
return new fabric.Image.filters.Saturate(object);
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
clone = fabric.util.object.clone,
|
|
toFixed = fabric.util.toFixed,
|
|
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
|
|
MIN_TEXT_WIDTH = 2;
|
|
|
|
if (fabric.Text) {
|
|
fabric.warn('fabric.Text is already defined');
|
|
return;
|
|
}
|
|
|
|
var stateProperties = fabric.Object.prototype.stateProperties.concat();
|
|
stateProperties.push(
|
|
'fontFamily',
|
|
'fontWeight',
|
|
'fontSize',
|
|
'text',
|
|
'textDecoration',
|
|
'textAlign',
|
|
'fontStyle',
|
|
'lineHeight',
|
|
'textBackgroundColor'
|
|
);
|
|
|
|
/**
|
|
* Text class
|
|
* @class fabric.Text
|
|
* @extends fabric.Object
|
|
* @return {fabric.Text} thisArg
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text}
|
|
* @see {@link fabric.Text#initialize} for constructor definition
|
|
*/
|
|
fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ {
|
|
|
|
/**
|
|
* Properties which when set cause object to change dimensions
|
|
* @type Object
|
|
* @private
|
|
*/
|
|
_dimensionAffectingProps: {
|
|
fontSize: true,
|
|
fontWeight: true,
|
|
fontFamily: true,
|
|
fontStyle: true,
|
|
lineHeight: true,
|
|
text: true,
|
|
charSpacing: true,
|
|
textAlign: true,
|
|
strokeWidth: false,
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_reNewline: /\r?\n/,
|
|
|
|
/**
|
|
* Use this regular expression to filter for whitespace that is not a new line.
|
|
* Mostly used when text is 'justify' aligned.
|
|
* @private
|
|
*/
|
|
_reSpacesAndTabs: /[ \t\r]+/g,
|
|
|
|
/**
|
|
* Retrieves object's fontSize
|
|
* @method getFontSize
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {String} Font size (in pixels)
|
|
*/
|
|
|
|
/**
|
|
* Sets object's fontSize
|
|
* Does not update the object .width and .height,
|
|
* call ._initDimensions() to update the values.
|
|
* @method setFontSize
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {Number} fontSize Font size (in pixels)
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Retrieves object's fontWeight
|
|
* @method getFontWeight
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {(String|Number)} Font weight
|
|
*/
|
|
|
|
/**
|
|
* Sets object's fontWeight
|
|
* Does not update the object .width and .height,
|
|
* call ._initDimensions() to update the values.
|
|
* @method setFontWeight
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {(Number|String)} fontWeight Font weight
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Retrieves object's fontFamily
|
|
* @method getFontFamily
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {String} Font family
|
|
*/
|
|
|
|
/**
|
|
* Sets object's fontFamily
|
|
* Does not update the object .width and .height,
|
|
* call ._initDimensions() to update the values.
|
|
* @method setFontFamily
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {String} fontFamily Font family
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Retrieves object's text
|
|
* @method getText
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {String} text
|
|
*/
|
|
|
|
/**
|
|
* Sets object's text
|
|
* Does not update the object .width and .height,
|
|
* call ._initDimensions() to update the values.
|
|
* @method setText
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {String} text Text
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Retrieves object's textDecoration
|
|
* @method getTextDecoration
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {String} Text decoration
|
|
*/
|
|
|
|
/**
|
|
* Sets object's textDecoration
|
|
* @method setTextDecoration
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {String} textDecoration Text decoration
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Retrieves object's fontStyle
|
|
* @method getFontStyle
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {String} Font style
|
|
*/
|
|
|
|
/**
|
|
* Sets object's fontStyle
|
|
* Does not update the object .width and .height,
|
|
* call ._initDimensions() to update the values.
|
|
* @method setFontStyle
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {String} fontStyle Font style
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Retrieves object's lineHeight
|
|
* @method getLineHeight
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {Number} Line height
|
|
*/
|
|
|
|
/**
|
|
* Sets object's lineHeight
|
|
* @method setLineHeight
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {Number} lineHeight Line height
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Retrieves object's textAlign
|
|
* @method getTextAlign
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {String} Text alignment
|
|
*/
|
|
|
|
/**
|
|
* Sets object's textAlign
|
|
* @method setTextAlign
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {String} textAlign Text alignment
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Retrieves object's textBackgroundColor
|
|
* @method getTextBackgroundColor
|
|
* @memberOf fabric.Text.prototype
|
|
* @return {String} Text background color
|
|
*/
|
|
|
|
/**
|
|
* Sets object's textBackgroundColor
|
|
* @method setTextBackgroundColor
|
|
* @memberOf fabric.Text.prototype
|
|
* @param {String} textBackgroundColor Text background color
|
|
* @return {fabric.Text}
|
|
* @chainable
|
|
*/
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'text',
|
|
|
|
/**
|
|
* Font size (in pixels)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
fontSize: 40,
|
|
|
|
/**
|
|
* Font weight (e.g. bold, normal, 400, 600, 800)
|
|
* @type {(Number|String)}
|
|
* @default
|
|
*/
|
|
fontWeight: 'normal',
|
|
|
|
/**
|
|
* Font family
|
|
* @type String
|
|
* @default
|
|
*/
|
|
fontFamily: 'Times New Roman',
|
|
|
|
/**
|
|
* Text decoration Possible values: "", "underline", "overline" or "line-through".
|
|
* @type String
|
|
* @default
|
|
*/
|
|
textDecoration: '',
|
|
|
|
/**
|
|
* Text alignment. Possible values: "left", "center", "right" or "justify".
|
|
* @type String
|
|
* @default
|
|
*/
|
|
textAlign: 'left',
|
|
|
|
/**
|
|
* Font style . Possible values: "", "normal", "italic" or "oblique".
|
|
* @type String
|
|
* @default
|
|
*/
|
|
fontStyle: '',
|
|
|
|
/**
|
|
* Line height
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
lineHeight: 1.16,
|
|
|
|
/**
|
|
* Background color of text lines
|
|
* @type String
|
|
* @default
|
|
*/
|
|
textBackgroundColor: '',
|
|
|
|
/**
|
|
* List of properties to consider when checking if
|
|
* state of an object is changed ({@link fabric.Object#hasStateChanged})
|
|
* as well as for history (undo/redo) purposes
|
|
* @type Array
|
|
*/
|
|
stateProperties: stateProperties,
|
|
|
|
/**
|
|
* When defined, an object is rendered via stroke and this property specifies its color.
|
|
* <b>Backwards incompatibility note:</b> This property was named "strokeStyle" until v1.1.6
|
|
* @type String
|
|
* @default
|
|
*/
|
|
stroke: null,
|
|
|
|
/**
|
|
* Shadow object representing shadow of this shape.
|
|
* <b>Backwards incompatibility note:</b> This property was named "textShadow" (String) until v1.2.11
|
|
* @type fabric.Shadow
|
|
* @default
|
|
*/
|
|
shadow: null,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_fontSizeFraction: 0.25,
|
|
|
|
/**
|
|
* Text Line proportion to font Size (in pixels)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
_fontSizeMult: 1.13,
|
|
|
|
/**
|
|
* additional space between characters
|
|
* expressed in thousands of em unit
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
charSpacing: 0,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {String} text Text string
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Text} thisArg
|
|
*/
|
|
initialize: function(text, options) {
|
|
options = options || { };
|
|
this.text = text;
|
|
this.__skipDimension = true;
|
|
this.setOptions(options);
|
|
this.__skipDimension = false;
|
|
this._initDimensions();
|
|
},
|
|
|
|
/**
|
|
* Initialize text dimensions. Render all text on given context
|
|
* or on a offscreen canvas to get the text width with measureText.
|
|
* Updates this.width and this.height with the proper values.
|
|
* Does not return dimensions.
|
|
* @param {CanvasRenderingContext2D} [ctx] Context to render on
|
|
* @private
|
|
*/
|
|
_initDimensions: function(ctx) {
|
|
if (this.__skipDimension) {
|
|
return;
|
|
}
|
|
if (!ctx) {
|
|
ctx = fabric.util.createCanvasElement().getContext('2d');
|
|
this._setTextStyles(ctx);
|
|
}
|
|
this._textLines = this._splitTextIntoLines();
|
|
this._clearCache();
|
|
this.width = this._getTextWidth(ctx) || this.cursorWidth || MIN_TEXT_WIDTH;
|
|
this.height = this._getTextHeight(ctx);
|
|
},
|
|
|
|
/**
|
|
* Returns string representation of an instance
|
|
* @return {String} String representation of text object
|
|
*/
|
|
toString: function() {
|
|
return '#<fabric.Text (' + this.complexity() +
|
|
'): { "text": "' + this.text + '", "fontFamily": "' + this.fontFamily + '" }>';
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_render: function(ctx) {
|
|
this.clipTo && fabric.util.clipContext(this, ctx);
|
|
this._setOpacity(ctx);
|
|
this._setShadow(ctx);
|
|
this._setupCompositeOperation(ctx);
|
|
this._renderTextBackground(ctx);
|
|
this._setStrokeStyles(ctx);
|
|
this._setFillStyles(ctx);
|
|
this._renderText(ctx);
|
|
this._renderTextDecoration(ctx);
|
|
this.clipTo && ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderText: function(ctx) {
|
|
this._renderTextFill(ctx);
|
|
this._renderTextStroke(ctx);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_setTextStyles: function(ctx) {
|
|
ctx.textBaseline = 'alphabetic';
|
|
ctx.font = this._getFontDeclaration();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} Height of fabric.Text object
|
|
*/
|
|
_getTextHeight: function() {
|
|
return this._getHeightOfSingleLine() + (this._textLines.length - 1) * this._getHeightOfLine();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @return {Number} Maximum width of fabric.Text object
|
|
*/
|
|
_getTextWidth: function(ctx) {
|
|
var maxWidth = this._getLineWidth(ctx, 0);
|
|
|
|
for (var i = 1, len = this._textLines.length; i < len; i++) {
|
|
var currentLineWidth = this._getLineWidth(ctx, i);
|
|
if (currentLineWidth > maxWidth) {
|
|
maxWidth = currentLineWidth;
|
|
}
|
|
}
|
|
return maxWidth;
|
|
},
|
|
|
|
/*
|
|
* Calculate object dimensions from its properties
|
|
* @override
|
|
* @private
|
|
*/
|
|
_getNonTransformedDimensions: function() {
|
|
return { x: this.width, y: this.height };
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} method Method name ("fillText" or "strokeText")
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} chars Chars to render
|
|
* @param {Number} left Left position of text
|
|
* @param {Number} top Top position of text
|
|
*/
|
|
_renderChars: function(method, ctx, chars, left, top) {
|
|
// remove Text word from method var
|
|
var shortM = method.slice(0, -4), char, width;
|
|
if (this[shortM].toLive) {
|
|
var offsetX = -this.width / 2 + this[shortM].offsetX || 0,
|
|
offsetY = -this.height / 2 + this[shortM].offsetY || 0;
|
|
ctx.save();
|
|
ctx.translate(offsetX, offsetY);
|
|
left -= offsetX;
|
|
top -= offsetY;
|
|
}
|
|
if (this.charSpacing !== 0) {
|
|
var additionalSpace = this._getWidthOfCharSpacing();
|
|
chars = chars.split('');
|
|
for (var i = 0, len = chars.length; i < len; i++) {
|
|
char = chars[i];
|
|
width = ctx.measureText(char).width + additionalSpace;
|
|
ctx[method](char, left, top);
|
|
left += width > 0 ? width : 0;
|
|
}
|
|
}
|
|
else {
|
|
ctx[method](chars, left, top);
|
|
}
|
|
this[shortM].toLive && ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} method Method name ("fillText" or "strokeText")
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} line Text to render
|
|
* @param {Number} left Left position of text
|
|
* @param {Number} top Top position of text
|
|
* @param {Number} lineIndex Index of a line in a text
|
|
*/
|
|
_renderTextLine: function(method, ctx, line, left, top, lineIndex) {
|
|
// lift the line by quarter of fontSize
|
|
top -= this.fontSize * this._fontSizeFraction;
|
|
|
|
// short-circuit
|
|
var lineWidth = this._getLineWidth(ctx, lineIndex);
|
|
if (this.textAlign !== 'justify' || this.width < lineWidth) {
|
|
this._renderChars(method, ctx, line, left, top, lineIndex);
|
|
return;
|
|
}
|
|
|
|
// stretch the line
|
|
var words = line.split(/\s+/),
|
|
charOffset = 0,
|
|
wordsWidth = this._getWidthOfWords(ctx, words.join(' '), lineIndex, 0),
|
|
widthDiff = this.width - wordsWidth,
|
|
numSpaces = words.length - 1,
|
|
spaceWidth = numSpaces > 0 ? widthDiff / numSpaces : 0,
|
|
leftOffset = 0, word;
|
|
|
|
for (var i = 0, len = words.length; i < len; i++) {
|
|
while (line[charOffset] === ' ' && charOffset < line.length) {
|
|
charOffset++;
|
|
}
|
|
word = words[i];
|
|
this._renderChars(method, ctx, word, left + leftOffset, top, lineIndex, charOffset);
|
|
leftOffset += this._getWidthOfWords(ctx, word, lineIndex, charOffset) + spaceWidth;
|
|
charOffset += word.length;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} word
|
|
*/
|
|
_getWidthOfWords: function (ctx, word) {
|
|
var width = ctx.measureText(word).width, charCount, additionalSpace;
|
|
if (this.charSpacing !== 0) {
|
|
charCount = word.split('').length;
|
|
additionalSpace = charCount * this._getWidthOfCharSpacing();
|
|
width += additionalSpace;
|
|
}
|
|
return width > 0 ? width : 0;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} Left offset
|
|
*/
|
|
_getLeftOffset: function() {
|
|
return -this.width / 2;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} Top offset
|
|
*/
|
|
_getTopOffset: function() {
|
|
return -this.height / 2;
|
|
},
|
|
|
|
/**
|
|
* Returns true because text has no style
|
|
*/
|
|
isEmptyStyles: function() {
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} method Method name ("fillText" or "strokeText")
|
|
*/
|
|
_renderTextCommon: function(ctx, method) {
|
|
|
|
var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset();
|
|
|
|
for (var i = 0, len = this._textLines.length; i < len; i++) {
|
|
var heightOfLine = this._getHeightOfLine(ctx, i),
|
|
maxHeight = heightOfLine / this.lineHeight,
|
|
lineWidth = this._getLineWidth(ctx, i),
|
|
leftOffset = this._getLineLeftOffset(lineWidth);
|
|
this._renderTextLine(
|
|
method,
|
|
ctx,
|
|
this._textLines[i],
|
|
left + leftOffset,
|
|
top + lineHeights + maxHeight,
|
|
i
|
|
);
|
|
lineHeights += heightOfLine;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderTextFill: function(ctx) {
|
|
if (!this.fill && this.isEmptyStyles()) {
|
|
return;
|
|
}
|
|
|
|
this._renderTextCommon(ctx, 'fillText');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderTextStroke: function(ctx) {
|
|
if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) {
|
|
return;
|
|
}
|
|
|
|
if (this.shadow && !this.shadow.affectStroke) {
|
|
this._removeShadow(ctx);
|
|
}
|
|
|
|
ctx.save();
|
|
this._setLineDash(ctx, this.strokedashArray);
|
|
ctx.beginPath();
|
|
this._renderTextCommon(ctx, 'strokeText');
|
|
ctx.closePath();
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} height of line
|
|
*/
|
|
_getHeightOfLine: function() {
|
|
return this._getHeightOfSingleLine() * this.lineHeight;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} height of line without lineHeight
|
|
*/
|
|
_getHeightOfSingleLine: function() {
|
|
return this.fontSize * this._fontSizeMult;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderTextBackground: function(ctx) {
|
|
this._renderBackground(ctx);
|
|
this._renderTextLinesBackground(ctx);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderTextLinesBackground: function(ctx) {
|
|
if (!this.textBackgroundColor) {
|
|
return;
|
|
}
|
|
var lineTopOffset = 0, heightOfLine,
|
|
lineWidth, lineLeftOffset;
|
|
|
|
ctx.fillStyle = this.textBackgroundColor;
|
|
for (var i = 0, len = this._textLines.length; i < len; i++) {
|
|
heightOfLine = this._getHeightOfLine(ctx, i);
|
|
lineWidth = this._getLineWidth(ctx, i);
|
|
if (lineWidth > 0) {
|
|
lineLeftOffset = this._getLineLeftOffset(lineWidth);
|
|
ctx.fillRect(
|
|
this._getLeftOffset() + lineLeftOffset,
|
|
this._getTopOffset() + lineTopOffset,
|
|
lineWidth,
|
|
heightOfLine / this.lineHeight
|
|
);
|
|
}
|
|
lineTopOffset += heightOfLine;
|
|
}
|
|
// if there is text background color no
|
|
// other shadows should be casted
|
|
this._removeShadow(ctx);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Number} lineWidth Width of text line
|
|
* @return {Number} Line left offset
|
|
*/
|
|
_getLineLeftOffset: function(lineWidth) {
|
|
if (this.textAlign === 'center') {
|
|
return (this.width - lineWidth) / 2;
|
|
}
|
|
if (this.textAlign === 'right') {
|
|
return this.width - lineWidth;
|
|
}
|
|
return 0;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_clearCache: function() {
|
|
this.__lineWidths = [];
|
|
this.__lineHeights = [];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_shouldClearCache: function() {
|
|
var shouldClear = false;
|
|
if (this._forceClearCache) {
|
|
this._forceClearCache = false;
|
|
return true;
|
|
}
|
|
for (var prop in this._dimensionAffectingProps) {
|
|
if (this['__' + prop] !== this[prop]) {
|
|
this['__' + prop] = this[prop];
|
|
shouldClear = true;
|
|
}
|
|
}
|
|
return shouldClear;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Number} lineIndex line number
|
|
* @return {Number} Line width
|
|
*/
|
|
_getLineWidth: function(ctx, lineIndex) {
|
|
if (this.__lineWidths[lineIndex]) {
|
|
return this.__lineWidths[lineIndex] === -1 ? this.width : this.__lineWidths[lineIndex];
|
|
}
|
|
|
|
var width, wordCount, line = this._textLines[lineIndex];
|
|
|
|
if (line === '') {
|
|
width = 0;
|
|
}
|
|
else {
|
|
width = this._measureLine(ctx, lineIndex);
|
|
}
|
|
this.__lineWidths[lineIndex] = width;
|
|
|
|
if (width && this.textAlign === 'justify') {
|
|
wordCount = line.split(/\s+/);
|
|
if (wordCount.length > 1) {
|
|
this.__lineWidths[lineIndex] = -1;
|
|
}
|
|
}
|
|
return width;
|
|
},
|
|
|
|
_getWidthOfCharSpacing: function() {
|
|
if (this.charSpacing !== 0) {
|
|
return this.fontSize * this.charSpacing / 1000;
|
|
}
|
|
return 0;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Number} lineIndex line number
|
|
* @return {Number} Line width
|
|
*/
|
|
_measureLine: function(ctx, lineIndex) {
|
|
var line = this._textLines[lineIndex],
|
|
width = ctx.measureText(line).width,
|
|
additionalSpace = 0, charCount, finalWidth;
|
|
if (this.charSpacing !== 0) {
|
|
charCount = line.split('').length;
|
|
additionalSpace = (charCount - 1) * this._getWidthOfCharSpacing();
|
|
}
|
|
finalWidth = width + additionalSpace;
|
|
return finalWidth > 0 ? finalWidth : 0;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderTextDecoration: function(ctx) {
|
|
if (!this.textDecoration) {
|
|
return;
|
|
}
|
|
var halfOfVerticalBox = this.height / 2,
|
|
_this = this, offsets = [];
|
|
|
|
/** @ignore */
|
|
function renderLinesAtOffset(offsets) {
|
|
var i, lineHeight = 0, len, j, oLen, lineWidth,
|
|
lineLeftOffset, heightOfLine;
|
|
|
|
for (i = 0, len = _this._textLines.length; i < len; i++) {
|
|
|
|
lineWidth = _this._getLineWidth(ctx, i);
|
|
lineLeftOffset = _this._getLineLeftOffset(lineWidth);
|
|
heightOfLine = _this._getHeightOfLine(ctx, i);
|
|
|
|
for (j = 0, oLen = offsets.length; j < oLen; j++) {
|
|
ctx.fillRect(
|
|
_this._getLeftOffset() + lineLeftOffset,
|
|
lineHeight + (_this._fontSizeMult - 1 + offsets[j] ) * _this.fontSize - halfOfVerticalBox,
|
|
lineWidth,
|
|
_this.fontSize / 15);
|
|
}
|
|
lineHeight += heightOfLine;
|
|
}
|
|
}
|
|
|
|
if (this.textDecoration.indexOf('underline') > -1) {
|
|
offsets.push(0.85); // 1 - 3/16
|
|
}
|
|
if (this.textDecoration.indexOf('line-through') > -1) {
|
|
offsets.push(0.43);
|
|
}
|
|
if (this.textDecoration.indexOf('overline') > -1) {
|
|
offsets.push(-0.12);
|
|
}
|
|
if (offsets.length > 0) {
|
|
renderLinesAtOffset(offsets);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* return font declaration string for canvas context
|
|
* @returns {String} font declaration formatted for canvas context.
|
|
*/
|
|
_getFontDeclaration: function() {
|
|
return [
|
|
// node-canvas needs "weight style", while browsers need "style weight"
|
|
(fabric.isLikelyNode ? this.fontWeight : this.fontStyle),
|
|
(fabric.isLikelyNode ? this.fontStyle : this.fontWeight),
|
|
this.fontSize + 'px',
|
|
(fabric.isLikelyNode ? ('"' + this.fontFamily + '"') : this.fontFamily)
|
|
].join(' ');
|
|
},
|
|
|
|
/**
|
|
* Renders text instance on a specified context
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
render: function(ctx, noTransform) {
|
|
// do not render if object is not visible
|
|
if (!this.visible) {
|
|
return;
|
|
}
|
|
|
|
ctx.save();
|
|
this._setTextStyles(ctx);
|
|
|
|
if (this._shouldClearCache()) {
|
|
this._initDimensions(ctx);
|
|
}
|
|
this.drawSelectionBackground(ctx);
|
|
if (!noTransform) {
|
|
this.transform(ctx);
|
|
}
|
|
if (this.transformMatrix) {
|
|
ctx.transform.apply(ctx, this.transformMatrix);
|
|
}
|
|
if (this.group && this.group.type === 'path-group') {
|
|
ctx.translate(this.left, this.top);
|
|
}
|
|
this._render(ctx);
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* Returns the text as an array of lines.
|
|
* @returns {Array} Lines in the text
|
|
*/
|
|
_splitTextIntoLines: function() {
|
|
return this.text.split(this._reNewline);
|
|
},
|
|
|
|
/**
|
|
* Returns 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 additionalProperties = [
|
|
'text',
|
|
'fontSize',
|
|
'fontWeight',
|
|
'fontFamily',
|
|
'fontStyle',
|
|
'lineHeight',
|
|
'textDecoration',
|
|
'textAlign',
|
|
'textBackgroundColor',
|
|
'charSpacing'
|
|
].concat(propertiesToInclude);
|
|
return this.callSuper('toObject', additionalProperties);
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
if (!this.ctx) {
|
|
this.ctx = fabric.util.createCanvasElement().getContext('2d');
|
|
}
|
|
var markup = this._createBaseSVGMarkup(),
|
|
offsets = this._getSVGLeftTopOffsets(this.ctx),
|
|
textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft);
|
|
this._wrapSVGTextAndBg(markup, textAndBg);
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getSVGLeftTopOffsets: function(ctx) {
|
|
var lineTop = this._getHeightOfLine(ctx, 0),
|
|
textLeft = -this.width / 2,
|
|
textTop = 0;
|
|
|
|
return {
|
|
textLeft: textLeft + (this.group && this.group.type === 'path-group' ? this.left : 0),
|
|
textTop: textTop + (this.group && this.group.type === 'path-group' ? -this.top : 0),
|
|
lineTop: lineTop
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_wrapSVGTextAndBg: function(markup, textAndBg) {
|
|
var noShadow = true, filter = this.getSvgFilter(),
|
|
style = filter === '' ? '' : ' style="' + filter + '"';
|
|
|
|
markup.push(
|
|
'\t<g ', this.getSvgId(), 'transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '"',
|
|
style, '>\n',
|
|
textAndBg.textBgRects.join(''),
|
|
'\t\t<text ',
|
|
(this.fontFamily ? 'font-family="' + this.fontFamily.replace(/"/g, '\'') + '" ' : ''),
|
|
(this.fontSize ? 'font-size="' + this.fontSize + '" ' : ''),
|
|
(this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''),
|
|
(this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''),
|
|
(this.textDecoration ? 'text-decoration="' + this.textDecoration + '" ' : ''),
|
|
'style="', this.getSvgStyles(noShadow), '" >\n',
|
|
textAndBg.textSpans.join(''),
|
|
'\t\t</text>\n',
|
|
'\t</g>\n'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Number} textTopOffset Text top offset
|
|
* @param {Number} textLeftOffset Text left offset
|
|
* @return {Object}
|
|
*/
|
|
_getSVGTextAndBg: function(textTopOffset, textLeftOffset) {
|
|
var textSpans = [],
|
|
textBgRects = [],
|
|
height = 0;
|
|
// bounding-box background
|
|
this._setSVGBg(textBgRects);
|
|
|
|
// text and text-background
|
|
for (var i = 0, len = this._textLines.length; i < len; i++) {
|
|
if (this.textBackgroundColor) {
|
|
this._setSVGTextLineBg(textBgRects, i, textLeftOffset, textTopOffset, height);
|
|
}
|
|
this._setSVGTextLineText(i, textSpans, height, textLeftOffset, textTopOffset, textBgRects);
|
|
height += this._getHeightOfLine(this.ctx, i);
|
|
}
|
|
|
|
return {
|
|
textSpans: textSpans,
|
|
textBgRects: textBgRects
|
|
};
|
|
},
|
|
|
|
_setSVGTextLineText: function(i, textSpans, height, textLeftOffset, textTopOffset) {
|
|
var yPos = this.fontSize * (this._fontSizeMult - this._fontSizeFraction)
|
|
- textTopOffset + height - this.height / 2;
|
|
if (this.textAlign === 'justify') {
|
|
// i call from here to do not intefere with IText
|
|
this._setSVGTextLineJustifed(i, textSpans, yPos, textLeftOffset);
|
|
return;
|
|
}
|
|
textSpans.push(
|
|
'\t\t\t<tspan x="',
|
|
toFixed(textLeftOffset + this._getLineLeftOffset(this._getLineWidth(this.ctx, i)), NUM_FRACTION_DIGITS), '" ',
|
|
'y="',
|
|
toFixed(yPos, NUM_FRACTION_DIGITS),
|
|
'" ',
|
|
// doing this on <tspan> elements since setting opacity
|
|
// on containing <text> one doesn't work in Illustrator
|
|
this._getFillAttributes(this.fill), '>',
|
|
fabric.util.string.escapeXml(this._textLines[i]),
|
|
'</tspan>\n'
|
|
);
|
|
},
|
|
|
|
_setSVGTextLineJustifed: function(i, textSpans, yPos, textLeftOffset) {
|
|
var ctx = fabric.util.createCanvasElement().getContext('2d');
|
|
|
|
this._setTextStyles(ctx);
|
|
|
|
var line = this._textLines[i],
|
|
words = line.split(/\s+/),
|
|
wordsWidth = this._getWidthOfWords(ctx, words.join('')),
|
|
widthDiff = this.width - wordsWidth,
|
|
numSpaces = words.length - 1,
|
|
spaceWidth = numSpaces > 0 ? widthDiff / numSpaces : 0,
|
|
word, attributes = this._getFillAttributes(this.fill),
|
|
len;
|
|
|
|
textLeftOffset += this._getLineLeftOffset(this._getLineWidth(ctx, i));
|
|
|
|
for (i = 0, len = words.length; i < len; i++) {
|
|
word = words[i];
|
|
textSpans.push(
|
|
'\t\t\t<tspan x="',
|
|
toFixed(textLeftOffset, NUM_FRACTION_DIGITS), '" ',
|
|
'y="',
|
|
toFixed(yPos, NUM_FRACTION_DIGITS),
|
|
'" ',
|
|
// doing this on <tspan> elements since setting opacity
|
|
// on containing <text> one doesn't work in Illustrator
|
|
attributes, '>',
|
|
fabric.util.string.escapeXml(word),
|
|
'</tspan>\n'
|
|
);
|
|
textLeftOffset += this._getWidthOfWords(ctx, word) + spaceWidth;
|
|
}
|
|
},
|
|
|
|
_setSVGTextLineBg: function(textBgRects, i, textLeftOffset, textTopOffset, height) {
|
|
textBgRects.push(
|
|
'\t\t<rect ',
|
|
this._getFillAttributes(this.textBackgroundColor),
|
|
' x="',
|
|
toFixed(textLeftOffset + this._getLineLeftOffset(this._getLineWidth(this.ctx, i)), NUM_FRACTION_DIGITS),
|
|
'" y="',
|
|
toFixed(height - this.height / 2, NUM_FRACTION_DIGITS),
|
|
'" width="',
|
|
toFixed(this._getLineWidth(this.ctx, i), NUM_FRACTION_DIGITS),
|
|
'" height="',
|
|
toFixed(this._getHeightOfLine(this.ctx, i) / this.lineHeight, NUM_FRACTION_DIGITS),
|
|
'"></rect>\n');
|
|
},
|
|
|
|
_setSVGBg: function(textBgRects) {
|
|
if (this.backgroundColor) {
|
|
textBgRects.push(
|
|
'\t\t<rect ',
|
|
this._getFillAttributes(this.backgroundColor),
|
|
' x="',
|
|
toFixed(-this.width / 2, NUM_FRACTION_DIGITS),
|
|
'" y="',
|
|
toFixed(-this.height / 2, NUM_FRACTION_DIGITS),
|
|
'" width="',
|
|
toFixed(this.width, NUM_FRACTION_DIGITS),
|
|
'" height="',
|
|
toFixed(this.height, NUM_FRACTION_DIGITS),
|
|
'"></rect>\n');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values
|
|
* we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1
|
|
*
|
|
* @private
|
|
* @param {*} value
|
|
* @return {String}
|
|
*/
|
|
_getFillAttributes: function(value) {
|
|
var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : '';
|
|
if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) {
|
|
return 'fill="' + value + '"';
|
|
}
|
|
return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"';
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Sets specified property to a specified value
|
|
* @param {String} key
|
|
* @param {*} value
|
|
* @return {fabric.Text} thisArg
|
|
* @chainable
|
|
*/
|
|
_set: function(key, value) {
|
|
this.callSuper('_set', key, value);
|
|
|
|
if (key in this._dimensionAffectingProps) {
|
|
this._initDimensions();
|
|
this.setCoords();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns complexity of an instance
|
|
* @return {Number} complexity
|
|
*/
|
|
complexity: function() {
|
|
return 1;
|
|
}
|
|
});
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement})
|
|
* @static
|
|
* @memberOf fabric.Text
|
|
* @see: http://www.w3.org/TR/SVG/text.html#TextElement
|
|
*/
|
|
fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(
|
|
'x y dx dy font-family font-style font-weight font-size text-decoration text-anchor'.split(' '));
|
|
|
|
/**
|
|
* Default SVG font size
|
|
* @static
|
|
* @memberOf fabric.Text
|
|
*/
|
|
fabric.Text.DEFAULT_SVG_FONT_SIZE = 16;
|
|
|
|
/**
|
|
* Returns fabric.Text instance from an SVG element (<b>not yet implemented</b>)
|
|
* @static
|
|
* @memberOf fabric.Text
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Text} Instance of fabric.Text
|
|
*/
|
|
fabric.Text.fromElement = function(element, options) {
|
|
if (!element) {
|
|
return null;
|
|
}
|
|
|
|
var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES);
|
|
options = fabric.util.object.extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes);
|
|
|
|
options.top = options.top || 0;
|
|
options.left = options.left || 0;
|
|
if ('dx' in parsedAttributes) {
|
|
options.left += parsedAttributes.dx;
|
|
}
|
|
if ('dy' in parsedAttributes) {
|
|
options.top += parsedAttributes.dy;
|
|
}
|
|
if (!('fontSize' in options)) {
|
|
options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;
|
|
}
|
|
|
|
if (!options.originX) {
|
|
options.originX = 'left';
|
|
}
|
|
|
|
var textContent = '';
|
|
|
|
// The XML is not properly parsed in IE9 so a workaround to get
|
|
// textContent is through firstChild.data. Another workaround would be
|
|
// to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does)
|
|
if (!('textContent' in element)) {
|
|
if ('firstChild' in element && element.firstChild !== null) {
|
|
if ('data' in element.firstChild && element.firstChild.data !== null) {
|
|
textContent = element.firstChild.data;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
textContent = element.textContent;
|
|
}
|
|
|
|
textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' ');
|
|
|
|
var text = new fabric.Text(textContent, options),
|
|
textHeightScaleFactor = text.getHeight() / text.height,
|
|
lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height,
|
|
scaledDiff = lineHeightDiff * textHeightScaleFactor,
|
|
textHeight = text.getHeight() + scaledDiff,
|
|
offX = 0;
|
|
/*
|
|
Adjust positioning:
|
|
x/y attributes in SVG correspond to the bottom-left corner of text bounding box
|
|
top/left properties in Fabric correspond to center point of text bounding box
|
|
*/
|
|
if (text.originX === 'left') {
|
|
offX = text.getWidth() / 2;
|
|
}
|
|
if (text.originX === 'right') {
|
|
offX = -text.getWidth() / 2;
|
|
}
|
|
text.set({
|
|
left: text.getLeft() + offX,
|
|
top: text.getTop() - textHeight / 2 + text.fontSize * (0.18 + text._fontSizeFraction) / text.lineHeight /* 0.3 is the old lineHeight */
|
|
});
|
|
|
|
return text;
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns fabric.Text instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Text
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} [callback] Callback to invoke when an fabric.Text instance is created
|
|
* @return {fabric.Text} Instance of fabric.Text
|
|
*/
|
|
fabric.Text.fromObject = function(object, callback) {
|
|
var text = new fabric.Text(object.text, clone(object));
|
|
callback && callback(text);
|
|
return text;
|
|
};
|
|
|
|
fabric.util.createAccessors(fabric.Text);
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function() {
|
|
|
|
var clone = fabric.util.object.clone;
|
|
|
|
/**
|
|
* IText class (introduced in <b>v1.4</b>) Events are also fired with "text:"
|
|
* prefix when observing canvas.
|
|
* @class fabric.IText
|
|
* @extends fabric.Text
|
|
* @mixes fabric.Observable
|
|
*
|
|
* @fires changed
|
|
* @fires selection:changed
|
|
* @fires editing:entered
|
|
* @fires editing:exited
|
|
*
|
|
* @return {fabric.IText} thisArg
|
|
* @see {@link fabric.IText#initialize} for constructor definition
|
|
*
|
|
* <p>Supported key combinations:</p>
|
|
* <pre>
|
|
* Move cursor: left, right, up, down
|
|
* Select character: shift + left, shift + right
|
|
* Select text vertically: shift + up, shift + down
|
|
* Move cursor by word: alt + left, alt + right
|
|
* Select words: shift + alt + left, shift + alt + right
|
|
* Move cursor to line start/end: cmd + left, cmd + right or home, end
|
|
* Select till start/end of line: cmd + shift + left, cmd + shift + right or shift + home, shift + end
|
|
* Jump to start/end of text: cmd + up, cmd + down
|
|
* Select till start/end of text: cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
|
|
* Delete character: backspace
|
|
* Delete word: alt + backspace
|
|
* Delete line: cmd + backspace
|
|
* Forward delete: delete
|
|
* Copy text: ctrl/cmd + c
|
|
* Paste text: ctrl/cmd + v
|
|
* Cut text: ctrl/cmd + x
|
|
* Select entire text: ctrl/cmd + a
|
|
* Quit editing tab or esc
|
|
* </pre>
|
|
*
|
|
* <p>Supported mouse/touch combination</p>
|
|
* <pre>
|
|
* Position cursor: click/touch
|
|
* Create selection: click/touch & drag
|
|
* Create selection: click & shift + click
|
|
* Select word: double click
|
|
* Select line: triple click
|
|
* </pre>
|
|
*/
|
|
fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'i-text',
|
|
|
|
/**
|
|
* Index where text selection starts (or where cursor is when there is no selection)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
selectionStart: 0,
|
|
|
|
/**
|
|
* Index where text selection ends
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
selectionEnd: 0,
|
|
|
|
/**
|
|
* Color of text selection
|
|
* @type String
|
|
* @default
|
|
*/
|
|
selectionColor: 'rgba(17,119,255,0.3)',
|
|
|
|
/**
|
|
* Indicates whether text is in editing mode
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
isEditing: false,
|
|
|
|
/**
|
|
* Indicates whether a text can be edited
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
editable: true,
|
|
|
|
/**
|
|
* Border color of text object while it's in editing mode
|
|
* @type String
|
|
* @default
|
|
*/
|
|
editingBorderColor: 'rgba(102,153,255,0.25)',
|
|
|
|
/**
|
|
* Width of cursor (in px)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
cursorWidth: 2,
|
|
|
|
/**
|
|
* Color of default cursor (when not overwritten by character style)
|
|
* @type String
|
|
* @default
|
|
*/
|
|
cursorColor: '#333',
|
|
|
|
/**
|
|
* Delay between cursor blink (in ms)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
cursorDelay: 1000,
|
|
|
|
/**
|
|
* Duration of cursor fadein (in ms)
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
cursorDuration: 600,
|
|
|
|
/**
|
|
* Object containing character styles
|
|
* (where top-level properties corresponds to line number and 2nd-level properties -- to char number in a line)
|
|
* @type Object
|
|
* @default
|
|
*/
|
|
styles: null,
|
|
|
|
/**
|
|
* Indicates whether internal text char widths can be cached
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
caching: true,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_reSpace: /\s|\n/,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_currentCursorOpacity: 0,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_selectionDirection: null,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_abortCursorAnimation: false,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
__widthOfSpace: [],
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {String} text Text string
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.IText} thisArg
|
|
*/
|
|
initialize: function(text, options) {
|
|
this.styles = options ? (options.styles || { }) : { };
|
|
this.callSuper('initialize', text, options);
|
|
this.initBehavior();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_clearCache: function() {
|
|
this.callSuper('_clearCache');
|
|
this.__widthOfSpace = [];
|
|
},
|
|
|
|
/**
|
|
* Returns true if object has no styling
|
|
*/
|
|
isEmptyStyles: function() {
|
|
if (!this.styles) {
|
|
return true;
|
|
}
|
|
var obj = this.styles;
|
|
|
|
for (var p1 in obj) {
|
|
for (var p2 in obj[p1]) {
|
|
// eslint-disable-next-line no-unused-vars
|
|
for (var p3 in obj[p1][p2]) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Sets selection start (left boundary of a selection)
|
|
* @param {Number} index Index to set selection start to
|
|
*/
|
|
setSelectionStart: function(index) {
|
|
index = Math.max(index, 0);
|
|
this._updateAndFire('selectionStart', index);
|
|
},
|
|
|
|
/**
|
|
* Sets selection end (right boundary of a selection)
|
|
* @param {Number} index Index to set selection end to
|
|
*/
|
|
setSelectionEnd: function(index) {
|
|
index = Math.min(index, this.text.length);
|
|
this._updateAndFire('selectionEnd', index);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} property 'selectionStart' or 'selectionEnd'
|
|
* @param {Number} index new position of property
|
|
*/
|
|
_updateAndFire: function(property, index) {
|
|
if (this[property] !== index) {
|
|
this._fireSelectionChanged();
|
|
this[property] = index;
|
|
}
|
|
this._updateTextarea();
|
|
},
|
|
|
|
/**
|
|
* Fires the even of selection changed
|
|
* @private
|
|
*/
|
|
_fireSelectionChanged: function() {
|
|
this.fire('selection:changed');
|
|
this.canvas && this.canvas.fire('text:selection:changed', { target: this });
|
|
},
|
|
|
|
/**
|
|
* Gets style of a current selection/cursor (at the start position)
|
|
* @param {Number} [startIndex] Start index to get styles at
|
|
* @param {Number} [endIndex] End index to get styles at
|
|
* @return {Object} styles Style object at a specified (or current) index
|
|
*/
|
|
getSelectionStyles: function(startIndex, endIndex) {
|
|
|
|
if (arguments.length === 2) {
|
|
var styles = [];
|
|
for (var i = startIndex; i < endIndex; i++) {
|
|
styles.push(this.getSelectionStyles(i));
|
|
}
|
|
return styles;
|
|
}
|
|
|
|
var loc = this.get2DCursorLocation(startIndex),
|
|
style = this._getStyleDeclaration(loc.lineIndex, loc.charIndex);
|
|
|
|
return style || {};
|
|
},
|
|
|
|
/**
|
|
* Sets style of a current selection
|
|
* @param {Object} [styles] Styles object
|
|
* @return {fabric.IText} thisArg
|
|
* @chainable
|
|
*/
|
|
setSelectionStyles: function(styles) {
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
this._extendStyles(this.selectionStart, styles);
|
|
}
|
|
else {
|
|
for (var i = this.selectionStart; i < this.selectionEnd; i++) {
|
|
this._extendStyles(i, styles);
|
|
}
|
|
}
|
|
/* not included in _extendStyles to avoid clearing cache more than once */
|
|
this._forceClearCache = true;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_extendStyles: function(index, styles) {
|
|
var loc = this.get2DCursorLocation(index);
|
|
|
|
if (!this._getLineStyle(loc.lineIndex)) {
|
|
this._setLineStyle(loc.lineIndex, {});
|
|
}
|
|
|
|
if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) {
|
|
this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {});
|
|
}
|
|
|
|
fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
render: function(ctx, noTransform) {
|
|
this.clearContextTop();
|
|
this.callSuper('render', ctx, noTransform);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_render: function(ctx) {
|
|
this.callSuper('_render', ctx);
|
|
this.ctx = ctx;
|
|
// clear the cursorOffsetCache, so we ensure to calculate once per renderCursor
|
|
// the correct position but not at every cursor animation.
|
|
this.cursorOffsetCache = { };
|
|
this.renderCursorOrSelection();
|
|
},
|
|
|
|
/**
|
|
* Prepare and clean the contextTop
|
|
*/
|
|
clearContextTop: function() {
|
|
if (!this.active || !this.isEditing) {
|
|
return;
|
|
}
|
|
if (this.canvas && this.canvas.contextTop) {
|
|
var ctx = this.canvas.contextTop;
|
|
ctx.save();
|
|
ctx.transform.apply(ctx, this.canvas.viewportTransform);
|
|
this.transform(ctx);
|
|
this.transformMatrix && ctx.transform.apply(ctx, this.transformMatrix);
|
|
this._clearTextArea(ctx);
|
|
ctx.restore();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Renders cursor or selection (depending on what exists)
|
|
*/
|
|
renderCursorOrSelection: function() {
|
|
if (!this.active || !this.isEditing) {
|
|
return;
|
|
}
|
|
var chars = this.text.split(''),
|
|
boundaries, ctx;
|
|
if (this.canvas && this.canvas.contextTop) {
|
|
ctx = this.canvas.contextTop;
|
|
ctx.save();
|
|
ctx.transform.apply(ctx, this.canvas.viewportTransform);
|
|
this.transform(ctx);
|
|
this.transformMatrix && ctx.transform.apply(ctx, this.transformMatrix);
|
|
this._clearTextArea(ctx);
|
|
}
|
|
else {
|
|
ctx = this.ctx;
|
|
ctx.save();
|
|
}
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
boundaries = this._getCursorBoundaries(chars, 'cursor');
|
|
this.renderCursor(boundaries, ctx);
|
|
}
|
|
else {
|
|
boundaries = this._getCursorBoundaries(chars, 'selection');
|
|
this.renderSelection(chars, boundaries, ctx);
|
|
}
|
|
ctx.restore();
|
|
},
|
|
|
|
_clearTextArea: function(ctx) {
|
|
// we add 4 pixel, to be sure to do not leave any pixel out
|
|
var width = this.width + 4, height = this.height + 4;
|
|
ctx.clearRect(-width / 2, -height / 2, width, height);
|
|
},
|
|
/**
|
|
* Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
|
|
* @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
|
|
*/
|
|
get2DCursorLocation: function(selectionStart) {
|
|
if (typeof selectionStart === 'undefined') {
|
|
selectionStart = this.selectionStart;
|
|
}
|
|
var len = this._textLines.length;
|
|
for (var i = 0; i < len; i++) {
|
|
if (selectionStart <= this._textLines[i].length) {
|
|
return {
|
|
lineIndex: i,
|
|
charIndex: selectionStart
|
|
};
|
|
}
|
|
selectionStart -= this._textLines[i].length + 1;
|
|
}
|
|
return {
|
|
lineIndex: i - 1,
|
|
charIndex: this._textLines[i - 1].length < selectionStart ? this._textLines[i - 1].length : selectionStart
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Returns complete style of char at the current cursor
|
|
* @param {Number} lineIndex Line index
|
|
* @param {Number} charIndex Char index
|
|
* @return {Object} Character style
|
|
*/
|
|
getCurrentCharStyle: function(lineIndex, charIndex) {
|
|
var style = this._getStyleDeclaration(lineIndex, charIndex === 0 ? 0 : charIndex - 1);
|
|
|
|
return {
|
|
fontSize: style && style.fontSize || this.fontSize,
|
|
fill: style && style.fill || this.fill,
|
|
textBackgroundColor: style && style.textBackgroundColor || this.textBackgroundColor,
|
|
textDecoration: style && style.textDecoration || this.textDecoration,
|
|
fontFamily: style && style.fontFamily || this.fontFamily,
|
|
fontWeight: style && style.fontWeight || this.fontWeight,
|
|
fontStyle: style && style.fontStyle || this.fontStyle,
|
|
stroke: style && style.stroke || this.stroke,
|
|
strokeWidth: style && style.strokeWidth || this.strokeWidth
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Returns fontSize of char at the current cursor
|
|
* @param {Number} lineIndex Line index
|
|
* @param {Number} charIndex Char index
|
|
* @return {Number} Character font size
|
|
*/
|
|
getCurrentCharFontSize: function(lineIndex, charIndex) {
|
|
var style = this._getStyleDeclaration(lineIndex, charIndex === 0 ? 0 : charIndex - 1);
|
|
return style && style.fontSize ? style.fontSize : this.fontSize;
|
|
},
|
|
|
|
/**
|
|
* Returns color (fill) of char at the current cursor
|
|
* @param {Number} lineIndex Line index
|
|
* @param {Number} charIndex Char index
|
|
* @return {String} Character color (fill)
|
|
*/
|
|
getCurrentCharColor: function(lineIndex, charIndex) {
|
|
var style = this._getStyleDeclaration(lineIndex, charIndex === 0 ? 0 : charIndex - 1);
|
|
return style && style.fill ? style.fill : this.cursorColor;
|
|
},
|
|
|
|
/**
|
|
* Returns cursor boundaries (left, top, leftOffset, topOffset)
|
|
* @private
|
|
* @param {Array} chars Array of characters
|
|
* @param {String} typeOfBoundaries
|
|
*/
|
|
_getCursorBoundaries: function(chars, typeOfBoundaries) {
|
|
|
|
// left/top are left/top of entire text box
|
|
// leftOffset/topOffset are offset from that left/top point of a text box
|
|
|
|
var left = Math.round(this._getLeftOffset()),
|
|
top = this._getTopOffset(),
|
|
|
|
offsets = this._getCursorBoundariesOffsets(
|
|
chars, typeOfBoundaries);
|
|
|
|
return {
|
|
left: left,
|
|
top: top,
|
|
leftOffset: offsets.left + offsets.lineLeft,
|
|
topOffset: offsets.top
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getCursorBoundariesOffsets: function(chars, typeOfBoundaries) {
|
|
if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) {
|
|
return this.cursorOffsetCache;
|
|
}
|
|
var lineLeftOffset = 0,
|
|
lineIndex = 0,
|
|
charIndex = 0,
|
|
topOffset = 0,
|
|
leftOffset = 0,
|
|
boundaries;
|
|
|
|
for (var i = 0; i < this.selectionStart; i++) {
|
|
if (chars[i] === '\n') {
|
|
leftOffset = 0;
|
|
topOffset += this._getHeightOfLine(this.ctx, lineIndex);
|
|
|
|
lineIndex++;
|
|
charIndex = 0;
|
|
}
|
|
else {
|
|
leftOffset += this._getWidthOfChar(this.ctx, chars[i], lineIndex, charIndex);
|
|
charIndex++;
|
|
}
|
|
|
|
lineLeftOffset = this._getLineLeftOffset(this._getLineWidth(this.ctx, lineIndex));
|
|
}
|
|
if (typeOfBoundaries === 'cursor') {
|
|
topOffset += (1 - this._fontSizeFraction) * this._getHeightOfLine(this.ctx, lineIndex) / this.lineHeight
|
|
- this.getCurrentCharFontSize(lineIndex, charIndex) * (1 - this._fontSizeFraction);
|
|
}
|
|
if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) {
|
|
leftOffset -= this._getWidthOfCharSpacing();
|
|
}
|
|
boundaries = {
|
|
top: topOffset,
|
|
left: leftOffset > 0 ? leftOffset : 0,
|
|
lineLeft: lineLeftOffset
|
|
};
|
|
this.cursorOffsetCache = boundaries;
|
|
return this.cursorOffsetCache;
|
|
},
|
|
|
|
/**
|
|
* Renders cursor
|
|
* @param {Object} boundaries
|
|
* @param {CanvasRenderingContext2D} ctx transformed context to draw on
|
|
*/
|
|
renderCursor: function(boundaries, ctx) {
|
|
|
|
var cursorLocation = this.get2DCursorLocation(),
|
|
lineIndex = cursorLocation.lineIndex,
|
|
charIndex = cursorLocation.charIndex,
|
|
charHeight = this.getCurrentCharFontSize(lineIndex, charIndex),
|
|
leftOffset = (lineIndex === 0 && charIndex === 0)
|
|
? this._getLineLeftOffset(this._getLineWidth(ctx, lineIndex))
|
|
: boundaries.leftOffset,
|
|
multiplier = this.scaleX * this.canvas.getZoom(),
|
|
cursorWidth = this.cursorWidth / multiplier;
|
|
|
|
ctx.fillStyle = this.getCurrentCharColor(lineIndex, charIndex);
|
|
ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity;
|
|
|
|
ctx.fillRect(
|
|
boundaries.left + leftOffset - cursorWidth / 2,
|
|
boundaries.top + boundaries.topOffset,
|
|
cursorWidth,
|
|
charHeight);
|
|
},
|
|
|
|
/**
|
|
* Renders text selection
|
|
* @param {Array} chars Array of characters
|
|
* @param {Object} boundaries Object with left/top/leftOffset/topOffset
|
|
* @param {CanvasRenderingContext2D} ctx transformed context to draw on
|
|
*/
|
|
renderSelection: function(chars, boundaries, ctx) {
|
|
|
|
ctx.fillStyle = this.selectionColor;
|
|
|
|
var start = this.get2DCursorLocation(this.selectionStart),
|
|
end = this.get2DCursorLocation(this.selectionEnd),
|
|
startLine = start.lineIndex,
|
|
endLine = end.lineIndex;
|
|
for (var i = startLine; i <= endLine; i++) {
|
|
var lineOffset = this._getLineLeftOffset(this._getLineWidth(ctx, i)) || 0,
|
|
lineHeight = this._getHeightOfLine(this.ctx, i),
|
|
realLineHeight = 0, boxWidth = 0, line = this._textLines[i];
|
|
|
|
if (i === startLine) {
|
|
for (var j = 0, len = line.length; j < len; j++) {
|
|
if (j >= start.charIndex && (i !== endLine || j < end.charIndex)) {
|
|
boxWidth += this._getWidthOfChar(ctx, line[j], i, j);
|
|
}
|
|
if (j < start.charIndex) {
|
|
lineOffset += this._getWidthOfChar(ctx, line[j], i, j);
|
|
}
|
|
}
|
|
if (j === line.length) {
|
|
boxWidth -= this._getWidthOfCharSpacing();
|
|
}
|
|
}
|
|
else if (i > startLine && i < endLine) {
|
|
boxWidth += this._getLineWidth(ctx, i) || 5;
|
|
}
|
|
else if (i === endLine) {
|
|
for (var j2 = 0, j2len = end.charIndex; j2 < j2len; j2++) {
|
|
boxWidth += this._getWidthOfChar(ctx, line[j2], i, j2);
|
|
}
|
|
if (end.charIndex === line.length) {
|
|
boxWidth -= this._getWidthOfCharSpacing();
|
|
}
|
|
}
|
|
realLineHeight = lineHeight;
|
|
if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) {
|
|
lineHeight /= this.lineHeight;
|
|
}
|
|
ctx.fillRect(
|
|
boundaries.left + lineOffset,
|
|
boundaries.top + boundaries.topOffset,
|
|
boxWidth > 0 ? boxWidth : 0,
|
|
lineHeight);
|
|
|
|
boundaries.topOffset += realLineHeight;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} method
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} line Content of the line
|
|
* @param {Number} left
|
|
* @param {Number} top
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charOffset
|
|
*/
|
|
_renderChars: function(method, ctx, line, left, top, lineIndex, charOffset) {
|
|
|
|
if (this.isEmptyStyles()) {
|
|
return this._renderCharsFast(method, ctx, line, left, top);
|
|
}
|
|
|
|
charOffset = charOffset || 0;
|
|
|
|
// set proper line offset
|
|
var lineHeight = this._getHeightOfLine(ctx, lineIndex),
|
|
prevStyle,
|
|
thisStyle,
|
|
charsToRender = '';
|
|
|
|
ctx.save();
|
|
top -= lineHeight / this.lineHeight * this._fontSizeFraction;
|
|
for (var i = charOffset, len = line.length + charOffset; i <= len; i++) {
|
|
prevStyle = prevStyle || this.getCurrentCharStyle(lineIndex, i);
|
|
thisStyle = this.getCurrentCharStyle(lineIndex, i + 1);
|
|
|
|
if (this._hasStyleChanged(prevStyle, thisStyle) || i === len) {
|
|
this._renderChar(method, ctx, lineIndex, i - 1, charsToRender, left, top, lineHeight);
|
|
charsToRender = '';
|
|
prevStyle = thisStyle;
|
|
}
|
|
charsToRender += line[i - charOffset];
|
|
}
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} method
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} line Content of the line
|
|
* @param {Number} left Left coordinate
|
|
* @param {Number} top Top coordinate
|
|
*/
|
|
_renderCharsFast: function(method, ctx, line, left, top) {
|
|
|
|
if (method === 'fillText' && this.fill) {
|
|
this.callSuper('_renderChars', method, ctx, line, left, top);
|
|
}
|
|
if (method === 'strokeText' && ((this.stroke && this.strokeWidth > 0) || this.skipFillStrokeCheck)) {
|
|
this.callSuper('_renderChars', method, ctx, line, left, top);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} method
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Number} lineIndex
|
|
* @param {Number} i
|
|
* @param {String} _char
|
|
* @param {Number} left Left coordinate
|
|
* @param {Number} top Top coordinate
|
|
* @param {Number} lineHeight Height of the line
|
|
*/
|
|
_renderChar: function(method, ctx, lineIndex, i, _char, left, top, lineHeight) {
|
|
var charWidth, charHeight, shouldFill, shouldStroke,
|
|
decl = this._getStyleDeclaration(lineIndex, i),
|
|
offset, textDecoration, chars, additionalSpace, _charWidth;
|
|
|
|
if (decl) {
|
|
charHeight = this._getHeightOfChar(ctx, _char, lineIndex, i);
|
|
shouldStroke = decl.stroke;
|
|
shouldFill = decl.fill;
|
|
textDecoration = decl.textDecoration;
|
|
}
|
|
else {
|
|
charHeight = this.fontSize;
|
|
}
|
|
|
|
shouldStroke = (shouldStroke || this.stroke) && method === 'strokeText';
|
|
shouldFill = (shouldFill || this.fill) && method === 'fillText';
|
|
|
|
decl && ctx.save();
|
|
|
|
charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i, decl || null);
|
|
textDecoration = textDecoration || this.textDecoration;
|
|
|
|
if (decl && decl.textBackgroundColor) {
|
|
this._removeShadow(ctx);
|
|
}
|
|
if (this.charSpacing !== 0) {
|
|
additionalSpace = this._getWidthOfCharSpacing();
|
|
chars = _char.split('');
|
|
charWidth = 0;
|
|
for (var j = 0, len = chars.length, char; j < len; j++) {
|
|
char = chars[j];
|
|
shouldFill && ctx.fillText(char, left + charWidth, top);
|
|
shouldStroke && ctx.strokeText(char, left + charWidth, top);
|
|
_charWidth = ctx.measureText(char).width + additionalSpace;
|
|
charWidth += _charWidth > 0 ? _charWidth : 0;
|
|
}
|
|
}
|
|
else {
|
|
shouldFill && ctx.fillText(_char, left, top);
|
|
shouldStroke && ctx.strokeText(_char, left, top);
|
|
}
|
|
|
|
if (textDecoration || textDecoration !== '') {
|
|
offset = this._fontSizeFraction * lineHeight / this.lineHeight;
|
|
this._renderCharDecoration(ctx, textDecoration, left, top, offset, charWidth, charHeight);
|
|
}
|
|
|
|
decl && ctx.restore();
|
|
ctx.translate(charWidth, 0);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} prevStyle
|
|
* @param {Object} thisStyle
|
|
*/
|
|
_hasStyleChanged: function(prevStyle, thisStyle) {
|
|
return (prevStyle.fill !== thisStyle.fill ||
|
|
prevStyle.fontSize !== thisStyle.fontSize ||
|
|
prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor ||
|
|
prevStyle.textDecoration !== thisStyle.textDecoration ||
|
|
prevStyle.fontFamily !== thisStyle.fontFamily ||
|
|
prevStyle.fontWeight !== thisStyle.fontWeight ||
|
|
prevStyle.fontStyle !== thisStyle.fontStyle ||
|
|
prevStyle.stroke !== thisStyle.stroke ||
|
|
prevStyle.strokeWidth !== thisStyle.strokeWidth
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderCharDecoration: function(ctx, textDecoration, left, top, offset, charWidth, charHeight) {
|
|
|
|
if (!textDecoration) {
|
|
return;
|
|
}
|
|
|
|
var decorationWeight = charHeight / 15,
|
|
positions = {
|
|
underline: top + charHeight / 10,
|
|
'line-through': top - charHeight * (this._fontSizeFraction + this._fontSizeMult - 1) + decorationWeight,
|
|
overline: top - (this._fontSizeMult - this._fontSizeFraction) * charHeight
|
|
},
|
|
decorations = ['underline', 'line-through', 'overline'], i, decoration;
|
|
|
|
for (i = 0; i < decorations.length; i++) {
|
|
decoration = decorations[i];
|
|
if (textDecoration.indexOf(decoration) > -1) {
|
|
ctx.fillRect(left, positions[decoration], charWidth , decorationWeight);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} method
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} line
|
|
* @param {Number} left
|
|
* @param {Number} top
|
|
* @param {Number} lineIndex
|
|
*/
|
|
_renderTextLine: function(method, ctx, line, left, top, lineIndex) {
|
|
// to "cancel" this.fontSize subtraction in fabric.Text#_renderTextLine
|
|
// the adding 0.03 is just to align text with itext by overlap test
|
|
if (!this.isEmptyStyles()) {
|
|
top += this.fontSize * (this._fontSizeFraction + 0.03);
|
|
}
|
|
this.callSuper('_renderTextLine', method, ctx, line, left, top, lineIndex);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderTextDecoration: function(ctx) {
|
|
if (this.isEmptyStyles()) {
|
|
return this.callSuper('_renderTextDecoration', ctx);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderTextLinesBackground: function(ctx) {
|
|
this.callSuper('_renderTextLinesBackground', ctx);
|
|
|
|
var lineTopOffset = 0, heightOfLine,
|
|
lineWidth, lineLeftOffset,
|
|
leftOffset = this._getLeftOffset(),
|
|
topOffset = this._getTopOffset(),
|
|
line, _char, style;
|
|
|
|
for (var i = 0, len = this._textLines.length; i < len; i++) {
|
|
heightOfLine = this._getHeightOfLine(ctx, i);
|
|
line = this._textLines[i];
|
|
|
|
if (line === '' || !this.styles || !this._getLineStyle(i)) {
|
|
lineTopOffset += heightOfLine;
|
|
continue;
|
|
}
|
|
|
|
lineWidth = this._getLineWidth(ctx, i);
|
|
lineLeftOffset = this._getLineLeftOffset(lineWidth);
|
|
|
|
for (var j = 0, jlen = line.length; j < jlen; j++) {
|
|
style = this._getStyleDeclaration(i, j);
|
|
if (!style || !style.textBackgroundColor) {
|
|
continue;
|
|
}
|
|
_char = line[j];
|
|
|
|
ctx.fillStyle = style.textBackgroundColor;
|
|
|
|
ctx.fillRect(
|
|
leftOffset + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j),
|
|
topOffset + lineTopOffset,
|
|
this._getWidthOfChar(ctx, _char, i, j),
|
|
heightOfLine / this.lineHeight
|
|
);
|
|
}
|
|
lineTopOffset += heightOfLine;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getCacheProp: function(_char, styleDeclaration) {
|
|
return _char +
|
|
styleDeclaration.fontSize +
|
|
styleDeclaration.fontWeight +
|
|
styleDeclaration.fontStyle;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} fontFamily name
|
|
* @return {Object} reference to cache
|
|
*/
|
|
_getFontCache: function(fontFamily) {
|
|
if (!fabric.charWidthsCache[fontFamily]) {
|
|
fabric.charWidthsCache[fontFamily] = { };
|
|
}
|
|
return fabric.charWidthsCache[fontFamily];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} _char
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
* @param {Object} [decl]
|
|
*/
|
|
_applyCharStylesGetWidth: function(ctx, _char, lineIndex, charIndex, decl) {
|
|
var charDecl = decl || this._getStyleDeclaration(lineIndex, charIndex),
|
|
styleDeclaration = clone(charDecl),
|
|
width, cacheProp, charWidthsCache;
|
|
|
|
this._applyFontStyles(styleDeclaration);
|
|
charWidthsCache = this._getFontCache(styleDeclaration.fontFamily);
|
|
cacheProp = this._getCacheProp(_char, styleDeclaration);
|
|
|
|
// short-circuit if no styles for this char
|
|
// global style from object is always applyed and handled by save and restore
|
|
if (!charDecl && charWidthsCache[cacheProp] && this.caching) {
|
|
return charWidthsCache[cacheProp];
|
|
}
|
|
|
|
if (typeof styleDeclaration.shadow === 'string') {
|
|
styleDeclaration.shadow = new fabric.Shadow(styleDeclaration.shadow);
|
|
}
|
|
|
|
var fill = styleDeclaration.fill || this.fill;
|
|
ctx.fillStyle = fill.toLive
|
|
? fill.toLive(ctx, this)
|
|
: fill;
|
|
|
|
if (styleDeclaration.stroke) {
|
|
ctx.strokeStyle = (styleDeclaration.stroke && styleDeclaration.stroke.toLive)
|
|
? styleDeclaration.stroke.toLive(ctx, this)
|
|
: styleDeclaration.stroke;
|
|
}
|
|
|
|
ctx.lineWidth = styleDeclaration.strokeWidth || this.strokeWidth;
|
|
ctx.font = this._getFontDeclaration.call(styleDeclaration);
|
|
|
|
//if we want this._setShadow.call to work with styleDeclarion
|
|
//we have to add those references
|
|
if (styleDeclaration.shadow) {
|
|
styleDeclaration.scaleX = this.scaleX;
|
|
styleDeclaration.scaleY = this.scaleY;
|
|
styleDeclaration.canvas = this.canvas;
|
|
styleDeclaration.getObjectScaling = this.getObjectScaling;
|
|
this._setShadow.call(styleDeclaration, ctx);
|
|
}
|
|
|
|
if (!this.caching || !charWidthsCache[cacheProp]) {
|
|
width = ctx.measureText(_char).width;
|
|
this.caching && (charWidthsCache[cacheProp] = width);
|
|
return width;
|
|
}
|
|
|
|
return charWidthsCache[cacheProp];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} styleDeclaration
|
|
*/
|
|
_applyFontStyles: function(styleDeclaration) {
|
|
if (!styleDeclaration.fontFamily) {
|
|
styleDeclaration.fontFamily = this.fontFamily;
|
|
}
|
|
if (!styleDeclaration.fontSize) {
|
|
styleDeclaration.fontSize = this.fontSize;
|
|
}
|
|
if (!styleDeclaration.fontWeight) {
|
|
styleDeclaration.fontWeight = this.fontWeight;
|
|
}
|
|
if (!styleDeclaration.fontStyle) {
|
|
styleDeclaration.fontStyle = this.fontStyle;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
* @param {Boolean} [returnCloneOrEmpty=false]
|
|
* @private
|
|
*/
|
|
_getStyleDeclaration: function(lineIndex, charIndex, returnCloneOrEmpty) {
|
|
if (returnCloneOrEmpty) {
|
|
return (this.styles[lineIndex] && this.styles[lineIndex][charIndex])
|
|
? clone(this.styles[lineIndex][charIndex])
|
|
: { };
|
|
}
|
|
|
|
return this.styles[lineIndex] && this.styles[lineIndex][charIndex] ? this.styles[lineIndex][charIndex] : null;
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
* @param {Object} style
|
|
* @private
|
|
*/
|
|
_setStyleDeclaration: function(lineIndex, charIndex, style) {
|
|
this.styles[lineIndex][charIndex] = style;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
* @private
|
|
*/
|
|
_deleteStyleDeclaration: function(lineIndex, charIndex) {
|
|
delete this.styles[lineIndex][charIndex];
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @private
|
|
*/
|
|
_getLineStyle: function(lineIndex) {
|
|
return this.styles[lineIndex];
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @param {Object} style
|
|
* @private
|
|
*/
|
|
_setLineStyle: function(lineIndex, style) {
|
|
this.styles[lineIndex] = style;
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @private
|
|
*/
|
|
_deleteLineStyle: function(lineIndex) {
|
|
delete this.styles[lineIndex];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_getWidthOfChar: function(ctx, _char, lineIndex, charIndex) {
|
|
if (!this._isMeasuring && this.textAlign === 'justify' && this._reSpacesAndTabs.test(_char)) {
|
|
return this._getWidthOfSpace(ctx, lineIndex);
|
|
}
|
|
ctx.save();
|
|
var width = this._applyCharStylesGetWidth(ctx, _char, lineIndex, charIndex);
|
|
if (this.charSpacing !== 0) {
|
|
width += this._getWidthOfCharSpacing();
|
|
}
|
|
ctx.restore();
|
|
return width > 0 ? width : 0
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
*/
|
|
_getHeightOfChar: function(ctx, lineIndex, charIndex) {
|
|
var style = this._getStyleDeclaration(lineIndex, charIndex);
|
|
return style && style.fontSize ? style.fontSize : this.fontSize;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
*/
|
|
_getWidthOfCharsAt: function(ctx, lineIndex, charIndex) {
|
|
var width = 0, i, _char;
|
|
for (i = 0; i < charIndex; i++) {
|
|
_char = this._textLines[lineIndex][i];
|
|
width += this._getWidthOfChar(ctx, _char, lineIndex, i);
|
|
}
|
|
return width;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Number} lineIndex line number
|
|
* @return {Number} Line width
|
|
*/
|
|
_measureLine: function(ctx, lineIndex) {
|
|
this._isMeasuring = true;
|
|
var width = this._getWidthOfCharsAt(ctx, lineIndex, this._textLines[lineIndex].length);
|
|
if (this.charSpacing !== 0) {
|
|
width -= this._getWidthOfCharSpacing();
|
|
}
|
|
this._isMeasuring = false;
|
|
return width > 0 ? width : 0;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Number} lineIndex
|
|
*/
|
|
_getWidthOfSpace: function (ctx, lineIndex) {
|
|
if (this.__widthOfSpace[lineIndex]) {
|
|
return this.__widthOfSpace[lineIndex];
|
|
}
|
|
var line = this._textLines[lineIndex],
|
|
wordsWidth = this._getWidthOfWords(ctx, line, lineIndex, 0),
|
|
widthDiff = this.width - wordsWidth,
|
|
numSpaces = line.length - line.replace(this._reSpacesAndTabs, '').length,
|
|
width = Math.max(widthDiff / numSpaces, ctx.measureText(' ').width);
|
|
this.__widthOfSpace[lineIndex] = width;
|
|
return width;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {String} line
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charOffset
|
|
*/
|
|
_getWidthOfWords: function (ctx, line, lineIndex, charOffset) {
|
|
var width = 0;
|
|
|
|
for (var charIndex = 0; charIndex < line.length; charIndex++) {
|
|
var _char = line[charIndex];
|
|
|
|
if (!_char.match(/\s/)) {
|
|
width += this._getWidthOfChar(ctx, _char, lineIndex, charIndex + charOffset);
|
|
}
|
|
}
|
|
|
|
return width;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_getHeightOfLine: function(ctx, lineIndex) {
|
|
if (this.__lineHeights[lineIndex]) {
|
|
return this.__lineHeights[lineIndex];
|
|
}
|
|
|
|
var line = this._textLines[lineIndex],
|
|
maxHeight = this._getHeightOfChar(ctx, lineIndex, 0);
|
|
|
|
for (var i = 1, len = line.length; i < len; i++) {
|
|
var currentCharHeight = this._getHeightOfChar(ctx, lineIndex, i);
|
|
if (currentCharHeight > maxHeight) {
|
|
maxHeight = currentCharHeight;
|
|
}
|
|
}
|
|
this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
|
|
return this.__lineHeights[lineIndex];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_getTextHeight: function(ctx) {
|
|
var lineHeight, height = 0;
|
|
for (var i = 0, len = this._textLines.length; i < len; i++) {
|
|
lineHeight = this._getHeightOfLine(ctx, i);
|
|
height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight);
|
|
}
|
|
return height;
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @method toObject
|
|
* @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 fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
|
|
styles: clone(this.styles, true)
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns fabric.IText instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.IText
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {function} [callback] invoked with new instance as argument
|
|
* @return {fabric.IText} instance of fabric.IText
|
|
*/
|
|
fabric.IText.fromObject = function(object, callback) {
|
|
var iText = new fabric.IText(object.text, clone(object));
|
|
callback && callback(iText);
|
|
return iText;
|
|
};
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
var clone = fabric.util.object.clone;
|
|
|
|
fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
|
|
|
|
/**
|
|
* Initializes all the interactive behavior of IText
|
|
*/
|
|
initBehavior: function() {
|
|
this.initAddedHandler();
|
|
this.initRemovedHandler();
|
|
this.initCursorSelectionHandlers();
|
|
this.initDoubleClickSimulation();
|
|
this.mouseMoveHandler = this.mouseMoveHandler.bind(this);
|
|
},
|
|
|
|
/**
|
|
* Initializes "selected" event handler
|
|
*/
|
|
initSelectedHandler: function() {
|
|
this.on('selected', function() {
|
|
|
|
var _this = this;
|
|
setTimeout(function() {
|
|
_this.selected = true;
|
|
}, 100);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Initializes "added" event handler
|
|
*/
|
|
initAddedHandler: function() {
|
|
var _this = this;
|
|
this.on('added', function() {
|
|
var canvas = _this.canvas;
|
|
if (canvas) {
|
|
if (!canvas._hasITextHandlers) {
|
|
canvas._hasITextHandlers = true;
|
|
_this._initCanvasHandlers(canvas);
|
|
}
|
|
canvas._iTextInstances = canvas._iTextInstances || [];
|
|
canvas._iTextInstances.push(_this);
|
|
}
|
|
});
|
|
},
|
|
|
|
initRemovedHandler: function() {
|
|
var _this = this;
|
|
this.on('removed', function() {
|
|
var canvas = _this.canvas;
|
|
if (canvas) {
|
|
canvas._iTextInstances = canvas._iTextInstances || [];
|
|
fabric.util.removeFromArray(canvas._iTextInstances, _this);
|
|
if (canvas._iTextInstances.length === 0) {
|
|
canvas._hasITextHandlers = false;
|
|
_this._removeCanvasHandlers(canvas);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* register canvas event to manage exiting on other instances
|
|
* @private
|
|
*/
|
|
_initCanvasHandlers: function(canvas) {
|
|
canvas._canvasITextSelectionClearedHanlder = (function() {
|
|
fabric.IText.prototype.exitEditingOnOthers(canvas);
|
|
}).bind(this);
|
|
canvas._mouseUpITextHandler = (function() {
|
|
if (canvas._iTextInstances) {
|
|
canvas._iTextInstances.forEach(function(obj) {
|
|
obj.__isMousedown = false;
|
|
});
|
|
}
|
|
}).bind(this);
|
|
canvas.on('selection:cleared', canvas._canvasITextSelectionClearedHanlder);
|
|
canvas.on('object:selected', canvas._canvasITextSelectionClearedHanlder);
|
|
canvas.on('mouse:up', canvas._mouseUpITextHandler);
|
|
},
|
|
|
|
/**
|
|
* remove canvas event to manage exiting on other instances
|
|
* @private
|
|
*/
|
|
_removeCanvasHandlers: function(canvas) {
|
|
canvas.off('selection:cleared', canvas._canvasITextSelectionClearedHanlder);
|
|
canvas.off('object:selected', canvas._canvasITextSelectionClearedHanlder);
|
|
canvas.off('mouse:up', canvas._mouseUpITextHandler);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_tick: function() {
|
|
this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_animateCursor: function(obj, targetOpacity, duration, completeMethod) {
|
|
|
|
var tickState;
|
|
|
|
tickState = {
|
|
isAborted: false,
|
|
abort: function() {
|
|
this.isAborted = true;
|
|
},
|
|
};
|
|
|
|
obj.animate('_currentCursorOpacity', targetOpacity, {
|
|
duration: duration,
|
|
onComplete: function() {
|
|
if (!tickState.isAborted) {
|
|
obj[completeMethod]();
|
|
}
|
|
},
|
|
onChange: function() {
|
|
// we do not want to animate a selection, only cursor
|
|
if (obj.canvas && obj.selectionStart === obj.selectionEnd) {
|
|
obj.renderCursorOrSelection();
|
|
}
|
|
},
|
|
abort: function() {
|
|
return tickState.isAborted;
|
|
}
|
|
});
|
|
return tickState;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_onTickComplete: function() {
|
|
|
|
var _this = this;
|
|
|
|
if (this._cursorTimeout1) {
|
|
clearTimeout(this._cursorTimeout1);
|
|
}
|
|
this._cursorTimeout1 = setTimeout(function() {
|
|
_this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick');
|
|
}, 100);
|
|
},
|
|
|
|
/**
|
|
* Initializes delayed cursor
|
|
*/
|
|
initDelayedCursor: function(restart) {
|
|
var _this = this,
|
|
delay = restart ? 0 : this.cursorDelay;
|
|
|
|
this.abortCursorAnimation();
|
|
this._currentCursorOpacity = 1;
|
|
this._cursorTimeout2 = setTimeout(function() {
|
|
_this._tick();
|
|
}, delay);
|
|
},
|
|
|
|
/**
|
|
* Aborts cursor animation and clears all timeouts
|
|
*/
|
|
abortCursorAnimation: function() {
|
|
var shouldClear = this._currentTickState || this._currentTickCompleteState;
|
|
this._currentTickState && this._currentTickState.abort();
|
|
this._currentTickCompleteState && this._currentTickCompleteState.abort();
|
|
|
|
clearTimeout(this._cursorTimeout1);
|
|
clearTimeout(this._cursorTimeout2);
|
|
|
|
this._currentCursorOpacity = 0;
|
|
// to clear just itext area we need to transform the context
|
|
// it may not be worth it
|
|
if (shouldClear) {
|
|
this.canvas && this.canvas.clearContext(this.canvas.contextTop || this.ctx);
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Selects entire text
|
|
*/
|
|
selectAll: function() {
|
|
this.selectionStart = 0;
|
|
this.selectionEnd = this.text.length;
|
|
this._fireSelectionChanged();
|
|
this._updateTextarea();
|
|
},
|
|
|
|
/**
|
|
* Returns selected text
|
|
* @return {String}
|
|
*/
|
|
getSelectedText: function() {
|
|
return this.text.slice(this.selectionStart, this.selectionEnd);
|
|
},
|
|
|
|
/**
|
|
* Find new selection index representing start of current word according to current selection index
|
|
* @param {Number} startFrom Surrent selection index
|
|
* @return {Number} New selection index
|
|
*/
|
|
findWordBoundaryLeft: function(startFrom) {
|
|
var offset = 0, index = startFrom - 1;
|
|
|
|
// remove space before cursor first
|
|
if (this._reSpace.test(this.text.charAt(index))) {
|
|
while (this._reSpace.test(this.text.charAt(index))) {
|
|
offset++;
|
|
index--;
|
|
}
|
|
}
|
|
while (/\S/.test(this.text.charAt(index)) && index > -1) {
|
|
offset++;
|
|
index--;
|
|
}
|
|
|
|
return startFrom - offset;
|
|
},
|
|
|
|
/**
|
|
* Find new selection index representing end of current word according to current selection index
|
|
* @param {Number} startFrom Current selection index
|
|
* @return {Number} New selection index
|
|
*/
|
|
findWordBoundaryRight: function(startFrom) {
|
|
var offset = 0, index = startFrom;
|
|
|
|
// remove space after cursor first
|
|
if (this._reSpace.test(this.text.charAt(index))) {
|
|
while (this._reSpace.test(this.text.charAt(index))) {
|
|
offset++;
|
|
index++;
|
|
}
|
|
}
|
|
while (/\S/.test(this.text.charAt(index)) && index < this.text.length) {
|
|
offset++;
|
|
index++;
|
|
}
|
|
|
|
return startFrom + offset;
|
|
},
|
|
|
|
/**
|
|
* Find new selection index representing start of current line according to current selection index
|
|
* @param {Number} startFrom Current selection index
|
|
* @return {Number} New selection index
|
|
*/
|
|
findLineBoundaryLeft: function(startFrom) {
|
|
var offset = 0, index = startFrom - 1;
|
|
|
|
while (!/\n/.test(this.text.charAt(index)) && index > -1) {
|
|
offset++;
|
|
index--;
|
|
}
|
|
|
|
return startFrom - offset;
|
|
},
|
|
|
|
/**
|
|
* Find new selection index representing end of current line according to current selection index
|
|
* @param {Number} startFrom Current selection index
|
|
* @return {Number} New selection index
|
|
*/
|
|
findLineBoundaryRight: function(startFrom) {
|
|
var offset = 0, index = startFrom;
|
|
|
|
while (!/\n/.test(this.text.charAt(index)) && index < this.text.length) {
|
|
offset++;
|
|
index++;
|
|
}
|
|
|
|
return startFrom + offset;
|
|
},
|
|
|
|
/**
|
|
* Returns number of newlines in selected text
|
|
* @return {Number} Number of newlines in selected text
|
|
*/
|
|
getNumNewLinesInSelectedText: function() {
|
|
var selectedText = this.getSelectedText(),
|
|
numNewLines = 0;
|
|
|
|
for (var i = 0, len = selectedText.length; i < len; i++) {
|
|
if (selectedText[i] === '\n') {
|
|
numNewLines++;
|
|
}
|
|
}
|
|
return numNewLines;
|
|
},
|
|
|
|
/**
|
|
* Finds index corresponding to beginning or end of a word
|
|
* @param {Number} selectionStart Index of a character
|
|
* @param {Number} direction 1 or -1
|
|
* @return {Number} Index of the beginning or end of a word
|
|
*/
|
|
searchWordBoundary: function(selectionStart, direction) {
|
|
var index = this._reSpace.test(this.text.charAt(selectionStart)) ? selectionStart - 1 : selectionStart,
|
|
_char = this.text.charAt(index),
|
|
reNonWord = /[ \n\.,;!\?\-]/;
|
|
|
|
while (!reNonWord.test(_char) && index > 0 && index < this.text.length) {
|
|
index += direction;
|
|
_char = this.text.charAt(index);
|
|
}
|
|
if (reNonWord.test(_char) && _char !== '\n') {
|
|
index += direction === 1 ? 0 : 1;
|
|
}
|
|
return index;
|
|
},
|
|
|
|
/**
|
|
* Selects a word based on the index
|
|
* @param {Number} selectionStart Index of a character
|
|
*/
|
|
selectWord: function(selectionStart) {
|
|
selectionStart = selectionStart || this.selectionStart;
|
|
var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */
|
|
newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */
|
|
|
|
this.selectionStart = newSelectionStart;
|
|
this.selectionEnd = newSelectionEnd;
|
|
this._fireSelectionChanged();
|
|
this._updateTextarea();
|
|
this.renderCursorOrSelection();
|
|
},
|
|
|
|
/**
|
|
* Selects a line based on the index
|
|
* @param {Number} selectionStart Index of a character
|
|
*/
|
|
selectLine: function(selectionStart) {
|
|
selectionStart = selectionStart || this.selectionStart;
|
|
var newSelectionStart = this.findLineBoundaryLeft(selectionStart),
|
|
newSelectionEnd = this.findLineBoundaryRight(selectionStart);
|
|
|
|
this.selectionStart = newSelectionStart;
|
|
this.selectionEnd = newSelectionEnd;
|
|
this._fireSelectionChanged();
|
|
this._updateTextarea();
|
|
},
|
|
|
|
/**
|
|
* Enters editing state
|
|
* @return {fabric.IText} thisArg
|
|
* @chainable
|
|
*/
|
|
enterEditing: function(e) {
|
|
if (this.isEditing || !this.editable) {
|
|
return;
|
|
}
|
|
|
|
if (this.canvas) {
|
|
this.exitEditingOnOthers(this.canvas);
|
|
}
|
|
|
|
this.isEditing = true;
|
|
|
|
this.initHiddenTextarea(e);
|
|
this.hiddenTextarea.focus();
|
|
this._updateTextarea();
|
|
this._saveEditingProps();
|
|
this._setEditingProps();
|
|
this._textBeforeEdit = this.text;
|
|
|
|
this._tick();
|
|
this.fire('editing:entered');
|
|
|
|
if (!this.canvas) {
|
|
return this;
|
|
}
|
|
this.canvas.fire('text:editing:entered', { target: this });
|
|
this.initMouseMoveHandler();
|
|
this.canvas.renderAll();
|
|
return this;
|
|
},
|
|
|
|
exitEditingOnOthers: function(canvas) {
|
|
if (canvas._iTextInstances) {
|
|
canvas._iTextInstances.forEach(function(obj) {
|
|
obj.selected = false;
|
|
if (obj.isEditing) {
|
|
obj.exitEditing();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Initializes "mousemove" event handler
|
|
*/
|
|
initMouseMoveHandler: function() {
|
|
this.canvas.on('mouse:move', this.mouseMoveHandler);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
mouseMoveHandler: function(options) {
|
|
if (!this.__isMousedown || !this.isEditing) {
|
|
return;
|
|
}
|
|
|
|
var newSelectionStart = this.getSelectionStartFromPointer(options.e),
|
|
currentStart = this.selectionStart,
|
|
currentEnd = this.selectionEnd;
|
|
if (newSelectionStart === this.__selectionStartOnMouseDown) {
|
|
return;
|
|
}
|
|
if (newSelectionStart > this.__selectionStartOnMouseDown) {
|
|
this.selectionStart = this.__selectionStartOnMouseDown;
|
|
this.selectionEnd = newSelectionStart;
|
|
}
|
|
else {
|
|
this.selectionStart = newSelectionStart;
|
|
this.selectionEnd = this.__selectionStartOnMouseDown;
|
|
}
|
|
if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) {
|
|
this._fireSelectionChanged();
|
|
this._updateTextarea();
|
|
this.renderCursorOrSelection();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setEditingProps: function() {
|
|
this.hoverCursor = 'text';
|
|
|
|
if (this.canvas) {
|
|
this.canvas.defaultCursor = this.canvas.moveCursor = 'text';
|
|
}
|
|
|
|
this.borderColor = this.editingBorderColor;
|
|
|
|
this.hasControls = this.selectable = false;
|
|
this.lockMovementX = this.lockMovementY = true;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_updateTextarea: function() {
|
|
if (!this.hiddenTextarea || this.inCompositionMode) {
|
|
return;
|
|
}
|
|
this.cursorOffsetCache = { };
|
|
this.hiddenTextarea.value = this.text;
|
|
this.hiddenTextarea.selectionStart = this.selectionStart;
|
|
this.hiddenTextarea.selectionEnd = this.selectionEnd;
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
var style = this._calcTextareaPosition();
|
|
this.hiddenTextarea.style.left = style.left;
|
|
this.hiddenTextarea.style.top = style.top;
|
|
this.hiddenTextarea.style.fontSize = style.fontSize;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Object} style contains style for hiddenTextarea
|
|
*/
|
|
_calcTextareaPosition: function() {
|
|
if (!this.canvas) {
|
|
return { x: 1, y: 1 };
|
|
}
|
|
var chars = this.text.split(''),
|
|
boundaries = this._getCursorBoundaries(chars, 'cursor'),
|
|
cursorLocation = this.get2DCursorLocation(),
|
|
lineIndex = cursorLocation.lineIndex,
|
|
charIndex = cursorLocation.charIndex,
|
|
charHeight = this.getCurrentCharFontSize(lineIndex, charIndex),
|
|
leftOffset = (lineIndex === 0 && charIndex === 0)
|
|
? this._getLineLeftOffset(this._getLineWidth(this.ctx, lineIndex))
|
|
: boundaries.leftOffset,
|
|
m = this.calcTransformMatrix(),
|
|
p = {
|
|
x: boundaries.left + leftOffset,
|
|
y: boundaries.top + boundaries.topOffset + charHeight
|
|
},
|
|
upperCanvas = this.canvas.upperCanvasEl,
|
|
maxWidth = upperCanvas.width - charHeight,
|
|
maxHeight = upperCanvas.height - charHeight;
|
|
|
|
p = fabric.util.transformPoint(p, m);
|
|
p = fabric.util.transformPoint(p, this.canvas.viewportTransform);
|
|
|
|
if (p.x < 0) {
|
|
p.x = 0;
|
|
}
|
|
if (p.x > maxWidth) {
|
|
p.x = maxWidth;
|
|
}
|
|
if (p.y < 0) {
|
|
p.y = 0;
|
|
}
|
|
if (p.y > maxHeight) {
|
|
p.y = maxHeight;
|
|
}
|
|
|
|
// add canvas offset on document
|
|
p.x += this.canvas._offset.left;
|
|
p.y += this.canvas._offset.top;
|
|
|
|
return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight };
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_saveEditingProps: function() {
|
|
this._savedProps = {
|
|
hasControls: this.hasControls,
|
|
borderColor: this.borderColor,
|
|
lockMovementX: this.lockMovementX,
|
|
lockMovementY: this.lockMovementY,
|
|
hoverCursor: this.hoverCursor,
|
|
defaultCursor: this.canvas && this.canvas.defaultCursor,
|
|
moveCursor: this.canvas && this.canvas.moveCursor
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_restoreEditingProps: function() {
|
|
if (!this._savedProps) {
|
|
return;
|
|
}
|
|
|
|
this.hoverCursor = this._savedProps.overCursor;
|
|
this.hasControls = this._savedProps.hasControls;
|
|
this.borderColor = this._savedProps.borderColor;
|
|
this.lockMovementX = this._savedProps.lockMovementX;
|
|
this.lockMovementY = this._savedProps.lockMovementY;
|
|
|
|
if (this.canvas) {
|
|
this.canvas.defaultCursor = this._savedProps.defaultCursor;
|
|
this.canvas.moveCursor = this._savedProps.moveCursor;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Exits from editing state
|
|
* @return {fabric.IText} thisArg
|
|
* @chainable
|
|
*/
|
|
exitEditing: function() {
|
|
var isTextChanged = (this._textBeforeEdit !== this.text);
|
|
this.selected = false;
|
|
this.isEditing = false;
|
|
this.selectable = true;
|
|
|
|
this.selectionEnd = this.selectionStart;
|
|
this.hiddenTextarea && this.canvas && this.hiddenTextarea.parentNode.removeChild(this.hiddenTextarea);
|
|
this.hiddenTextarea = null;
|
|
|
|
this.abortCursorAnimation();
|
|
this._restoreEditingProps();
|
|
this._currentCursorOpacity = 0;
|
|
|
|
this.fire('editing:exited');
|
|
isTextChanged && this.fire('modified');
|
|
if (this.canvas) {
|
|
this.canvas.off('mouse:move', this.mouseMoveHandler);
|
|
this.canvas.fire('text:editing:exited', { target: this });
|
|
isTextChanged && this.canvas.fire('object:modified', { target: this });
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_removeExtraneousStyles: function() {
|
|
for (var prop in this.styles) {
|
|
if (!this._textLines[prop]) {
|
|
delete this.styles[prop];
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_removeCharsFromTo: function(start, end) {
|
|
while (end !== start) {
|
|
this._removeSingleCharAndStyle(start + 1);
|
|
end--;
|
|
}
|
|
this.selectionStart = start;
|
|
this.selectionEnd = start;
|
|
},
|
|
|
|
_removeSingleCharAndStyle: function(index) {
|
|
var isBeginningOfLine = this.text[index - 1] === '\n',
|
|
indexStyle = isBeginningOfLine ? index : index - 1;
|
|
this.removeStyleObject(isBeginningOfLine, indexStyle);
|
|
this.text = this.text.slice(0, index - 1) +
|
|
this.text.slice(index);
|
|
|
|
this._textLines = this._splitTextIntoLines();
|
|
},
|
|
|
|
/**
|
|
* Inserts characters where cursor is (replacing selection if one exists)
|
|
* @param {String} _chars Characters to insert
|
|
* @param {Boolean} useCopiedStyle use fabric.copiedTextStyle
|
|
*/
|
|
insertChars: function(_chars, useCopiedStyle) {
|
|
var style;
|
|
|
|
if (this.selectionEnd - this.selectionStart > 1) {
|
|
this._removeCharsFromTo(this.selectionStart, this.selectionEnd);
|
|
}
|
|
//short circuit for block paste
|
|
if (!useCopiedStyle && this.isEmptyStyles()) {
|
|
this.insertChar(_chars, false);
|
|
return;
|
|
}
|
|
for (var i = 0, len = _chars.length; i < len; i++) {
|
|
if (useCopiedStyle) {
|
|
style = fabric.copiedTextStyle[i];
|
|
}
|
|
this.insertChar(_chars[i], i < len - 1, style);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts a character where cursor is
|
|
* @param {String} _char Characters to insert
|
|
* @param {Boolean} skipUpdate trigger rendering and updates at the end of text insert
|
|
* @param {Object} styleObject Style to be inserted for the new char
|
|
*/
|
|
insertChar: function(_char, skipUpdate, styleObject) {
|
|
var isEndOfLine = this.text[this.selectionStart] === '\n';
|
|
this.text = this.text.slice(0, this.selectionStart) +
|
|
_char + this.text.slice(this.selectionEnd);
|
|
this._textLines = this._splitTextIntoLines();
|
|
this.insertStyleObjects(_char, isEndOfLine, styleObject);
|
|
this.selectionStart += _char.length;
|
|
this.selectionEnd = this.selectionStart;
|
|
if (skipUpdate) {
|
|
return;
|
|
}
|
|
this._updateTextarea();
|
|
this.setCoords();
|
|
this._fireSelectionChanged();
|
|
this.fire('changed');
|
|
this.canvas && this.canvas.fire('text:changed', { target: this });
|
|
this.canvas && this.canvas.renderAll();
|
|
},
|
|
|
|
/**
|
|
* Inserts new style object
|
|
* @param {Number} lineIndex Index of a line
|
|
* @param {Number} charIndex Index of a char
|
|
* @param {Boolean} isEndOfLine True if it's end of line
|
|
*/
|
|
insertNewlineStyleObject: function(lineIndex, charIndex, isEndOfLine) {
|
|
|
|
this.shiftLineStyles(lineIndex, +1);
|
|
|
|
if (!this.styles[lineIndex + 1]) {
|
|
this.styles[lineIndex + 1] = {};
|
|
}
|
|
|
|
var currentCharStyle = {},
|
|
newLineStyles = {};
|
|
|
|
if (this.styles[lineIndex] && this.styles[lineIndex][charIndex - 1]) {
|
|
currentCharStyle = this.styles[lineIndex][charIndex - 1];
|
|
}
|
|
|
|
// if there's nothing after cursor,
|
|
// we clone current char style onto the next (otherwise empty) line
|
|
if (isEndOfLine) {
|
|
newLineStyles[0] = clone(currentCharStyle);
|
|
this.styles[lineIndex + 1] = newLineStyles;
|
|
}
|
|
// otherwise we clone styles of all chars
|
|
// after cursor onto the next line, from the beginning
|
|
else {
|
|
for (var index in this.styles[lineIndex]) {
|
|
if (parseInt(index, 10) >= charIndex) {
|
|
newLineStyles[parseInt(index, 10) - charIndex] = this.styles[lineIndex][index];
|
|
// remove lines from the previous line since they're on a new line now
|
|
delete this.styles[lineIndex][index];
|
|
}
|
|
}
|
|
this.styles[lineIndex + 1] = newLineStyles;
|
|
}
|
|
this._forceClearCache = true;
|
|
},
|
|
|
|
/**
|
|
* Inserts style object for a given line/char index
|
|
* @param {Number} lineIndex Index of a line
|
|
* @param {Number} charIndex Index of a char
|
|
* @param {Object} [style] Style object to insert, if given
|
|
*/
|
|
insertCharStyleObject: function(lineIndex, charIndex, style) {
|
|
|
|
var currentLineStyles = this.styles[lineIndex],
|
|
currentLineStylesCloned = clone(currentLineStyles);
|
|
|
|
if (charIndex === 0 && !style) {
|
|
charIndex = 1;
|
|
}
|
|
|
|
// shift all char styles by 1 forward
|
|
// 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4
|
|
for (var index in currentLineStylesCloned) {
|
|
var numericIndex = parseInt(index, 10);
|
|
|
|
if (numericIndex >= charIndex) {
|
|
currentLineStyles[numericIndex + 1] = currentLineStylesCloned[numericIndex];
|
|
|
|
// only delete the style if there was nothing moved there
|
|
if (!currentLineStylesCloned[numericIndex - 1]) {
|
|
delete currentLineStyles[numericIndex];
|
|
}
|
|
}
|
|
}
|
|
|
|
this.styles[lineIndex][charIndex] =
|
|
style || clone(currentLineStyles[charIndex - 1]);
|
|
this._forceClearCache = true;
|
|
},
|
|
|
|
/**
|
|
* Inserts style object(s)
|
|
* @param {String} _chars Characters at the location where style is inserted
|
|
* @param {Boolean} isEndOfLine True if it's end of line
|
|
* @param {Object} [styleObject] Style to insert
|
|
*/
|
|
insertStyleObjects: function(_chars, isEndOfLine, styleObject) {
|
|
// removed shortcircuit over isEmptyStyles
|
|
|
|
var cursorLocation = this.get2DCursorLocation(),
|
|
lineIndex = cursorLocation.lineIndex,
|
|
charIndex = cursorLocation.charIndex;
|
|
|
|
if (!this._getLineStyle(lineIndex)) {
|
|
this._setLineStyle(lineIndex, {});
|
|
}
|
|
|
|
if (_chars === '\n') {
|
|
this.insertNewlineStyleObject(lineIndex, charIndex, isEndOfLine);
|
|
}
|
|
else {
|
|
this.insertCharStyleObject(lineIndex, charIndex, styleObject);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shifts line styles up or down
|
|
* @param {Number} lineIndex Index of a line
|
|
* @param {Number} offset Can be -1 or +1
|
|
*/
|
|
shiftLineStyles: function(lineIndex, offset) {
|
|
// shift all line styles by 1 upward
|
|
var clonedStyles = clone(this.styles);
|
|
for (var line in this.styles) {
|
|
var numericLine = parseInt(line, 10);
|
|
if (numericLine > lineIndex) {
|
|
this.styles[numericLine + offset] = clonedStyles[numericLine];
|
|
if (!clonedStyles[numericLine - offset]) {
|
|
delete this.styles[numericLine];
|
|
}
|
|
}
|
|
}
|
|
//TODO: evaluate if delete old style lines with offset -1
|
|
},
|
|
|
|
/**
|
|
* Removes style object
|
|
* @param {Boolean} isBeginningOfLine True if cursor is at the beginning of line
|
|
* @param {Number} [index] Optional index. When not given, current selectionStart is used.
|
|
*/
|
|
removeStyleObject: function(isBeginningOfLine, index) {
|
|
|
|
var cursorLocation = this.get2DCursorLocation(index),
|
|
lineIndex = cursorLocation.lineIndex,
|
|
charIndex = cursorLocation.charIndex;
|
|
|
|
this._removeStyleObject(isBeginningOfLine, cursorLocation, lineIndex, charIndex);
|
|
},
|
|
|
|
_getTextOnPreviousLine: function(lIndex) {
|
|
return this._textLines[lIndex - 1];
|
|
},
|
|
|
|
_removeStyleObject: function(isBeginningOfLine, cursorLocation, lineIndex, charIndex) {
|
|
|
|
if (isBeginningOfLine) {
|
|
var textOnPreviousLine = this._getTextOnPreviousLine(cursorLocation.lineIndex),
|
|
newCharIndexOnPrevLine = textOnPreviousLine ? textOnPreviousLine.length : 0;
|
|
|
|
if (!this.styles[lineIndex - 1]) {
|
|
this.styles[lineIndex - 1] = {};
|
|
}
|
|
for (charIndex in this.styles[lineIndex]) {
|
|
this.styles[lineIndex - 1][parseInt(charIndex, 10) + newCharIndexOnPrevLine]
|
|
= this.styles[lineIndex][charIndex];
|
|
}
|
|
this.shiftLineStyles(cursorLocation.lineIndex, -1);
|
|
}
|
|
else {
|
|
var currentLineStyles = this.styles[lineIndex];
|
|
|
|
if (currentLineStyles) {
|
|
delete currentLineStyles[charIndex];
|
|
}
|
|
var currentLineStylesCloned = clone(currentLineStyles);
|
|
// shift all styles by 1 backwards
|
|
for (var i in currentLineStylesCloned) {
|
|
var numericIndex = parseInt(i, 10);
|
|
if (numericIndex >= charIndex && numericIndex !== 0) {
|
|
currentLineStyles[numericIndex - 1] = currentLineStylesCloned[numericIndex];
|
|
delete currentLineStyles[numericIndex];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts new line
|
|
*/
|
|
insertNewline: function() {
|
|
this.insertChars('\n');
|
|
},
|
|
|
|
/**
|
|
* Set the selectionStart and selectionEnd according to the ne postion of cursor
|
|
* mimic the key - mouse navigation when shift is pressed.
|
|
*/
|
|
setSelectionStartEndWithShift: function(start, end, newSelection) {
|
|
if (newSelection <= start) {
|
|
if (end === start) {
|
|
this._selectionDirection = 'left';
|
|
}
|
|
else if (this._selectionDirection === 'right') {
|
|
this._selectionDirection = 'left';
|
|
this.selectionEnd = start;
|
|
}
|
|
this.selectionStart = newSelection;
|
|
}
|
|
else if (newSelection > start && newSelection < end) {
|
|
if (this._selectionDirection === 'right') {
|
|
this.selectionEnd = newSelection;
|
|
}
|
|
else {
|
|
this.selectionStart = newSelection;
|
|
}
|
|
}
|
|
else {
|
|
// newSelection is > selection start and end
|
|
if (end === start) {
|
|
this._selectionDirection = 'right';
|
|
}
|
|
else if (this._selectionDirection === 'left') {
|
|
this._selectionDirection = 'right';
|
|
this.selectionStart = end;
|
|
}
|
|
this.selectionEnd = newSelection;
|
|
}
|
|
},
|
|
|
|
setSelectionInBoundaries: function() {
|
|
var length = this.text.length;
|
|
if (this.selectionStart > length) {
|
|
this.selectionStart = length;
|
|
}
|
|
else if (this.selectionStart < 0) {
|
|
this.selectionStart = 0;
|
|
}
|
|
if (this.selectionEnd > length) {
|
|
this.selectionEnd = length;
|
|
}
|
|
else if (this.selectionEnd < 0) {
|
|
this.selectionEnd = 0;
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
|
|
|
|
fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
|
|
/**
|
|
* Initializes "dbclick" event handler
|
|
*/
|
|
initDoubleClickSimulation: function() {
|
|
|
|
// for double click
|
|
this.__lastClickTime = +new Date();
|
|
|
|
// for triple click
|
|
this.__lastLastClickTime = +new Date();
|
|
|
|
this.__lastPointer = { };
|
|
|
|
this.on('mousedown', this.onMouseDown.bind(this));
|
|
},
|
|
|
|
onMouseDown: function(options) {
|
|
|
|
this.__newClickTime = +new Date();
|
|
var newPointer = this.canvas.getPointer(options.e);
|
|
|
|
if (this.isTripleClick(newPointer)) {
|
|
this.fire('tripleclick', options);
|
|
this._stopEvent(options.e);
|
|
}
|
|
else if (this.isDoubleClick(newPointer)) {
|
|
this.fire('dblclick', options);
|
|
this._stopEvent(options.e);
|
|
}
|
|
|
|
this.__lastLastClickTime = this.__lastClickTime;
|
|
this.__lastClickTime = this.__newClickTime;
|
|
this.__lastPointer = newPointer;
|
|
this.__lastIsEditing = this.isEditing;
|
|
this.__lastSelected = this.selected;
|
|
},
|
|
|
|
isDoubleClick: function(newPointer) {
|
|
return this.__newClickTime - this.__lastClickTime < 500 &&
|
|
this.__lastPointer.x === newPointer.x &&
|
|
this.__lastPointer.y === newPointer.y && this.__lastIsEditing;
|
|
},
|
|
|
|
isTripleClick: function(newPointer) {
|
|
return this.__newClickTime - this.__lastClickTime < 500 &&
|
|
this.__lastClickTime - this.__lastLastClickTime < 500 &&
|
|
this.__lastPointer.x === newPointer.x &&
|
|
this.__lastPointer.y === newPointer.y;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_stopEvent: function(e) {
|
|
e.preventDefault && e.preventDefault();
|
|
e.stopPropagation && e.stopPropagation();
|
|
},
|
|
|
|
/**
|
|
* Initializes event handlers related to cursor or selection
|
|
*/
|
|
initCursorSelectionHandlers: function() {
|
|
this.initSelectedHandler();
|
|
this.initMousedownHandler();
|
|
this.initMouseupHandler();
|
|
this.initClicks();
|
|
},
|
|
|
|
/**
|
|
* Initializes double and triple click event handlers
|
|
*/
|
|
initClicks: function() {
|
|
this.on('dblclick', function(options) {
|
|
this.selectWord(this.getSelectionStartFromPointer(options.e));
|
|
});
|
|
this.on('tripleclick', function(options) {
|
|
this.selectLine(this.getSelectionStartFromPointer(options.e));
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Initializes "mousedown" event handler
|
|
*/
|
|
initMousedownHandler: function() {
|
|
this.on('mousedown', function(options) {
|
|
if (!this.editable) {
|
|
return;
|
|
}
|
|
var pointer = this.canvas.getPointer(options.e);
|
|
|
|
this.__mousedownX = pointer.x;
|
|
this.__mousedownY = pointer.y;
|
|
this.__isMousedown = true;
|
|
|
|
if (this.selected) {
|
|
this.setCursorByClick(options.e);
|
|
}
|
|
|
|
if (this.isEditing) {
|
|
this.__selectionStartOnMouseDown = this.selectionStart;
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
this.abortCursorAnimation();
|
|
}
|
|
this.renderCursorOrSelection();
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_isObjectMoved: function(e) {
|
|
var pointer = this.canvas.getPointer(e);
|
|
|
|
return this.__mousedownX !== pointer.x ||
|
|
this.__mousedownY !== pointer.y;
|
|
},
|
|
|
|
/**
|
|
* Initializes "mouseup" event handler
|
|
*/
|
|
initMouseupHandler: function() {
|
|
this.on('mouseup', function(options) {
|
|
this.__isMousedown = false;
|
|
if (!this.editable || this._isObjectMoved(options.e)) {
|
|
return;
|
|
}
|
|
|
|
if (this.__lastSelected && !this.__corner) {
|
|
this.enterEditing(options.e);
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
this.initDelayedCursor(true);
|
|
}
|
|
else {
|
|
this.renderCursorOrSelection();
|
|
}
|
|
}
|
|
this.selected = true;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Changes cursor location in a text depending on passed pointer (x/y) object
|
|
* @param {Event} e Event object
|
|
*/
|
|
setCursorByClick: function(e) {
|
|
var newSelection = this.getSelectionStartFromPointer(e),
|
|
start = this.selectionStart, end = this.selectionEnd;
|
|
if (e.shiftKey) {
|
|
this.setSelectionStartEndWithShift(start, end, newSelection);
|
|
}
|
|
else {
|
|
this.selectionStart = newSelection;
|
|
this.selectionEnd = newSelection;
|
|
}
|
|
this._fireSelectionChanged();
|
|
this._updateTextarea();
|
|
},
|
|
|
|
/**
|
|
* Returns index of a character corresponding to where an object was clicked
|
|
* @param {Event} e Event object
|
|
* @return {Number} Index of a character
|
|
*/
|
|
getSelectionStartFromPointer: function(e) {
|
|
var mouseOffset = this.getLocalPointer(e),
|
|
prevWidth = 0,
|
|
width = 0,
|
|
height = 0,
|
|
charIndex = 0,
|
|
newSelectionStart,
|
|
line;
|
|
|
|
for (var i = 0, len = this._textLines.length; i < len; i++) {
|
|
line = this._textLines[i];
|
|
height += this._getHeightOfLine(this.ctx, i) * this.scaleY;
|
|
|
|
var widthOfLine = this._getLineWidth(this.ctx, i),
|
|
lineLeftOffset = this._getLineLeftOffset(widthOfLine);
|
|
|
|
width = lineLeftOffset * this.scaleX;
|
|
|
|
for (var j = 0, jlen = line.length; j < jlen; j++) {
|
|
|
|
prevWidth = width;
|
|
|
|
width += this._getWidthOfChar(this.ctx, line[j], i, this.flipX ? jlen - j : j) *
|
|
this.scaleX;
|
|
|
|
if (height <= mouseOffset.y || width <= mouseOffset.x) {
|
|
charIndex++;
|
|
continue;
|
|
}
|
|
|
|
return this._getNewSelectionStartFromOffset(
|
|
mouseOffset, prevWidth, width, charIndex + i, jlen);
|
|
}
|
|
|
|
if (mouseOffset.y < height) {
|
|
//this happens just on end of lines.
|
|
return this._getNewSelectionStartFromOffset(
|
|
mouseOffset, prevWidth, width, charIndex + i - 1, jlen);
|
|
}
|
|
}
|
|
|
|
// clicked somewhere after all chars, so set at the end
|
|
if (typeof newSelectionStart === 'undefined') {
|
|
return this.text.length;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) {
|
|
|
|
var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth,
|
|
distanceBtwNextCharAndCursor = width - mouseOffset.x,
|
|
offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor ? 0 : 1,
|
|
newSelectionStart = index + offset;
|
|
|
|
// if object is horizontally flipped, mirror cursor location from the end
|
|
if (this.flipX) {
|
|
newSelectionStart = jlen - newSelectionStart;
|
|
}
|
|
|
|
if (newSelectionStart > this.text.length) {
|
|
newSelectionStart = this.text.length;
|
|
}
|
|
|
|
return newSelectionStart;
|
|
}
|
|
});
|
|
|
|
|
|
fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
|
|
|
|
/**
|
|
* Initializes hidden textarea (needed to bring up keyboard in iOS)
|
|
*/
|
|
initHiddenTextarea: function() {
|
|
this.hiddenTextarea = fabric.document.createElement('textarea');
|
|
this.hiddenTextarea.setAttribute('autocapitalize', 'off');
|
|
var style = this._calcTextareaPosition();
|
|
this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + '; left: ' + style.left + ';'
|
|
+ ' opacity: 0; width: 0px; height: 0px; z-index: -999;';
|
|
fabric.document.body.appendChild(this.hiddenTextarea);
|
|
|
|
fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
|
|
fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this));
|
|
fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this));
|
|
fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this));
|
|
fabric.util.addListener(this.hiddenTextarea, 'cut', this.cut.bind(this));
|
|
fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this));
|
|
fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this));
|
|
fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this));
|
|
fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this));
|
|
|
|
if (!this._clickHandlerInitialized && this.canvas) {
|
|
fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this));
|
|
this._clickHandlerInitialized = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_keysMap: {
|
|
8: 'removeChars',
|
|
9: 'exitEditing',
|
|
27: 'exitEditing',
|
|
13: 'insertNewline',
|
|
33: 'moveCursorUp',
|
|
34: 'moveCursorDown',
|
|
35: 'moveCursorRight',
|
|
36: 'moveCursorLeft',
|
|
37: 'moveCursorLeft',
|
|
38: 'moveCursorUp',
|
|
39: 'moveCursorRight',
|
|
40: 'moveCursorDown',
|
|
46: 'forwardDelete'
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_ctrlKeysMapUp: {
|
|
67: 'copy',
|
|
88: 'cut'
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_ctrlKeysMapDown: {
|
|
65: 'selectAll'
|
|
},
|
|
|
|
onClick: function() {
|
|
// No need to trigger click event here, focus is enough to have the keyboard appear on Android
|
|
this.hiddenTextarea && this.hiddenTextarea.focus();
|
|
},
|
|
|
|
/**
|
|
* Handles keyup event
|
|
* @param {Event} e Event object
|
|
*/
|
|
onKeyDown: function(e) {
|
|
if (!this.isEditing) {
|
|
return;
|
|
}
|
|
if (e.keyCode in this._keysMap) {
|
|
this[this._keysMap[e.keyCode]](e);
|
|
}
|
|
else if ((e.keyCode in this._ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) {
|
|
this[this._ctrlKeysMapDown[e.keyCode]](e);
|
|
}
|
|
else {
|
|
return;
|
|
}
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
this.canvas && this.canvas.renderAll();
|
|
},
|
|
|
|
/**
|
|
* Handles keyup event
|
|
* We handle KeyUp because ie11 and edge have difficulties copy/pasting
|
|
* if a copy/cut event fired, keyup is dismissed
|
|
* @param {Event} e Event object
|
|
*/
|
|
onKeyUp: function(e) {
|
|
if (!this.isEditing || this._copyDone) {
|
|
this._copyDone = false;
|
|
return;
|
|
}
|
|
if ((e.keyCode in this._ctrlKeysMapUp) && (e.ctrlKey || e.metaKey)) {
|
|
this[this._ctrlKeysMapUp[e.keyCode]](e);
|
|
}
|
|
else {
|
|
return;
|
|
}
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
this.canvas && this.canvas.renderAll();
|
|
},
|
|
|
|
/**
|
|
* Handles onInput event
|
|
* @param {Event} e Event object
|
|
*/
|
|
onInput: function(e) {
|
|
if (!this.isEditing || this.inCompositionMode) {
|
|
return;
|
|
}
|
|
var offset = this.selectionStart || 0,
|
|
offsetEnd = this.selectionEnd || 0,
|
|
textLength = this.text.length,
|
|
newTextLength = this.hiddenTextarea.value.length,
|
|
diff, charsToInsert, start;
|
|
if (newTextLength > textLength) {
|
|
//we added some character
|
|
start = this._selectionDirection === 'left' ? offsetEnd : offset;
|
|
diff = newTextLength - textLength;
|
|
charsToInsert = this.hiddenTextarea.value.slice(start, start + diff);
|
|
}
|
|
else {
|
|
//we selected a portion of text and then input something else.
|
|
//Internet explorer does not trigger this else
|
|
diff = newTextLength - textLength + offsetEnd - offset;
|
|
charsToInsert = this.hiddenTextarea.value.slice(offset, offset + diff);
|
|
}
|
|
this.insertChars(charsToInsert);
|
|
e.stopPropagation();
|
|
},
|
|
|
|
/**
|
|
* Composition start
|
|
*/
|
|
onCompositionStart: function() {
|
|
this.inCompositionMode = true;
|
|
this.prevCompositionLength = 0;
|
|
this.compositionStart = this.selectionStart;
|
|
},
|
|
|
|
/**
|
|
* Composition end
|
|
*/
|
|
onCompositionEnd: function() {
|
|
this.inCompositionMode = false;
|
|
},
|
|
|
|
/**
|
|
* Composition update
|
|
*/
|
|
onCompositionUpdate: function(e) {
|
|
var data = e.data;
|
|
this.selectionStart = this.compositionStart;
|
|
this.selectionEnd = this.selectionEnd === this.selectionStart ?
|
|
this.compositionStart + this.prevCompositionLength : this.selectionEnd;
|
|
this.insertChars(data, false);
|
|
this.prevCompositionLength = data.length;
|
|
},
|
|
|
|
/**
|
|
* Forward delete
|
|
*/
|
|
forwardDelete: function(e) {
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
if (this.selectionStart === this.text.length) {
|
|
return;
|
|
}
|
|
this.moveCursorRight(e);
|
|
}
|
|
this.removeChars(e);
|
|
},
|
|
|
|
/**
|
|
* Copies selected text
|
|
* @param {Event} e Event object
|
|
*/
|
|
copy: function(e) {
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
//do not cut-copy if no selection
|
|
return;
|
|
}
|
|
var selectedText = this.getSelectedText(),
|
|
clipboardData = this._getClipboardData(e);
|
|
|
|
// Check for backward compatibility with old browsers
|
|
if (clipboardData) {
|
|
clipboardData.setData('text', selectedText);
|
|
}
|
|
|
|
fabric.copiedText = selectedText;
|
|
fabric.copiedTextStyle = this.getSelectionStyles(
|
|
this.selectionStart,
|
|
this.selectionEnd);
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
this._copyDone = true;
|
|
},
|
|
|
|
/**
|
|
* Pastes text
|
|
* @param {Event} e Event object
|
|
*/
|
|
paste: function(e) {
|
|
var copiedText = null,
|
|
clipboardData = this._getClipboardData(e),
|
|
useCopiedStyle = true;
|
|
|
|
// Check for backward compatibility with old browsers
|
|
if (clipboardData) {
|
|
copiedText = clipboardData.getData('text').replace(/\r/g, '');
|
|
if (!fabric.copiedTextStyle || fabric.copiedText !== copiedText) {
|
|
useCopiedStyle = false;
|
|
}
|
|
}
|
|
else {
|
|
copiedText = fabric.copiedText;
|
|
}
|
|
|
|
if (copiedText) {
|
|
this.insertChars(copiedText, useCopiedStyle);
|
|
}
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
},
|
|
|
|
/**
|
|
* Cuts text
|
|
* @param {Event} e Event object
|
|
*/
|
|
cut: function(e) {
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
return;
|
|
}
|
|
|
|
this.copy(e);
|
|
this.removeChars(e);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object
|
|
* @return {Object} Clipboard data object
|
|
*/
|
|
_getClipboardData: function(e) {
|
|
return (e && e.clipboardData) || fabric.window.clipboardData;
|
|
},
|
|
|
|
/**
|
|
* Finds the width in pixels before the cursor on the same line
|
|
* @private
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
* @return {Number} widthBeforeCursor width before cursor
|
|
*/
|
|
_getWidthBeforeCursor: function(lineIndex, charIndex) {
|
|
var textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex),
|
|
widthOfLine = this._getLineWidth(this.ctx, lineIndex),
|
|
widthBeforeCursor = this._getLineLeftOffset(widthOfLine), _char;
|
|
|
|
for (var i = 0, len = textBeforeCursor.length; i < len; i++) {
|
|
_char = textBeforeCursor[i];
|
|
widthBeforeCursor += this._getWidthOfChar(this.ctx, _char, lineIndex, i);
|
|
}
|
|
return widthBeforeCursor;
|
|
},
|
|
|
|
/**
|
|
* Gets start offset of a selection
|
|
* @param {Event} e Event object
|
|
* @param {Boolean} isRight
|
|
* @return {Number}
|
|
*/
|
|
getDownCursorOffset: function(e, isRight) {
|
|
var selectionProp = this._getSelectionForOffset(e, isRight),
|
|
cursorLocation = this.get2DCursorLocation(selectionProp),
|
|
lineIndex = cursorLocation.lineIndex;
|
|
// if on last line, down cursor goes to end of line
|
|
if (lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) {
|
|
// move to the end of a text
|
|
return this.text.length - selectionProp;
|
|
}
|
|
var charIndex = cursorLocation.charIndex,
|
|
widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex),
|
|
indexOnOtherLine = this._getIndexOnLine(lineIndex + 1, widthBeforeCursor),
|
|
textAfterCursor = this._textLines[lineIndex].slice(charIndex);
|
|
|
|
return textAfterCursor.length + indexOnOtherLine + 2;
|
|
},
|
|
|
|
/**
|
|
* private
|
|
* Helps finding if the offset should be counted from Start or End
|
|
* @param {Event} e Event object
|
|
* @param {Boolean} isRight
|
|
* @return {Number}
|
|
*/
|
|
_getSelectionForOffset: function(e, isRight) {
|
|
if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) {
|
|
return this.selectionEnd;
|
|
}
|
|
else {
|
|
return this.selectionStart;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {Event} e Event object
|
|
* @param {Boolean} isRight
|
|
* @return {Number}
|
|
*/
|
|
getUpCursorOffset: function(e, isRight) {
|
|
var selectionProp = this._getSelectionForOffset(e, isRight),
|
|
cursorLocation = this.get2DCursorLocation(selectionProp),
|
|
lineIndex = cursorLocation.lineIndex;
|
|
if (lineIndex === 0 || e.metaKey || e.keyCode === 33) {
|
|
// if on first line, up cursor goes to start of line
|
|
return -selectionProp;
|
|
}
|
|
var charIndex = cursorLocation.charIndex,
|
|
widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex),
|
|
indexOnOtherLine = this._getIndexOnLine(lineIndex - 1, widthBeforeCursor),
|
|
textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex);
|
|
// return a negative offset
|
|
return -this._textLines[lineIndex - 1].length + indexOnOtherLine - textBeforeCursor.length;
|
|
},
|
|
|
|
/**
|
|
* find for a given width it founds the matching character.
|
|
* @private
|
|
*/
|
|
_getIndexOnLine: function(lineIndex, width) {
|
|
|
|
var widthOfLine = this._getLineWidth(this.ctx, lineIndex),
|
|
textOnLine = this._textLines[lineIndex],
|
|
lineLeftOffset = this._getLineLeftOffset(widthOfLine),
|
|
widthOfCharsOnLine = lineLeftOffset,
|
|
indexOnLine = 0,
|
|
foundMatch;
|
|
|
|
for (var j = 0, jlen = textOnLine.length; j < jlen; j++) {
|
|
|
|
var _char = textOnLine[j],
|
|
widthOfChar = this._getWidthOfChar(this.ctx, _char, lineIndex, j);
|
|
|
|
widthOfCharsOnLine += widthOfChar;
|
|
|
|
if (widthOfCharsOnLine > width) {
|
|
|
|
foundMatch = true;
|
|
|
|
var leftEdge = widthOfCharsOnLine - widthOfChar,
|
|
rightEdge = widthOfCharsOnLine,
|
|
offsetFromLeftEdge = Math.abs(leftEdge - width),
|
|
offsetFromRightEdge = Math.abs(rightEdge - width);
|
|
|
|
indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1);
|
|
|
|
break;
|
|
}
|
|
}
|
|
|
|
// reached end
|
|
if (!foundMatch) {
|
|
indexOnLine = textOnLine.length - 1;
|
|
}
|
|
|
|
return indexOnLine;
|
|
},
|
|
|
|
|
|
/**
|
|
* Moves cursor down
|
|
* @param {Event} e Event object
|
|
*/
|
|
moveCursorDown: function(e) {
|
|
if (this.selectionStart >= this.text.length && this.selectionEnd >= this.text.length) {
|
|
return;
|
|
}
|
|
this._moveCursorUpOrDown('Down', e);
|
|
},
|
|
|
|
/**
|
|
* Moves cursor up
|
|
* @param {Event} e Event object
|
|
*/
|
|
moveCursorUp: function(e) {
|
|
if (this.selectionStart === 0 && this.selectionEnd === 0) {
|
|
return;
|
|
}
|
|
this._moveCursorUpOrDown('Up', e);
|
|
},
|
|
|
|
/**
|
|
* Moves cursor up or down, fires the events
|
|
* @param {String} direction 'Up' or 'Down'
|
|
* @param {Event} e Event object
|
|
*/
|
|
_moveCursorUpOrDown: function(direction, e) {
|
|
// getUpCursorOffset
|
|
// getDownCursorOffset
|
|
var action = 'get' + direction + 'CursorOffset',
|
|
offset = this[action](e, this._selectionDirection === 'right');
|
|
if (e.shiftKey) {
|
|
this.moveCursorWithShift(offset);
|
|
}
|
|
else {
|
|
this.moveCursorWithoutShift(offset);
|
|
}
|
|
if (offset !== 0) {
|
|
this.setSelectionInBoundaries();
|
|
this.abortCursorAnimation();
|
|
this._currentCursorOpacity = 1;
|
|
this.initDelayedCursor();
|
|
this._fireSelectionChanged();
|
|
this._updateTextarea();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Moves cursor with shift
|
|
* @param {Number} offset
|
|
*/
|
|
moveCursorWithShift: function(offset) {
|
|
var newSelection = this._selectionDirection === 'left'
|
|
? this.selectionStart + offset
|
|
: this.selectionEnd + offset;
|
|
this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection);
|
|
return offset !== 0;
|
|
},
|
|
|
|
/**
|
|
* Moves cursor up without shift
|
|
* @param {Number} offset
|
|
*/
|
|
moveCursorWithoutShift: function(offset) {
|
|
if (offset < 0) {
|
|
this.selectionStart += offset;
|
|
this.selectionEnd = this.selectionStart;
|
|
}
|
|
else {
|
|
this.selectionEnd += offset;
|
|
this.selectionStart = this.selectionEnd;
|
|
}
|
|
return offset !== 0;
|
|
},
|
|
|
|
/**
|
|
* Moves cursor left
|
|
* @param {Event} e Event object
|
|
*/
|
|
moveCursorLeft: function(e) {
|
|
if (this.selectionStart === 0 && this.selectionEnd === 0) {
|
|
return;
|
|
}
|
|
this._moveCursorLeftOrRight('Left', e);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Boolean} true if a change happened
|
|
*/
|
|
_move: function(e, prop, direction) {
|
|
var newValue;
|
|
if (e.altKey) {
|
|
newValue = this['findWordBoundary' + direction](this[prop]);
|
|
}
|
|
else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) {
|
|
newValue = this['findLineBoundary' + direction](this[prop]);
|
|
}
|
|
else {
|
|
this[prop] += direction === 'Left' ? -1 : 1;
|
|
return true;
|
|
}
|
|
if (typeof newValue !== undefined && this[prop] !== newValue) {
|
|
this[prop] = newValue;
|
|
return true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_moveLeft: function(e, prop) {
|
|
return this._move(e, prop, 'Left');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_moveRight: function(e, prop) {
|
|
return this._move(e, prop, 'Right');
|
|
},
|
|
|
|
/**
|
|
* Moves cursor left without keeping selection
|
|
* @param {Event} e
|
|
*/
|
|
moveCursorLeftWithoutShift: function(e) {
|
|
var change = true;
|
|
this._selectionDirection = 'left';
|
|
|
|
// only move cursor when there is no selection,
|
|
// otherwise we discard it, and leave cursor on same place
|
|
if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) {
|
|
change = this._moveLeft(e, 'selectionStart');
|
|
|
|
}
|
|
this.selectionEnd = this.selectionStart;
|
|
return change;
|
|
},
|
|
|
|
/**
|
|
* Moves cursor left while keeping selection
|
|
* @param {Event} e
|
|
*/
|
|
moveCursorLeftWithShift: function(e) {
|
|
if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) {
|
|
return this._moveLeft(e, 'selectionEnd');
|
|
}
|
|
else if (this.selectionStart !== 0){
|
|
this._selectionDirection = 'left';
|
|
return this._moveLeft(e, 'selectionStart');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Moves cursor right
|
|
* @param {Event} e Event object
|
|
*/
|
|
moveCursorRight: function(e) {
|
|
if (this.selectionStart >= this.text.length && this.selectionEnd >= this.text.length) {
|
|
return;
|
|
}
|
|
this._moveCursorLeftOrRight('Right', e);
|
|
},
|
|
|
|
/**
|
|
* Moves cursor right or Left, fires event
|
|
* @param {String} direction 'Left', 'Right'
|
|
* @param {Event} e Event object
|
|
*/
|
|
_moveCursorLeftOrRight: function(direction, e) {
|
|
var actionName = 'moveCursor' + direction + 'With';
|
|
this._currentCursorOpacity = 1;
|
|
|
|
if (e.shiftKey) {
|
|
actionName += 'Shift';
|
|
}
|
|
else {
|
|
actionName += 'outShift';
|
|
}
|
|
if (this[actionName](e)) {
|
|
this.abortCursorAnimation();
|
|
this.initDelayedCursor();
|
|
this._fireSelectionChanged();
|
|
this._updateTextarea();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Moves cursor right while keeping selection
|
|
* @param {Event} e
|
|
*/
|
|
moveCursorRightWithShift: function(e) {
|
|
if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) {
|
|
return this._moveRight(e, 'selectionStart');
|
|
}
|
|
else if (this.selectionEnd !== this.text.length) {
|
|
this._selectionDirection = 'right';
|
|
return this._moveRight(e, 'selectionEnd');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Moves cursor right without keeping selection
|
|
* @param {Event} e Event object
|
|
*/
|
|
moveCursorRightWithoutShift: function(e) {
|
|
var changed = true;
|
|
this._selectionDirection = 'right';
|
|
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
changed = this._moveRight(e, 'selectionStart');
|
|
this.selectionEnd = this.selectionStart;
|
|
}
|
|
else {
|
|
this.selectionStart = this.selectionEnd;
|
|
}
|
|
return changed;
|
|
},
|
|
|
|
/**
|
|
* Removes characters selected by selection
|
|
* @param {Event} e Event object
|
|
*/
|
|
removeChars: function(e) {
|
|
if (this.selectionStart === this.selectionEnd) {
|
|
this._removeCharsNearCursor(e);
|
|
}
|
|
else {
|
|
this._removeCharsFromTo(this.selectionStart, this.selectionEnd);
|
|
}
|
|
|
|
this.setSelectionEnd(this.selectionStart);
|
|
|
|
this._removeExtraneousStyles();
|
|
|
|
this.canvas && this.canvas.renderAll();
|
|
|
|
this.setCoords();
|
|
this.fire('changed');
|
|
this.canvas && this.canvas.fire('text:changed', { target: this });
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Event} e Event object
|
|
*/
|
|
_removeCharsNearCursor: function(e) {
|
|
if (this.selectionStart === 0) {
|
|
return;
|
|
}
|
|
if (e.metaKey) {
|
|
// remove all till the start of current line
|
|
var leftLineBoundary = this.findLineBoundaryLeft(this.selectionStart);
|
|
|
|
this._removeCharsFromTo(leftLineBoundary, this.selectionStart);
|
|
this.setSelectionStart(leftLineBoundary);
|
|
}
|
|
else if (e.altKey) {
|
|
// remove all till the start of current word
|
|
var leftWordBoundary = this.findWordBoundaryLeft(this.selectionStart);
|
|
|
|
this._removeCharsFromTo(leftWordBoundary, this.selectionStart);
|
|
this.setSelectionStart(leftWordBoundary);
|
|
}
|
|
else {
|
|
this._removeSingleCharAndStyle(this.selectionStart);
|
|
this.setSelectionStart(this.selectionStart - 1);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
/* _TO_SVG_START_ */
|
|
(function() {
|
|
var toFixed = fabric.util.toFixed,
|
|
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
|
|
|
|
fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setSVGTextLineText: function(lineIndex, textSpans, height, textLeftOffset, textTopOffset, textBgRects) {
|
|
if (!this._getLineStyle(lineIndex)) {
|
|
fabric.Text.prototype._setSVGTextLineText.call(this,
|
|
lineIndex, textSpans, height, textLeftOffset, textTopOffset);
|
|
}
|
|
else {
|
|
this._setSVGTextLineChars(
|
|
lineIndex, textSpans, height, textLeftOffset, textBgRects);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setSVGTextLineChars: function(lineIndex, textSpans, height, textLeftOffset, textBgRects) {
|
|
|
|
var chars = this._textLines[lineIndex],
|
|
charOffset = 0,
|
|
lineLeftOffset = this._getLineLeftOffset(this._getLineWidth(this.ctx, lineIndex)) - this.width / 2,
|
|
lineOffset = this._getSVGLineTopOffset(lineIndex),
|
|
heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
|
|
|
|
for (var i = 0, len = chars.length; i < len; i++) {
|
|
var styleDecl = this._getStyleDeclaration(lineIndex, i) || { };
|
|
|
|
textSpans.push(
|
|
this._createTextCharSpan(
|
|
chars[i], styleDecl, lineLeftOffset, lineOffset.lineTop + lineOffset.offset, charOffset));
|
|
|
|
var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);
|
|
|
|
if (styleDecl.textBackgroundColor) {
|
|
textBgRects.push(
|
|
this._createTextCharBg(
|
|
styleDecl, lineLeftOffset, lineOffset.lineTop, heightOfLine, charWidth, charOffset));
|
|
}
|
|
|
|
charOffset += charWidth;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getSVGLineTopOffset: function(lineIndex) {
|
|
var lineTopOffset = 0, lastHeight = 0;
|
|
for (var j = 0; j < lineIndex; j++) {
|
|
lineTopOffset += this._getHeightOfLine(this.ctx, j);
|
|
}
|
|
lastHeight = this._getHeightOfLine(this.ctx, j);
|
|
return {
|
|
lineTop: lineTopOffset,
|
|
offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult)
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_createTextCharBg: function(styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset) {
|
|
return [
|
|
'\t\t<rect fill="', styleDecl.textBackgroundColor,
|
|
'" x="', toFixed(lineLeftOffset + charOffset, NUM_FRACTION_DIGITS),
|
|
'" y="', toFixed(lineTopOffset - this.height / 2, NUM_FRACTION_DIGITS),
|
|
'" width="', toFixed(charWidth, NUM_FRACTION_DIGITS),
|
|
'" height="', toFixed(heightOfLine / this.lineHeight, NUM_FRACTION_DIGITS),
|
|
'"></rect>\n'
|
|
].join('');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_createTextCharSpan: function(_char, styleDecl, lineLeftOffset, lineTopOffset, charOffset) {
|
|
|
|
var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
|
|
visible: true,
|
|
fill: this.fill,
|
|
stroke: this.stroke,
|
|
type: 'text',
|
|
getSvgFilter: fabric.Object.prototype.getSvgFilter
|
|
}, styleDecl));
|
|
|
|
return [
|
|
'\t\t\t<tspan x="', toFixed(lineLeftOffset + charOffset, NUM_FRACTION_DIGITS), '" y="',
|
|
toFixed(lineTopOffset - this.height / 2, NUM_FRACTION_DIGITS), '" ',
|
|
(styleDecl.fontFamily ? 'font-family="' + styleDecl.fontFamily.replace(/"/g, '\'') + '" ' : ''),
|
|
(styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ' : ''),
|
|
(styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ' : ''),
|
|
(styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ' : ''),
|
|
(styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ' : ''),
|
|
'style="', fillStyles, '">',
|
|
fabric.util.string.escapeXml(_char),
|
|
'</tspan>\n'
|
|
].join('');
|
|
}
|
|
});
|
|
})();
|
|
/* _TO_SVG_END_ */
|
|
|
|
|
|
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = {}),
|
|
clone = fabric.util.object.clone;
|
|
|
|
/**
|
|
* Textbox class, based on IText, allows the user to resize the text rectangle
|
|
* and wraps lines automatically. Textboxes have their Y scaling locked, the
|
|
* user can only change width. Height is adjusted automatically based on the
|
|
* wrapping of lines.
|
|
* @class fabric.Textbox
|
|
* @extends fabric.IText
|
|
* @mixes fabric.Observable
|
|
* @return {fabric.Textbox} thisArg
|
|
* @see {@link fabric.Textbox#initialize} for constructor definition
|
|
*/
|
|
fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'textbox',
|
|
|
|
/**
|
|
* Minimum width of textbox, in pixels.
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
minWidth: 20,
|
|
|
|
/**
|
|
* Minimum calculated width of a textbox, in pixels.
|
|
* fixed to 2 so that an empty textbox cannot go to 0
|
|
* and is still selectable without text.
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
dynamicMinWidth: 2,
|
|
|
|
/**
|
|
* Cached array of text wrapping.
|
|
* @type Array
|
|
*/
|
|
__cachedLines: null,
|
|
|
|
/**
|
|
* Override standard Object class values
|
|
*/
|
|
lockScalingY: true,
|
|
|
|
/**
|
|
* Override standard Object class values
|
|
*/
|
|
lockScalingFlip: true,
|
|
|
|
/**
|
|
* Constructor. Some scaling related property values are forced. Visibility
|
|
* of controls is also fixed; only the rotation and width controls are
|
|
* made available.
|
|
* @param {String} text Text string
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Textbox} thisArg
|
|
*/
|
|
initialize: function(text, options) {
|
|
this.ctx = fabric.util.createCanvasElement().getContext('2d');
|
|
this.callSuper('initialize', text, options);
|
|
this.setControlsVisibility(fabric.Textbox.getTextboxControlVisibility());
|
|
|
|
// add width to this list of props that effect line wrapping.
|
|
this._dimensionAffectingProps.width = true;
|
|
},
|
|
|
|
/**
|
|
* Unlike superclass's version of this function, Textbox does not update
|
|
* its width.
|
|
* @param {CanvasRenderingContext2D} ctx Context to use for measurements
|
|
* @private
|
|
* @override
|
|
*/
|
|
_initDimensions: function(ctx) {
|
|
if (this.__skipDimension) {
|
|
return;
|
|
}
|
|
|
|
if (!ctx) {
|
|
ctx = fabric.util.createCanvasElement().getContext('2d');
|
|
this._setTextStyles(ctx);
|
|
}
|
|
|
|
// clear dynamicMinWidth as it will be different after we re-wrap line
|
|
this.dynamicMinWidth = 0;
|
|
|
|
// wrap lines
|
|
this._textLines = this._splitTextIntoLines();
|
|
// if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap
|
|
if (this.dynamicMinWidth > this.width) {
|
|
this._set('width', this.dynamicMinWidth);
|
|
}
|
|
|
|
// clear cache and re-calculate height
|
|
this._clearCache();
|
|
this.height = this._getTextHeight(ctx);
|
|
},
|
|
|
|
/**
|
|
* Generate an object that translates the style object so that it is
|
|
* broken up by visual lines (new lines and automatic wrapping).
|
|
* The original text styles object is broken up by actual lines (new lines only),
|
|
* which is only sufficient for Text / IText
|
|
* @private
|
|
*/
|
|
_generateStyleMap: function() {
|
|
var realLineCount = 0,
|
|
realLineCharCount = 0,
|
|
charCount = 0,
|
|
map = {};
|
|
|
|
for (var i = 0; i < this._textLines.length; i++) {
|
|
if (this.text[charCount] === '\n' && i > 0) {
|
|
realLineCharCount = 0;
|
|
charCount++;
|
|
realLineCount++;
|
|
}
|
|
else if (this.text[charCount] === ' ' && i > 0) {
|
|
// this case deals with space's that are removed from end of lines when wrapping
|
|
realLineCharCount++;
|
|
charCount++;
|
|
}
|
|
|
|
map[i] = { line: realLineCount, offset: realLineCharCount };
|
|
|
|
charCount += this._textLines[i].length;
|
|
realLineCharCount += this._textLines[i].length;
|
|
}
|
|
|
|
return map;
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
* @param {Boolean} [returnCloneOrEmpty=false]
|
|
* @private
|
|
*/
|
|
_getStyleDeclaration: function(lineIndex, charIndex, returnCloneOrEmpty) {
|
|
if (this._styleMap) {
|
|
var map = this._styleMap[lineIndex];
|
|
if (!map) {
|
|
return returnCloneOrEmpty ? { } : null;
|
|
}
|
|
lineIndex = map.line;
|
|
charIndex = map.offset + charIndex;
|
|
}
|
|
return this.callSuper('_getStyleDeclaration', lineIndex, charIndex, returnCloneOrEmpty);
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
* @param {Object} style
|
|
* @private
|
|
*/
|
|
_setStyleDeclaration: function(lineIndex, charIndex, style) {
|
|
var map = this._styleMap[lineIndex];
|
|
lineIndex = map.line;
|
|
charIndex = map.offset + charIndex;
|
|
|
|
this.styles[lineIndex][charIndex] = style;
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @param {Number} charIndex
|
|
* @private
|
|
*/
|
|
_deleteStyleDeclaration: function(lineIndex, charIndex) {
|
|
var map = this._styleMap[lineIndex];
|
|
lineIndex = map.line;
|
|
charIndex = map.offset + charIndex;
|
|
|
|
delete this.styles[lineIndex][charIndex];
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @private
|
|
*/
|
|
_getLineStyle: function(lineIndex) {
|
|
var map = this._styleMap[lineIndex];
|
|
return this.styles[map.line];
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @param {Object} style
|
|
* @private
|
|
*/
|
|
_setLineStyle: function(lineIndex, style) {
|
|
var map = this._styleMap[lineIndex];
|
|
this.styles[map.line] = style;
|
|
},
|
|
|
|
/**
|
|
* @param {Number} lineIndex
|
|
* @private
|
|
*/
|
|
_deleteLineStyle: function(lineIndex) {
|
|
var map = this._styleMap[lineIndex];
|
|
delete this.styles[map.line];
|
|
},
|
|
|
|
/**
|
|
* Wraps text using the 'width' property of Textbox. First this function
|
|
* splits text on newlines, so we preserve newlines entered by the user.
|
|
* Then it wraps each line using the width of the Textbox by calling
|
|
* _wrapLine().
|
|
* @param {CanvasRenderingContext2D} ctx Context to use for measurements
|
|
* @param {String} text The string of text that is split into lines
|
|
* @returns {Array} Array of lines
|
|
*/
|
|
_wrapText: function(ctx, text) {
|
|
var lines = text.split(this._reNewline), wrapped = [], i;
|
|
|
|
for (i = 0; i < lines.length; i++) {
|
|
wrapped = wrapped.concat(this._wrapLine(ctx, lines[i], i));
|
|
}
|
|
|
|
return wrapped;
|
|
},
|
|
|
|
/**
|
|
* Helper function to measure a string of text, given its lineIndex and charIndex offset
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {String} text
|
|
* @param {number} lineIndex
|
|
* @param {number} charOffset
|
|
* @returns {number}
|
|
* @private
|
|
*/
|
|
_measureText: function(ctx, text, lineIndex, charOffset) {
|
|
var width = 0;
|
|
charOffset = charOffset || 0;
|
|
for (var i = 0, len = text.length; i < len; i++) {
|
|
width += this._getWidthOfChar(ctx, text[i], lineIndex, i + charOffset);
|
|
}
|
|
return width;
|
|
},
|
|
|
|
/**
|
|
* Wraps a line of text using the width of the Textbox and a context.
|
|
* @param {CanvasRenderingContext2D} ctx Context to use for measurements
|
|
* @param {String} text The string of text to split into lines
|
|
* @param {Number} lineIndex
|
|
* @returns {Array} Array of line(s) into which the given text is wrapped
|
|
* to.
|
|
*/
|
|
_wrapLine: function(ctx, text, lineIndex) {
|
|
var lineWidth = 0,
|
|
lines = [],
|
|
line = '',
|
|
words = text.split(' '),
|
|
word = '',
|
|
offset = 0,
|
|
infix = ' ',
|
|
wordWidth = 0,
|
|
infixWidth = 0,
|
|
largestWordWidth = 0,
|
|
lineJustStarted = true,
|
|
additionalSpace = this._getWidthOfCharSpacing();
|
|
|
|
for (var i = 0; i < words.length; i++) {
|
|
word = words[i];
|
|
wordWidth = this._measureText(ctx, word, lineIndex, offset);
|
|
|
|
offset += word.length;
|
|
|
|
lineWidth += infixWidth + wordWidth - additionalSpace;
|
|
|
|
if (lineWidth >= this.width && !lineJustStarted) {
|
|
lines.push(line);
|
|
line = '';
|
|
lineWidth = wordWidth;
|
|
lineJustStarted = true;
|
|
}
|
|
else {
|
|
lineWidth += additionalSpace;
|
|
}
|
|
|
|
if (!lineJustStarted) {
|
|
line += infix;
|
|
}
|
|
line += word;
|
|
|
|
infixWidth = this._measureText(ctx, infix, lineIndex, offset);
|
|
offset++;
|
|
lineJustStarted = false;
|
|
// keep track of largest word
|
|
if (wordWidth > largestWordWidth) {
|
|
largestWordWidth = wordWidth;
|
|
}
|
|
}
|
|
|
|
i && lines.push(line);
|
|
|
|
if (largestWordWidth > this.dynamicMinWidth) {
|
|
this.dynamicMinWidth = largestWordWidth - additionalSpace;
|
|
}
|
|
|
|
return lines;
|
|
},
|
|
/**
|
|
* Gets lines of text to render in the Textbox. This function calculates
|
|
* text wrapping on the fly everytime it is called.
|
|
* @returns {Array} Array of lines in the Textbox.
|
|
* @override
|
|
*/
|
|
_splitTextIntoLines: function() {
|
|
var originalAlign = this.textAlign;
|
|
this.ctx.save();
|
|
this._setTextStyles(this.ctx);
|
|
this.textAlign = 'left';
|
|
var lines = this._wrapText(this.ctx, this.text);
|
|
this.textAlign = originalAlign;
|
|
this.ctx.restore();
|
|
this._textLines = lines;
|
|
this._styleMap = this._generateStyleMap();
|
|
return lines;
|
|
},
|
|
|
|
/**
|
|
* When part of a group, we don't want the Textbox's scale to increase if
|
|
* the group's increases. That's why we reduce the scale of the Textbox by
|
|
* the amount that the group's increases. This is to maintain the effective
|
|
* scale of the Textbox at 1, so that font-size values make sense. Otherwise
|
|
* the same font-size value would result in different actual size depending
|
|
* on the value of the scale.
|
|
* @param {String} key
|
|
* @param {*} value
|
|
*/
|
|
setOnGroup: function(key, value) {
|
|
if (key === 'scaleX') {
|
|
this.set('scaleX', Math.abs(1 / value));
|
|
this.set('width', (this.get('width') * value) /
|
|
(typeof this.__oldScaleX === 'undefined' ? 1 : this.__oldScaleX));
|
|
this.__oldScaleX = value;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns 2d representation (lineIndex and charIndex) of cursor (or selection start).
|
|
* Overrides the superclass function to take into account text wrapping.
|
|
*
|
|
* @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
|
|
*/
|
|
get2DCursorLocation: function(selectionStart) {
|
|
if (typeof selectionStart === 'undefined') {
|
|
selectionStart = this.selectionStart;
|
|
}
|
|
|
|
var numLines = this._textLines.length,
|
|
removed = 0;
|
|
|
|
for (var i = 0; i < numLines; i++) {
|
|
var line = this._textLines[i],
|
|
lineLen = line.length;
|
|
|
|
if (selectionStart <= removed + lineLen) {
|
|
return {
|
|
lineIndex: i,
|
|
charIndex: selectionStart - removed
|
|
};
|
|
}
|
|
|
|
removed += lineLen;
|
|
|
|
if (this.text[removed] === '\n' || this.text[removed] === ' ') {
|
|
removed++;
|
|
}
|
|
}
|
|
|
|
return {
|
|
lineIndex: numLines - 1,
|
|
charIndex: this._textLines[numLines - 1].length
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Overrides superclass function and uses text wrapping data to get cursor
|
|
* boundary offsets instead of the array of chars.
|
|
* @param {Array} chars Unused
|
|
* @param {String} typeOfBoundaries Can be 'cursor' or 'selection'
|
|
* @returns {Object} Object with 'top', 'left', and 'lineLeft' properties set.
|
|
*/
|
|
_getCursorBoundariesOffsets: function(chars, typeOfBoundaries) {
|
|
var topOffset = 0,
|
|
leftOffset = 0,
|
|
cursorLocation = this.get2DCursorLocation(),
|
|
lineChars = this._textLines[cursorLocation.lineIndex].split(''),
|
|
lineLeftOffset = this._getLineLeftOffset(this._getLineWidth(this.ctx, cursorLocation.lineIndex));
|
|
|
|
for (var i = 0; i < cursorLocation.charIndex; i++) {
|
|
leftOffset += this._getWidthOfChar(this.ctx, lineChars[i], cursorLocation.lineIndex, i);
|
|
}
|
|
|
|
for (i = 0; i < cursorLocation.lineIndex; i++) {
|
|
topOffset += this._getHeightOfLine(this.ctx, i);
|
|
}
|
|
|
|
if (typeOfBoundaries === 'cursor') {
|
|
topOffset += (1 - this._fontSizeFraction) * this._getHeightOfLine(this.ctx, cursorLocation.lineIndex)
|
|
/ this.lineHeight - this.getCurrentCharFontSize(cursorLocation.lineIndex, cursorLocation.charIndex)
|
|
* (1 - this._fontSizeFraction);
|
|
}
|
|
|
|
return {
|
|
top: topOffset,
|
|
left: leftOffset,
|
|
lineLeft: lineLeftOffset
|
|
};
|
|
},
|
|
|
|
getMinWidth: function() {
|
|
return Math.max(this.minWidth, this.dynamicMinWidth);
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @method toObject
|
|
* @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.callSuper('toObject', ['minWidth'].concat(propertiesToInclude));
|
|
}
|
|
});
|
|
/**
|
|
* Returns fabric.Textbox instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Textbox
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {Function} [callback] Callback to invoke when an fabric.Textbox instance is created
|
|
* @return {fabric.Textbox} instance of fabric.Textbox
|
|
*/
|
|
fabric.Textbox.fromObject = function(object, callback) {
|
|
var textbox = new fabric.Textbox(object.text, clone(object));
|
|
callback && callback(textbox);
|
|
return textbox;
|
|
};
|
|
/**
|
|
* Returns the default controls visibility required for Textboxes.
|
|
* @returns {Object}
|
|
*/
|
|
fabric.Textbox.getTextboxControlVisibility = function() {
|
|
return {
|
|
tl: false,
|
|
tr: false,
|
|
br: false,
|
|
bl: false,
|
|
ml: true,
|
|
mt: false,
|
|
mr: true,
|
|
mb: false,
|
|
mtr: true
|
|
};
|
|
};
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|
|
|
|
|
|
(function() {
|
|
|
|
/**
|
|
* Override _setObjectScale and add Textbox specific resizing behavior. Resizing
|
|
* a Textbox doesn't scale text, it only changes width and makes text wrap automatically.
|
|
*/
|
|
var setObjectScaleOverridden = fabric.Canvas.prototype._setObjectScale;
|
|
|
|
fabric.Canvas.prototype._setObjectScale = function(localMouse, transform,
|
|
lockScalingX, lockScalingY, by, lockScalingFlip, _dim) {
|
|
|
|
var t = transform.target;
|
|
if (t instanceof fabric.Textbox) {
|
|
var w = t.width * ((localMouse.x / transform.scaleX) / (t.width + t.strokeWidth));
|
|
if (w >= t.getMinWidth()) {
|
|
t.set('width', w);
|
|
return true;
|
|
}
|
|
}
|
|
else {
|
|
return setObjectScaleOverridden.call(fabric.Canvas.prototype, localMouse, transform,
|
|
lockScalingX, lockScalingY, by, lockScalingFlip, _dim);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets controls of this group to the Textbox's special configuration if
|
|
* one is present in the group. Deletes _controlsVisibility otherwise, so that
|
|
* it gets initialized to default value at runtime.
|
|
*/
|
|
fabric.Group.prototype._refreshControlsVisibility = function() {
|
|
if (typeof fabric.Textbox === 'undefined') {
|
|
return;
|
|
}
|
|
for (var i = this._objects.length; i--;) {
|
|
if (this._objects[i] instanceof fabric.Textbox) {
|
|
this.setControlsVisibility(fabric.Textbox.getTextboxControlVisibility());
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
|
|
var clone = fabric.util.object.clone;
|
|
|
|
fabric.util.object.extend(fabric.Textbox.prototype, /** @lends fabric.IText.prototype */ {
|
|
/**
|
|
* @private
|
|
*/
|
|
_removeExtraneousStyles: function() {
|
|
for (var prop in this._styleMap) {
|
|
if (!this._textLines[prop]) {
|
|
delete this.styles[this._styleMap[prop].line];
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts style object for a given line/char index
|
|
* @param {Number} lineIndex Index of a line
|
|
* @param {Number} charIndex Index of a char
|
|
* @param {Object} [style] Style object to insert, if given
|
|
*/
|
|
insertCharStyleObject: function(lineIndex, charIndex, style) {
|
|
// adjust lineIndex and charIndex
|
|
var map = this._styleMap[lineIndex];
|
|
lineIndex = map.line;
|
|
charIndex = map.offset + charIndex;
|
|
|
|
fabric.IText.prototype.insertCharStyleObject.apply(this, [lineIndex, charIndex, style]);
|
|
},
|
|
|
|
/**
|
|
* Inserts new style object
|
|
* @param {Number} lineIndex Index of a line
|
|
* @param {Number} charIndex Index of a char
|
|
* @param {Boolean} isEndOfLine True if it's end of line
|
|
*/
|
|
insertNewlineStyleObject: function(lineIndex, charIndex, isEndOfLine) {
|
|
// adjust lineIndex and charIndex
|
|
var map = this._styleMap[lineIndex];
|
|
lineIndex = map.line;
|
|
charIndex = map.offset + charIndex;
|
|
|
|
fabric.IText.prototype.insertNewlineStyleObject.apply(this, [lineIndex, charIndex, isEndOfLine]);
|
|
},
|
|
|
|
/**
|
|
* Shifts line styles up or down. This function is slightly different than the one in
|
|
* itext_behaviour as it takes into account the styleMap.
|
|
*
|
|
* @param {Number} lineIndex Index of a line
|
|
* @param {Number} offset Can be -1 or +1
|
|
*/
|
|
shiftLineStyles: function(lineIndex, offset) {
|
|
// shift all line styles by 1 upward
|
|
var clonedStyles = clone(this.styles),
|
|
map = this._styleMap[lineIndex];
|
|
|
|
// adjust line index
|
|
lineIndex = map.line;
|
|
|
|
for (var line in this.styles) {
|
|
var numericLine = parseInt(line, 10);
|
|
|
|
if (numericLine > lineIndex) {
|
|
this.styles[numericLine + offset] = clonedStyles[numericLine];
|
|
|
|
if (!clonedStyles[numericLine - offset]) {
|
|
delete this.styles[numericLine];
|
|
}
|
|
}
|
|
}
|
|
//TODO: evaluate if delete old style lines with offset -1
|
|
},
|
|
|
|
/**
|
|
* Figure out programatically the text on previous actual line (actual = separated by \n);
|
|
*
|
|
* @param {Number} lIndex
|
|
* @returns {String}
|
|
* @private
|
|
*/
|
|
_getTextOnPreviousLine: function(lIndex) {
|
|
var textOnPreviousLine = this._textLines[lIndex - 1];
|
|
|
|
while (this._styleMap[lIndex - 2] && this._styleMap[lIndex - 2].line === this._styleMap[lIndex - 1].line) {
|
|
textOnPreviousLine = this._textLines[lIndex - 2] + textOnPreviousLine;
|
|
|
|
lIndex--;
|
|
}
|
|
|
|
return textOnPreviousLine;
|
|
},
|
|
|
|
/**
|
|
* Removes style object
|
|
* @param {Boolean} isBeginningOfLine True if cursor is at the beginning of line
|
|
* @param {Number} [index] Optional index. When not given, current selectionStart is used.
|
|
*/
|
|
removeStyleObject: function(isBeginningOfLine, index) {
|
|
|
|
var cursorLocation = this.get2DCursorLocation(index),
|
|
map = this._styleMap[cursorLocation.lineIndex],
|
|
lineIndex = map.line,
|
|
charIndex = map.offset + cursorLocation.charIndex;
|
|
this._removeStyleObject(isBeginningOfLine, cursorLocation, lineIndex, charIndex);
|
|
}
|
|
});
|
|
})();
|
|
|
|
|
|
(function() {
|
|
var override = fabric.IText.prototype._getNewSelectionStartFromOffset;
|
|
/**
|
|
* Overrides the IText implementation and adjusts character index as there is not always a linebreak
|
|
*
|
|
* @param {Number} mouseOffset
|
|
* @param {Number} prevWidth
|
|
* @param {Number} width
|
|
* @param {Number} index
|
|
* @param {Number} jlen
|
|
* @returns {Number}
|
|
*/
|
|
fabric.IText.prototype._getNewSelectionStartFromOffset = function(mouseOffset, prevWidth, width, index, jlen) {
|
|
index = override.call(this, mouseOffset, prevWidth, width, index, jlen);
|
|
|
|
// the index passed into the function is padded by the amount of lines from _textLines (to account for \n)
|
|
// we need to remove this padding, and pad it by actual lines, and / or spaces that are meant to be there
|
|
var tmp = 0,
|
|
removed = 0;
|
|
|
|
// account for removed characters
|
|
for (var i = 0; i < this._textLines.length; i++) {
|
|
tmp += this._textLines[i].length;
|
|
|
|
if (tmp + removed >= index) {
|
|
break;
|
|
}
|
|
|
|
if (this.text[tmp + removed] === '\n' || this.text[tmp + removed] === ' ') {
|
|
removed++;
|
|
}
|
|
}
|
|
|
|
return index - i + removed;
|
|
};
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
|
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
|
return;
|
|
}
|
|
|
|
var DOMParser = require('xmldom').DOMParser,
|
|
URL = require('url'),
|
|
HTTP = require('http'),
|
|
HTTPS = require('https'),
|
|
|
|
Canvas = require('canvas'),
|
|
Image = require('canvas').Image;
|
|
|
|
/** @private */
|
|
function request(url, encoding, callback) {
|
|
var oURL = URL.parse(url);
|
|
|
|
// detect if http or https is used
|
|
if ( !oURL.port ) {
|
|
oURL.port = ( oURL.protocol.indexOf('https:') === 0 ) ? 443 : 80;
|
|
}
|
|
|
|
// assign request handler based on protocol
|
|
var reqHandler = (oURL.protocol.indexOf('https:') === 0 ) ? HTTPS : HTTP,
|
|
req = reqHandler.request({
|
|
hostname: oURL.hostname,
|
|
port: oURL.port,
|
|
path: oURL.path,
|
|
method: 'GET'
|
|
}, function(response) {
|
|
var body = '';
|
|
if (encoding) {
|
|
response.setEncoding(encoding);
|
|
}
|
|
response.on('end', function () {
|
|
callback(body);
|
|
});
|
|
response.on('data', function (chunk) {
|
|
if (response.statusCode === 200) {
|
|
body += chunk;
|
|
}
|
|
});
|
|
});
|
|
|
|
req.on('error', function(err) {
|
|
if (err.errno === process.ECONNREFUSED) {
|
|
fabric.log('ECONNREFUSED: connection refused to ' + oURL.hostname + ':' + oURL.port);
|
|
}
|
|
else {
|
|
fabric.log(err.message);
|
|
}
|
|
callback(null);
|
|
});
|
|
|
|
req.end();
|
|
}
|
|
|
|
/** @private */
|
|
function requestFs(path, callback) {
|
|
var fs = require('fs');
|
|
fs.readFile(path, function (err, data) {
|
|
if (err) {
|
|
fabric.log(err);
|
|
throw err;
|
|
}
|
|
else {
|
|
callback(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
fabric.util.loadImage = function(url, callback, context) {
|
|
function createImageAndCallBack(data) {
|
|
if (data) {
|
|
img.src = new Buffer(data, 'binary');
|
|
// preserving original url, which seems to be lost in node-canvas
|
|
img._src = url;
|
|
callback && callback.call(context, img);
|
|
}
|
|
else {
|
|
img = null;
|
|
callback && callback.call(context, null, true);
|
|
}
|
|
}
|
|
var img = new Image();
|
|
if (url && (url instanceof Buffer || url.indexOf('data') === 0)) {
|
|
img.src = img._src = url;
|
|
callback && callback.call(context, img);
|
|
}
|
|
else if (url && url.indexOf('http') !== 0) {
|
|
requestFs(url, createImageAndCallBack);
|
|
}
|
|
else if (url) {
|
|
request(url, 'binary', createImageAndCallBack);
|
|
}
|
|
else {
|
|
callback && callback.call(context, url);
|
|
}
|
|
};
|
|
|
|
fabric.loadSVGFromURL = function(url, callback, reviver) {
|
|
url = url.replace(/^\n\s*/, '').replace(/\?.*$/, '').trim();
|
|
if (url.indexOf('http') !== 0) {
|
|
requestFs(url, function(body) {
|
|
fabric.loadSVGFromString(body.toString(), callback, reviver);
|
|
});
|
|
}
|
|
else {
|
|
request(url, '', function(body) {
|
|
fabric.loadSVGFromString(body, callback, reviver);
|
|
});
|
|
}
|
|
};
|
|
|
|
fabric.loadSVGFromString = function(string, callback, reviver) {
|
|
var doc = new DOMParser().parseFromString(string);
|
|
fabric.parseSVGDocument(doc.documentElement, function(results, options) {
|
|
callback && callback(results, options);
|
|
}, reviver);
|
|
};
|
|
|
|
fabric.util.getScript = function(url, callback) {
|
|
request(url, '', function(body) {
|
|
// eslint-disable-next-line no-eval
|
|
eval(body);
|
|
callback && callback();
|
|
});
|
|
};
|
|
|
|
// fabric.util.createCanvasElement = function(_, width, height) {
|
|
// return new Canvas(width, height);
|
|
// }
|
|
|
|
/**
|
|
* Only available when running fabric on node.js
|
|
* @param {Number} width Canvas width
|
|
* @param {Number} height Canvas height
|
|
* @param {Object} [options] Options to pass to FabricCanvas.
|
|
* @param {Object} [nodeCanvasOptions] Options to pass to NodeCanvas.
|
|
* @return {Object} wrapped canvas instance
|
|
*/
|
|
fabric.createCanvasForNode = function(width, height, options, nodeCanvasOptions) {
|
|
nodeCanvasOptions = nodeCanvasOptions || options;
|
|
|
|
var canvasEl = fabric.document.createElement('canvas'),
|
|
nodeCanvas = new Canvas(width || 600, height || 600, nodeCanvasOptions),
|
|
nodeCacheCanvas = new Canvas(width || 600, height || 600, nodeCanvasOptions);
|
|
|
|
// jsdom doesn't create style on canvas element, so here be temp. workaround
|
|
canvasEl.style = { };
|
|
|
|
canvasEl.width = nodeCanvas.width;
|
|
canvasEl.height = nodeCanvas.height;
|
|
options = options || { };
|
|
options.nodeCanvas = nodeCanvas;
|
|
options.nodeCacheCanvas = nodeCacheCanvas;
|
|
var FabricCanvas = fabric.Canvas || fabric.StaticCanvas,
|
|
fabricCanvas = new FabricCanvas(canvasEl, options);
|
|
fabricCanvas.nodeCanvas = nodeCanvas;
|
|
fabricCanvas.nodeCacheCanvas = nodeCacheCanvas;
|
|
fabricCanvas.contextContainer = nodeCanvas.getContext('2d');
|
|
fabricCanvas.contextCache = nodeCacheCanvas.getContext('2d');
|
|
fabricCanvas.Font = Canvas.Font;
|
|
return fabricCanvas;
|
|
};
|
|
|
|
var originaInitStatic = fabric.StaticCanvas.prototype._initStatic;
|
|
fabric.StaticCanvas.prototype._initStatic = function(el, options) {
|
|
el = el || fabric.document.createElement('canvas');
|
|
this.nodeCanvas = new Canvas(el.width, el.height);
|
|
this.nodeCacheCanvas = new Canvas(el.width, el.height);
|
|
originaInitStatic.call(this, el, options);
|
|
this.contextContainer = this.nodeCanvas.getContext('2d');
|
|
this.contextCache = this.nodeCacheCanvas.getContext('2d');
|
|
this.Font = Canvas.Font;
|
|
}
|
|
|
|
/** @ignore */
|
|
fabric.StaticCanvas.prototype.createPNGStream = function() {
|
|
return this.nodeCanvas.createPNGStream();
|
|
};
|
|
|
|
fabric.StaticCanvas.prototype.createJPEGStream = function(opts) {
|
|
return this.nodeCanvas.createJPEGStream(opts);
|
|
};
|
|
|
|
fabric.StaticCanvas.prototype._initRetinaScaling = function() {
|
|
if (!this._isRetinaScaling()) {
|
|
return;
|
|
}
|
|
|
|
this.lowerCanvasEl.setAttribute('width', this.width * fabric.devicePixelRatio);
|
|
this.lowerCanvasEl.setAttribute('height', this.height * fabric.devicePixelRatio);
|
|
this.nodeCanvas.width = this.width * fabric.devicePixelRatio;
|
|
this.nodeCanvas.height = this.height * fabric.devicePixelRatio;
|
|
this.contextContainer.scale(fabric.devicePixelRatio, fabric.devicePixelRatio);
|
|
return this;
|
|
};
|
|
if (fabric.Canvas) {
|
|
fabric.Canvas.prototype._initRetinaScaling = fabric.StaticCanvas.prototype._initRetinaScaling;
|
|
}
|
|
|
|
var origSetBackstoreDimension = fabric.StaticCanvas.prototype._setBackstoreDimension;
|
|
fabric.StaticCanvas.prototype._setBackstoreDimension = function(prop, value) {
|
|
origSetBackstoreDimension.call(this, prop, value);
|
|
this.nodeCanvas[prop] = value;
|
|
return this;
|
|
};
|
|
if (fabric.Canvas) {
|
|
fabric.Canvas.prototype._setBackstoreDimension = fabric.StaticCanvas.prototype._setBackstoreDimension;
|
|
}
|
|
|
|
})();
|
|
|