Last active
September 5, 2017 18:54
-
-
Save nolanlawson/f97766e22453a0bb1c925149e0ab89ae to your computer and use it in GitHub Desktop.
Particle demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .idea |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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.7.17" }; | |
| 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( | |
| decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E") | |
| ); | |
| 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 = { }; | |
| fabric.iMatrix = [1, 0, 0, 1, 0, 0]; | |
| fabric.canvasModule = 'canvas'; | |
| /** | |
| * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine. | |
| * @since 1.7.14 | |
| * @type Number | |
| * @default | |
| */ | |
| fabric.perfLimitSizeTotal = 2097152; | |
| /** | |
| * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000 | |
| * @since 1.7.14 | |
| * @type Number | |
| * @default | |
| */ | |
| fabric.maxCacheSideLimit = 4096; | |
| /** | |
| * Lowest pixel limit for cache canvases, set at 256PX | |
| * @since 1.7.14 | |
| * @type Number | |
| * @default | |
| */ | |
| fabric.minCacheSideLimit = 256; | |
| /** | |
| * 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); | |
| } | |
| }; | |
| /** | |
| * @namespace fabric.CommonMethods | |
| */ | |
| fabric.CommonMethods = { | |
| /** | |
| * Sets object's properties from options | |
| * @param {Object} [options] Options object | |
| */ | |
| _setOptions: function(options) { | |
| for (var prop in options) { | |
| this.set(prop, options[prop]); | |
| } | |
| }, | |
| /** | |
| * @private | |
| * @param {Object} [filler] Options object | |
| * @param {String} [property] property to set the Gradient to | |
| */ | |
| _initGradient: function(filler, property) { | |
| if (filler && filler.colorStops && !(filler instanceof fabric.Gradient)) { | |
| this.set(property, new fabric.Gradient(filler)); | |
| } | |
| }, | |
| /** | |
| * @private | |
| * @param {Object} [filler] Options object | |
| * @param {String} [property] property to set the Pattern to | |
| * @param {Function} [callback] callback to invoke after pattern load | |
| */ | |
| _initPattern: function(filler, property, callback) { | |
| if (filler && filler.source && !(filler instanceof fabric.Pattern)) { | |
| this.set(property, new fabric.Pattern(filler, callback)); | |
| } | |
| else { | |
| callback && callback(); | |
| } | |
| }, | |
| /** | |
| * @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); | |
| } | |
| }, | |
| /** | |
| * @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; | |
| }, | |
| _set: function(key, value) { | |
| this[key] = value; | |
| }, | |
| /** | |
| * 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; | |
| }, | |
| /** | |
| * Basic getter | |
| * @param {String} property Property name | |
| * @return {*} value of a property | |
| */ | |
| get: function(property) { | |
| return this[property]; | |
| } | |
| }; | |
| (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] | |
| ); | |
| }, | |
| bboxCache: {}, | |
| /** | |
| * 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 cacheKey = JSON.stringify(points); | |
| var cached = fabric.util.bboxCache[cacheKey]; | |
| if (cached) { | |
| return cached; | |
| } | |
| 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); | |
| var res = { | |
| left: minX, | |
| top: minY, | |
| width: width, | |
| height: height | |
| }; | |
| fabric.util.bboxCache[cacheKey] = res; | |
| return res; | |
| }, | |
| /** | |
| * 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, | |
| forceAsync = true; | |
| 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); | |
| klass.fromObject(o, function (obj, error) { | |
| error || (enlivenedObjects[index] = obj); | |
| reviver && reviver(o, obj, error); | |
| onLoaded(); | |
| }, forceAsync); | |
| }); | |
| }, | |
| /** | |
| * Create and wait for loading of patterns | |
| * @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. | |
| */ | |
| enlivenPatterns: function(patterns, callback) { | |
| patterns = patterns || []; | |
| function onLoaded() { | |
| if (++numLoadedPatterns === numPatterns) { | |
| callback && callback(enlivenedPatterns); | |
| } | |
| } | |
| var enlivenedPatterns = [], | |
| numLoadedPatterns = 0, | |
| numPatterns = patterns.length; | |
| if (!numPatterns) { | |
| callback && callback(enlivenedPatterns); | |
| return; | |
| } | |
| patterns.forEach(function (p, index) { | |
| if (p && p.source) { | |
| new fabric.Pattern(p, function(pattern) { | |
| enlivenedPatterns[index] = pattern; | |
| onLoaded(); | |
| }); | |
| } | |
| else { | |
| enlivenedPatterns[index] = p; | |
| 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.sourcePath = 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) { | |
| return new Function('return this.get("' + property + '")'); | |
| })(propName); | |
| } | |
| if (!proto[setterName]) { | |
| proto[setterName] = (function(property) { | |
| return 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]; | |
| } | |
| }, | |
| /** | |
| * Clear char widths cache for a font family. | |
| * @memberOf fabric.util | |
| * @param {Number} ar aspect ratio | |
| * @param {Number} maximumArea Maximum area you want to achieve | |
| * @param {Number} maximumSide biggest side allowed | |
| * @return {Object.x} Limited dimensions by X | |
| * @return {Object.y} Limited dimensions by Y | |
| */ | |
| limitDimsByArea: function(ar, maximumArea) { | |
| var roughWidth = Math.sqrt(maximumArea * ar), | |
| perfLimitSizeY = Math.floor(maximumArea / roughWidth); | |
| return { x: Math.floor(roughWidth), y: perfLimitSizeY }; | |
| }, | |
| capValue: function(min, value, max) { | |
| return Math.max(min, Math.min(value, max)); | |
| } | |
| }; | |
| })(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 js object to another | |
| * Does not clone or extend fabric.Object subclasses. | |
| * @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 = []; | |
| for (var i = 0, len = source.length; i < len; i++) { | |
| destination[i] = extend({ }, source[i], deep); | |
| } | |
| } | |
| else if (source && typeof source === 'object') { | |
| for (var property in source) { | |
| if (source.hasOwnProperty(property)) { | |
| destination[property] = extend({ }, 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 parentMethod = null, | |
| _this = this; | |
| // climb prototype chain to find method not equal to callee's method | |
| while (_this.constructor.superclass) { | |
| var superClassMethod = _this.constructor.superclass.prototype[methodName]; | |
| if (_this[methodName] !== superClassMethod) { | |
| parentMethod = superClassMethod; | |
| break; | |
| } | |
| // eslint-disable-next-line | |
| _this = _this.constructor.superclass.prototype; | |
| } | |
| if (!parentMethod) { | |
| return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); | |
| } | |
| return (arguments.length > 1) | |
| ? parentMethod.apply(this, slice.call(arguments, 1)) | |
| : parentMethod.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, options) { | |
| // since ie10 or ie9 can use addEventListener but they do not support options, i need to check | |
| element && element.addEventListener(eventName, handler, shouldUseAttachEventDetachEvent ? false : options); | |
| }; | |
| /** @ignore */ | |
| removeListener = function (element, eventName, handler, options) { | |
| element && element.removeEventListener(eventName, handler, shouldUseAttachEventDetachEvent ? false : options); | |
| }; | |
| } | |
| else if (shouldUseAttachEventDetachEvent) { | |
| /** @ignore */ | |
| addListener = function (element, eventName, handler) { | |
| if (!element) { | |
| return; | |
| } | |
| 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) { | |
| if (!element) { | |
| return; | |
| } | |
| 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) { | |
| if (!element) { | |
| return; | |
| } | |
| 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) { | |
| if (!element) { | |
| return; | |
| } | |
| 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() { | |
| function noop() { | |
| return false; | |
| } | |
| /** | |
| * 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 || noop, | |
| abort = options.abort || noop, | |
| onComplete = options.onComplete || noop, | |
| 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) { | |
| if (abort()) { | |
| onComplete(endValue, 1, 1); | |
| return; | |
| } | |
| time = ticktime || +new Date(); | |
| var currentTime = time > finish ? duration : (time - start), | |
| timePerc = currentTime / duration, | |
| current = easing(currentTime, startValue, byValue, duration), | |
| valuePerc = Math.abs((current - startValue) / byValue); | |
| onChange(current, valuePerc, timePerc); | |
| 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() { | |
| // Calculate an in-between color. Returns a "rgba()" string. | |
| // Credit: Edwin Martin <edwin@bitstorm.org> | |
| // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js | |
| function calculateColor(begin, end, pos) { | |
| var color = 'rgba(' | |
| + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' | |
| + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' | |
| + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); | |
| color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); | |
| color += ')'; | |
| return color; | |
| } | |
| /** | |
| * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. | |
| * @memberOf fabric.util | |
| * @param {String} fromColor The starting color in hex or rgb(a) format. | |
| * @param {String} toColor The starting color in hex or rgb(a) format. | |
| * @param {Number} [duration] Duration of change (in ms). | |
| * @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 {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used. | |
| */ | |
| function animateColor(fromColor, toColor, duration, options) { | |
| var startColor = new fabric.Color(fromColor).getSource(), | |
| endColor = new fabric.Color(toColor).getSource(); | |
| options = options || {}; | |
| fabric.util.animate(fabric.util.object.extend(options, { | |
| duration: duration || 500, | |
| startValue: startColor, | |
| endValue: endColor, | |
| byValue: endColor, | |
| easing: function (currentTime, startValue, byValue, duration) { | |
| var posValue = options.colorEasing | |
| ? options.colorEasing(currentTime, duration) | |
| : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); | |
| return calculateColor(startValue, byValue, posValue); | |
| } | |
| })); | |
| } | |
| fabric.util.animateColor = animateColor; | |
| })(); | |
| (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, | |
| 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|clipPath|mask)$/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', | |
| opacity: 'opacity' | |
| }, | |
| 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') { | |
| if (value === 'none') { | |
| value = null; | |
| } | |
| else { | |
| 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 === 'opacity') { | |
| value = parseFloat(value); | |
| if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { | |
| value *= parentAttributes.opacity; | |
| } | |
| } | |
| 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 cos = Math.cos(args[0]), sin = Math.sin(args[0]), | |
| x = 0, y = 0; | |
| if (args.length === 3) { | |
| x = args[1]; | |
| y = args[2]; | |
| } | |
| matrix[0] = cos; | |
| matrix[1] = sin; | |
| matrix[2] = -sin; | |
| matrix[3] = cos; | |
| matrix[4] = x - (cos * x - sin * y); | |
| matrix[5] = y - (sin * x + cos * y); | |
| } | |
| function scaleMatrix(matrix, args) { | |
| var multiplierX = args[0], | |
| multiplierY = (args.length === 2) ? args[1] : args[0]; | |
| matrix[0] = multiplierX; | |
| matrix[3] = multiplierY; | |
| } | |
| function skewMatrix(matrix, args, pos) { | |
| matrix[pos] = 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': | |
| skewMatrix(matrix, args, 2); | |
| break; | |
| case 'skewY': | |
| skewMatrix(matrix, args, 1); | |
| 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 = pair[0].trim().toLowerCase(); | |
| value = 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 = prop.toLowerCase(); | |
| value = 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; | |
| } | |
| 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; | |
| } | |
| /** | |
| * 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. | |
| * @param {Object} [parsingOptions] options for parsing document | |
| * @param {String} [parsingOptions.crossOrigin] crossOrigin settings | |
| */ | |
| fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { | |
| if (!doc) { | |
| return; | |
| } | |
| parseUseDirectives(doc); | |
| var svgUid = fabric.Object.__uid++, | |
| options = applyViewboxTransform(doc), | |
| descendants = fabric.util.toArray(doc.getElementsByTagName('*')); | |
| options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; | |
| 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) { | |
| if (callback) { | |
| callback(instances, options); | |
| } | |
| }, clone(options), reviver, parsingOptions); | |
| }; | |
| 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) { // eslint-disable-line | |
| 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))); | |
| var normalizedAttr, normalizedValue, normalizedStyle = {}; | |
| for (var attr in ownAttributes) { | |
| normalizedAttr = normalizeAttr(attr); | |
| normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); | |
| normalizedStyle[normalizedAttr] = normalizedValue; | |
| } | |
| if (normalizedStyle && normalizedStyle.font) { | |
| fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); | |
| } | |
| var mergedAttrs = extend(parentAttributes, normalizedStyle); | |
| return reAllowedParents.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); | |
| }, | |
| /** | |
| * 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, parsingOptions) { | |
| new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).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 = pair[0], | |
| value = pair[1]; | |
| 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. | |
| * @param {Object} [options] Object containing options for parsing | |
| * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources | |
| */ | |
| loadSVGFromURL: function(url, callback, reviver, options) { | |
| url = url.replace(/^\n\s*/, '').trim(); | |
| 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) { | |
| callback && callback(results, _options); | |
| }, reviver, options); | |
| } | |
| }, | |
| /** | |
| * 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. | |
| * @param {Object} [options] Object containing options for parsing | |
| * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources | |
| */ | |
| loadSVGFromString: function(string, callback, reviver, options) { | |
| 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, options); | |
| } | |
| }); | |
| })(typeof exports !== 'undefined' ? exports : this); | |
| fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions) { | |
| this.elements = elements; | |
| this.callback = callback; | |
| this.options = options; | |
| this.reviver = reviver; | |
| this.svgUid = (options && options.svgUid) || 0; | |
| this.parsingOptions = parsingOptions; | |
| }; | |
| 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 representation 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 representation 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 representation 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 representation 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 representation 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(); | |
| }, | |
| /** | |
| * Returns color representation in HEXA format | |
| * @return {String} ex: FF5555CC | |
| */ | |
| toHexa: function() { | |
| var source = this.getSource(), a; | |
| a = source[3] * 255; | |
| a = a.toString(16); | |
| a = (a.length === 1) ? ('0' + a) : a; | |
| return this.toHex() + a.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_ */ | |
| var clone = fabric.util.object.clone; | |
| /** | |
| * 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(colorStops) { | |
| for (var position in colorStops) { | |
| var color = new fabric.Color(colorStops[position]); | |
| this.colorStops.push({ | |
| offset: parseFloat(position), | |
| color: color.toRgb(), | |
| opacity: color.getAlpha() | |
| }); | |
| } | |
| return this; | |
| }, | |
| /** | |
| * Returns object representation of a gradient | |
| * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output | |
| * @return {Object} | |
| */ | |
| toObject: function(propertiesToInclude) { | |
| var object = { | |
| type: this.type, | |
| coords: this.coords, | |
| colorStops: this.colorStops, | |
| offsetX: this.offsetX, | |
| offsetY: this.offsetY, | |
| gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform | |
| }; | |
| fabric.util.populateWithProperties(this, object, propertiesToInclude); | |
| return object; | |
| }, | |
| /* _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 = clone(this.coords, true), | |
| markup, commonAttributes, colorStops = clone(this.colorStops, true), | |
| needsSwap = coords.r1 > coords.r2; | |
| // colorStops must be sorted ascending | |
| 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') { | |
| 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') { | |
| // svg radial gradient has just 1 radius. the biggest. | |
| markup = [ | |
| '<radialGradient ', | |
| commonAttributes, | |
| ' cx="', needsSwap ? coords.x1 : coords.x2, | |
| '" cy="', needsSwap ? coords.y1 : coords.y2, | |
| '" r="', needsSwap ? coords.r1 : coords.r2, | |
| '" fx="', needsSwap ? coords.x2 : coords.x1, | |
| '" fy="', needsSwap ? coords.y2 : coords.y1, | |
| '">\n' | |
| ]; | |
| } | |
| if (this.type === 'radial') { | |
| if (needsSwap) { | |
| // svg goes from internal to external radius. if radius are inverted, swap color stops. | |
| colorStops = colorStops.concat(); | |
| colorStops.reverse(); | |
| for (var i = 0; i < colorStops.length; i++) { | |
| colorStops[i].offset = 1 - colorStops[i].offset; | |
| } | |
| } | |
| var minRadius = Math.min(coords.r1, coords.r2); | |
| if (minRadius > 0) { | |
| // i have to shift all colorStops and add new one in 0. | |
| var maxRadius = Math.max(coords.r1, coords.r2), | |
| percentageShift = minRadius / maxRadius; | |
| for (var i = 0; i < colorStops.length; i++) { | |
| colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); | |
| } | |
| } | |
| } | |
| for (var i = 0; i < colorStops.length; i++) { | |
| var colorStop = colorStops[i]; | |
| markup.push( | |
| '<stop ', | |
| 'offset="', (colorStop.offset * 100) + '%', | |
| '" style="stop-color:', colorStop.color, | |
| (colorStop.opacity !== null ? ';stop-opacity: ' + colorStop.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(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; | |
| } | |
| })(); | |
| (function() { | |
| 'use strict'; | |
| var toFixed = fabric.util.toFixed; | |
| /** | |
| * 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 | |
| * @param {Function} [callback] function to invoke after callback init. | |
| * @return {fabric.Pattern} thisArg | |
| */ | |
| initialize: function(options, callback) { | |
| options || (options = { }); | |
| this.id = fabric.Object.__uid++; | |
| this.setOptions(options); | |
| if (!options.source || (options.source && typeof options.source !== 'string')) { | |
| callback && callback(this); | |
| return; | |
| } | |
| // function string | |
| if (typeof fabric.util.getFunctionBody(options.source) !== 'undefined') { | |
| this.source = new Function(fabric.util.getFunctionBody(options.source)); | |
| callback && callback(this); | |
| } | |
| else { | |
| // img src string | |
| var _this = this; | |
| this.source = fabric.util.createImage(); | |
| fabric.util.loadImage(options.source, function(img) { | |
| _this.source = img; | |
| callback && callback(_this); | |
| }); | |
| } | |
| }, | |
| /** | |
| * Returns object representation of a pattern | |
| * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output | |
| * @return {Object} Object representation of a pattern instance | |
| */ | |
| toObject: function(propertiesToInclude) { | |
| var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, | |
| source, object; | |
| // 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(); | |
| } | |
| object = { | |
| type: 'pattern', | |
| source: source, | |
| repeat: this.repeat, | |
| offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), | |
| offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), | |
| }; | |
| fabric.util.populateWithProperties(this, object, propertiesToInclude); | |
| return object; | |
| }, | |
| /* _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.width, | |
| patternHeight = patternSource.height / object.height, | |
| patternOffsetX = this.offsetX / object.width, | |
| patternOffsetY = this.offsetY / object.height, | |
| 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_ */ | |
| setOptions: function(options) { | |
| for (var prop in options) { | |
| this[prop] = options[prop]; | |
| } | |
| }, | |
| /** | |
| * 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, | |
| transformPoint = fabric.util.transformPoint, | |
| invertTransform = fabric.util.invertTransform, | |
| 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(fabric.CommonMethods, /** @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: false, | |
| /** | |
| * 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: fabric.iMatrix.concat(), | |
| /** | |
| * 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, | |
| /** | |
| * Describe canvas element extension over design | |
| * properties are tl,tr,bl,br. | |
| * if canvas is not zoomed/panned those points are the four corner of canvas | |
| * if canvas is viewportTransformed you those points indicate the extension | |
| * of canvas element in plain untrasformed coordinates | |
| * The coordinates get updated with @method calcViewportBoundaries. | |
| * @memberOf fabric.StaticCanvas.prototype | |
| */ | |
| vptCoords: { }, | |
| /** | |
| * Based on vptCoords and object.aCoords, skip rendering of objects that | |
| * are not included in current viewport. | |
| * May greatly help in applications with crowded canvas and use of zoom/pan | |
| * If One of the corner of the bounding box of the object is on the canvas | |
| * the objects get rendered. | |
| * @memberOf fabric.StaticCanvas.prototype | |
| */ | |
| skipOffscreen: false, | |
| /** | |
| * @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) { | |
| this[property] = color; | |
| this._initGradient(color, property); | |
| this._initPattern(color, property, 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) { | |
| this._setOptions(options); | |
| 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 this.viewportTransform[0]; | |
| }, | |
| /** | |
| * 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, ignoreVpt = false, skipAbsolute = true; | |
| this.viewportTransform = vpt; | |
| for (var i = 0, len = this._objects.length; i < len; i++) { | |
| object = this._objects[i]; | |
| object.group || object.setCoords(ignoreVpt, skipAbsolute); | |
| } | |
| if (activeGroup) { | |
| activeGroup.setCoords(ignoreVpt, skipAbsolute); | |
| } | |
| this.calcViewportBoundaries(); | |
| 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 = transformPoint(point, invertTransform(this.viewportTransform)); | |
| vpt[0] = value; | |
| vpt[3] = value; | |
| var after = 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('mouse:up', this._mouseUpITextHandler); | |
| this._iTextInstances = null; | |
| this._hasITextHandlers = false; | |
| } | |
| this.clearContext(this.contextContainer); | |
| this.fire('canvas:cleared'); | |
| this.renderAll(); | |
| return this; | |
| }, | |
| /** | |
| * Renders the canvas | |
| * @return {fabric.Canvas} instance | |
| * @chainable | |
| */ | |
| renderAll: function () { | |
| var canvasToDrawOn = this.contextContainer; | |
| this.renderCanvas(canvasToDrawOn, this._objects); | |
| return this; | |
| }, | |
| /** | |
| * Calculate the position of the 4 corner of canvas with current viewportTransform. | |
| * helps to determinate when an object is in the current rendering viewport using | |
| * object absolute coordinates ( aCoords ) | |
| * @return {Object} points.tl | |
| * @chainable | |
| */ | |
| calcViewportBoundaries: function() { | |
| var points = { }, width = this.getWidth(), height = this.getHeight(), | |
| iVpt = invertTransform(this.viewportTransform); | |
| points.tl = transformPoint({ x: 0, y: 0 }, iVpt); | |
| points.br = transformPoint({ x: width, y: height }, iVpt); | |
| points.tr = new fabric.Point(points.br.x, points.tl.y); | |
| points.bl = new fabric.Point(points.tl.x, points.br.y); | |
| this.vptCoords = points; | |
| return points; | |
| }, | |
| /** | |
| * Renders background, objects, overlay and controls. | |
| * @param {CanvasRenderingContext2D} ctx | |
| * @param {Array} objects to render | |
| * @return {fabric.Canvas} instance | |
| * @chainable | |
| */ | |
| renderCanvas: function(ctx, objects) { | |
| this.calcViewportBoundaries(); | |
| 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, this) | |
| : 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 = invertTransform(this.viewportTransform); | |
| return 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 = { }, bgImage = this.backgroundImage, overlay = this.overlayImage; | |
| if (this.backgroundColor) { | |
| data.background = this.backgroundColor.toObject | |
| ? this.backgroundColor.toObject(propertiesToInclude) | |
| : this.backgroundColor; | |
| } | |
| if (this.overlayColor) { | |
| data.overlay = this.overlayColor.toObject | |
| ? this.overlayColor.toObject(propertiesToInclude) | |
| : this.overlayColor; | |
| } | |
| if (bgImage && !bgImage.excludeFromExport) { | |
| data.backgroundImage = this._toObject(bgImage, methodName, propertiesToInclude); | |
| } | |
| if (overlay && !overlay.excludeFromExport) { | |
| data.overlayImage = this._toObject(overlay, 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, '" ', | |
| viewBox, | |
| 'xml:space="preserve">\n', | |
| '<desc>Created with Fabric.js ', fabric.version, '</desc>\n', | |
| '<defs>\n', | |
| this.createSVGFontFacesMarkup(), | |
| this.createSVGRefElementsMarkup(), | |
| '</defs>\n' | |
| ); | |
| }, | |
| /** | |
| * Creates markup containing SVG referenced elements like patterns, gradients etc. | |
| * @return {String} | |
| */ | |
| createSVGRefElementsMarkup: function() { | |
| var _this = this, | |
| markup = ['backgroundColor', 'overlayColor'].map(function(prop) { | |
| var fill = _this[prop]; | |
| if (fill && fill.toLive) { | |
| return fill.toSVG(_this, false); | |
| } | |
| }); | |
| return markup.join(''); | |
| }, | |
| /** | |
| * 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() { | |
| var markup = '', fontList = { }, obj, fontFamily, | |
| style, row, rowIndex, _char, charIndex, | |
| fontPaths = fabric.fontPaths, objects = this.getObjects(); | |
| 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; | |
| }, | |
| /** | |
| * @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) { | |
| var filler = this[property]; | |
| if (!filler) { | |
| return; | |
| } | |
| if (filler.toLive) { | |
| var repeat = filler.repeat; | |
| markup.push( | |
| '<rect transform="translate(', this.width / 2, ',', this.height / 2, ')"', | |
| ' x="', filler.offsetX - this.width / 2, '" y="', filler.offsetY - this.height / 2, '" ', | |
| 'width="', | |
| (repeat === 'repeat-y' || repeat === 'no-repeat' | |
| ? filler.source.width | |
| : this.width), | |
| '" height="', | |
| (repeat === 'repeat-x' || repeat === 'no-repeat' | |
| ? filler.source.height | |
| : this.height), | |
| '" fill="url(#SVGID_' + filler.id + ')"', | |
| '></rect>\n' | |
| ); | |
| } | |
| else { | |
| 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, objsMoved = 0; | |
| if (object === activeGroup) { | |
| objs = activeGroup._objects; | |
| for (i = 0; i < objs.length; i++) { | |
| obj = objs[i]; | |
| idx = this._objects.indexOf(obj); | |
| if (idx > 0 + objsMoved) { | |
| newIdx = idx - 1; | |
| removeFromArray(this._objects, obj); | |
| this._objects.splice(newIdx, 0, obj); | |
| } | |
| objsMoved++; | |
| } | |
| } | |
| 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, objsMoved = 0; | |
| 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 - objsMoved) { | |
| newIdx = idx + 1; | |
| removeFromArray(this._objects, obj); | |
| this._objects.splice(newIdx, 0, obj); | |
| } | |
| objsMoved++; | |
| } | |
| } | |
| 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, | |
| zoom = this.canvas.getZoom(); | |
| ctx.shadowColor = this.shadow.color; | |
| ctx.shadowBlur = this.shadow.blur * zoom; | |
| ctx.shadowOffsetX = this.shadow.offsetX * zoom; | |
| ctx.shadowOffsetY = this.shadow.offsetY * zoom; | |
| }, | |
| /** | |
| * 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, | |
| /** | |
| * Indicates if the canvas can fire middle click events | |
| * @type Boolean | |
| * @since 1.7.8 | |
| * @default | |
| */ | |
| fireMiddleClick: 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), | |
| vptPointer = this.restorePointerVpt(pointer); | |
| return fabric.util.transformPoint(vptPointer, invertedM); | |
| }, | |
| /** | |
| * 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, zoom = this.getZoom(), | |
| padding = target.padding / zoom; | |
| 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) > padding) { | |
| if (localMouse.x < 0) { | |
| localMouse.x += padding; | |
| } | |
| else { | |
| localMouse.x -= padding; | |
| } | |
| } | |
| else { // mouse is within the padding, set to 0 | |
| localMouse.x = 0; | |
| } | |
| if (abs(localMouse.y) > padding) { | |
| if (localMouse.y < 0) { | |
| localMouse.y += padding; | |
| } | |
| else { | |
| localMouse.y -= 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; | |
| 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; | |
| } | |
| } | |
| // normalize angle to positive value | |
| if (angle < 0) { | |
| angle = 360 + angle; | |
| } | |
| angle %= 360; | |
| if (t.target.angle === angle) { | |
| hasRoated = false; | |
| } | |
| else { | |
| 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 | |
| * the skipGroup parameter is for internal use, is needed for shift+click action | |
| * @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. | |
| this.targets = []; | |
| if (activeGroup && !skipGroup && activeGroup === this._searchPossibleTargets([activeGroup], pointer)) { | |
| 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 && activeObject === this._searchPossibleTargets([activeObject], pointer)) { | |
| if (!this.preserveObjectStacking) { | |
| this._fireOverOutEvents(activeObject, e); | |
| return activeObject; | |
| } | |
| else { | |
| activeTarget = activeObject; | |
| } | |
| } | |
| 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) { | |
| var overOpt, outOpt, hoveredTarget = this._hoveredTarget; | |
| if (hoveredTarget !== target) { | |
| overOpt = { e: e, target: target, previousTarget: this._hoveredTarget }; | |
| outOpt = { e: e, target: this._hoveredTarget, nextTarget: target }; | |
| this._hoveredTarget = target; | |
| } | |
| if (target) { | |
| if (hoveredTarget !== target) { | |
| if (hoveredTarget) { | |
| this.fire('mouse:out', outOpt); | |
| hoveredTarget.fire('mouseout', outOpt); | |
| } | |
| this.fire('mouse:over', overOpt); | |
| target.fire('mouseover', overOpt); | |
| } | |
| } | |
| else if (hoveredTarget) { | |
| this.fire('mouse:out', outOpt); | |
| hoveredTarget.fire('mouseout', outOpt); | |
| } | |
| }, | |
| /** | |
| * @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. | |
| * Can return coordinates with or without viewportTransform. | |
| * ignoreZoom false gives back coordinates that represent | |
| * the point clicked on canvas element. | |
| * ignoreZoom true gives back coordinates after being processed | |
| * by the viewportTransform ( sort of coordinates of what is displayed | |
| * on the canvas where you are clicking. | |
| * To interact with your shapes top and left you want to use ignoreZoom true | |
| * most of the time, while ignoreZoom false will give you coordinates | |
| * compatible with the object.oCoords system. | |
| * of the time. | |
| * @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*/, ''); | |
| if (this.upperCanvasEl) { | |
| this.upperCanvasEl.className = ''; | |
| } | |
| else { | |
| 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, | |
| 'touch-action': 'none' | |
| }); | |
| 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) { | |
| var obj = this._activeObject; | |
| if (obj) { | |
| obj.set('active', false); | |
| if (object !== obj && obj.onDeselect && typeof obj.onDeselect === 'function') { | |
| obj.onDeselect(); | |
| } | |
| } | |
| 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) { | |
| var currentActiveObject = this.getActiveObject(); | |
| if (currentActiveObject && currentActiveObject !== object) { | |
| currentActiveObject.fire('deselected', { e: e }); | |
| } | |
| this._setActiveObject(object); | |
| this.fire('object:selected', { target: object, e: e }); | |
| object.fire('selected', { e: e }); | |
| this.renderAll(); | |
| 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'); | |
| } | |
| if (this._hoveredTarget === obj) { | |
| this._hoveredTarget = null; | |
| } | |
| this.callSuper('_onObjectRemoved', obj); | |
| }, | |
| /** | |
| * @private | |
| */ | |
| _discardActiveObject: function() { | |
| var obj = this._activeObject; | |
| if (obj) { | |
| obj.set('active', false); | |
| if (obj.onDeselect && typeof obj.onDeselect === 'function') { | |
| obj.onDeselect(); | |
| } | |
| } | |
| this._activeObject = null; | |
| }, | |
| /** | |
| * Discards currently active object and fire events. If the function is called by fabric | |
| * as a consequence of a mouse event, the event is passed as a parmater and | |
| * sent to the fire function for the custom events. When used as a method the | |
| * e param does not have any application. | |
| * @param {event} e | |
| * @return {fabric.Canvas} thisArg | |
| * @chainable | |
| */ | |
| discardActiveObject: function (e) { | |
| var activeObject = this._activeObject; | |
| if (activeObject) { | |
| this.fire('before:selection:cleared', { target: activeObject, e: e }); | |
| this._discardActiveObject(); | |
| this.fire('selection:cleared', { e: e }); | |
| 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. If the function is called by fabric | |
| * as a consequence of a mouse event, the event is passed as a parmater and | |
| * sent to the fire function for the custom events. When used as a method the | |
| * e param does not have any application. | |
| * @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 If the function is called by fabric | |
| * as a consequence of a mouse event, the event is passed as a parmater and | |
| * sent to the fire function for the custom events. When used as a method the | |
| * e param does not have any application. | |
| * @return {fabric.Canvas} thisArg | |
| * @chainable | |
| */ | |
| discardActiveGroup: function (e) { | |
| var g = this.getActiveGroup(); | |
| if (g) { | |
| 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, | |
| obj; | |
| for ( ; i < len; i++) { | |
| obj = allObjects[i]; | |
| obj && obj.set('active', false); | |
| } | |
| this._discardActiveGroup(); | |
| this._discardActiveObject(); | |
| return this; | |
| }, | |
| /** | |
| * Deactivates all objects and dispatches appropriate events If the function is called by fabric | |
| * as a consequence of a mouse event, the event is passed as a parmater and | |
| * sent to the fire function for the custom events. When used as a method the | |
| * e param does not have any application. | |
| * @return {fabric.Canvas} thisArg | |
| * @chainable | |
| */ | |
| deactivateAllWithDispatch: function (e) { | |
| var allObjects = this.getObjects(), | |
| i = 0, | |
| len = allObjects.length, | |
| obj; | |
| for ( ; i < len; i++) { | |
| obj = allObjects[i]; | |
| obj && obj.set('active', false); | |
| } | |
| this.discardActiveGroup(e); | |
| this.discardActiveObject(e); | |
| return this; | |
| }, | |
| /** | |
| * Clears a canvas element and removes all event listeners | |
| * @return {fabric.Canvas} thisArg | |
| * @chainable | |
| */ | |
| dispose: function () { | |
| fabric.StaticCanvas.prototype.dispose.call(this); | |
| 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) { | |
| if (instance.group && instance.group === this.getActiveGroup()) { | |
| //Copy all the positionally relevant properties across now | |
| var originalValues = {}, | |
| layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; | |
| 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, | |
| RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1; | |
| function checkClick(e, value) { | |
| return 'which' in e ? e.which === value : e.button === value - 1; | |
| } | |
| 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 () { | |
| // in case we initialized the class twice. This should not happen normally | |
| // but in some kind of applications where the canvas element may be changed | |
| // this is a workaround to having double listeners. | |
| this.removeListeners(); | |
| 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, { passive: false }); | |
| addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove, { passive: false }); | |
| 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() { | |
| if (this.eventsBinded) { | |
| // for any reason we pass here twice we do not want to bind events twice. | |
| return; | |
| } | |
| 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); | |
| this.eventsBinded = true; | |
| }, | |
| /** | |
| * 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 }); | |
| if (this._iTextInstances) { | |
| this._iTextInstances.forEach(function(obj) { | |
| if (obj.isEditing) { | |
| obj.hiddenTextarea.focus(); | |
| } | |
| }); | |
| } | |
| }, | |
| /** | |
| * @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, { passive: false }); | |
| addListener(fabric.document, 'touchmove', this._onMouseMove, { passive: false }); | |
| 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, { passive: false }); | |
| 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(); | |
| if (activeObject && activeObject.isEditing && target === activeObject) { | |
| // if we mouse up/down over a editing textbox a cursor change, | |
| // there is no need to re render | |
| return false; | |
| } | |
| 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; | |
| // if right/middle click just fire events and return | |
| // target undefined will make the _handleEvent search the target | |
| if (checkClick(e, RIGHT_CLICK)) { | |
| if (this.fireRightClick) { | |
| this._handleEvent(e, 'up', target, RIGHT_CLICK); | |
| } | |
| return; | |
| } | |
| if (checkClick(e, MIDDLE_CLICK)) { | |
| if (this.fireMiddleClick) { | |
| this._handleEvent(e, 'up', target, MIDDLE_CLICK); | |
| } | |
| return; | |
| } | |
| if (this.isDrawingMode && this._isCurrentlyDrawing) { | |
| this._onMouseUpInDrawingMode(e); | |
| return; | |
| } | |
| var searchTarget = true, transform = this._currentTransform, | |
| groupSelector = this._groupSelector, | |
| isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); | |
| if (transform) { | |
| this._finalizeCurrentTransform(e); | |
| 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._setCursorFromEvent(e, target); | |
| this._handleEvent(e, 'up', target ? target : null, LEFT_CLICK, isClick); | |
| target && (target.__corner = 0); | |
| shouldRender && this.renderAll(); | |
| }, | |
| /** | |
| * @private | |
| * 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 | |
| * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right | |
| * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move. | |
| */ | |
| _handleEvent: function(e, eventType, targetObj, button, isClick) { | |
| var target = typeof targetObj === 'undefined' ? this.findTarget(e) : targetObj, | |
| targets = this.targets || [], | |
| options = { | |
| e: e, | |
| target: target, | |
| subTargets: targets, | |
| button: button || LEFT_CLICK, | |
| isClick: isClick || false | |
| }; | |
| 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 | |
| * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event | |
| */ | |
| _finalizeCurrentTransform: function(e) { | |
| 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, e: e }); | |
| target.fire('modified', { e: e }); | |
| } | |
| }, | |
| /** | |
| * @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 clicked 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); | |
| // if right click just fire events | |
| if (checkClick(e, RIGHT_CLICK)) { | |
| if (this.fireRightClick) { | |
| this._handleEvent(e, 'down', target ? target : null, RIGHT_CLICK); | |
| } | |
| return; | |
| } | |
| if (checkClick(e, MIDDLE_CLICK)) { | |
| if (this.fireMiddleClick) { | |
| this._handleEvent(e, 'down', target ? target : null, MIDDLE_CLICK); | |
| } | |
| 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 | |
| var pointer = this.getPointer(e, true); | |
| this._previousPointer = pointer; | |
| var shouldRender = this._shouldRender(target, pointer), | |
| shouldGroup = this._shouldGroup(e, target); | |
| if (this._shouldClearSelection(e, target)) { | |
| this.deactivateAllWithDispatch(e); | |
| } | |
| else if (shouldGroup) { | |
| this._handleGrouping(e, target); | |
| target = this.getActiveGroup(); | |
| } | |
| if (this.selection && (!target || (!target.selectable && !target.isEditing))) { | |
| this._groupSelector = { | |
| ex: pointer.x, | |
| ey: pointer.y, | |
| top: 0, | |
| left: 0 | |
| }; | |
| } | |
| if (target) { | |
| if (target.selectable && (target.__corner || !shouldGroup)) { | |
| this._beforeTransform(e, target); | |
| this._setupCurrentTransform(e, target); | |
| } | |
| var activeObject = this.getActiveObject(); | |
| if (target !== this.getActiveGroup() && target !== activeObject) { | |
| this.deactivateAll(); | |
| if (target.selectable) { | |
| activeObject && activeObject.fire('deselected', { e: e }); | |
| 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 | |
| * @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._handleEvent(e, 'wheel'); | |
| }, | |
| /** | |
| * @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; | |
| transform.shiftKey = e.shiftKey; | |
| transform.altKey = e[this.centeredKey]; | |
| 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 = 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, | |
| 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), e); | |
| 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, e); | |
| 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, e: e }); | |
| 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); | |
| var _this = this, | |
| renderOnAddRemove = this.renderOnAddRemove; | |
| this.renderOnAddRemove = false; | |
| this._enlivenObjects(serialized.objects, function (enlivenedObjects) { | |
| _this.clear(); | |
| _this._setBgOverlay(serialized, function () { | |
| 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; | |
| // 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 | |
| _this._setOptions(serialized); | |
| _this.renderAll(); | |
| 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 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) { | |
| 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); | |
| }, | |
| /** | |
| * @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; | |
| callback && callback(); | |
| return; | |
| } | |
| if (property === 'backgroundImage' || property === 'overlayImage') { | |
| fabric.util.enlivenObjects([value], function(enlivedObject){ | |
| _this[property] = enlivedObject[0]; | |
| 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) { | |
| if (!objects || objects.length === 0) { | |
| callback && callback([]); | |
| return; | |
| } | |
| fabric.util.enlivenObjects(objects, function(enlivenedObjects) { | |
| callback && callback(enlivenedObjects); | |
| }, 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, | |
| clone = fabric.util.object.clone, | |
| toFixed = fabric.util.toFixed, | |
| capitalize = fabric.util.string.capitalize, | |
| degreesToRadians = fabric.util.degreesToRadians, | |
| supportsLineDash = fabric.StaticCanvas.supports('setLineDash'), | |
| objectCaching = !fabric.isLikelyNode, | |
| ALIASING_LIMIT = 2; | |
| 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 | |
| * @fires mousewheel | |
| */ | |
| fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @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. | |
| * @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, | |
| /** | |
| * When `true`, object is cached on an additional canvas. | |
| * default to true | |
| * since 1.7.0 | |
| * @type Boolean | |
| * @default true | |
| */ | |
| objectCaching: objectCaching, | |
| /** | |
| * When `true`, object properties are checked for cache invalidation. In some particular | |
| * situation you may want this to be disabled ( spray brush, very big pathgroups, groups) | |
| * or if your application does not allow you to modify properties for groups child you want | |
| * to disable it for groups. | |
| * default to false | |
| * since 1.7.0 | |
| * @type Boolean | |
| * @default false | |
| */ | |
| statefullCache: false, | |
| /** | |
| * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled | |
| * too much and will be redrawn with correct details at the end of scaling. | |
| * this setting is performance and application dependant. | |
| * default to true | |
| * since 1.7.0 | |
| * @type Boolean | |
| * @default true | |
| */ | |
| noScaleCache: true, | |
| /** | |
| * When set to `true`, object's cache will be rerendered next render call. | |
| * since 1.7.0 | |
| * @type Boolean | |
| * @default true | |
| */ | |
| dirty: true, | |
| /** | |
| * 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 globalCompositeOperation shadow clipTo visible backgroundColor ' + | |
| 'skewX skewY fillRule' | |
| ).split(' '), | |
| /** | |
| * List of properties to consider when checking if cache needs refresh | |
| * @type Array | |
| */ | |
| cacheProperties: ( | |
| 'fill stroke strokeWidth strokeDashArray width height' + | |
| ' strokeLineCap strokeLineJoin strokeMiterLimit backgroundColor' | |
| ).split(' '), | |
| /** | |
| * Constructor | |
| * @param {Object} [options] Options object | |
| */ | |
| initialize: function(options) { | |
| options = options || { }; | |
| if (options) { | |
| this.setOptions(options); | |
| } | |
| }, | |
| /** | |
| * Create a the canvas used to keep the cached copy of the object | |
| * @private | |
| */ | |
| _createCacheCanvas: function() { | |
| this._cacheProperties = {}; | |
| this._cacheCanvas = fabric.document.createElement('canvas'); | |
| this._cacheContext = this._cacheCanvas.getContext('2d'); | |
| this._updateCacheCanvas(); | |
| }, | |
| /** | |
| * Limit the cache dimensions so that X * Y do not cross fabric.perfLimitSizeTotal | |
| * and each side do not cross fabric.cacheSideLimit | |
| * those numbers are configurable so that you can get as much detail as you want | |
| * making bargain with performances. | |
| * @param {Object} dims | |
| * @param {Object} dims.width width of canvas | |
| * @param {Object} dims.height height of canvas | |
| * @param {Object} dims.zoomX zoomX zoom value to unscale the canvas before drawing cache | |
| * @param {Object} dims.zoomY zoomY zoom value to unscale the canvas before drawing cache | |
| * @return {Object}.width width of canvas | |
| * @return {Object}.height height of canvas | |
| * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache | |
| * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache | |
| */ | |
| _limitCacheSize: function(dims) { | |
| var perfLimitSizeTotal = fabric.perfLimitSizeTotal, | |
| maximumSide = fabric.cacheSideLimit, | |
| width = dims.width, height = dims.height, | |
| ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal, maximumSide), | |
| capValue = fabric.util.capValue, max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit, | |
| x = capValue(min, limitedDims.x, max), | |
| y = capValue(min, limitedDims.y, max); | |
| if (width > x) { | |
| dims.zoomX /= width / x; | |
| dims.width = x; | |
| } | |
| else if (width < min) { | |
| dims.width = min; | |
| } | |
| if (height > y) { | |
| dims.zoomY /= height / y; | |
| dims.height = y; | |
| } | |
| else if (height < min) { | |
| dims.height = min; | |
| } | |
| return dims; | |
| }, | |
| /** | |
| * Return the dimension and the zoom level needed to create a cache canvas | |
| * big enough to host the object to be cached. | |
| * @private | |
| * @return {Object}.width width of canvas | |
| * @return {Object}.height height of canvas | |
| * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache | |
| * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache | |
| */ | |
| _getCacheCanvasDimensions: function() { | |
| var zoom = this.canvas && this.canvas.getZoom() || 1, | |
| objectScale = this.getObjectScaling(), | |
| dim = this._getNonTransformedDimensions(), | |
| retina = this.canvas && this.canvas._isRetinaScaling() ? fabric.devicePixelRatio : 1, | |
| zoomX = objectScale.scaleX * zoom * retina, | |
| zoomY = objectScale.scaleY * zoom * retina, | |
| width = dim.x * zoomX, | |
| height = dim.y * zoomY; | |
| return { | |
| width: width + ALIASING_LIMIT, | |
| height: height + ALIASING_LIMIT, | |
| zoomX: zoomX, | |
| zoomY: zoomY | |
| }; | |
| }, | |
| /** | |
| * Update width and height of the canvas for cache | |
| * returns true or false if canvas needed resize. | |
| * @private | |
| * @return {Boolean} true if the canvas has been resized | |
| */ | |
| _updateCacheCanvas: function() { | |
| if (this.noScaleCache && this.canvas && this.canvas._currentTransform) { | |
| var action = this.canvas._currentTransform.action; | |
| if (action.slice && action.slice(0, 5) === 'scale') { | |
| return false; | |
| } | |
| } | |
| var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), | |
| minCacheSize = fabric.minCacheSideLimit, | |
| width = dims.width, height = dims.height, | |
| zoomX = dims.zoomX, zoomY = dims.zoomY, | |
| dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, | |
| zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, | |
| shouldRedraw = dimensionsChanged || zoomChanged, | |
| additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; | |
| if (dimensionsChanged) { | |
| var canvasWidth = this._cacheCanvas.width, | |
| canvasHeight = this._cacheCanvas.height, | |
| sizeGrowing = width > canvasWidth || height > canvasHeight, | |
| sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && | |
| canvasWidth > minCacheSize && canvasHeight > minCacheSize; | |
| shouldResizeCanvas = sizeGrowing || sizeShrinking; | |
| if (sizeGrowing) { | |
| additionalWidth = (width * 0.1) & ~1; | |
| additionalHeight = (height * 0.1) & ~1; | |
| } | |
| } | |
| if (shouldRedraw) { | |
| if (shouldResizeCanvas) { | |
| this._cacheCanvas.width = Math.max(Math.ceil(width) + additionalWidth, minCacheSize); | |
| this._cacheCanvas.height = Math.max(Math.ceil(height) + additionalHeight, minCacheSize); | |
| this.cacheTranslationX = (width + additionalWidth) / 2; | |
| this.cacheTranslationY = (height + additionalHeight) / 2; | |
| } | |
| else { | |
| this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); | |
| this._cacheContext.clearRect(0, 0, this._cacheCanvas.width, this._cacheCanvas.height); | |
| } | |
| this.cacheWidth = width; | |
| this.cacheHeight = height; | |
| this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); | |
| this._cacheContext.scale(zoomX, zoomY); | |
| this.zoomX = zoomX; | |
| this.zoomY = zoomY; | |
| return true; | |
| } | |
| return false; | |
| }, | |
| /** | |
| * Sets object's properties from options | |
| * @param {Object} [options] Options object | |
| */ | |
| setOptions: function(options) { | |
| this._setOptions(options); | |
| this._initGradient(options.fill, 'fill'); | |
| this._initGradient(options.stroke, 'stroke'); | |
| this._initClipping(options); | |
| this._initPattern(options.fill, 'fill'); | |
| this._initPattern(options.stroke, 'stroke'); | |
| }, | |
| /** | |
| * 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); | |
| this.angle && ctx.rotate(degreesToRadians(this.angle)); | |
| ctx.scale( | |
| this.scaleX * (this.flipX ? -1 : 1), | |
| this.scaleY * (this.flipY ? -1 : 1) | |
| ); | |
| this.skewX && ctx.transform(1, 0, Math.tan(degreesToRadians(this.skewX)), 1, 0, 0); | |
| this.skewY && 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() : null, | |
| 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) + '>'; | |
| }, | |
| /** | |
| * 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 | |
| * @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); | |
| } | |
| else if (key === 'dirty' && this.group) { | |
| this.group.set('dirty', value); | |
| } | |
| this[key] = value; | |
| if (this.cacheProperties.indexOf(key) > -1) { | |
| if (this.group) { | |
| this.group.set('dirty', true); | |
| } | |
| this.dirty = true; | |
| } | |
| if (this.group && this.stateProperties.indexOf(key) > -1) { | |
| this.group.set('dirty', true); | |
| } | |
| 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. | |
| }, | |
| /** | |
| * 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} | |
| */ | |
| getViewportTransform: function() { | |
| if (this.canvas && this.canvas.viewportTransform) { | |
| return this.canvas.viewportTransform; | |
| } | |
| return fabric.iMatrix.concat(); | |
| }, | |
| /* | |
| * @private | |
| * return if the object would be visible in rendering | |
| * @memberOf fabric.Object.prototype | |
| * @return {Boolean} | |
| */ | |
| isNotVisible: function() { | |
| return this.opacity === 0 || (this.width === 0 && this.height === 0) || !this.visible; | |
| }, | |
| /** | |
| * 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.isNotVisible()) { | |
| return; | |
| } | |
| if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { | |
| 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); | |
| if (this.transformMatrix) { | |
| ctx.transform.apply(ctx, this.transformMatrix); | |
| } | |
| this.clipTo && fabric.util.clipContext(this, ctx); | |
| if (this.shouldCache(noTransform)) { | |
| if (!this._cacheCanvas) { | |
| this._createCacheCanvas(); | |
| } | |
| if (this.isCacheDirty(noTransform)) { | |
| this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); | |
| this.drawObject(this._cacheContext, noTransform); | |
| this.dirty = false; | |
| } | |
| this.drawCacheOnCanvas(ctx); | |
| } | |
| else { | |
| this.dirty = false; | |
| this.drawObject(ctx, noTransform); | |
| if (noTransform && this.objectCaching && this.statefullCache) { | |
| this.saveState({ propertySet: 'cacheProperties' }); | |
| } | |
| } | |
| this.clipTo && ctx.restore(); | |
| ctx.restore(); | |
| }, | |
| /** | |
| * When returns `true`, force the object to have its own cache, even if it is inside a group | |
| * it may be needed when your object behave in a particular way on the cache and always needs | |
| * its own isolated canvas to render correctly. | |
| * This function is created to be subclassed by custom classes. | |
| * since 1.7.12 | |
| * @type function | |
| * @return false | |
| */ | |
| needsItsOwnCache: function() { | |
| return false; | |
| }, | |
| /** | |
| * Decide if the object should cache or not. | |
| * objectCaching is a global flag, wins over everything | |
| * needsItsOwnCache should be used when the object drawing method requires | |
| * a cache step. None of the fabric classes requires it. | |
| * Generally you do not cache objects in groups because the group outside is cached. | |
| * @param {Boolean} noTransform if rendereing in pathGroup, caching is not supported at object level | |
| * @return {Boolean} | |
| */ | |
| shouldCache: function(noTransform) { | |
| return !noTransform && this.objectCaching && | |
| (!this.group || this.needsItsOwnCache() || !this.group.isCaching()); | |
| }, | |
| /** | |
| * Check if this object or a child object will cast a shadow | |
| * used by Group.shouldCache to know if child has a shadow recursively | |
| * @return {Boolean} | |
| */ | |
| willDrawShadow: function() { | |
| return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); | |
| }, | |
| /** | |
| * Execute the drawing operation for an object on a specified context | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| * @param {Boolean} [noTransform] When true, context is not transformed | |
| */ | |
| drawObject: function(ctx, noTransform) { | |
| this._renderBackground(ctx); | |
| this._setStrokeStyles(ctx); | |
| this._setFillStyles(ctx); | |
| this._render(ctx, noTransform); | |
| }, | |
| /** | |
| * Paint the cached copy of the object on the target context. | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| */ | |
| drawCacheOnCanvas: function(ctx) { | |
| ctx.scale(1 / this.zoomX, 1 / this.zoomY); | |
| ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); | |
| }, | |
| /** | |
| * Check if cache is dirty | |
| * @param {Boolean} skipCanvas skip canvas checks because this object is painted | |
| * on parent canvas. | |
| */ | |
| isCacheDirty: function(skipCanvas) { | |
| if (this.isNotVisible()) { | |
| return false; | |
| } | |
| if (this._cacheCanvas && !skipCanvas && this._updateCacheCanvas()) { | |
| // in this case the context is already cleared. | |
| return true; | |
| } | |
| else { | |
| if (this.dirty || (this.statefullCache && this.hasStateChanged('cacheProperties'))) { | |
| if (this._cacheCanvas && !skipCanvas) { | |
| var width = this.cacheWidth / this.zoomX; | |
| var height = this.cacheHeight / this.zoomY; | |
| this._cacheContext.clearRect(-width / 2, -height / 2, width, height); | |
| } | |
| return true; | |
| } | |
| } | |
| return false; | |
| }, | |
| /** | |
| * Draws a background for the object big as its untrasformed dimensions | |
| * @private | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| */ | |
| _renderBackground: function(ctx) { | |
| if (!this.backgroundColor) { | |
| return; | |
| } | |
| var dim = this._getNonTransformedDimensions(); | |
| ctx.fillStyle = this.backgroundColor; | |
| ctx.fillRect( | |
| -dim.x / 2, | |
| -dim.y / 2, | |
| dim.x, | |
| dim.y | |
| ); | |
| // 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) { | |
| 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 | |
| */ | |
| _renderControls: function(ctx) { | |
| if (!this.active || (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; | |
| if (!this.group) { | |
| 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 | |
| * @param {Object} filler fabric.Pattern or fabric.Gradient | |
| */ | |
| _applyPatternGradientTransform: function(ctx, filler) { | |
| if (!filler.toLive) { | |
| return; | |
| } | |
| var transform = filler.gradientTransform || filler.patternTransform; | |
| if (transform) { | |
| ctx.transform.apply(ctx, transform); | |
| } | |
| var offsetX = -this.width / 2 + filler.offsetX || 0, | |
| offsetY = -this.height / 2 + filler.offsetY || 0; | |
| ctx.translate(offsetX, offsetY); | |
| }, | |
| /** | |
| * @private | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| */ | |
| _renderFill: function(ctx) { | |
| if (!this.fill) { | |
| return; | |
| } | |
| ctx.save(); | |
| this._applyPatternGradientTransform(ctx, this.fill); | |
| 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); | |
| this._applyPatternGradientTransform(ctx, this.stroke); | |
| 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 (is 1 unless subclassed) | |
| */ | |
| complexity: function() { | |
| return 1; | |
| }, | |
| /** | |
| * 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; | |
| } | |
| gradient.gradientTransform = options.gradientTransform; | |
| fabric.Gradient.prototype.addColorStop.call(gradient, options.colorStops); | |
| 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() { | |
| if (this.canvas) { | |
| if (this.group && this.group === this.canvas._activeGroup) { | |
| this.group.remove(this); | |
| } | |
| 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, 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; | |
| fabric.Object._fromObject = function(className, object, callback, forceAsync, extraParam) { | |
| var klass = fabric[className]; | |
| object = clone(object, true); | |
| if (forceAsync) { | |
| fabric.util.enlivenPatterns([object.fill, object.stroke], function(patterns) { | |
| if (typeof patterns[0] !== 'undefined') { | |
| object.fill = patterns[0]; | |
| } | |
| if (typeof patterns[1] !== 'undefined') { | |
| object.stroke = patterns[1]; | |
| } | |
| var instance = extraParam ? new klass(object[extraParam], object) : new klass(object); | |
| callback && callback(instance); | |
| }); | |
| } | |
| else { | |
| var instance = extraParam ? new klass(object[extraParam], object) : new klass(object); | |
| callback && callback(instance); | |
| return instance; | |
| } | |
| }; | |
| /** | |
| * 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'); | |
| }, | |
| /** | |
| * Callback; invoked right before object is about to go from active to inactive | |
| */ | |
| onDeselect: function() { | |
| /* NOOP */ | |
| } | |
| }); | |
| })(); | |
| (function() { | |
| function getCoords(coords) { | |
| return [ | |
| new fabric.Point(coords.tl.x, coords.tl.y), | |
| new fabric.Point(coords.tr.x, coords.tr.y), | |
| new fabric.Point(coords.br.x, coords.br.y), | |
| new fabric.Point(coords.bl.x, coords.bl.y) | |
| ]; | |
| } | |
| var degreesToRadians = fabric.util.degreesToRadians, | |
| multiplyMatrices = fabric.util.multiplyTransformMatrices; | |
| fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { | |
| /** | |
| * Describe object's corner position in canvas element coordinates. | |
| * properties are tl,mt,tr,ml,mr,bl,mb,br,mtr for the main controls. | |
| * each property is an object with x, y and corner. | |
| * The `corner` property contains in a similar manner the 4 points of the | |
| * interactive area of the corner. | |
| * The coordinates depends from this properties: width, height, scaleX, scaleY | |
| * skewX, skewY, angle, strokeWidth, viewportTransform, top, left, padding. | |
| * The coordinates get updated with @method setCoords. | |
| * You can calculate them without updating with @method calcCoords; | |
| * @memberOf fabric.Object.prototype | |
| */ | |
| oCoords: null, | |
| /** | |
| * Describe object's corner position in canvas object absolute coordinates | |
| * properties are tl,tr,bl,br and describe the four main corner. | |
| * each property is an object with x, y, instance of Fabric.Point. | |
| * The coordinates depends from this properties: width, height, scaleX, scaleY | |
| * skewX, skewY, angle, strokeWidth, top, left. | |
| * Those coordinates are usefull to understand where an object is. They get updated | |
| * with oCoords but they do not need to be updated when zoom or panning change. | |
| * The coordinates get updated with @method setCoords. | |
| * You can calculate them without updating with @method calcCoords(true); | |
| * @memberOf fabric.Object.prototype | |
| */ | |
| aCoords: null, | |
| /** | |
| * return correct set of coordinates for intersection | |
| */ | |
| getCoords: function(absolute, calculate) { | |
| if (!this.oCoords) { | |
| this.setCoords(); | |
| } | |
| var coords = absolute ? this.aCoords : this.oCoords; | |
| return getCoords(calculate ? this.calcCoords(absolute) : coords); | |
| }, | |
| /** | |
| * 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 | |
| * @param {Boolean} [absolute] use coordinates without viewportTransform | |
| * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords | |
| * @return {Boolean} true if object intersects with an area formed by 2 points | |
| */ | |
| intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { | |
| var coords = this.getCoords(absolute, calculate), | |
| intersection = fabric.Intersection.intersectPolygonRectangle( | |
| coords, | |
| pointTL, | |
| pointBR | |
| ); | |
| return intersection.status === 'Intersection'; | |
| }, | |
| /** | |
| * Checks if object intersects with another object | |
| * @param {Object} other Object to test | |
| * @param {Boolean} [absolute] use coordinates without viewportTransform | |
| * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords | |
| * @return {Boolean} true if object intersects with another object | |
| */ | |
| intersectsWithObject: function(other, absolute, calculate) { | |
| var intersection = fabric.Intersection.intersectPolygonPolygon( | |
| this.getCoords(absolute, calculate), | |
| other.getCoords(absolute, calculate) | |
| ); | |
| return intersection.status === 'Intersection' | |
| || other.isContainedWithinObject(this, absolute, calculate) | |
| || this.isContainedWithinObject(other, absolute, calculate); | |
| }, | |
| /** | |
| * Checks if object is fully contained within area of another object | |
| * @param {Object} other Object to test | |
| * @param {Boolean} [absolute] use coordinates without viewportTransform | |
| * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords | |
| * @return {Boolean} true if object is fully contained within area of another object | |
| */ | |
| isContainedWithinObject: function(other, absolute, calculate) { | |
| var points = this.getCoords(absolute, calculate), | |
| i = 0, lines = other._getImageLines( | |
| calculate ? other.calcCoords(absolute) : absolute ? other.aCoords : other.oCoords | |
| ); | |
| for (; i < 4; i++) { | |
| if (!other.containsPoint(points[i], lines)) { | |
| 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 | |
| * @param {Boolean} [absolute] use coordinates without viewportTransform | |
| * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords | |
| * @return {Boolean} true if object is fully contained within area formed by 2 points | |
| */ | |
| isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { | |
| var boundingRect = this.getBoundingRect(absolute, calculate); | |
| 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 | |
| * @param {Object} [lines] object returned from @method _getImageLines | |
| * @param {Boolean} [absolute] use coordinates without viewportTransform | |
| * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords | |
| * @return {Boolean} true if point is inside the object | |
| */ | |
| containsPoint: function(point, lines, absolute, calculate) { | |
| var lines = lines || this._getImageLines( | |
| calculate ? this.calcCoords(absolute) : absolute ? this.aCoords : this.oCoords | |
| ), | |
| xPoints = this._findCrossPoints(point, lines); | |
| // if xPoints is odd then point is inside the object | |
| return (xPoints !== 0 && xPoints % 2 === 1); | |
| }, | |
| /** | |
| * Checks if object is contained within the canvas with current viewportTransform | |
| * the check is done stopping at first point that appear on screen | |
| * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords | |
| * @return {Boolean} true if object is fully contained within canvas | |
| */ | |
| isOnScreen: function(calculate) { | |
| if (!this.canvas) { | |
| return false; | |
| } | |
| var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; | |
| var points = this.getCoords(true, calculate), point; | |
| for (var i = 0; i < 4; i++) { | |
| point = points[i]; | |
| if (point.x <= pointBR.x && point.x >= pointTL.x && point.y <= pointBR.y && point.y >= pointTL.y) { | |
| return true; | |
| } | |
| } | |
| // no points on screen, check intersection with absolute coordinates | |
| if (this.intersectsWithRect(pointTL, pointBR, true)) { | |
| return true; | |
| } | |
| // worst case scenario the object is so big that contanins the screen | |
| var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; | |
| if (this.containsPoint(centerPoint, null, true)) { | |
| return true; | |
| } | |
| return false; | |
| }, | |
| /** | |
| * 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} lines Coordinates of the object being evaluated | |
| */ | |
| // remove yi, not used but left code here just in case. | |
| _findCrossPoints: function(point, lines) { | |
| var b1, b2, a1, a2, xi, // yi, | |
| xcount = 0, | |
| iLine; | |
| for (var lineKey in lines) { | |
| iLine = lines[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) | |
| * the box is intented as aligned to axis of canvas. | |
| * @param {Boolean} [absolute] use coordinates without viewportTransform | |
| * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords | |
| * @return {Object} Object with left, top, width, height properties | |
| */ | |
| getBoundingRect: function(absolute, calculate) { | |
| var coords = this.getCoords(absolute, calculate); | |
| return fabric.util.makeBoundingBoxFromPoints(coords); | |
| }, | |
| /** | |
| * 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; | |
| return this.setCoords(); | |
| }, | |
| /** | |
| * 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); | |
| }, | |
| /** | |
| * Calculate and returns the .coords of an object. | |
| * @return {Object} Object with tl, tr, br, bl .... | |
| * @chainable | |
| */ | |
| calcCoords: function(absolute) { | |
| var theta = degreesToRadians(this.angle), | |
| vpt = this.getViewportTransform(), | |
| dim = absolute ? this._getTransformedDimensions() : this._calculateCurrentDimensions(), | |
| currentWidth = dim.x, currentHeight = dim.y, | |
| 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, | |
| center = this.getCenterPoint(), | |
| // offset added for rotate and scale actions | |
| coords = absolute ? center : fabric.util.transformPoint(center, 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); | |
| if (!absolute) { | |
| var 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); */ | |
| var coords = { | |
| // corners | |
| tl: tl, tr: tr, br: br, bl: bl, | |
| }; | |
| if (!absolute) { | |
| // middle | |
| coords.ml = ml; | |
| coords.mt = mt; | |
| coords.mr = mr; | |
| coords.mb = mb; | |
| // rotating point | |
| coords.mtr = mtr; | |
| } | |
| return coords; | |
| }, | |
| /** | |
| * Sets corner position coordinates based on current angle, width and height | |
| * See https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords | |
| * @param {Boolean} [ignoreZoom] set oCoords with or without the viewport transform. | |
| * @param {Boolean} [skipAbsolute] skip calculation of aCoords, usefull in setViewportTransform | |
| * @return {fabric.Object} thisArg | |
| * @chainable | |
| */ | |
| setCoords: function(ignoreZoom, skipAbsolute) { | |
| this.oCoords = this.calcCoords(ignoreZoom); | |
| if (!skipAbsolute) { | |
| this.aCoords = this.calcCoords(true); | |
| } | |
| // set coordinates of the draggable boxes in the corners used to scale/rotate the image | |
| ignoreZoom || (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); | |
| // trying to keep rounding error small, ugly but it works. | |
| if (cos === 6.123233995736766e-17 || cos === -1.8369701987210297e-16) { | |
| cos = 0; | |
| } | |
| return [cos, sin, -sin, cos, 0, 0]; | |
| } | |
| return fabric.iMatrix.concat(); | |
| }, | |
| /** | |
| * calculate trasform Matrix that represent current transformation from | |
| * object properties. | |
| * @param {Boolean} [skipGroup] return transformMatrix for object and not go upward with parents | |
| * @return {Array} matrix Transform Matrix for the object | |
| */ | |
| calcTransformMatrix: function(skipGroup) { | |
| var center = this.getCenterPoint(), | |
| translateMatrix = [1, 0, 0, 1, center.x, center.y], | |
| rotateMatrix, | |
| dimensionMatrix = this._calcDimensionsTransformMatrix(this.skewX, this.skewY, true), | |
| matrix; | |
| if (this.group && !skipGroup) { | |
| matrix = multiplyMatrices(this.group.calcTransformMatrix(), translateMatrix); | |
| } | |
| else { | |
| matrix = translateMatrix; | |
| } | |
| if (this.angle) { | |
| rotateMatrix = this._calcRotateMatrix(); | |
| matrix = multiplyMatrices(matrix, rotateMatrix); | |
| } | |
| matrix = multiplyMatrices(matrix, dimensionMatrix); | |
| return matrix; | |
| }, | |
| _calcDimensionsTransformMatrix: function(skewX, skewY, flipping) { | |
| var skewMatrix, | |
| scaleX = this.scaleX * (flipping && this.flipX ? -1 : 1), | |
| scaleY = this.scaleY * (flipping && this.flipY ? -1 : 1), | |
| scaleMatrix = [scaleX, 0, 0, scaleY, 0, 0]; | |
| if (skewX) { | |
| skewMatrix = [1, 0, Math.tan(degreesToRadians(skewX)), 1]; | |
| scaleMatrix = multiplyMatrices(scaleMatrix, skewMatrix, true); | |
| } | |
| if (skewY) { | |
| skewMatrix = [1, Math.tan(degreesToRadians(skewY)), 0, 1]; | |
| scaleMatrix = multiplyMatrices(scaleMatrix, skewMatrix, true); | |
| } | |
| return scaleMatrix; | |
| }, | |
| /* | |
| * Calculate object dimensions from its properties | |
| * @private | |
| * @return {Object} .x width dimension | |
| * @return {Object} .y height dimension | |
| */ | |
| _getNonTransformedDimensions: function() { | |
| var strokeWidth = this.strokeWidth, | |
| w = this.width + strokeWidth, | |
| h = this.height + strokeWidth; | |
| return { x: w, y: h }; | |
| }, | |
| /* | |
| * Calculate object bounding boxdimensions from its properties scale, skew. | |
| * @private | |
| * @return {Object} .x width dimension | |
| * @return {Object} .y height dimension | |
| */ | |
| _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 }; | |
| }, | |
| /* | |
| * Calculate object dimensions for controls. include padding and canvas zoom | |
| * private | |
| */ | |
| _calculateCurrentDimensions: function() { | |
| var vpt = this.getViewportTransform(), | |
| dim = this._getTransformedDimensions(), | |
| p = fabric.util.transformPoint(dim, vpt, true); | |
| return p.scalarAdd(2 * this.padding); | |
| }, | |
| }); | |
| })(); | |
| 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, | |
| originalSet = 'stateProperties'; | |
| /* | |
| 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, firstPass) { | |
| if (origValue === currentValue) { | |
| // if the objects are identical, return | |
| return true; | |
| } | |
| else if (Array.isArray(origValue)) { | |
| if (origValue.length !== currentValue.length) { | |
| return false; | |
| } | |
| for (var i = 0, len = origValue.length; i < len; i++) { | |
| if (!_isEqual(origValue[i], currentValue[i])) { | |
| return false; | |
| } | |
| } | |
| return true; | |
| } | |
| else if (origValue && typeof origValue === 'object') { | |
| var keys = Object.keys(origValue), key; | |
| if (!firstPass && keys.length !== Object.keys(currentValue).length) { | |
| return false; | |
| } | |
| for (var i = 0, len = keys.length; i < len; i++) { | |
| key = keys[i]; | |
| if (!_isEqual(origValue[key], currentValue[key])) { | |
| return false; | |
| } | |
| } | |
| return true; | |
| } | |
| } | |
| fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { | |
| /** | |
| * Returns true if object state (one of its state properties) was changed | |
| * @param {String} [propertySet] optional name for the set of property we want to save | |
| * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called | |
| */ | |
| hasStateChanged: function(propertySet) { | |
| propertySet = propertySet || originalSet; | |
| var dashedPropertySet = '_' + propertySet; | |
| if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { | |
| return true; | |
| } | |
| return !_isEqual(this[dashedPropertySet], this, true); | |
| }, | |
| /** | |
| * 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) { | |
| var propertySet = options && options.propertySet || originalSet, | |
| destination = '_' + propertySet; | |
| if (!this[destination]) { | |
| return this.setupState(options); | |
| } | |
| saveProps(this, destination, this[propertySet]); | |
| if (options && options.stateProperties) { | |
| saveProps(this, destination, 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) { | |
| options = options || { }; | |
| var propertySet = options.propertySet || originalSet; | |
| options.propertySet = propertySet; | |
| this['_' + propertySet] = { }; | |
| 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 | |
| } | |
| }; | |
| } | |
| }, | |
| /** | |
| * 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 | |
| * has checks to be skipped when the object is on a staticCanvas | |
| * @param {CanvasRenderingContext2D} ctx Context to draw on | |
| * @return {fabric.Object} thisArg | |
| * @chainable | |
| */ | |
| drawSelectionBackground: function(ctx) { | |
| if (!this.selectionBackgroundColor || this.group || !this.active || | |
| (this.canvas && !this.canvas.interactive)) { | |
| 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, | |
| height = wh.y + strokeWidth; | |
| 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, valueProgress, timeProgress) { | |
| if (propPair) { | |
| _this[propPair[0]][propPair[1]] = value; | |
| } | |
| else { | |
| _this.set(property, value); | |
| } | |
| if (skipCallbacks) { | |
| return; | |
| } | |
| options.onChange && options.onChange(value, valueProgress, timeProgress); | |
| }, | |
| onComplete: function(value, valueProgress, timeProgress) { | |
| if (skipCallbacks) { | |
| return; | |
| } | |
| _this.setCoords(); | |
| options.onComplete && options.onComplete(value, valueProgress, timeProgress); | |
| } | |
| }); | |
| } | |
| }); | |
| (function(global) { | |
| 'use strict'; | |
| var fabric = global.fabric || (global.fabric = { }), | |
| extend = fabric.util.object.extend, | |
| clone = fabric.util.object.clone, | |
| 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; | |
| } | |
| var cacheProperties = fabric.Object.prototype.cacheProperties.concat(); | |
| cacheProperties.push( | |
| 'x1', | |
| 'x2', | |
| 'y1', | |
| 'y2' | |
| ); | |
| /** | |
| * 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, | |
| cacheProperties: cacheProperties, | |
| /** | |
| * Constructor | |
| * @param {Array} [points] Array of points | |
| * @param {Object} [options] Options object | |
| * @return {fabric.Line} thisArg | |
| */ | |
| initialize: function(points, 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(), | |
| offset = this.strokeWidth / 2; | |
| ctx.translate( | |
| cp.x - (this.strokeLineCap === 'butt' && this.height === 0 ? 0 : offset), | |
| cp.y - (this.strokeLineCap === 'butt' && this.width === 0 ? 0 : offset) | |
| ); | |
| } | |
| 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()); | |
| }, | |
| /* | |
| * Calculate object dimensions from its properties | |
| * @private | |
| */ | |
| _getNonTransformedDimensions: function() { | |
| var dim = this.callSuper('_getNonTransformedDimensions'); | |
| if (this.strokeLineCap === 'butt') { | |
| if (this.width === 0) { | |
| dim.y -= this.strokeWidth; | |
| } | |
| if (this.height === 0) { | |
| dim.x -= this.strokeWidth; | |
| } | |
| } | |
| return dim; | |
| }, | |
| /** | |
| * 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_ */ | |
| }); | |
| /* _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) { | |
| options = options || { }; | |
| var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), | |
| points = [ | |
| parsedAttributes.x1 || 0, | |
| parsedAttributes.y1 || 0, | |
| parsedAttributes.x2 || 0, | |
| parsedAttributes.y2 || 0 | |
| ]; | |
| options.originX = 'left'; | |
| options.originY = 'top'; | |
| 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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {fabric.Line} instance of fabric.Line | |
| */ | |
| fabric.Line.fromObject = function(object, callback, forceAsync) { | |
| function _callback(instance) { | |
| delete instance.points; | |
| callback && callback(instance); | |
| }; | |
| var options = clone(object, true); | |
| options.points = [object.x1, object.y1, object.x2, object.y2]; | |
| var line = fabric.Object._fromObject('Line', options, _callback, forceAsync, 'points'); | |
| if (line) { | |
| delete line.points; | |
| } | |
| 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; | |
| } | |
| var cacheProperties = fabric.Object.prototype.cacheProperties.concat(); | |
| cacheProperties.push( | |
| 'radius' | |
| ); | |
| /** | |
| * 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, | |
| cacheProperties: cacheProperties, | |
| /** | |
| * Constructor | |
| * @param {Object} [options] Options object | |
| * @return {fabric.Circle} thisArg | |
| */ | |
| initialize: function(options) { | |
| this.callSuper('initialize', options); | |
| this.set('radius', options && options.radius || 0); | |
| }, | |
| /** | |
| * @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); | |
| }, | |
| }); | |
| /* _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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {Object} Instance of fabric.Circle | |
| */ | |
| fabric.Circle.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('Circle', object, callback, forceAsync); | |
| }; | |
| })(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) { | |
| this.callSuper('initialize', options); | |
| this.set('width', options && options.width || 100) | |
| .set('height', options && 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 {@link fabric.Triangle} instance from an object representation | |
| * @static | |
| * @memberOf fabric.Triangle | |
| * @param {Object} object Object to create an instance from | |
| * @param {function} [callback] invoked with new instance as first argument | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {fabric.Triangle} | |
| */ | |
| fabric.Triangle.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('Triangle', object, callback, forceAsync); | |
| }; | |
| })(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; | |
| } | |
| var cacheProperties = fabric.Object.prototype.cacheProperties.concat(); | |
| cacheProperties.push( | |
| 'rx', | |
| 'ry' | |
| ); | |
| /** | |
| * 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, | |
| cacheProperties: cacheProperties, | |
| /** | |
| * Constructor | |
| * @param {Object} [options] Options object | |
| * @return {fabric.Ellipse} thisArg | |
| */ | |
| initialize: function(options) { | |
| this.callSuper('initialize', options); | |
| this.set('rx', options && options.rx || 0); | |
| this.set('ry', options && 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); | |
| }, | |
| }); | |
| /* _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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {fabric.Ellipse} | |
| */ | |
| fabric.Ellipse.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('Ellipse', object, callback, forceAsync); | |
| }; | |
| })(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'); | |
| var cacheProperties = fabric.Object.prototype.cacheProperties.concat(); | |
| cacheProperties.push('rx', 'ry'); | |
| /** | |
| * 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, | |
| cacheProperties: cacheProperties, | |
| /** | |
| * Constructor | |
| * @param {Object} [options] Options object | |
| * @return {Object} thisArg | |
| */ | |
| initialize: function(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_ */ | |
| }); | |
| /* _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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {Object} instance of fabric.Rect | |
| */ | |
| fabric.Rect.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('Rect', object, callback, forceAsync); | |
| }; | |
| })(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, | |
| NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; | |
| if (fabric.Polyline) { | |
| fabric.warn('fabric.Polyline is already defined'); | |
| return; | |
| } | |
| var cacheProperties = fabric.Object.prototype.cacheProperties.concat(); | |
| cacheProperties.push('points'); | |
| /** | |
| * 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, | |
| cacheProperties: cacheProperties, | |
| /** | |
| * 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) { | |
| 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 = [], | |
| diffX = 0, | |
| diffY = 0, | |
| markup = this._createBaseSVGMarkup(); | |
| if (!(this.group && this.group.type === 'path-group')) { | |
| diffX = this.pathOffset.x; | |
| diffY = this.pathOffset.y; | |
| } | |
| for (var i = 0, len = this.points.length; i < len; i++) { | |
| points.push( | |
| toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', | |
| toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' | |
| ); | |
| } | |
| markup.push( | |
| '<', this.type, ' ', this.getSvgId(), | |
| 'points="', points.join(''), | |
| '" 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 | |
| */ | |
| commonRender: function(ctx, noTransform) { | |
| var point, len = this.points.length, | |
| x = noTransform ? 0 : this.pathOffset.x, | |
| y = noTransform ? 0 : this.pathOffset.y; | |
| 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; | |
| } | |
| ctx.beginPath(); | |
| ctx.moveTo(this.points[0].x - x, this.points[0].y - y); | |
| for (var i = 0; i < len; i++) { | |
| point = this.points[i]; | |
| ctx.lineTo(point.x - x, point.y - y); | |
| } | |
| return true; | |
| }, | |
| /** | |
| * @private | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| * @param {Boolean} noTransform | |
| */ | |
| _render: function(ctx, noTransform) { | |
| if (!this.commonRender(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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {fabric.Polyline} Instance of fabric.Polyline | |
| */ | |
| fabric.Polyline.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('Polyline', object, callback, forceAsync, 'points'); | |
| }; | |
| })(typeof exports !== 'undefined' ? exports : this); | |
| (function(global) { | |
| 'use strict'; | |
| var fabric = global.fabric || (global.fabric = { }), | |
| extend = fabric.util.object.extend; | |
| if (fabric.Polygon) { | |
| fabric.warn('fabric.Polygon is already defined'); | |
| return; | |
| } | |
| /** | |
| * Polygon class | |
| * @class fabric.Polygon | |
| * @extends fabric.Polyline | |
| * @see {@link fabric.Polygon#initialize} for constructor definition | |
| */ | |
| fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { | |
| /** | |
| * Type of an object | |
| * @type String | |
| * @default | |
| */ | |
| type: 'polygon', | |
| /** | |
| * @private | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| * @param {Boolean} noTransform | |
| */ | |
| _render: function(ctx, noTransform) { | |
| if (!this.commonRender(ctx, noTransform)) { | |
| return; | |
| } | |
| ctx.closePath(); | |
| this._renderFill(ctx); | |
| this._renderStroke(ctx); | |
| }, | |
| /** | |
| * @private | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| */ | |
| _renderDashedStroke: function(ctx) { | |
| this.callSuper('_renderDashedStroke', ctx); | |
| ctx.closePath(); | |
| }, | |
| }); | |
| /* _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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {fabric.Polygon} Instance of fabric.Polygon | |
| */ | |
| fabric.Polygon.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('Polygon', object, callback, forceAsync, 'points'); | |
| }; | |
| })(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; | |
| } | |
| var stateProperties = fabric.Object.prototype.stateProperties.concat(); | |
| stateProperties.push('path'); | |
| var cacheProperties = fabric.Object.prototype.cacheProperties.concat(); | |
| cacheProperties.push('path', 'fillRule'); | |
| /** | |
| * 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, | |
| cacheProperties: cacheProperties, | |
| stateProperties: stateProperties, | |
| /** | |
| * 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.callSuper('initialize', 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); | |
| }, | |
| /** | |
| * @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(); }), | |
| top: this.top, | |
| left: this.left, | |
| }); | |
| 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 | |
| controlX = current[3]; | |
| controlY = current[4]; | |
| bounds = fabric.util.getBoundsOfCurve(x, y, | |
| current[1], | |
| current[2], | |
| controlX, | |
| controlY, | |
| current[5], | |
| current[6] | |
| ); | |
| x = current[5]; | |
| y = current[6]; | |
| 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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| */ | |
| fabric.Path.fromObject = function(object, callback, forceAsync) { | |
| // 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; | |
| path.setOptions(object); | |
| path.setSourcePath(pathUrl); | |
| callback && callback(path); | |
| }); | |
| } | |
| else { | |
| return fabric.Object._fromObject('Path', object, callback, forceAsync, '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; | |
| 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.Object, /** @lends fabric.PathGroup.prototype */ { | |
| /** | |
| * Type of an object | |
| * @type String | |
| * @default | |
| */ | |
| type: 'path-group', | |
| /** | |
| * Fill value | |
| * @type String | |
| * @default | |
| */ | |
| fill: '', | |
| /** | |
| * Pathgroups are container, do not render anything on theyr own, ence no cache properties | |
| * @type Boolean | |
| * @default | |
| */ | |
| cacheProperties: [], | |
| /** | |
| * 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(); | |
| }, | |
| /** | |
| * 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); | |
| }, | |
| /** | |
| * Execute the drawing operation for an object on a specified context | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| * @param {Boolean} [noTransform] When true, context is not transformed | |
| */ | |
| drawObject: function(ctx) { | |
| ctx.save(); | |
| 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); | |
| } | |
| ctx.restore(); | |
| }, | |
| /** | |
| * Decide if the object should cache or not. | |
| * objectCaching is a global flag, wins over everything | |
| * needsItsOwnCache should be used when the object drawing method requires | |
| * a cache step. None of the fabric classes requires it. | |
| * Generally you do not cache objects in groups because the group outside is cached. | |
| * @return {Boolean} | |
| */ | |
| shouldCache: function() { | |
| var parentCache = this.objectCaching && (!this.group || this.needsItsOwnCache() || !this.group.isCaching()); | |
| this.caching = parentCache; | |
| if (parentCache) { | |
| for (var i = 0, len = this.paths.length; i < len; i++) { | |
| if (this.paths[i].willDrawShadow()) { | |
| this.caching = false; | |
| return false; | |
| } | |
| } | |
| } | |
| return parentCache; | |
| }, | |
| /** | |
| * Check if this object or a child object will cast a shadow | |
| * @return {Boolean} | |
| */ | |
| willDrawShadow: function() { | |
| if (this.shadow) { | |
| return true; | |
| } | |
| for (var i = 0, len = this.paths.length; i < len; i++) { | |
| if (this.paths[i].willDrawShadow()) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| }, | |
| /** | |
| * Check if this group or its parent group are caching, recursively up | |
| * @return {Boolean} | |
| */ | |
| isCaching: function() { | |
| return this.caching || this.group && this.group.isCaching(); | |
| }, | |
| /** | |
| * Check if cache is dirty | |
| */ | |
| isCacheDirty: function() { | |
| if (this.callSuper('isCacheDirty')) { | |
| return true; | |
| } | |
| if (!this.statefullCache) { | |
| return false; | |
| } | |
| for (var i = 0, len = this.paths.length; i < len; i++) { | |
| if (this.paths[i].isCacheDirty(true)) { | |
| if (this._cacheCanvas) { | |
| var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; | |
| this._cacheContext.clearRect(-x / 2, -y / 2, x, y); | |
| } | |
| return true; | |
| } | |
| } | |
| return false; | |
| }, | |
| /** | |
| * 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 pathsToObject = this.paths.map(function(path) { | |
| var originalDefaults = path.includeDefaultValues; | |
| path.includeDefaultValues = path.group.includeDefaultValues; | |
| var obj = path.toObject(propertiesToInclude); | |
| path.includeDefaultValues = originalDefaults; | |
| return obj; | |
| }); | |
| var o = extend(this.callSuper('toObject', ['sourcePath'].concat(propertiesToInclude)), { | |
| paths: pathsToObject | |
| }); | |
| 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) { | |
| var originalPaths = object.paths; | |
| delete object.paths; | |
| if (typeof originalPaths === 'string') { | |
| fabric.loadSVGFromURL(originalPaths, function (elements) { | |
| var pathUrl = originalPaths; | |
| var pathGroup = fabric.util.groupSVGElements(elements, object, pathUrl); | |
| object.paths = originalPaths; | |
| callback(pathGroup); | |
| }); | |
| } | |
| else { | |
| fabric.util.enlivenObjects(originalPaths, function(enlivenedObjects) { | |
| var pathGroup = new fabric.PathGroup(enlivenedObjects, object); | |
| object.paths = originalPaths; | |
| callback(pathGroup); | |
| }); | |
| } | |
| }; | |
| /** | |
| * 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; | |
| 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, | |
| /** | |
| * Groups are container, do not render anything on theyr own, ence no cache properties | |
| * @type Boolean | |
| * @default | |
| */ | |
| cacheProperties: [], | |
| /** | |
| * 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; | |
| } | |
| 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) { | |
| var center = this.getCenterPoint(); | |
| for (var i = this._objects.length; i--; ){ | |
| this._updateObjectCoords(this._objects[i], center, skipCoordsChange); | |
| } | |
| }, | |
| /** | |
| * @private | |
| * @param {Object} object | |
| * @param {fabric.Point} center, current center of group. | |
| * @param {Boolean} [skipCoordsChange] if true, coordinates of object dose not change | |
| */ | |
| _updateObjectCoords: function(object, center, 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(), | |
| ignoreZoom = true, skipAbsolute = true; | |
| object.set({ | |
| left: objectLeft - center.x, | |
| top: objectTop - center.y | |
| }); | |
| object.setCoords(ignoreZoom, skipAbsolute); | |
| }, | |
| /** | |
| * 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(); | |
| this.setCoords(); | |
| this.dirty = true; | |
| 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(); | |
| this.setCoords(); | |
| this.dirty = true; | |
| return this; | |
| }, | |
| /** | |
| * @private | |
| */ | |
| _onObjectAdded: function(object) { | |
| this.dirty = true; | |
| object.group = this; | |
| object._set('canvas', this.canvas); | |
| }, | |
| /** | |
| * @private | |
| */ | |
| _onObjectRemoved: function(object) { | |
| this.dirty = true; | |
| 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) { | |
| var objsToObject = this.getObjects().map(function(obj) { | |
| var originalDefaults = obj.includeDefaultValues; | |
| obj.includeDefaultValues = obj.group.includeDefaultValues; | |
| var _obj = obj.toObject(propertiesToInclude); | |
| obj.includeDefaultValues = originalDefaults; | |
| return _obj; | |
| }); | |
| return extend(this.callSuper('toObject', propertiesToInclude), { | |
| objects: objsToObject | |
| }); | |
| }, | |
| /** | |
| * Returns object representation of an instance, in dataless mode. | |
| * @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 objsToObject = this.getObjects().map(function(obj) { | |
| var originalDefaults = obj.includeDefaultValues; | |
| obj.includeDefaultValues = obj.group.includeDefaultValues; | |
| var _obj = obj.toDatalessObject(propertiesToInclude); | |
| obj.includeDefaultValues = originalDefaults; | |
| return _obj; | |
| }); | |
| return extend(this.callSuper('toDatalessObject', propertiesToInclude), { | |
| objects: objsToObject | |
| }); | |
| }, | |
| /** | |
| * Renders instance on a given context | |
| * @param {CanvasRenderingContext2D} ctx context to render instance on | |
| */ | |
| render: function(ctx) { | |
| this._transformDone = true; | |
| this.callSuper('render', ctx); | |
| this._transformDone = false; | |
| }, | |
| /** | |
| * Decide if the object should cache or not. | |
| * objectCaching is a global flag, wins over everything | |
| * needsItsOwnCache should be used when the object drawing method requires | |
| * a cache step. None of the fabric classes requires it. | |
| * Generally you do not cache objects in groups because the group outside is cached. | |
| * @return {Boolean} | |
| */ | |
| shouldCache: function() { | |
| var parentCache = this.objectCaching && (!this.group || this.needsItsOwnCache() || !this.group.isCaching()); | |
| this.caching = parentCache; | |
| if (parentCache) { | |
| for (var i = 0, len = this._objects.length; i < len; i++) { | |
| if (this._objects[i].willDrawShadow()) { | |
| this.caching = false; | |
| return false; | |
| } | |
| } | |
| } | |
| return parentCache; | |
| }, | |
| /** | |
| * Check if this object or a child object will cast a shadow | |
| * @return {Boolean} | |
| */ | |
| willDrawShadow: function() { | |
| if (this.callSuper('willDrawShadow')) { | |
| return true; | |
| } | |
| for (var i = 0, len = this._objects.length; i < len; i++) { | |
| if (this._objects[i].willDrawShadow()) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| }, | |
| /** | |
| * Check if this group or its parent group are caching, recursively up | |
| * @return {Boolean} | |
| */ | |
| isCaching: function() { | |
| return this.caching || this.group && this.group.isCaching(); | |
| }, | |
| /** | |
| * Execute the drawing operation for an object on a specified context | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| * @param {Boolean} [noTransform] When true, context is not transformed | |
| */ | |
| drawObject: function(ctx) { | |
| for (var i = 0, len = this._objects.length; i < len; i++) { | |
| this._renderObject(this._objects[i], ctx); | |
| } | |
| }, | |
| /** | |
| * Check if cache is dirty | |
| */ | |
| isCacheDirty: function() { | |
| if (this.callSuper('isCacheDirty')) { | |
| return true; | |
| } | |
| if (!this.statefullCache) { | |
| return false; | |
| } | |
| for (var i = 0, len = this._objects.length; i < len; i++) { | |
| if (this._objects[i].isCacheDirty(true)) { | |
| if (this._cacheCanvas) { | |
| // if this group has not a cache canvas there is nothing to clean | |
| var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; | |
| this._cacheContext.clearRect(-x / 2, -y / 2, x, y); | |
| } | |
| return true; | |
| } | |
| } | |
| return 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) { | |
| ctx.save(); | |
| ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; | |
| this.callSuper('_renderControls', ctx, noTransform); | |
| for (var i = 0, len = this._objects.length; i < len; i++) { | |
| this._objects[i]._renderControls(ctx); | |
| } | |
| ctx.restore(); | |
| }, | |
| /** | |
| * @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.flipX = false; | |
| object.flipY = false; | |
| object.set('scaleX', options.scaleX); | |
| object.set('scaleY', options.scaleY); | |
| object.skewX = options.skewX; | |
| object.skewY = options.skewY; | |
| object.angle = options.angle; | |
| 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 objects inside group | |
| * @return {fabric.Group} thisArg | |
| * @chainable | |
| */ | |
| setObjectsCoords: function() { | |
| var ignoreZoom = true, skipAbsolute = true; | |
| this.forEachObject(function(object) { | |
| object.setCoords(ignoreZoom, skipAbsolute); | |
| }); | |
| 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, | |
| ignoreZoom = true; | |
| for ( ; i < iLen; ++i) { | |
| o = this._objects[i]; | |
| o.setCoords(ignoreZoom); | |
| 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 minXY = new fabric.Point(min(aX), min(aY)), | |
| maxXY = new fabric.Point(max(aX), max(aY)), | |
| 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) { | |
| var options = fabric.util.object.clone(object, true); | |
| delete options.objects; | |
| callback && callback(new fabric.Group(enlivenedObjects, options, 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, | |
| /** | |
| * When `true`, object is cached on an additional canvas. | |
| * default to false for images | |
| * since 1.7.0 | |
| * @type Boolean | |
| * @default | |
| */ | |
| objectCaching: false, | |
| /** | |
| * 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); | |
| }, | |
| }); | |
| /** | |
| * 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, error) { | |
| if (error) { | |
| callback && callback(null, error); | |
| return; | |
| } | |
| 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 crossOrigin'.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(); | |
| } | |
| }); | |
| fabric.Image.filters.BaseFilter.fromObject = function(object, callback) { | |
| var filter = new fabric.Image.filters[object.type](object); | |
| callback && callback(filter); | |
| return filter; | |
| }; | |
| (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 | |
| * @param {function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Brightness} Instance of fabric.Image.filters.Brightness | |
| */ | |
| fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Convolute} Instance of fabric.Image.filters.Convolute | |
| */ | |
| fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.GradientTransparency} Instance of fabric.Image.filters.GradientTransparency | |
| */ | |
| fabric.Image.filters.GradientTransparency.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {Object} object Object to create an instance from | |
| * @param {function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale | |
| */ | |
| fabric.Image.filters.Grayscale.fromObject = function(object, callback) { | |
| object = object || { }; | |
| object.type = 'Grayscale'; | |
| return fabric.Image.filters.BaseFilter.fromObject(object, callback); | |
| }; | |
| })(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 | |
| * @param {Object} object Object to create an instance from | |
| * @param {function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Invert} Instance of fabric.Image.filters.Invert | |
| */ | |
| fabric.Image.filters.Invert.fromObject = function(object, callback) { | |
| object = object || { }; | |
| object.type = 'Invert'; | |
| return fabric.Image.filters.BaseFilter.fromObject(object, callback); | |
| }; | |
| })(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); | |
| return fabric.Image.filters.BaseFilter.fromObject(object, callback); | |
| }); | |
| }; | |
| /** | |
| * 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 | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Noise} Instance of fabric.Image.filters.Noise | |
| */ | |
| fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Pixelate} Instance of fabric.Image.filters.Pixelate | |
| */ | |
| fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.RemoveWhite} Instance of fabric.Image.filters.RemoveWhite | |
| */ | |
| fabric.Image.filters.RemoveWhite.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {Object} object Object to create an instance from | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Sepia} Instance of fabric.Image.filters.Sepia | |
| */ | |
| fabric.Image.filters.Sepia.fromObject = function(object, callback) { | |
| object = object || { }; | |
| object.type = 'Sepia'; | |
| return new fabric.Image.filters.BaseFilter.fromObject(object, callback); | |
| }; | |
| })(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 | |
| * @param {Object} object Object to create an instance from | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Sepia2} Instance of fabric.Image.filters.Sepia2 | |
| */ | |
| fabric.Image.filters.Sepia2.fromObject = function(object, callback) { | |
| object = object || { }; | |
| object.type = 'Sepia2'; | |
| return new fabric.Image.filters.BaseFilter.fromObject(object, callback); | |
| }; | |
| })(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 | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Tint} Instance of fabric.Image.filters.Tint | |
| */ | |
| fabric.Image.filters.Tint.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Multiply} Instance of fabric.Image.filters.Multiply | |
| */ | |
| fabric.Image.filters.Multiply.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| }; | |
| } | |
| }); | |
| /** | |
| * Returns filter instance from an object representation | |
| * @static | |
| * @param {Object} object Object to create an instance from | |
| * @param {function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Blend} Instance of fabric.Image.filters.Blend | |
| */ | |
| fabric.Image.filters.Blend.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {Object} object Object to create an instance from | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Resize} Instance of fabric.Image.filters.Resize | |
| */ | |
| fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {function} [callback] function to invoke after filter creation | |
| * @return {fabric.Image.filters.ColorMatrix} Instance of fabric.Image.filters.ColorMatrix | |
| */ | |
| fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Contrast} Instance of fabric.Image.filters.Contrast | |
| */ | |
| fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(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 | |
| * @param {Function} [callback] to be invoked after filter creation | |
| * @return {fabric.Image.filters.Saturate} Instance of fabric.Image.filters.Saturate | |
| */ | |
| fabric.Image.filters.Saturate.fromObject = fabric.Image.filters.BaseFilter.fromObject; | |
| })(typeof exports !== 'undefined' ? exports : this); | |
| (function(global) { | |
| 'use strict'; | |
| var fabric = global.fabric || (global.fabric = { }), | |
| 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', | |
| 'charSpacing' | |
| ); | |
| var cacheProperties = fabric.Object.prototype.cacheProperties.concat(); | |
| cacheProperties.push( | |
| 'fontFamily', | |
| 'fontWeight', | |
| 'fontSize', | |
| 'text', | |
| 'textDecoration', | |
| 'textAlign', | |
| 'fontStyle', | |
| 'lineHeight', | |
| 'textBackgroundColor', | |
| 'charSpacing', | |
| 'styles' | |
| ); | |
| /** | |
| * 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', | |
| 'fontWeight', | |
| 'fontFamily', | |
| 'fontStyle', | |
| 'lineHeight', | |
| 'text', | |
| 'charSpacing', | |
| 'textAlign' | |
| ], | |
| /** | |
| * @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, | |
| /** | |
| * List of properties to consider when checking if cache needs refresh | |
| * @type Array | |
| */ | |
| cacheProperties: cacheProperties, | |
| /** | |
| * 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.callSuper('initialize', options); | |
| this.__skipDimension = false; | |
| this._initDimensions(); | |
| this.setCoords(); | |
| this.setupState({ propertySet: '_dimensionAffectingProps' }); | |
| }, | |
| /** | |
| * 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 + '" }>'; | |
| }, | |
| /** | |
| * Return the dimension and the zoom level needed to create a cache canvas | |
| * big enough to host the object to be cached. | |
| * @private | |
| * @return {Object}.width width of canvas | |
| * @return {Object}.height height of canvas | |
| * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache | |
| * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache | |
| */ | |
| _getCacheCanvasDimensions: function() { | |
| var dim = this.callSuper('_getCacheCanvasDimensions'); | |
| var fontSize = this.fontSize; | |
| dim.width += fontSize * dim.zoomX; | |
| dim.height += fontSize * dim.zoomY; | |
| return dim; | |
| }, | |
| /** | |
| * @private | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| */ | |
| _render: function(ctx) { | |
| this._setTextStyles(ctx); | |
| if (this.group && this.group.type === 'path-group') { | |
| ctx.translate(this.left, this.top); | |
| } | |
| this._renderTextLinesBackground(ctx); | |
| this._renderText(ctx); | |
| this._renderTextDecoration(ctx); | |
| }, | |
| /** | |
| * @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; | |
| }, | |
| /** | |
| * @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 | |
| */ | |
| _renderTextLinesBackground: function(ctx) { | |
| if (!this.textBackgroundColor) { | |
| return; | |
| } | |
| var lineTopOffset = 0, heightOfLine, | |
| lineWidth, lineLeftOffset, originalFill = ctx.fillStyle; | |
| 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; | |
| } | |
| ctx.fillStyle = originalFill; | |
| // 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 | |
| */ | |
| _shouldClearDimensionCache: function() { | |
| var shouldClear = this._forceClearCache; | |
| shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); | |
| if (shouldClear) { | |
| this.saveState({ propertySet: '_dimensionAffectingProps' }); | |
| this.dirty = 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; | |
| } | |
| if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { | |
| return; | |
| } | |
| if (this._shouldClearDimensionCache()) { | |
| this._setTextStyles(ctx); | |
| this._initDimensions(ctx); | |
| } | |
| this.callSuper('render', ctx, noTransform); | |
| }, | |
| /** | |
| * 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 xml:space="preserve" ', | |
| (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' | |
| ); | |
| }, | |
| getSvgStyles: function(skipShadow) { | |
| var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); | |
| return svgStyle + ' white-space: pre;'; | |
| }, | |
| /** | |
| * @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 (this._dimensionAffectingProps.indexOf(key) > -1) { | |
| 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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {fabric.Text} Instance of fabric.Text | |
| */ | |
| fabric.Text.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('Text', object, callback, forceAsync, '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); | |
| }, | |
| /** | |
| * 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 (!ctx) { | |
| this.clearContextTop(); | |
| } | |
| this.callSuper('_initDimensions', ctx); | |
| }, | |
| /** | |
| * @private | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| * @param {Boolean} noTransform | |
| */ | |
| render: function(ctx, noTransform) { | |
| this.clearContextTop(); | |
| this.callSuper('render', ctx, noTransform); | |
| // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor | |
| // the correct position but not at every cursor animation. | |
| this.cursorOffsetCache = { }; | |
| this.renderCursorOrSelection(); | |
| }, | |
| /** | |
| * @private | |
| * @param {CanvasRenderingContext2D} ctx Context to render on | |
| */ | |
| _render: function(ctx) { | |
| this.callSuper('_render', ctx); | |
| this.ctx = ctx; | |
| }, | |
| /** | |
| * 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 = 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, jChar; j < len; j++) { | |
| jChar = chars[j]; | |
| shouldFill && ctx.fillText(jChar, left + charWidth, top); | |
| shouldStroke && ctx.strokeText(jChar, left + charWidth, top); | |
| _charWidth = ctx.measureText(jChar).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(), | |
| colorCache = '', | |
| line, _char, style, leftCache, | |
| topCache, widthCache, heightCache; | |
| ctx.save(); | |
| 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); | |
| leftCache = topCache = widthCache = heightCache = 0; | |
| for (var j = 0, jlen = line.length; j < jlen; j++) { | |
| style = this._getStyleDeclaration(i, j) || {}; | |
| if (colorCache !== style.textBackgroundColor) { | |
| if (heightCache && widthCache) { | |
| ctx.fillStyle = colorCache; | |
| ctx.fillRect(leftCache, topCache, widthCache, heightCache); | |
| } | |
| leftCache = topCache = widthCache = heightCache = 0; | |
| colorCache = style.textBackgroundColor || ''; | |
| } | |
| if (!style.textBackgroundColor) { | |
| colorCache = ''; | |
| continue; | |
| } | |
| _char = line[j]; | |
| if (colorCache === style.textBackgroundColor) { | |
| colorCache = style.textBackgroundColor; | |
| if (!leftCache) { | |
| leftCache = leftOffset + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j); | |
| } | |
| topCache = topOffset + lineTopOffset; | |
| widthCache += this._getWidthOfChar(ctx, _char, i, j); | |
| heightCache = heightOfLine / this.lineHeight; | |
| } | |
| } | |
| // if a textBackgroundColor ends on the last character of a line | |
| if (heightCache && widthCache) { | |
| ctx.fillStyle = colorCache; | |
| ctx.fillRect(leftCache, topCache, widthCache, heightCache); | |
| leftCache = topCache = widthCache = heightCache = 0; | |
| } | |
| lineTopOffset += heightOfLine; | |
| } | |
| ctx.restore(); | |
| }, | |
| /** | |
| * @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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {fabric.IText} instance of fabric.IText | |
| */ | |
| fabric.IText.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('IText', object, callback, forceAsync, 'text'); | |
| }; | |
| })(); | |
| (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); | |
| }, | |
| onDeselect: function() { | |
| this.isEditing && this.exitEditing(); | |
| this.selected = false; | |
| this.callSuper('onDeselect'); | |
| }, | |
| /** | |
| * 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._mouseUpITextHandler = (function() { | |
| if (canvas._iTextInstances) { | |
| canvas._iTextInstances.forEach(function(obj) { | |
| obj.__isMousedown = false; | |
| }); | |
| } | |
| }).bind(this); | |
| canvas.on('mouse:up', canvas._mouseUpITextHandler); | |
| }, | |
| /** | |
| * remove canvas event to manage exiting on other instances | |
| * @private | |
| */ | |
| _removeCanvasHandlers: function(canvas) { | |
| 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.selected = true; | |
| this.initHiddenTextarea(e); | |
| this.hiddenTextarea.focus(); | |
| this._updateTextarea(); | |
| this._saveEditingProps(); | |
| this._setEditingProps(); | |
| this._textBeforeEdit = this.text; | |
| this._tick(); | |
| this.fire('editing:entered'); | |
| this._fireSelectionChanged(); | |
| 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 || currentStart === currentEnd) | |
| && | |
| (currentStart === newSelectionStart || currentEnd === newSelectionStart) | |
| ) { | |
| 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.restartCursorIfNeeded(); | |
| 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 = 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; | |
| if (this.hiddenTextarea) { | |
| this.hiddenTextarea.blur && this.hiddenTextarea.blur(); | |
| 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.util.object.clone(fabric.copiedTextStyle[i], true); | |
| } | |
| 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.restartCursorIfNeeded(); | |
| if (this.canvas) { | |
| this.canvas.fire('text:changed', { target: this }); | |
| this.canvas.renderAll(); | |
| } | |
| }, | |
| restartCursorIfNeeded: function() { | |
| if (!this._currentTickState || this._currentTickState.isAborted | |
| || !this._currentTickCompleteState || this._currentTickCompleteState.isAborted | |
| ) { | |
| this.initDelayedCursor(); | |
| } | |
| }, | |
| /** | |
| * 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); | |
| 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 && currentCharStyle) { | |
| 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 { | |
| var somethingAdded = false; | |
| for (var index in this.styles[lineIndex]) { | |
| var numIndex = parseInt(index, 10); | |
| if (numIndex >= charIndex) { | |
| somethingAdded = true; | |
| newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; | |
| // remove lines from the previous line since they're on a new line now | |
| delete this.styles[lineIndex][index]; | |
| } | |
| } | |
| somethingAdded && (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]; | |
| } | |
| } | |
| } | |
| var newStyle = style || clone(currentLineStyles[charIndex - 1]); | |
| newStyle && (this.styles[lineIndex][charIndex] = newStyle); | |
| 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 or downward | |
| var clonedStyles = clone(this.styles); | |
| for (var line in clonedStyles) { | |
| var numericLine = parseInt(line, 10); | |
| if (numericLine <= lineIndex) { | |
| delete clonedStyles[numericLine]; | |
| } | |
| } | |
| 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, options.e)) { | |
| 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.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 || (options.e.button && options.e.button !== 1)) { | |
| 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) || (options.e.button && options.e.button !== 1)) { | |
| 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; | |
| } | |
| if (this.isEditing) { | |
| 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'); | |
| this.hiddenTextarea.setAttribute('autocorrect', 'off'); | |
| this.hiddenTextarea.setAttribute('autocomplete', 'off'); | |
| this.hiddenTextarea.setAttribute('spellcheck', 'false'); | |
| this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); | |
| this.hiddenTextarea.setAttribute('wrap', 'off'); | |
| var style = this._calcTextareaPosition(); | |
| this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + | |
| '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + | |
| ' line-height: 1px; paddingｰtop: ' + style.fontSize + ';'; | |
| 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; | |
| } | |
| }, | |
| /** | |
| * For functionalities on keyDown | |
| * Map a special key to a function of the instance/prototype | |
| * If you need different behaviour for ESC or TAB or arrows, you have to change | |
| * this map setting the name of a function that you build on the fabric.Itext or | |
| * your prototype. | |
| * the map change will affect all Instances unless you need for only some text Instances | |
| * in that case you have to clone this object and assign your Instance. | |
| * this.keysMap = fabric.util.object.clone(this.keysMap); | |
| * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] | |
| */ | |
| 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' | |
| }, | |
| /** | |
| * For functionalities on keyUp + ctrl || cmd | |
| */ | |
| ctrlKeysMapUp: { | |
| 67: 'copy', | |
| 88: 'cut' | |
| }, | |
| /** | |
| * For functionalities on keyDown + ctrl || cmd | |
| */ | |
| 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(); | |
| if (e.keyCode >= 33 && e.keyCode <= 40) { | |
| // if i press an arrow key just update selection | |
| this.clearContextTop(); | |
| this.renderCursorOrSelection(); | |
| } | |
| else { | |
| 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.set('dirty', true); | |
| 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 = {}); | |
| /** | |
| * 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, | |
| /** | |
| * Override standard Object class values | |
| * Textbox needs this on false | |
| */ | |
| noScaleCache: false, | |
| /** | |
| * 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.callSuper('initialize', text, options); | |
| this.setControlsVisibility(fabric.Textbox.getTextboxControlVisibility()); | |
| this.ctx = this.objectCaching ? this._cacheContext : fabric.util.createCanvasElement().getContext('2d'); | |
| // add width to this list of props that effect line wrapping. | |
| this._dimensionAffectingProps.push('width'); | |
| }, | |
| /** | |
| * 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); | |
| this.clearContextTop(); | |
| } | |
| // clear dynamicMinWidth as it will be different after we re-wrap line | |
| this.dynamicMinWidth = 0; | |
| // wrap lines | |
| this._textLines = this._splitTextIntoLines(ctx); | |
| // 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(ctx) { | |
| ctx = ctx || this.ctx; | |
| var originalAlign = this.textAlign; | |
| this._styleMap = null; | |
| ctx.save(); | |
| this._setTextStyles(ctx); | |
| this.textAlign = 'left'; | |
| var lines = this._wrapText(ctx, this.text); | |
| this.textAlign = originalAlign; | |
| 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 | |
| * @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first | |
| * @return {fabric.Textbox} instance of fabric.Textbox | |
| */ | |
| fabric.Textbox.fromObject = function(object, callback, forceAsync) { | |
| return fabric.Object._fromObject('Textbox', object, callback, forceAsync, 'text'); | |
| }; | |
| /** | |
| * 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; | |
| } | |
| } | |
| }; | |
| 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 map = this._styleMap[lineIndex]; | |
| // adjust line index | |
| lineIndex = map.line; | |
| fabric.IText.prototype.shiftLineStyles.call(this, lineIndex, offset); | |
| }, | |
| /** | |
| * 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; | |
| } | |
| })(); | |
This file has been truncated, but you can view the full file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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.7.17" }; | |
| 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( | |
| decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E") | |
| ); | |
| 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 = { }; | |
| fabric.iMatrix = [1, 0, 0, 1, 0, 0]; | |
| fabric.canvasModule = 'canvas'; | |
| /** | |
| * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine. | |
| * @since 1.7.14 | |
| * @type Number | |
| * @default | |
| */ | |
| fabric.perfLimitSizeTotal = 2097152; | |
| /** | |
| * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000 | |
| * @since 1.7.14 | |
| * @type Number | |
| * @default | |
| */ | |
| fabric.maxCacheSideLimit = 4096; | |
| /** | |
| * Lowest pixel limit for cache canvases, set at 256PX | |
| * @since 1.7.14 | |
| * @type Number | |
| * @default | |
| */ | |
| fabric.minCacheSideLimit = 256; | |
| /** | |
| * 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); | |
| } | |
| }; | |
| /** | |
| * @namespace fabric.CommonMethods | |
| */ | |
| fabric.CommonMethods = { | |
| /** | |
| * Sets object's properties from options | |
| * @param {Object} [options] Options object | |
| */ | |
| _setOptions: function(options) { | |
| for (var prop in options) { | |
| this.set(prop, options[prop]); | |
| } | |
| }, | |
| /** | |
| * @private | |
| * @param {Object} [filler] Options object | |
| * @param {String} [property] property to set the Gradient to | |
| */ | |
| _initGradient: function(filler, property) { | |
| if (filler && filler.colorStops && !(filler instanceof fabric.Gradient)) { | |
| this.set(property, new fabric.Gradient(filler)); | |
| } | |
| }, | |
| /** | |
| * @private | |
| * @param {Object} [filler] Options object | |
| * @param {String} [property] property to set the Pattern to | |
| * @param {Function} [callback] callback to invoke after pattern load | |
| */ | |
| _initPattern: function(filler, property, callback) { | |
| if (filler && filler.source && !(filler instanceof fabric.Pattern)) { | |
| this.set(property, new fabric.Pattern(filler, callback)); | |
| } | |
| else { | |
| callback && callback(); | |
| } | |
| }, | |
| /** | |
| * @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); | |
| } | |
| }, | |
| /** | |
| * @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; | |
| }, | |
| _set: function(key, value) { | |
| this[key] = value; | |
| }, | |
| /** | |
| * 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; | |
| }, | |
| /** | |
| * Basic getter | |
| * @param {String} property Property name | |
| * @return {*} value of a property | |
| */ | |
| get: function(property) { | |
| return this[property]; | |
| } | |
| }; | |
| (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, | |
| forceAsync = true; | |
| 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); | |
| klass.fromObject(o, function (obj, error) { | |
| error || (enlivenedObjects[index] = obj); | |
| reviver && reviver(o, obj, error); | |
| onLoaded(); | |
| }, forceAsync); | |
| }); | |
| }, | |
| /** | |
| * Create and wait for loading of patterns | |
| * @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. | |
| */ | |
| enlivenPatterns: function(patterns, callback) { | |
| patterns = patterns || []; | |
| function onLoaded() { | |
| if (++numLoadedPatterns === numPatterns) { | |
| callback && callback(enlivenedPatterns); | |
| } | |
| } | |
| var enlivenedPatterns = [], | |
| numLoadedPatterns = 0, | |
| numPatterns = patterns.length; | |
| if (!numPatterns) { | |
| callback && callback(enlivenedPatterns); | |
| return; | |
| } | |
| patterns.forEach(function (p, index) { | |
| if (p && p.source) { | |
| new fabric.Pattern(p, function(pattern) { | |
| enlivenedPatterns[index] = pattern; | |
| onLoaded(); | |
| }); | |
| } | |
| else { | |
| enlivenedPatterns[index] = p; | |
| 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.sourcePath = 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) { | |
| return new Function('return this.get("' + property + '")'); | |
| })(propName); | |
| } | |
| if (!proto[setterName]) { | |
| proto[setterName] = (function(property) { | |
| return 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]; | |
| } | |
| }, | |
| /** | |
| * Clear char widths cache for a font family. | |
| * @memberOf fabric.util | |
| * @param {Number} ar aspect ratio | |
| * @param {Number} maximumArea Maximum area you want to achieve | |
| * @param {Number} maximumSide biggest side allowed | |
| * @return {Object.x} Limited dimensions by X | |
| * @return {Object.y} Limited dimensions by Y | |
| */ | |
| limitDimsByArea: function(ar, maximumArea) { | |
| var roughWidth = Math.sqrt(maximumArea * ar), | |
| perfLimitSizeY = Math.floor(maximumArea / roughWidth); | |
| return { x: Math.floor(roughWidth), y: perfLimitSizeY }; | |
| }, | |
| capValue: function(min, value, max) { | |
| return Math.max(min, Math.min(value, max)); | |
| } | |
| }; | |
| })(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 js object to another | |
| * Does not clone or extend fabric.Object subclasses. | |
| * @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 = []; | |
| for (var i = 0, len = source.length; i < len; i++) { | |
| destination[i] = extend({ }, source[i], deep); | |
| } | |
| } | |
| else if (source && typeof source === 'object') { | |
| for (var property in source) { | |
| if (source.hasOwnProperty(property)) { | |
| destination[property] = extend({ }, 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 parentMethod = null, | |
| _this = this; | |
| // climb prototype chain to find method not equal to callee's method | |
| while (_this.constructor.superclass) { | |
| var superClassMethod = _this.constructor.superclass.prototype[methodName]; | |
| if (_this[methodName] !== superClassMethod) { | |
| parentMethod = superClassMethod; | |
| break; | |
| } | |
| // eslint-disable-next-line | |
| _this = _this.constructor.superclass.prototype; | |
| } | |
| if (!parentMethod) { | |
| return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); | |
| } | |
| return (arguments.length > 1) | |
| ? parentMethod.apply(this, slice.call(arguments, 1)) | |
| : parentMethod.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, options) { | |
| // since ie10 or ie9 can use addEventListener but they do not support options, i need to check | |
| element && element.addEventListener(eventName, handler, shouldUseAttachEventDetachEvent ? false : options); | |
| }; | |
| /** @ignore */ | |
| removeListener = function (element, eventName, handler, options) { | |
| element && element.removeEventListener(eventName, handler, shouldUseAttachEventDetachEvent ? false : options); | |
| }; | |
| } | |
| else if (shouldUseAttachEventDetachEvent) { | |
| /** @ignore */ | |
| addListener = function (element, eventName, handler) { | |
| if (!element) { | |
| return; | |
| } | |
| 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) { | |
| if (!element) { | |
| return; | |
| } | |
| 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) { | |
| if (!element) { | |
| return; | |
| } | |
| 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) { | |
| if (!element) { | |
| return; | |
| } | |
| 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() { | |
| function noop() { | |
| return false; | |
| } | |
| /** | |
| * 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 || noop, | |
| abort = options.abort || noop, | |
| onComplete = options.onComplete || noop, | |
| 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) { | |
| if (abort()) { | |
| onComplete(endValue, 1, 1); | |
| return; | |
| } | |
| time = ticktime || +new Date(); | |
| var currentTime = time > finish ? duration : (time - start), | |
| timePerc = currentTime / duration, | |
| current = easing(currentTime, startValue, byValue, duration), | |
| valuePerc = Math.abs((current - startValue) / byValue); | |
| onChange(current, valuePerc, timePerc); | |
| 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() { | |
| // Calculate an in-between color. Returns a "rgba()" string. | |
| // Credit: Edwin Martin <edwin@bitstorm.org> | |
| // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js | |
| function calculateColor(begin, end, pos) { | |
| var color = 'rgba(' | |
| + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' | |
| + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' | |
| + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); | |
| color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); | |
| color += ')'; | |
| return color; | |
| } | |
| /** | |
| * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. | |
| * @memberOf fabric.util | |
| * @param {String} fromColor The starting color in hex or rgb(a) format. | |
| * @param {String} toColor The starting color in hex or rgb(a) format. | |
| * @param {Number} [duration] Duration of change (in ms). | |
| * @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 {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used. | |
| */ | |
| function animateColor(fromColor, toColor, duration, options) { | |
| var startColor = new fabric.Color(fromColor).getSource(), | |
| endColor = new fabric.Color(toColor).getSource(); | |
| options = options || {}; | |
| fabric.util.animate(fabric.util.object.extend(options, { | |
| duration: duration || 500, | |
| startValue: startColor, | |
| endValue: endColor, | |
| byValue: endColor, | |
| easing: function (currentTime, startValue, byValue, duration) { | |
| var posValue = options.colorEasing | |
| ? options.colorEasing(currentTime, duration) | |
| : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); | |
| return calculateColor(startValue, byValue, posValue); | |
| } | |
| })); | |
| } | |
| fabric.util.animateColor = animateColor; | |
| })(); | |
| (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 | |
| * |
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment