diff --git a/README.md b/README.md index ca9adde9..57634b8d 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Fabric.js started as a foundation for design editor on [printio.ru](http://print 4. Optionally, you can build documentation - $ java -jar lib/jsdoc-toolkit/jsrun.jar lib/jsdoc-toolkit/app/run.js -a -t=lib/jsdoc-toolkit/templates/codeview -d=docs fabric.js src/ src/util/ + $ java -jar lib/jsdoc-toolkit/jsrun.jar lib/jsdoc-toolkit/app/run.js -a -t=lib/jsdoc-toolkit/templates/jsdoc -d=docs fabric.js src/ src/util/ ### Demos diff --git a/dist/all.js b/dist/all.js index 88c414d0..e246eedc 100644 --- a/dist/all.js +++ b/dist/all.js @@ -1736,6 +1736,13 @@ fabric.util.string = { capitalize: capitalize }; if (!Function.prototype.bind) { + /** + * Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming) + * @see Function#bind on MDN + * @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 fn = this, args = slice.call(arguments, 1); return args.length @@ -1842,13 +1849,16 @@ if (!Function.prototype.bind) { }; })(); + /** @ignore */ var getElement, setElement; (function () { var elements = { }; + /** @ignore */ getElement = function (uid) { return elements[uid]; }; + /** @ignore */ setElement = function (uid, element) { elements[uid] = element; }; @@ -2050,6 +2060,14 @@ if (!Function.prototype.bind) { })(this); (function () { + /** + * Cross-browser wrapper for setting element's style + * @method setStyle + * @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, match; if (typeof styles === 'string') { @@ -2078,6 +2096,8 @@ if (!Function.prototype.bind) { view = document.defaultView, supportsGCS = view && typeof view.getComputedStyle !== 'undefined', reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/, + + /** @ignore */ setOpacity = function (element) { return element; }; if (supportsOpacity) { @@ -2108,10 +2128,24 @@ if (!Function.prototype.bind) { fabric.util.setStyle = setStyle; })(); +/** + * Takes id and returns an element with that id (if one exists in a document) + * @method getById + * @memberOf fabric.util + * @param {String|HTMLElement} id + * @return {HTMLElement|null} + */ function getById(id) { return typeof id === 'string' ? document.getElementById(id) : id; } +/** + * Converts an array-like object (e.g. arguments or NodeList) to an array + * @method toArray + * @memberOf fabric.util + * @param {Object} arrayLike + * @return {Array} + */ function toArray(arrayLike) { var arr = [ ], i = arrayLike.length; while (i--) { @@ -2120,6 +2154,14 @@ function toArray(arrayLike) { return arr; } +/** + * Creates specified element with specified attributes + * @method makeElement + * @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 = document.createElement(tagName); for (var prop in attributes) { @@ -2136,12 +2178,28 @@ function makeElement(tagName, attributes) { return el; } +/** + * Adds class to an element + * @method addClass + * @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.className + ' ').indexOf(' ' + className + ' ') === -1) { element.className += (element.className ? ' ' : '') + className; } } +/** + * Wraps element with another element + * @method wrapElement + * @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); @@ -2153,6 +2211,14 @@ function wrapElement(element, wrapper, attributes) { return wrapper; } +/** + * Returns offset for a given element + * @method getElementOffset + * @function + * @memberOf fabric.util + * @param {HTMLElement} element Element to get offset for + * @return {Object} Object with "left" and "top" properties + */ function getElementOffset(element) { var valueT = 0, valueL = 0; do { @@ -2177,6 +2243,13 @@ function getElementOffset(element) { ? 'KhtmlUserSelect' : ''; + /** + * Makes element unselectable + * @method makeElementUnselectable + * @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; @@ -2193,8 +2266,15 @@ function getElementOffset(element) { fabric.util.makeElementUnselectable = makeElementUnselectable; })(); -(function(){ +(function() { + /** + * Inserts a script element with a given url into a document; invokes callback, when that script is finished loading + * @method getScript + * @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 = document.getElementsByTagName("head")[0], scriptEl = document.createElement('script'), @@ -2231,6 +2311,18 @@ function getElementOffset(element) { } })(); +/** + * Changes value from one to another within certain period of time, invoking callbacks as value is being changed. + * @method animate + * @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 {Function} [options.easing] Easing function + * @param {Number} [options.duration=500] Duration of change + */ function animate(options) { options || (options = { }); var start = +new Date(), @@ -2291,6 +2383,16 @@ fabric.util.animate = animate; function emptyFn() { }; + /** + * Cross-browser abstraction for sending XMLHttpRequest + * @method request + * @memberOf fabric.util + * @param {String} url URL to send XMLHttpRequest to + * @param {Object} [options] Options object + * @param {String} [options.method="GET"] + * @param {Function} options.onComplete Callback to invoke when request is completed + * @return {XMLHttpRequest} request + */ function request(url, options) { options || (options = { }); @@ -5843,6 +5945,7 @@ fabric.util.animate = animate; }, /** + * Returns (dataless) object representation of an instance * @method toDatalessObject */ toDatalessObject: function() { @@ -6943,6 +7046,7 @@ fabric.util.animate = animate; }, /** + * Returns complexity of an instance * @method complexity * @return {Number} complexity */ @@ -6971,6 +7075,7 @@ fabric.util.animate = animate; fabric.Element.ATTRIBUTE_NAMES = 'x1 y1 x2 y2 stroke stroke-width transform'.split(' '); /** + * Returns fabric.Line instance from an SVG element * @static * @method fabric.Line.fromElement * @param {SVGElement} element Element to parse @@ -6989,6 +7094,7 @@ fabric.util.animate = animate; }; /** + * Returns fabric.Line instance from an object representation * @static * @method fabric.Line.fromObject * @param {Object} object Object to create an instance from @@ -7017,7 +7123,10 @@ fabric.util.animate = animate; */ fabric.Circle = fabric.util.createClass(fabric.Object, /** @scope fabric.Circle.prototype */ { - /** @property */ + /** + * @property + * @type String + */ type: 'circle', /** @@ -8121,10 +8230,10 @@ fabric.util.animate = animate; return this.path.length; }, - set: function(prop, value) { - return this.callSuper('set', prop, value); - }, - + /** + * @private + * @method _parsePath + */ _parsePath: function() { var result = [], diff --git a/dist/all.min.js b/dist/all.min.js index d50048ed..8b711f98 100644 --- a/dist/all.min.js +++ b/dist/all.min.js @@ -166,9 +166,9 @@ Object.prototype.toString.call(a)==="[object Array]";if(this.path=e?a:a.match&&a u,x+A,y+u);e=x;n=y;break;case "C":e=c[5];n=c[6];q=c[3];s=c[4];a.bezierCurveTo(c[1]+A,c[2]+u,q+A,s+u,e+A,n+u);break;case "s":x=e+c[3];y=n+c[4];q=2*e-q;s=2*n-s;a.bezierCurveTo(q+A,s+u,e+c[1]+A,n+c[2]+u,x+A,y+u);e=x;n=y;break;case "S":x=c[3];y=c[4];q=2*e-q;s=2*n-s;a.bezierCurveTo(q+A,s+u,c[1]+A,c[2]+u,x+A,y+u);e=x;n=y;break;case "q":e+=c[3];n+=c[4];a.quadraticCurveTo(c[1]+A,c[2]+u,e+A,n+u);break;case "Q":e=c[3];n=c[4];q=c[1];s=c[2];a.quadraticCurveTo(q+A,s+u,e+A,n+u);break;case "T":x=e;y=n;e=c[1];n= c[2];q=-q+2*x;s=-s+2*y;a.quadraticCurveTo(q+A,s+u,e+A,n+u);break;case "a":break;case "A":break;case "z":case "Z":a.closePath();break}}},render:function(a,c){a.save();var e=this.transformMatrix;e&&a.transform(e[0],e[1],e[2],e[3],e[4],e[5]);c||this.transform(a);if(this.overlayFill)a.fillStyle=this.overlayFill;else if(this.fill)a.fillStyle=this.fill;if(this.stroke)a.strokeStyle=this.stroke;a.beginPath();this._render(a);this.fill&&a.fill();if(this.stroke){a.strokeStyle=this.stroke;a.lineWidth=this.strokeWidth; a.lineCap=a.lineJoin="round";a.stroke()}if(!c&&this.active){this.drawBorders(a);this.hideCorners||this.drawCorners(a)}a.restore()},toString:function(){return"#"},toObject:function(){var a=l(this.callSuper("toObject"),{path:this.path});if(this.sourcePath)a.sourcePath=this.sourcePath;if(this.transformMatrix)a.transformMatrix=this.transformMatrix;return a},toDatalessObject:function(){var a=this.toObject();if(this.sourcePath)a.path= -this.sourcePath;delete a.sourcePath;return a},complexity:function(){return this.path.length},set:function(a,c){return this.callSuper("set",a,c)},_parsePath:function(){for(var a=[],c,e,n=0,q=this.path.length;n - - - -This is a custom SVG webfont generated by Font Squirrel. -Foundry URL : http://mplus-fonts.sourceforge.jp - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/css/fonts/mplus-1m-bold-webfont.ttf b/docs/css/fonts/mplus-1m-bold-webfont.ttf deleted file mode 100644 index 0cf54cbb..00000000 Binary files a/docs/css/fonts/mplus-1m-bold-webfont.ttf and /dev/null differ diff --git a/docs/css/fonts/mplus-1m-bold-webfont.woff b/docs/css/fonts/mplus-1m-bold-webfont.woff deleted file mode 100644 index f90475d8..00000000 Binary files a/docs/css/fonts/mplus-1m-bold-webfont.woff and /dev/null differ diff --git a/docs/css/fonts/mplus-1m-regular-webfont.eot b/docs/css/fonts/mplus-1m-regular-webfont.eot deleted file mode 100644 index a53f8b54..00000000 Binary files a/docs/css/fonts/mplus-1m-regular-webfont.eot and /dev/null differ diff --git a/docs/css/fonts/mplus-1m-regular-webfont.svg b/docs/css/fonts/mplus-1m-regular-webfont.svg deleted file mode 100644 index 3c835a31..00000000 --- a/docs/css/fonts/mplus-1m-regular-webfont.svg +++ /dev/null @@ -1,134 +0,0 @@ - - - - -This is a custom SVG webfont generated by Font Squirrel. -Foundry URL : http://mplus-fonts.sourceforge.jp - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/css/fonts/mplus-1m-regular-webfont.ttf b/docs/css/fonts/mplus-1m-regular-webfont.ttf deleted file mode 100644 index 684abfd1..00000000 Binary files a/docs/css/fonts/mplus-1m-regular-webfont.ttf and /dev/null differ diff --git a/docs/css/fonts/mplus-1m-regular-webfont.woff b/docs/css/fonts/mplus-1m-regular-webfont.woff deleted file mode 100644 index 49585d82..00000000 Binary files a/docs/css/fonts/mplus-1m-regular-webfont.woff and /dev/null differ diff --git a/docs/css/handheld.css b/docs/css/handheld.css deleted file mode 100644 index 529bebb8..00000000 --- a/docs/css/handheld.css +++ /dev/null @@ -1,207 +0,0 @@ -/* - * TABLE OF CONTENTS: - * - Browser reset - * - HTML elements - * - JsDoc styling - * - Media query check - */ - - - - - - -/* - * HTML ELEMENTS - */ - -body { - padding: 1% 4% 1% 4%; -} - -/* - * HTML ELEMENTS - */ - - - - - -/* - * BEGIN JSDOC - */ - -/* Start menu */ -div.index div.menu { - position: fixed; - top: 0; - right: 0; - -moz-border-radius-bottomleft: 15px; - -webkit-border-bottom-left-radius: 15px; - -border-bottom-left-radius: 15px; - padding: 4px 5px 8px 10px; - -moz-box-shadow: 0px 0px 10px #c4c4c4; - -webkit-box-shadow: 0px 0px 10px #c4c4c4; - box-shadow: 0px 0px 10px #c4c4c4; - background-color: rgba(255, 255, 255, 0.9); -} - -div.index div.indexLinks a { - float: right; - clear: both; - font-size: 1.1em; -} - -div.index *.heading1 { - display:none; -} - -div.index ul.classList { - display:none; -} - -div.index div.fineprint { - display:none; -} - -div.indexStatic { - display: none; -} -/* End menu */ - - - -/* Start content */ -div.content *.classTitle { - margin-right: 60px; - margin-bottom: 0.8em; - font-size: 2em -} - -div.content p.description.summary { - margin-bottom: 0.2em; -} - -div.content div.props { - margin: 1.5em -2% 0 -2%; - padding: 2%; -} - -table.summaryTable { - position: relative; - left: -10px; - width: 100%; - border-collapse: collapse; - box-sizing: content-box; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - -ms-box-sizing: content-box; - -o-box-sizing: content-box; - -icab-box-sizing: content-box; - -khtml-box-sizing: content-box; -} - -table.summaryTable caption { - padding: 0 10px 10px 10px; -} - -table.summaryTable td, -table.summaryTable th { - padding: 0px 10px 10px 10px; -} -table.summaryTable tr:last-child td { - padding-bottom: 0; -} - -table.summaryTable td.attributes { - width: 35%; -} - -table.summaryTable td.nameDescription { - width: 65% -} - - - -dl.detailList { - margin-top: 0.5em; -} - -dl.detailList.nomargin + dl.detailList.nomargin { - margin-top: 0; -} - -dl.detailList dt { - display: inline; - margin-right: 5px; -} - -dl.detailList dt:before { - display: block; - content: ""; -} - -dl.detailList dd { - display: inline; -} - -dl.detailList.params dt { - display: block; -} -dl.detailList.params dd { - display: block; - padding-left: 2em; - padding-bottom: 0.4em; -} - - - - -ul.fileList li { - margin-bottom: 1.5em; -} - - - -.fixedFont.heading { - margin-bottom: 0.5em; -} - -pre.code { - margin: 10px 0 10px 0; - padding: 10px; - border: 1px solid #ccc; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; -} -/* End content */ - -/* - * END JSDOC - */ - - - - - - - -/* - * START MEDIA QUERY CHECK - */ - -.cssLoadCheck { - position: absolute; - top: -99999px; - left: -99999px; - border: 0; - width: 100px; - padding: 0; - overflow: hidden; -} - -/* - * END MEDIA QUERY CHECK - */ - diff --git a/docs/css/screen.css b/docs/css/screen.css deleted file mode 100644 index 786765a2..00000000 --- a/docs/css/screen.css +++ /dev/null @@ -1,280 +0,0 @@ -/* - * TABLE OF CONTENTS: - * - JsDoc styling - * - Media query check - */ - - - - - - -/* - * BEGIN JSDOC - */ - -/* Start menu */ -div.index { - position: fixed; - top: 0; - bottom: 0; - float: left; - width: 30%; - min-width: 100px; - max-width: 300px; - padding: 0 0 10px 0; - overflow: auto; -} - -div.index *.heading1 { - padding: 8px 0 0.4em 0; -} - -div.index div.menu { - margin: 0 15px 0 -15px; - -moz-border-radius-bottomright: 15px; - -webkit-border-bottom-right-radius: 15px; - -border-bottom-right-radius: 15px; - padding: 15px 15px 15px 30px; - -moz-box-shadow: 0px 0px 10px #c4c4c4; - -webkit-box-shadow: 0px 0px 10px #c4c4c4; - box-shadow: 0px 0px 10px #c4c4c4; - background-color: rgba(255, 255, 255, 0.5); -} - -div.index div.indexLinks { - margin-top: 13px; - position: absolute; - right: 30px; -} - -div.index div.indexLinks a { - color: #999999; - text-transform: lowercase; -} - -div.index div.indexLinks a:first-child { - margin-right: 3px; - border-right: 1px solid #999999; - padding-right: 5px; -} - -div.index ul.classList a { - line-height: 1.1em; - font-family: Consolas, "Courier New", Courier, monospace; -} - -div.index ul.classList a + a { - margin-left: 0.5em; -} - -div.index div.fineprint { - margin: 1em 0 0 15px; - color: #777; - font-size: 0.9em; -} - -div.index div.fineprint a { - color: #777; -} - -div.indexStatic { - position: static; - min-height: 1em; -} -/* End menu */ - - -/* Start content */ -div.content { - float: left; - width: 70%; - min-width: 300px; - max-width: 600px; -} -div.innerContent { - padding: 0 0 0 2.5em; -} - -div.content ul, -div.content ol { - margin-bottom: 3em; -} - -div.content *.classTitle { - position: relative; - left: -10px; - margin: -30px 0 0.5em 0; - -moz-border-radius: 15px; - -webkit-border-radius: 15px; - border-radius: 15px; - padding: 25px 15px 15px 15px; - background-color: #FFFFFF; - background-color: rgba(255, 255, 255, 0.5); - -moz-box-shadow: 0px 0px 10px #c4c4c4; - -webkit-box-shadow: 0px 0px 10px #c4c4c4; - box-shadow: 0px 0px 10px #c4c4c4; -} - -div.content p.summary { - margin-bottom: 0.5em; -} - -div.content ul.summary { - margin-bottom: 1.5em; -} - -div.content ul *.classname a, -div.content ul *.filename a { - font-family: Consolas, "Courier New", Courier, monospace; - text-decoration: none; - font-weight: bold; -} -div.content ul *.classname a:hover, -div.content ul *.filename a:hover { - text-decoration: underline; -} - -div.content div.props { - position: relative; - left: -10px; - margin-bottom: 2.5em; - padding: 10px 15px 15px 15px; - overflow: hidden; -} - -div.content div.props div.sectionTitle { - padding-bottom: 10px; -} - -div.content div.hr { - margin: 0 10px 0 0; - height: 4em; -} - - - -table.summaryTable { - position: relative; - left: -10px; - width: 100%; - border-collapse: collapse; - box-sizing: content-box; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - -ms-box-sizing: content-box; - -o-box-sizing: content-box; - -icab-box-sizing: content-box; - -khtml-box-sizing: content-box; -} - -table.summaryTable caption { - padding: 0 10px 10px 10px; -} - -table.summaryTable td, -table.summaryTable th { - padding: 0px 10px 10px 10px; -} -table.summaryTable tr:last-child td { - padding-bottom: 0; -} - -table.summaryTable td.attributes { - width: 35%; -} - -table.summaryTable td.nameDescription { - width: 65% -} - - - -dl.detailList { - margin-top: 0.5em; -} - -dl.detailList.nomargin + dl.detailList.nomargin { - margin-top: 0; -} - -dl.detailList dt { - display: inline; - margin-right: 5px; -} - -dl.detailList dt:before { - display: block; - content: ""; -} - -dl.detailList dd { - display: inline; -} - -dl.detailList.params dt { - display: block; -} -dl.detailList.params dd { - display: block; - padding-left: 2em; - padding-bottom: 0.4em; -} - - - - -ul.fileList li { - margin-bottom: 1.5em; -} - - - -.fixedFont.heading { - margin-bottom: 0.5em; -} - -pre.code { - margin: 10px 0 10px 0; - padding: 10px; - border: 1px solid #ccc; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; -} -/* End content */ - -.clear { - clear: both; - width: 100%; - min-height: 0; -} - -/* - * END JSDOC - */ - - - - - - - -/* - * START MEDIA QUERY CHECK - */ - -.cssLoadCheck { - position: absolute; - top: -99999px; - left: -99999px; - border: 0; - width: 100px; - padding: 0; - overflow: hidden; -} - -/* - * END MEDIA QUERY CHECK - */ - diff --git a/docs/files.html b/docs/files.html index 0360ec70..70f7932d 100644 --- a/docs/files.html +++ b/docs/files.html @@ -1,578 +1,628 @@ - + JsDoc Reference - File Index - - - - - - - - - + -
-
-
- Classes - Files -
- -

Classes

- + +
+
+ +
+

File Index

-
+ +
+

fabric.js

- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 +
+ + + + +
-
-
- -
-
-

File Index

+
+ +
+

src/circle.class.js

- +
+
+ +
+

src/color.class.js

+ +
+ + + + +
+
+
+ +
+

src/element.class.js

+ +
+ + + + +
+
+
+ +
+

src/ellipse.class.js

+ +
+ + + + +
+
+
+ +
+

src/group.class.js

+ +
+ + + + +
+
+
+ +
+

src/image.class.js

+ +
+ + + + +
+
+
+ +
+

src/intersection.class.js

+ +
+ + + + +
+
+
+ +
+

src/line.class.js

+ +
+ + + + +
+
+
+ +
+

src/object.class.js

+ +
+ + + + +
+
+
+ +
+

src/parser.js

+ +
+ + + + +
+
+
+ +
+

src/path.class.js

+ +
+ + + + +
+
+
+ +
+

src/path_group.class.js

+ +
+ + + + +
+
+
+ +
+

src/point.class.js

+ +
+ + + + +
+
+
+ +
+

src/polygon.class.js

+ +
+ + + + +
+
+
+ +
+

src/polyline.class.js

+ +
+ + + + +
+
+
+ +
+

src/rect.class.js

+ +
+ + + + +
+
+
+ +
+

src/scout.js

+ +
+ + + + +
+
+
+ +
+

src/text.class.js

+ +
+ + + + +
+
+
+ +
+

src/triangle.class.js

+ +
+ + + + +
+
+
+ +
+

src/util.js

+ +
+ + + + +
+
+
+ +
+

src/util/dom_event.js

+ +
+ + + + +
+
+
+ +
+

src/util/dom_misc.js

+ +
+ + + + +
+
+
+ +
+

src/util/dom_request.js

+ +
+ + + + +
+
+
+ +
+

src/util/dom_style.js

+ +
+ + + + +
+
+
+ +
+

src/util/lang_array.js

+ +
+ + + + +
+
+
+ +
+

src/util/lang_class.js

+ +
+ + + + +
+
+
+ +
+

src/util/lang_function.js

+ +
+ + + + +
+
+
+ +
+

src/util/lang_object.js

+ +
+ + + + +
+
+
+ +
+

src/util/lang_string.js

+ +
+ + + + +
+
+
+ +
+

src/util/misc.js

+ +
+ + + + +
+
+
+ + +
+
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 2d703730..f217849a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,242 +1,418 @@ - + + JsDoc Reference - Index - - - - - - - - - + -
-
-
- Classes - Files -
- -

Classes

- + - -
- - Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+
-
-
-
-

Class Index

+
+

Class Index

+ + +
+

_global_

-
+
+ +
+

Array

+ +
+
+ +
+

fabric

+ +
+
+ +
+

fabric.Circle

+ Circle +
+
+ +
+

fabric.Color

+ Color +
+
+ +
+

fabric.Element

+ fabric.Element +
+
+ + +
+ +
+

fabric.Ellipse

+ Ellipse +
+
+ +
+

fabric.Group

+ Group +
+
+ +
+

fabric.Image

+ Image +
+
+ +
+

fabric.Intersection

+ Intersection +
+
+ +
+

fabric.Line

+ Line +
+
+ +
+

fabric.Object

+ Object +
+
+ +
+

fabric.Path

+ Path +
+
+ +
+

fabric.PathGroup

+ PathGroup +
+
+ +
+

fabric.Point

+ +
+
+ +
+

fabric.Polygon

+ Polygon +
+
+ +
+

fabric.Polyline

+ Polyline +
+
+ +
+

fabric.Rect

+ Rect +
+
+ +
+

fabric.Text

+ Text +
+
+ +
+

fabric.Triangle

+ Triangle +
+
+ +
+

fabric.util

+ +
+
+ + +
+ +
+

fabric.util.object

+ fabric.util.object +
+
+ + +
+ +
+

Function

+ +
+
+ +
+

String

+ +
+
+ + +
+
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - \ No newline at end of file diff --git a/docs/javascript/wbos.csstools.mediaqueryfallback.js b/docs/javascript/wbos.csstools.mediaqueryfallback.js deleted file mode 100644 index 6caf5bf5..00000000 --- a/docs/javascript/wbos.csstools.mediaqueryfallback.js +++ /dev/null @@ -1,185 +0,0 @@ -/** - * @fileOverview Media Query FallBack - * @author Wouter Bos (www.thebrightlines.com) - * @since 1.0 - 2010-09-10 - * @version 1.0 - 2010-09-10 - */ - - - - - - -if (typeof(wbos) == "undefined") { - /** - * @namespace wbos = Wouter Bos (www.thebrightlines.com) - */ - wbos = {} -} -if (typeof(wbos.CssTools) == "undefined") { - /** - * @namespace Namespace for CSS-related functionality - */ - wbos.CssTools = {} -} - - - - -/** - * @namespace Fallback for CSS advanced media query - * @class - * @since 1.0 - 2010-09-10 - * @version 1.0 - 2010-09-10 - */ -wbos.CssTools.MediaQueryFallBack = ( function() { - var config = { - cssScreen: "/css/screen.css", - cssHandheld: "/css/handheld.css", - mobileMaxWidth: 660, - testDivClass: "cssLoadCheck", - dynamicCssLinkId: "DynCssLink", - resizeDelay: 30 - } - var noMediaQuery = false; - var delay; - var currentCssMediaType; - - // Adding events to elements in the DOM without overwriting it - function addEvent(element, newFunction, eventType) { - var oldEvent = eval("element." + eventType); - var eventContentType = eval("typeof element." + eventType) - - if ( eventContentType != 'function' ) { - eval("element." + eventType + " = newFunction") - } else { - eval("element." + eventType + " = function(e) { oldEvent(e); newFunction(e); }") - } - } - - // Get the the inner width of the browser window - function getWindowWidth() { - if (window.innerWidth) { - return window.innerWidth; - } else if (document.documentElement.clientWidth) { - return document.documentElement.clientWidth; - } else if (document.body.clientWidth) { - return document.body.clientWidth; - } else{ - return 0; - } - } - - function addCssLink(cssHref) { - var cssNode = document.createElement('link'); - var windowWidth; - cssNode.type = 'text/css'; - cssNode.rel = 'stylesheet'; - cssNode.media = 'screen, handheld, fallback'; - //cssNode.id = config.dynamicCssLinkId; - cssNode.href = cssHref; - document.getElementsByTagName("head")[0].appendChild(cssNode); - } - - - - /* Start public */ - return { - /** - * Adds link to CSS in the head if no CSS is loaded - * - * @since 1.0 - 2010-08-21 - * @version 1.0 - 2010-08-21 - * @param {String|Object} cssScreen URL to CSS file for larger screens - * @param {String|Object} cssHandheld URL to CSS file for smaller screens - * @param {Number} mobileMaxWidth Maximum width for handheld devices - * @example - * wbos.CssTools.MediaQueryFallBack.LoadCss(['screen.css', 'screen2.css'], 'mobile.css', 480) - */ - LoadCss: function(cssScreen, cssHandheld, mobileMaxWidth) { - // Set config values - if (typeof(cssScreen) != "undefined") { - config.cssScreen = cssScreen; - } - if (typeof(cssHandheld) != "undefined") { - config.cssHandheld = cssHandheld; - } - if (typeof(mobileMaxWidth) != "undefined") { - config.mobileMaxWidth = mobileMaxWidth; - } - - // Check if CSS is loaded - var cssloadCheckNode = document.createElement('div'); - cssloadCheckNode.className = config.testDivClass; - document.getElementsByTagName("body")[0].appendChild(cssloadCheckNode); - if (cssloadCheckNode.offsetWidth != 100 && noMediaQuery == false) { - noMediaQuery = true; - } - cssloadCheckNode.parentNode.removeChild(cssloadCheckNode) - - if (noMediaQuery == true) { - // Browser does not support Media Queries, so JavaScript will supply a fallback - var cssHref = ""; - - // Determines what CSS file to load - if (getWindowWidth() <= config.mobileMaxWidth) { - cssHref = config.cssHandheld; - newCssMediaType = "handheld"; - } else { - cssHref = config.cssScreen; - newCssMediaType = "screen"; - } - - // Add CSS link to of page - if (cssHref != "" && currentCssMediaType != newCssMediaType) { - var currentCssLinks = document.styleSheets - for (var i = 0; i < currentCssLinks.length; i++) { - for (var ii = 0; ii < currentCssLinks[i].media.length; ii++) { - if (typeof(currentCssLinks[i].media) == "object") { - if (currentCssLinks[i].media.item(ii) == "fallback") { - currentCssLinks[i].ownerNode.parentNode.removeChild(currentCssLinks[i].ownerNode) - i-- - break; - } - } else { - if (currentCssLinks[i].media.indexOf("fallback") >= 0) { - currentCssLinks[i].owningElement.parentNode.removeChild(currentCssLinks[i].owningElement) - i-- - break; - } - } - } - } - if (typeof(cssHref) == "object") { - for (var i = 0; i < cssHref.length; i++) { - addCssLink(cssHref[i]) - } - } else { - addCssLink(cssHref) - } - - currentCssMediaType = newCssMediaType; - } - - - // Check screen size again if user resizes window - addEvent(window, wbos.CssTools.MediaQueryFallBack.LoadCssDelayed, 'onresize') - } - }, - - /** - * Runs LoadCSS after a short delay - * - * @since 1.0 - 2010-08-21 - * @version 1.0 - 2010-08-21 - * @example - * wbos.CssTools.MediaQueryFallBack.LoadCssDelayed() - */ - LoadCssDelayed: function() { - clearTimeout(delay); - delay = setTimeout( "wbos.CssTools.MediaQueryFallBack.LoadCss()", config.resizeDelay) - } - - } - /* End public */ -})(); diff --git a/docs/symbols/Array.html b/docs/symbols/Array.html index d4ff8b2f..e5b5b5fe 100644 --- a/docs/symbols/Array.html +++ b/docs/symbols/Array.html @@ -1,4 +1,5 @@ - + @@ -6,575 +7,690 @@ JsDoc Reference - Array - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Built-In Namespace Array +

- -
+ +

+ + -

- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:00 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
-
-
- -
-
-

+ + +

+ + + + + + + + + + + + + + + + + + + + - Built-In Namespace Array - - -

+

+ + + -

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
every(fn, context) +
+
+
  +
filter(fn, context) +
+
+
  +
forEach(fn, context) +
+
+
  +
indexOf(value, from) +
+
+
  +
map(fn, context) +
+
+
  +
reduce(fn) +
+
+
  +
some(fn, context) +
+
+
+ + + + + + - - + + - + + + + +
+ Method Detail +
- - - + +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
every(fn, context) -
-
-
  -
filter(fn, context) -
-
-
  -
forEach(fn, context) -
-
-
  -
indexOf(value, from) -
-
-
  -
map(fn, context) -
-
-
  -
reduce(fn) -
-
-
  -
some(fn, context) -
-
-
-
+ every(fn, context) - - - - - - - - - - - - - - - -
-
-
- Method Detail -
- - - - -
- - - - - - - every(fn, context) -
- -
- - - -
- Defined in: lang_array.js. - - - -
- - - - -
-
Parameters:
- -
- fn - -
-
- -
- context - -
-
- -
- - - - -
- - - -
- - - - - - - filter(fn, context) -
- -
- - - -
- Defined in: lang_array.js. - - - -
- - - - -
-
Parameters:
- -
- fn - -
-
- -
- context - -
-
- -
- - - - -
- - - -
- - - - - - - forEach(fn, context) -
- -
- - - -
- Defined in: lang_array.js. - - - -
- - - - -
-
Parameters:
- -
- fn - -
-
- -
- context - -
-
- -
- - - - -
- - - -
- - - - - - - indexOf(value, from) -
- -
- - - -
- Defined in: lang_array.js. - - - -
- - - - -
-
Parameters:
- -
- value - -
-
- -
- from - -
-
- -
- - - - -
- - - -
- - - - - - - map(fn, context) -
- -
- - - -
- Defined in: lang_array.js. - - - -
- - - - -
-
Parameters:
- -
- fn - -
-
- -
- context - -
-
- -
- - - - -
- - - -
- - - - - - - reduce(fn) -
- -
- - - -
- Defined in: lang_array.js. - - - -
- - - - -
-
Parameters:
- -
- fn - -
-
- -
- - - - -
- - - -
- - - - - - - some(fn, context) -
- -
- - - -
- Defined in: lang_array.js. - - - -
- - - - -
-
Parameters:
- -
- fn - -
-
- -
- context - -
-
- -
- - - - - - -
+
+ + +
+ Defined in: lang_array.js. + + +
+ + + + +
+
Parameters:
+ +
+ fn + +
+
+ +
+ context + +
+
+ +
+ + + + + + + + +
+ +
+ + + filter(fn, context) + +
+
+ + +
+ Defined in: lang_array.js. + + +
+ + + + +
+
Parameters:
+ +
+ fn + +
+
+ +
+ context + +
+
+ +
+ + + + + + + + +
- + +
+ + + forEach(fn, context) + +
+
+ + +
+ Defined in: lang_array.js. + + +
+ + + + +
+
Parameters:
+ +
+ fn + +
+
+ +
+ context + +
+
+ +
+ + + + + + + + +
-
+ +
+ + + indexOf(value, from) + +
+
+ + +
+ Defined in: lang_array.js. + + +
+ + + + +
+
Parameters:
+ +
+ value + +
+
+ +
+ from + +
+
+ +
+ + + + + + + + +
+ + +
+ + + map(fn, context) + +
+
+ + +
+ Defined in: lang_array.js. + + +
+ + + + +
+
Parameters:
+ +
+ fn + +
+
+ +
+ context + +
+
+ +
+ + + + + + + + +
+ + +
+ + + reduce(fn) + +
+
+ + +
+ Defined in: lang_array.js. + + +
+ + + + +
+
Parameters:
+ +
+ fn + +
+
+ +
+ + + + + + + + +
+ + +
+ + + some(fn, context) + +
+
+ + +
+ Defined in: lang_array.js. + + +
+ + + + +
+
Parameters:
+ +
+ fn + +
+
+ +
+ context + +
+
+ +
+ + + + + + + + + + + + + + + +

+ - + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:46 GMT-0400 (EDT) +
diff --git a/docs/symbols/Function.html b/docs/symbols/Function.html index 99f991c6..eb8021d6 100644 --- a/docs/symbols/Function.html +++ b/docs/symbols/Function.html @@ -1,4 +1,5 @@ - + @@ -6,265 +7,386 @@ JsDoc Reference - Function - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Built-In Namespace Function +

- -
+ +

+ + -

- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
-
-
- -
-
-

+ + +

+ + + + + + + + + + + + + + + + + + + + - Built-In Namespace Function - - -

- -

- - - - - - - - - - - - -
-
Method Summary
Method AttributesMethod Name and Description
- - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
bind(thisArg) -
-
Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming)
-
-

- - - - - - - - - - - - - - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Function} - - bind(thisArg) + +   + +
bind(thisArg)
- -
- Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming) - - -
- Defined in: lang_function.js. - - - -
- - - - -
-
Parameters:
- -
- {Object} thisArg - -
-
Object to bind function to
- -
- {Any[]} ... - Optional -
-
Values to pass to a bound function
- -
- - - -
- - - - - - - - -
Returns:
- -
{Function}
- - - - - - -
See:
- -
Function#bind on MDN
- - - -
- +
Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming)
+ + + + + + + + + + + - - -
+ + + + + + + + +
+ Method Detail +
+ + +
+ + {Function} + bind(thisArg) +
+
+ Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming) + +
+ Defined in: lang_function.js. + + +
+ + + + +
+
Parameters:
+ +
+ {Object} thisArg + +
+
Object to bind function to
+ +
+ {Any[]} ... + Optional +
+
Values to pass to a bound function
+ +
+ + + + + +
+
Returns:
+ +
{Function}
+ +
+ + + +
+
See:
+ +
Function#bind on MDN
+ +
+ + + - - - -
+ + + + + +
+ - + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT) +
diff --git a/docs/symbols/String.html b/docs/symbols/String.html index 935d1c56..d03ffda3 100644 --- a/docs/symbols/String.html +++ b/docs/symbols/String.html @@ -1,4 +1,5 @@ - + @@ -6,222 +7,362 @@ JsDoc Reference - String - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Built-In Namespace String +

- -
+ +

+ + -

- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
-
-
- -
-
-

+ + +

+ + + + + + + + + + + + + + + + + + + + - Built-In Namespace String - - -

- -

- - - - - - - - - - - - -
-
Method Summary
Method AttributesMethod Name and Description
- - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
trim() -
-
Trims a string (removing whitespace from the beginning and the end)
-
-

- - - - - - - - - - - - - - - - -
-
-
- Method Detail -
- - - - -
- - - - - - - trim() + +   + +
trim()
- -
- Trims a string (removing whitespace from the beginning and the end) - - -
- Defined in: lang_string.js. - - - -
- - - - - - +
Trims a string (removing whitespace from the beginning and the end)
+ + + + + + + + + + + - - -
+ + + + + + + + +
+ Method Detail +
+ + +
+ + + trim() +
+
+ Trims a string (removing whitespace from the beginning and the end) + +
+ Defined in: lang_string.js. + + +
+ + + + + + + + + + +
+
See:
+ +
String#trim on MDN
+ +
+ + + - - - -
+ + + + + +
+ - + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT) +
diff --git a/docs/symbols/_global_.html b/docs/symbols/_global_.html index 5290caff..c011f907 100644 --- a/docs/symbols/_global_.html +++ b/docs/symbols/_global_.html @@ -1,4 +1,5 @@ - + @@ -6,259 +7,295 @@ JsDoc Reference - _global_ - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Built-In Namespace _global_ +

- -
+ +

+ + -

- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:00 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ + +

+ + + + + + + + + + + + + + + + + + + + + + + + +
-
+ -
-
-

- - Built-In Namespace _global_ -

- -

- -

- - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- fabric -
-
-
  -
- scout -
-
-
-
- - - - - - - - - - - - - - - - -
-
- -
- Field Detail -
- - - - -
- - - - - - - fabric -
- -
- - -
- Defined in: parser.js. - - - -
- - - - - -
- - - -
- - - - - - - scout -
- -
- - -
- Defined in: scout.js. - - - -
- - - - - - - -
-
- - - - - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:46 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Circle.html b/docs/symbols/fabric.Circle.html index 5d147bd7..52970c33 100644 --- a/docs/symbols/fabric.Circle.html +++ b/docs/symbols/fabric.Circle.html @@ -1,4 +1,5 @@ - + @@ -6,690 +7,719 @@ JsDoc Reference - fabric.Circle - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Circle +

+ + +

+ +
Extends + fabric.Object.
+ + + Circle + + +
Defined in: circle.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Circle() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<static>   +
+ fabric.Circle.ATTRIBUTE_NAMES +
+
List of attribute names to account for when parsing SVG element (used by `fabric.Circle.fromElement`)
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
Returns complexity of an instance
+
<static>   +
fabric.Circle.fromElement(element, options) +
+
Returns fabric.Circle instance from an SVG element
+
<static>   +
fabric.Circle.fromObject(object) +
+
Returns fabric.Circle instance from an object representation
+
  +
initialize(options) +
+
Constructor
+
  +
toObject() +
+
Returns object representation of an instance
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Circle() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:00 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Circle.ATTRIBUTE_NAMES + +
+
+ List of attribute names to account for when parsing SVG element (used by `fabric.Circle.fromElement`) + + +
+ + + + + + + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ Returns complexity of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity of this instance
+ +
+ + + + +
+ + +
<static> + + {Object} + fabric.Circle.fromElement(element, options) + +
+
+ Returns fabric.Circle instance from an SVG element + + +
+ + + + +
+
Parameters:
+ +
+ element + +
+
{SVGElement} element to parse
+ +
+ options + +
+
{Object} options object
+ +
+ + + + +
+
Throws:
+ +
+ {Error} +
+
If value of `r` attribute is missing or invalid
+ +
+ + +
+
Returns:
+ +
{Object} instance of fabric.Circle
+ +
+ + + + +
+ + +
<static> + + {Object} + fabric.Circle.fromObject(object) + +
+
+ Returns fabric.Circle instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
Object to create an instance from
+ +
+ + + + + +
+
Returns:
+ +
{Object} Instance of fabric.Circle
+ +
+ + + + +
+ + +
+ + {fabric.Circle} + initialize(options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Circle} thisArg
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} object representation of an instance
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Circle -

- -

- Circle -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Circle() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
<static>   -
- fabric.Circle.ATTRIBUTE_NAMES -
-
List of attribute names to account for when parsing SVG element (used by `fabric.Circle.fromElement`)
-
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
Returns complexity of an instance
-
<static>   -
fabric.Circle.fromElement(element, options) -
-
Returns fabric.Circle instance from an SVG element
-
<static>   -
fabric.Circle.fromObject(object) -
-
Returns fabric.Circle instance from an object representation
-
  -
initialize(options) -
-
Constructor
-
  -
toObject() -
-
Returns object representation of an instance
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Circle() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - <static> - - - - - fabric.Circle.ATTRIBUTE_NAMES -
- -
- List of attribute names to account for when parsing SVG element (used by `fabric.Circle.fromElement`) - - - -
- - - - - -
- - - -
- - - - - - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- Returns complexity of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity of this instance
- - - - - - - -
- - -
- - - -
- - <static> - - - {Object} - - fabric.Circle.fromElement(element, options) -
- -
- Returns fabric.Circle instance from an SVG element - - - - -
- - - - -
-
Parameters:
- -
- element - -
-
{SVGElement} element to parse
- -
- options - -
-
{Object} options object
- -
- - - -
- - - - - - -
Throws:
- -
- {Error} -
-
If value of `r` attribute is missing or invalid
- - - - -
Returns:
- -
{Object} instance of fabric.Circle
- - - - - - - -
- - -
- - - -
- - <static> - - - {Object} - - fabric.Circle.fromObject(object) -
- -
- Returns fabric.Circle instance from an object representation - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
Object to create an instance from
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} Instance of fabric.Circle
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Circle} - - initialize(options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Circle} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns object representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} object representation of an instance
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:46 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Color.html b/docs/symbols/fabric.Color.html index 9b9332a1..ab736076 100644 --- a/docs/symbols/fabric.Color.html +++ b/docs/symbols/fabric.Color.html @@ -1,4 +1,5 @@ - + @@ -6,1373 +7,1227 @@ JsDoc Reference - fabric.Color - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Color +

+ + +

+ + + + Color + + +
Defined in: color.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Color(color) +
+
The purpose of fabric.Color is to abstract and encapsulate common color operations; +fabric.Color is a constructor and creates instances of fabric.Color objects.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<static>   +
+ fabric.Color.reHex +
+
Regex matching color in HEX format (ex: #FF5555, 010155, aff)
+
<static>   +
+ fabric.Color.reRGBa +
+
Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgb(255, 100, 10, 0.5), rgb(1,1,1))
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
<static>   +
fabric.Color.fromHex(color) +
+
Returns new color object, when given a color in HEX format
+
<static>   +
fabric.Color.fromRgb(color) +
+
Returns new color object, when given a color in RGB format
+
<static>   +
fabric.Color.fromRgba(color) +
+
Returns new color object, when given a color in RGBA format
+
<static>   +
fabric.Color.fromSource(source) +
+
Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])
+
  +
getAlpha() +
+
Gets value of alpha channel for this color
+
  +
getSource() +
+
Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])
+
  +
overlayWith(otherColor) +
+
Overlays color with another color
+
  +
setAlpha(0-1) +
+
Sets value of alpha channel for this color
+
  +
setSource(source) +
+
Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])
+
<static>   +
fabric.Color.sourceFromHex(color) +
+
Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format
+
<static>   +
fabric.Color.sourceFromRgb(color) +
+
Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format
+
  +
toBlackWhite(threshold) +
+
Transforms color to its black and white representation
+
  +
toGrayscale() +
+
Transforms color to its grayscale representation
+
  +
toHex() +
+
Returns color represenation in HEX format
+
  +
toRgb() +
+
Returns color represenation in RGB format
+
  +
toRgba() +
+
Returns color represenation in RGBA format
+
+ + + + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Color(color) +
+ +
+ The purpose of fabric.Color is to abstract and encapsulate common color operations; +fabric.Color is a constructor and creates instances of fabric.Color objects. + +
+ + + + + +
+
Parameters:
+ +
+ {String} color + +
+
(optional) in hex or rgb(a) format
+ +
+ + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:00 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Color.reHex + +
+
+ Regex matching color in HEX format (ex: #FF5555, 010155, aff) + + +
+ + + + + + + + +
+ + +
<static> + + + fabric.Color.reRGBa + +
+
+ Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgb(255, 100, 10, 0.5), rgb(1,1,1)) + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
<static> + + {fabric.Color} + fabric.Color.fromHex(color) + +
+
+ Returns new color object, when given a color in HEX format + + +
+ + + + +
+
Parameters:
+ +
+ color + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Color}
+ +
+ + + + +
+ + +
<static> + + {fabric.Color} + fabric.Color.fromRgb(color) + +
+
+ Returns new color object, when given a color in RGB format + + +
+ + + + +
+
Parameters:
+ +
+ {String} color + +
+
ex: rgb(0-255,0-255,0-255)
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Color}
+ +
+ + + + +
+ + +
<static> + + {fabric.Color} + fabric.Color.fromRgba(color) + +
+
+ Returns new color object, when given a color in RGBA format + + +
+ + + + +
+
Parameters:
+ +
+ {String} color + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Color}
+ +
+ + + + +
+ + +
<static> + + {fabric.Color} + fabric.Color.fromSource(source) + +
+
+ Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) + + +
+ + + + +
+
Parameters:
+ +
+ source + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Color}
+ +
+ + + + +
+ + +
+ + {Number} + getAlpha() + +
+
+ Gets value of alpha channel for this color + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} 0-1
+ +
+ + + + +
+ + +
+ + {Array} + getSource() + +
+
+ Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + + +
+ + + + + + + + +
+
Returns:
+ +
{Array}
+ +
+ + + + +
+ + +
+ + {fabric.Color} + overlayWith(otherColor) + +
+
+ Overlays color with another color + + +
+ + + + +
+
Parameters:
+ +
+ {String|fabric.Color} otherColor + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Color} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Color} + setAlpha(0-1) + +
+
+ Sets value of alpha channel for this color + + +
+ + + + +
+
Parameters:
+ +
+ {Number} 0-1 + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Color} thisArg
+ +
+ + + + +
+ + +
+ + + setSource(source) + +
+
+ Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + + +
+ + + + +
+
Parameters:
+ +
+ {Array} source + +
+
+ +
+ + + + + + + + +
+ + +
<static> + + {Array} + fabric.Color.sourceFromHex(color) + +
+
+ Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format + + +
+ + + + +
+
Parameters:
+ +
+ {String} color + +
+
ex: FF5555
+ +
+ + + + + +
+
Returns:
+ +
{Array} source
+ +
+ + + + +
+ + +
<static> + + {Array} + fabric.Color.sourceFromRgb(color) + +
+
+ Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format + + +
+ + + + +
+
Parameters:
+ +
+ {String} color + +
+
ex: rgb(0-255,0-255,0-255)
+ +
+ + + + + +
+
Returns:
+ +
{Array} source
+ +
+ + + + +
+ + +
+ + {fabric.Color} + toBlackWhite(threshold) + +
+
+ Transforms color to its black and white representation + + +
+ + + + +
+
Parameters:
+ +
+ threshold + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Color} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Color} + toGrayscale() + +
+
+ Transforms color to its grayscale representation + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Color} thisArg
+ +
+ + + + +
+ + +
+ + {String} + toHex() + +
+
+ Returns color represenation in HEX format + + +
+ + + + + + + + +
+
Returns:
+ +
{String} ex: FF5555
+ +
+ + + + +
+ + +
+ + {String} + toRgb() + +
+
+ Returns color represenation in RGB format + + +
+ + + + + + + + +
+
Returns:
+ +
{String} ex: rgb(0-255,0-255,0-255)
+ +
+ + + + +
+ + +
+ + {String} + toRgba() + +
+
+ Returns color represenation in RGBA format + + +
+ + + + + + + + +
+
Returns:
+ +
{String} ex: rgba(0-255,0-255,0-255,0-1)
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Color -

- -

- Color -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Color(color) -
-
The purpose of fabric.Color is to abstract and encapsulate common color operations; -fabric.Color is a constructor and creates instances of fabric.Color objects.
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
<static>   -
- fabric.Color.reHex -
-
Regex matching color in HEX format (ex: #FF5555, 010155, aff)
-
<static>   -
- fabric.Color.reRGBa -
-
Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgb(255, 100, 10, 0.5), rgb(1,1,1))
-
-
- - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
<static>   -
fabric.Color.fromHex(color) -
-
Returns new color object, when given a color in HEX format
-
<static>   -
fabric.Color.fromRgb(color) -
-
Returns new color object, when given a color in RGB format
-
<static>   -
fabric.Color.fromRgba(color) -
-
Returns new color object, when given a color in RGBA format
-
<static>   -
fabric.Color.fromSource(source) -
-
Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])
-
  -
getAlpha() -
-
Gets value of alpha channel for this color
-
  -
getSource() -
-
Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])
-
  -
overlayWith(otherColor) -
-
Overlays color with another color
-
  -
setAlpha(0-1) -
-
Sets value of alpha channel for this color
-
  -
setSource(source) -
-
Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])
-
<static>   -
fabric.Color.sourceFromHex(color) -
-
Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format
-
<static>   -
fabric.Color.sourceFromRgb(color) -
-
Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format
-
  -
toBlackWhite(threshold) -
-
Transforms color to its black and white representation
-
  -
toGrayscale() -
-
Transforms color to its grayscale representation
-
  -
toHex() -
-
Returns color represenation in HEX format
-
  -
toRgb() -
-
Returns color represenation in RGB format
-
  -
toRgba() -
-
Returns color represenation in RGBA format
-
-
- - - - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Color(color) -
- -
- The purpose of fabric.Color is to abstract and encapsulate common color operations; -fabric.Color is a constructor and creates instances of fabric.Color objects. - -
- - - - -
-
Parameters:
- -
- {String} color - -
-
(optional) in hex or rgb(a) format
- -
- - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - <static> - - - - - fabric.Color.reHex -
- -
- Regex matching color in HEX format (ex: #FF5555, 010155, aff) - - - -
- - - - - -
- - - -
- - <static> - - - - - fabric.Color.reRGBa -
- -
- Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgb(255, 100, 10, 0.5), rgb(1,1,1)) - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - <static> - - - {fabric.Color} - - fabric.Color.fromHex(color) -
- -
- Returns new color object, when given a color in HEX format - - - - -
- - - - -
-
Parameters:
- -
- color - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Color}
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Color} - - fabric.Color.fromRgb(color) -
- -
- Returns new color object, when given a color in RGB format - - - - -
- - - - -
-
Parameters:
- -
- {String} color - -
-
ex: rgb(0-255,0-255,0-255)
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Color}
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Color} - - fabric.Color.fromRgba(color) -
- -
- Returns new color object, when given a color in RGBA format - - - - -
- - - - -
-
Parameters:
- -
- {String} color - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Color}
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Color} - - fabric.Color.fromSource(source) -
- -
- Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) - - - - -
- - - - -
-
Parameters:
- -
- source - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Color}
- - - - - - - -
- - -
- - - -
- - - - - {Number} - - getAlpha() -
- -
- Gets value of alpha channel for this color - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} 0-1
- - - - - - - -
- - -
- - - -
- - - - - {Array} - - getSource() -
- -
- Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Array}
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Color} - - overlayWith(otherColor) -
- -
- Overlays color with another color - - - - -
- - - - -
-
Parameters:
- -
- {String|fabric.Color} otherColor - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Color} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Color} - - setAlpha(0-1) -
- -
- Sets value of alpha channel for this color - - - - -
- - - - -
-
Parameters:
- -
- {Number} 0-1 - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Color} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - setSource(source) -
- -
- Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - - - - -
- - - - -
-
Parameters:
- -
- {Array} source - -
-
- -
- - - - -
- - - -
- - <static> - - - {Array} - - fabric.Color.sourceFromHex(color) -
- -
- Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format - - - - -
- - - - -
-
Parameters:
- -
- {String} color - -
-
ex: FF5555
- -
- - - -
- - - - - - - - -
Returns:
- -
{Array} source
- - - - - - - -
- - -
- - - -
- - <static> - - - {Array} - - fabric.Color.sourceFromRgb(color) -
- -
- Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format - - - - -
- - - - -
-
Parameters:
- -
- {String} color - -
-
ex: rgb(0-255,0-255,0-255)
- -
- - - -
- - - - - - - - -
Returns:
- -
{Array} source
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Color} - - toBlackWhite(threshold) -
- -
- Transforms color to its black and white representation - - - - -
- - - - -
-
Parameters:
- -
- threshold - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Color} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Color} - - toGrayscale() -
- -
- Transforms color to its grayscale representation - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Color} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toHex() -
- -
- Returns color represenation in HEX format - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} ex: FF5555
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toRgb() -
- -
- Returns color represenation in RGB format - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} ex: rgb(0-255,0-255,0-255)
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toRgba() -
- -
- Returns color represenation in RGBA format - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} ex: rgba(0-255,0-255,0-255,0-1)
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:47 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Element#cache.html b/docs/symbols/fabric.Element#cache.html index fa57d09b..9f18464a 100644 --- a/docs/symbols/fabric.Element#cache.html +++ b/docs/symbols/fabric.Element#cache.html @@ -1,4 +1,5 @@ - + @@ -6,407 +7,526 @@ JsDoc Reference - fabric.Element#cache - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Namespace fabric.Element#cache +

+ + +

+ + + + + + +
Defined in: element.class.js. + +

+ + + + + + + + + + + + + + + + + +
Namespace Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Element#cache +
+
Used for caching SVG documents (loaded via `fabric.Element#loadSVGFromURL`)
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
<static>   +
fabric.Element#cache.get(url, callback) +
+
+
<static>   +
fabric.Element#cache.has(name, callback) +
+
+
<static>   +
fabric.Element#cache.set(url, object) +
+
+
+ + + + + + + + + +
+
+ Namespace Detail +
+ +
+ fabric.Element#cache +
+ +
+ Used for caching SVG documents (loaded via `fabric.Element#loadSVGFromURL`) + +
+ + + + + + + + + + + -
-
+ + + + + + +
+ Method Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Element#cache.get(url, callback) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {String} url + +
+
+ +
+ {Function} callback + +
+
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.Element#cache.has(name, callback) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {String} name + +
+
+ +
+ {Function} callback + +
+
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.Element#cache.set(url, object) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {String} url + +
+
+ +
+ {Object} object + +
+
+ +
+ + + + + + + + + + + + + + + +
-
+ -
-
-

- - Namespace fabric .Element#cache -

- -

- -

- - - - - - - -
- - - - - - - - - - - - - - -
Namespace Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Element#cache -
-
-
-
- - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
<static>   -
fabric.Element#cache.get(url, callback) -
-
-
<static>   -
fabric.Element#cache.has(name, callback) -
-
-
<static>   -
fabric.Element#cache.set(url, object) -
-
-
-
- - - - - - - - - - -
-
- - -
- Namespace Detail -
- -
- fabric.Element#cache -
- -
- - -
- - - - - - -
-
- - - - - - - -
-
-
- Method Detail -
- - - - -
- - <static> - - - - - fabric.Element#cache.get(url, callback) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} url - -
-
- -
- {Function} callback - -
-
- -
- - - - -
- - - -
- - <static> - - - - - fabric.Element#cache.has(name, callback) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} name - -
-
- -
- {Function} callback - -
-
- -
- - - - -
- - - -
- - <static> - - - - - fabric.Element#cache.set(url, object) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} url - -
-
- -
- {Object} object - -
-
- -
- - - - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:47 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Element.html b/docs/symbols/fabric.Element.html index 1e0d0647..3ae70204 100644 --- a/docs/symbols/fabric.Element.html +++ b/docs/symbols/fabric.Element.html @@ -1,4 +1,5 @@ - + @@ -6,4567 +7,3665 @@ JsDoc Reference - fabric.Element - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Element +

+ + +

+ + + + fabric.Element + + +
Defined in: element.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Element(el, options) +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
  +
+ backgroundColor +
+
Background color of this canvas instance
+
<constant>   +
+ CANVAS_HEIGHT +
+
+
<constant>   +
+ CANVAS_WIDTH +
+
+
<static>   +
+ fabric.Element.EMPTY_JSON +
+
+
  +
+ freeDrawingColor +
+
Color of the line used in free drawing mode
+
  +
+ freeDrawingLineWidth +
+
Width of a line used in free drawing mode
+
  +
+ includeDefaultValues +
+
+
  +
+ selectionBorderColor +
+
Color of the border of selection (usually slightly darker than color of selection itself)
+
  +
+ selectionColor +
+
Color of selection
+
  +
+ selectionLineWidth +
+
Width of a line used in selection
+
  +
+ shouldCacheImages +
+
Indicates whether images loaded via `fabric.Element#loadImageFromUrl` should be cached
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
add() +
+
Adds objects to canvas, then renders canvas; +Objects should be instances of (or inherit from) fabric.Object
+
  +
bringForward(object) +
+
Moves an object one level up in stack of drawn objects
+
  +
bringToFront(object) +
+
Moves an object to the top of the stack of drawn objects
+
  +
calcOffset() +
+
Calculates canvas element offset relative to the document +This method is also attached as "resize" event handler of window
+
  +
centerObjectH(object) +
+
Centers object horizontally.
+
  +
centerObjectV(object) +
+
Centers object vertically.
+
  +
clear() +
+
Clears all contexts (background, main, top) of an instance
+
  +
clearContext(context) +
+
Clears specified context of canvas element
+
  +
clone(callback) +
+
Clones canvas instance
+
  +
complexity() +
+
Returns number representation of an instance complexity
+
  +
containsPoint(e, target) +
+
Applies one implementation of 'point inside polygon' algorithm
+
  +
deactivateAll() +
+
Deactivates all objects by calling their setActive(false)
+
  +
deactivateAllWithDispatch() +
+
Deactivates all objects and dispatches appropriate events
+
  +
dispose() +
+
Clears a canvas element and removes all event handlers.
+
  +
findTarget(e, skipGroup) +
+
Method that determines what object we are clicking on
+
  +
fxCenterObjectH(object, callbacks) +
+
Centers object horizontally with animation.
+
  +
fxCenterObjectV(object, callbacks) +
+
Centers object vertically with animation.
+
  +
fxRemove(object, callback) +
+
Same as `fabric.Element#remove` but animated
+
  +
fxStraightenObject(object) +
+
Same as `fabric.Element#straightenObject`, but animated
+
  +
getActiveGroup() +
+
Returns currently active group
+
  +
getActiveObject() +
+
Returns currently active object
+
  +
getCenter() +
+
Returns coordinates of a center of canvas.
+
  +
getContext() +
+
Returns topmost canvas context
+
  +
getElement() +
+
Returns <canvas> element corresponding to this instance
+
  +
getHeight() +
+
Returns canvas height
+
  +
getObjects() +
+
Returns an array of objects this instance has
+
  +
getPointer(e) +
+
Returns pointer coordinates relative to canvas.
+
  +
getWidth() +
+
Returns canvas width
+
  +
insertAt(object, index) +
+
Inserts an object to canvas at specified index and renders canvas.
+
  +
isEmpty() +
+
Returns true if canvas contains no objects
+
  +
item(index) +
+
Returns object at specified index
+
  +
loadFromDatalessJSON(json, callback) +
+
Populates canvas with data from the specified dataless JSON +JSON format must conform to the one of `fabric.Element#toDatalessJSON`
+
  +
loadFromJSON(json, callback) +
+
Populates canvas with data from the specified JSON +JSON format must conform to the one of `fabric.Element#toJSON`
+
  +
loadImageFromURL(url, callback) +
+
Loads an image from URL, creates an instance of fabric.Image and passes it to a callback
+
  +
loadSVGFromURL(url, callback) +
+
Takes url corresponding to an SVG document, and parses it to a set of objects
+
  +
onBeforeScaleRotate(target) +
+
Callback; invoked right before object is about to be scaled/rotated
+
  +
onFpsUpdate(fps) +
+
Callback; invoked on every redraw of canvas and is being passed a number indicating current fps
+
  +
remove(object) +
+
Removes an object from canvas and returns it
+
  +
removeActiveGroup() +
+
Removes currently active group
+
  +
removeActiveObject() +
+
Removes currently active object
+
  +
renderAll(allOnTop) +
+
Renders both the top canvas and the secondary container canvas.
+
  +
renderTop() +
+
Method to render only the top canvas.
+
  +
sendBackwards(object) +
+
Moves an object one level down in stack of drawn objects
+
  +
sendToBack(object) +
+
Moves an object to the bottom of the stack of drawn objects
+
  +
setActiveGroup(group) +
+
Sets active group to a speicified one
+
  +
setActiveObject(object) +
+
Sets given object as active
+
  +
setDimensions(dimensions) +
+
Sets dimensions (width, height) of this canvas instance
+
  +
setHeight(height) +
+
Sets height of this canvas instance
+
  +
setOverlayImage(url, callback) +
+
Sets overlay image for this canvas
+
  +
setWidth(width) +
+
Sets width of this canvas instance
+
  +
straightenObject(object) +
+
Straightens object, then rerenders canvas
+
<static>   +
fabric.Element.supports(methodName) +
+
Provides a way to check support of some of the canvas methods +(either those of HTMLCanvasElement itself, or rendering context)
+
  +
toDatalessJSON() +
+
Returs dataless JSON representation of canvas
+
  +
toDatalessObject() +
+
Returns dataless object representation of canvas
+
  +
toDataURL(format) +
+
Exports canvas element to a dataurl image.
+
  +
toDataURLWithMultiplier(format, multiplier) +
+
Exports canvas element to a dataurl image (allowing to change image size via multiplier).
+
<static>   +
fabric.Element.toGrayscale(canvasEl) +
+
Takes <canvas> element and transforms its data in such way that it becomes grayscale
+
  +
toJSON() +
+
Returs JSON representation of canvas
+
  +
toObject() +
+
Returns object representation of canvas
+
  +
toString() +
+
Returns a string representation of an instance
+
+ + + + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Element(el, options) +
+ +
+ + +
+ + + + + +
+
Parameters:
+ +
+ {HTMLElement | String} el + +
+
<canvas> element to initialize instance on
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:00 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
-
-
- -
-
-

+ +
+ + {String} + backgroundColor - Class fabric .Element -

- -

- fabric.Element -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Element(el, options) -
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
<static>   -
- fabric.Element.ATTRIBUTE_NAMES -
-
-
  -
- backgroundColor -
-
-
<constant>   -
- CANVAS_HEIGHT -
-
-
<constant>   -
- CANVAS_WIDTH -
-
-
<static>   -
- fabric.Element.EMPTY_JSON -
-
-
  -
- freeDrawingColor -
-
-
  -
- freeDrawingLineWidth -
-
-
  -
- includeDefaultValues -
-
-
  -
- selectionBorderColor -
-
-
  -
- selectionColor -
-
-
  -
- selectionLineWidth -
-
-
  -
- shouldCacheImages -
-
-
-
- - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
add() -
-
Adds objects to canvas, then renders canvas; -Objects should be instances of (or inherit from) fabric.Object
-
  -
bringForward(object) -
-
Moves an object one level up in stack of drawn objects
-
  -
bringToFront(object) -
-
Moves an object to the top of the stack of drawn objects
-
  -
calcOffset() -
-
Calculates canvas element offset relative to the document -This method is also attached as "resize" event handler of window
-
  -
centerObjectH(object) -
-
Centers object horizontally.
-
  -
centerObjectV(object) -
-
Centers object vertically.
-
  -
clear() -
-
Clears all contexts (background, main, top) of an instance
-
  -
clearContext(context) -
-
Clears specified context of canvas element
-
  -
clone(callback) -
-
Clones canvas instance
-
  -
complexity() -
-
Returns number representation of an instance complexity
-
  -
containsPoint(e, target) -
-
Applies one implementation of 'point inside polygon' algorithm
-
  -
deactivateAll() -
-
Deactivates all objects by calling their setActive(false)
-
  -
deactivateAllWithDispatch() -
-
Deactivates all objects and dispatches appropriate events
-
  -
dispose() -
-
Clears a canvas element and removes all event handlers.
-
  -
findTarget(e, skipGroup) -
-
Method that determines what object we are clicking on
-
  -
fxCenterObjectH(object, callbacks) -
-
Centers object horizontally with animation.
-
  -
fxCenterObjectV(object, callbacks) -
-
Centers object vertically with animation.
-
  -
fxRemove(object, callback) -
-
Same as `fabric.Element#remove` but animated
-
  -
fxStraightenObject(object) -
-
Same as `fabric.Element#straightenObject`, but animated
-
  -
getActiveGroup() -
-
Returns currently active group
-
  -
getActiveObject() -
-
Returns currently active object
-
  -
getCenter() -
-
Returns coordinates of a center of canvas.
-
  -
getContext() -
-
Returns topmost canvas context
-
  -
getElement() -
-
Returns <canvas> element corresponding to this instance
-
  -
getHeight() -
-
Returns canvas height
-
  -
getObjects() -
-
Returns an array of objects this instance has
-
  -
getPointer(e) -
-
Returns pointer coordinates relative to canvas.
-
  -
getWidth() -
-
Returns canvas width
-
  -
insertAt(object, index) -
-
Inserts an object to canvas at specified index and renders canvas.
-
  -
isEmpty() -
-
Returns true if canvas contains no objects
-
  -
item(index) -
-
Returns object at specified index
-
  -
loadFromDatalessJSON(json, callback) -
-
Populates canvas with data from the specified dataless JSON -JSON format must conform to the one of `fabric.Element#toDatalessJSON`
-
  -
loadFromJSON(json, callback) -
-
Populates canvas with data from the specified JSON -JSON format must conform to the one of `fabric.Element#toJSON`
-
  -
loadImageFromURL(url, callback) -
-
Loads an image from URL
-
  -
loadSVGFromURL(url, callback) -
-
Takes url corresponding to an SVG document, and parses it to a set of objects
-
  -
onBeforeScaleRotate(target) -
-
Callback; invoked right before object is about to be scaled/rotated
-
  -
onFpsUpdate(fps) -
-
Callback; invoked on every redraw of canvas and is being passed a number indicating current fps
-
  -
remove(object) -
-
Removes an object from canvas and returns it
-
  -
removeActiveGroup() -
-
Removes currently active group
-
  -
removeActiveObject() -
-
Removes currently active object
-
  -
renderAll(allOnTop) -
-
Renders both the top canvas and the secondary container canvas.
-
  -
renderTop() -
-
Method to render only the top canvas.
-
  -
sendBackwards(object) -
-
Moves an object one level down in stack of drawn objects
-
  -
sendToBack(object) -
-
Moves an object to the bottom of the stack of drawn objects
-
  -
setActiveGroup(group) -
-
Sets active group to a speicified one
-
  -
setActiveObject(object) -
-
Sets given object as active
-
  -
setDimensions(dimensions) -
-
Sets dimensions (width, height) of this canvas instance
-
  -
setHeight(height) -
-
Sets height of this canvas instance
-
  -
setOverlayImage(url, callback) -
-
Sets overlay image for this canvas
-
  -
setWidth(width) -
-
Sets width of this canvas instance
-
  -
straightenObject(object) -
-
Straightens object, then rerenders canvas
-
<static>   -
fabric.Element.supports(methodName) -
-
Provides a way to check support of some of the canvas methods -(either those of HTMLCanvasElement itself, or rendering context)
-
  -
toDatalessJSON() -
-
Returs dataless JSON representation of canvas
-
  -
toDatalessObject() -
-
Returns dataless object representation of canvas
-
  -
toDataURL(format) -
-
Exports canvas element to a dataurl image.
-
  -
toDataURLWithMultiplier(format, multiplier) -
-
Exports canvas element to a dataurl image (allowing to change image size via multiplier).
-
<static>   -
fabric.Element.toGrayscale(canvasEl) -
-
Takes <canvas> element and transforms its data in such way that it becomes grayscale
-
  -
toJSON() -
-
Returs JSON representation of canvas
-
  -
toObject() -
-
Returns object representation of canvas
-
  -
toString() -
-
Returns a string representation of an instance
-
-
- - - - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Element(el, options) -
- -
- - -
- - +
+ Background color of this canvas instance + - -
-
Parameters:
- -
- {HTMLElement | String} el - -
-
<canvas> element to initialize instance on
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
+ + + + + + + + +
- - - -
-
- -
- Field Detail -
- - - - -
- - <static> - - - - - fabric.Element.ATTRIBUTE_NAMES -
- -
- - -
- Defined in: line.class.js. - - - -
- - - - -
- - - - -
See:
- -
http://www.w3.org/TR/SVG/shapes.html#LineElement
- - - -
- - -
- - - -
- - - - - {String} - - backgroundColor -
- -
- - - - -
- - - - - -
- - - -
- - <constant> - - - {Number} - - CANVAS_HEIGHT -
- -
- - - - -
- - - - - -
- - - -
- - <constant> - - - {Number} - - CANVAS_WIDTH -
- -
- - - - -
- - - - - -
- - - -
- - <static> - - - {String} - - fabric.Element.EMPTY_JSON -
- -
- - - - -
- - - - - -
- - - -
- - - - - {String} - - freeDrawingColor -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Number} - - freeDrawingLineWidth -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Boolean} - - includeDefaultValues -
- -
- - - - -
- - - - - -
- - - -
- - - - - {String} - - selectionBorderColor -
- -
- - - - -
- - - - - -
- - - -
- - - - - {String} - - selectionColor -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Number} - - selectionLineWidth -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Boolean} - - shouldCacheImages -
- -
- - - - -
- - - - - - - -
+ +
<constant> + + {Number} + CANVAS_HEIGHT +
- +
+ + + +
+ + - + + + + + +
-
-
-
- Method Detail -
- - - - -
- - - - - {fabric.Element} - - add() -
- -
- Adds objects to canvas, then renders canvas; + +
<constant> + + {Number} + CANVAS_WIDTH + +
+
+ + + +
+ + + + + + + + +
+ + +
<static> + + {String} + fabric.Element.EMPTY_JSON + +
+
+ + + +
+ + + + + + + + +
+ + +
+ + {String} + freeDrawingColor + +
+
+ Color of the line used in free drawing mode + + +
+ + + + + + + + +
+ + +
+ + {Number} + freeDrawingLineWidth + +
+
+ Width of a line used in free drawing mode + + +
+ + + + + + + + +
+ + +
+ + {Boolean} + includeDefaultValues + +
+
+ + + +
+ + + + + + + + +
+ + +
+ + {String} + selectionBorderColor + +
+
+ Color of the border of selection (usually slightly darker than color of selection itself) + + +
+ + + + + + + + +
+ + +
+ + {String} + selectionColor + +
+
+ Color of selection + + +
+ + + + + + + + +
+ + +
+ + {Number} + selectionLineWidth + +
+
+ Width of a line used in selection + + +
+ + + + + + + + +
+ + +
+ + {Boolean} + shouldCacheImages + +
+
+ Indicates whether images loaded via `fabric.Element#loadImageFromUrl` should be cached + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {fabric.Element} + add() + +
+
+ Adds objects to canvas, then renders canvas; Objects should be instances of (or inherit from) fabric.Object - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - bringForward(object) -
- -
- Moves an object one level up in stack of drawn objects - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{fabric.Object} Object to send
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - bringToFront(object) -
- -
- Moves an object to the top of the stack of drawn objects - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{fabric.Object} Object to send
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - calcOffset() -
- -
- Calculates canvas element offset relative to the document -This method is also attached as "resize" event handler of window - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} instance
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - centerObjectH(object) -
- -
- Centers object horizontally. - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Object} object - -
-
Object to center
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - centerObjectV(object) -
- -
- Centers object vertically. - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Object} object - -
-
Object to center
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - clear() -
- -
- Clears all contexts (background, main, top) of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - clearContext(context) -
- -
- Clears specified context of canvas element - - - - -
- - - - -
-
Parameters:
- -
- context - -
-
{Object} ctx context to clear
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - clone(callback) -
- -
- Clones canvas instance - - - - -
- - - - -
-
Parameters:
- -
- {Object} callback - Optional -
-
Expects `onBeforeClone` and `onAfterClone` functions
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} Clone of this instance
- - - - - - - -
- - -
- - - -
- - - - - {Number} - - complexity() -
- -
- Returns number representation of an instance complexity - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- - -
- - - -
- - - - - {Boolean} - - containsPoint(e, target) -
- -
- Applies one implementation of 'point inside polygon' algorithm - - - - -
- - - - -
-
Parameters:
- -
- e - -
-
{ Event } event object
- -
- target - -
-
{ fabric.Object } object to test against
- -
- - - -
- - - - - - - - -
Returns:
- -
{Boolean} true if point contains within area of given object
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - deactivateAll() -
- -
- Deactivates all objects by calling their setActive(false) - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - deactivateAllWithDispatch() -
- -
- Deactivates all objects and dispatches appropriate events - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - dispose() -
- -
- Clears a canvas element and removes all event handlers. - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - findTarget(e, skipGroup) -
- -
- Method that determines what object we are clicking on - - - - -
- - - - -
-
Parameters:
- -
- {Event} e - -
-
mouse event
- -
- {Boolean} skipGroup - -
-
when true, group is skipped and only objects are traversed through
- -
- - - - -
- - - -
- - - - - {fabric.Element} - - fxCenterObjectH(object, callbacks) -
- -
- Centers object horizontally with animation. - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Object} object - -
-
Object to center
- -
- {Object} callbacks - Optional -
-
Callbacks object with optional "onComplete" and/or "onChange" properties
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - fxCenterObjectV(object, callbacks) -
- -
- Centers object vertically with animation. - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Object} object - -
-
Object to center
- -
- {Object} callbacks - Optional -
-
Callbacks object with optional "onComplete" and/or "onChange" properties
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - fxRemove(object, callback) -
- -
- Same as `fabric.Element#remove` but animated - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Object} object - -
-
Object to remove
- -
- {Function} callback - -
-
Callback, invoked on effect completion
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - fxStraightenObject(object) -
- -
- Same as `fabric.Element#straightenObject`, but animated - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Object} object - -
-
Object to straighten
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Group} - - getActiveGroup() -
- -
- Returns currently active group - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} Current group
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - getActiveObject() -
- -
- Returns currently active object - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} active object
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - getCenter() -
- -
- Returns coordinates of a center of canvas. -Returned value is an object with top and left properties - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} object with "top" and "left" number values
- - - - - - - -
- - -
- - - -
- - - - - {CanvasRenderingContext2D} - - getContext() -
- -
- Returns topmost canvas context - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{CanvasRenderingContext2D}
- - - - - - - -
- - -
- - - -
- - - - - {HTMLCanvasElement} - - getElement() -
- -
- Returns <canvas> element corresponding to this instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{HTMLCanvasElement}
- - - - - - - -
- - -
- - - -
- - - - - {Number} - - getHeight() -
- -
- Returns canvas height - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number}
- - - - - - - -
- - -
- - - -
- - - - - {Array} - - getObjects() -
- -
- Returns an array of objects this instance has - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Array}
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - getPointer(e) -
- -
- Returns pointer coordinates relative to canvas. - - - - -
- - - - -
-
Parameters:
- -
- e - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} object with "x" and "y" number values
- - - - - - - -
- - -
- - - -
- - - - - {Number} - - getWidth() -
- -
- Returns canvas width - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number}
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - insertAt(object, index) -
- -
- Inserts an object to canvas at specified index and renders canvas. -An object should be an instance of (or inherit from) fabric.Object - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{Object} Object to insert
- -
- index - -
-
{Number} index to insert object at
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} instance
- - - - - - - -
- - -
- - - -
- - - - - {Boolean} - - isEmpty() -
- -
- Returns true if canvas contains no objects - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Boolean} true if canvas is empty
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - item(index) -
- -
- Returns object at specified index - - - - -
- - - - -
-
Parameters:
- -
- {Number} index - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object}
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - loadFromDatalessJSON(json, callback) -
- -
- Populates canvas with data from the specified dataless JSON -JSON format must conform to the one of `fabric.Element#toDatalessJSON` - - - - -
- - - - -
-
Parameters:
- -
- {String} json - -
-
JSON string
- -
- {Function} callback - -
-
Callback, invoked when json is parsed - and corresponding objects (e.g: fabric.Image) - are initialized
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} instance
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - loadFromJSON(json, callback) -
- -
- Populates canvas with data from the specified JSON -JSON format must conform to the one of `fabric.Element#toJSON` - - - - -
- - - - -
-
Parameters:
- -
- {String} json - -
-
JSON string
- -
- {Function} callback - -
-
Callback, invoked when json is parsed - and corresponding objects (e.g: fabric.Image) - are initialized
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} instance
- - - - - - - -
- - -
- - - -
- - - - - - - loadImageFromURL(url, callback) -
- -
- Loads an image from URL - - - - -
- - - - -
-
Parameters:
- -
- url - -
-
{String} url of image to load
- -
- callback - -
-
{Function} calback, invoked when image is loaded
- -
- - - - -
- - - -
- - - - - - - loadSVGFromURL(url, callback) -
- -
- Takes url corresponding to an SVG document, and parses it to a set of objects - - - - -
- - - - -
-
Parameters:
- -
- {String} url - -
-
- -
- {Function} callback - -
-
- -
- - - - -
- - - -
- - - - - - - onBeforeScaleRotate(target) -
- -
- Callback; invoked right before object is about to be scaled/rotated - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Object} target - -
-
Object that's about to be scaled/rotated
- -
- - - - -
- - - -
- - - - - - - onFpsUpdate(fps) -
- -
- Callback; invoked on every redraw of canvas and is being passed a number indicating current fps - - - - -
- - - - -
-
Parameters:
- -
- {Number} fps - -
-
- -
- - - - -
- - - -
- - - - - {Object} - - remove(object) -
- -
- Removes an object from canvas and returns it - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{Object} Object to remove
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} removed object
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - removeActiveGroup() -
- -
- Removes currently active group - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - removeActiveObject() -
- -
- Removes currently active object - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - renderAll(allOnTop) -
- -
- Renders both the top canvas and the secondary container canvas. - - - - -
- - - - -
-
Parameters:
- -
- allOnTop - -
-
{Boolean} optional Whether we want to force all images to be rendered on the top canvas
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} instance
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - renderTop() -
- -
- Method to render only the top canvas. -Also used to render the group selection box. - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - sendBackwards(object) -
- -
- Moves an object one level down in stack of drawn objects - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{fabric.Object} Object to send
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - sendToBack(object) -
- -
- Moves an object to the bottom of the stack of drawn objects - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{fabric.Object} Object to send to back
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - setActiveGroup(group) -
- -
- Sets active group to a speicified one - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Group} group - -
-
Group to set as a current one
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - setActiveObject(object) -
- -
- Sets given object as active - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{fabric.Object} Object to set as an active one
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - setDimensions(dimensions) -
- -
- Sets dimensions (width, height) of this canvas instance - - - - -
- - - - -
-
Parameters:
- -
- {Object} dimensions - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - setHeight(height) -
- -
- Sets height of this canvas instance - - - - -
- - - - -
-
Parameters:
- -
- {Number} height - -
-
value to set height to
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} instance
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - setOverlayImage(url, callback) -
- -
- Sets overlay image for this canvas - - - - -
- - - - -
-
Parameters:
- -
- {String} url - -
-
url of an image to set background to
- -
- {Function} callback - -
-
callback to invoke when image is loaded and set as an overlay one
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - setWidth(width) -
- -
- Sets width of this canvas instance - - - - -
- - - - -
-
Parameters:
- -
- {Number} width - -
-
value to set width to
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} instance
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Element} - - straightenObject(object) -
- -
- Straightens object, then rerenders canvas - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Object} object - -
-
Object to straighten
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Element} thisArg
- - - - - - - -
- - -
- - - -
- - <static> - - - {Boolean | null} - - fabric.Element.supports(methodName) -
- -
- Provides a way to check support of some of the canvas methods -(either those of HTMLCanvasElement itself, or rendering context) - - - - -
- - - - -
-
Parameters:
- -
- methodName - -
-
{String} Method to check support for; - Could be one of "getImageData" or "toDataURL"
- -
- - - -
- - - - - - - - -
Returns:
- -
{Boolean | null} `true` if method is supported (or at least exists), - `null` if canvas element or context can not be initialized
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toDatalessJSON() -
- -
- Returs dataless JSON representation of canvas - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} json string
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toDatalessObject() -
- -
- Returns dataless object representation of canvas - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object}
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toDataURL(format) -
- -
- Exports canvas element to a dataurl image. - - - - -
- - - - -
-
Parameters:
- -
- {String} format - -
-
the format of the output image. Either "jpeg" or "png".
- -
- - - -
- - - - - - - - -
Returns:
- -
{String}
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toDataURLWithMultiplier(format, multiplier) -
- -
- Exports canvas element to a dataurl image (allowing to change image size via multiplier). - - - - -
- - - - -
-
Parameters:
- -
- {String} format - -
-
(png|jpeg)
- -
- {Number} multiplier - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{String}
- - - - - - - -
- - -
- - - -
- - <static> - - - - - fabric.Element.toGrayscale(canvasEl) -
- -
- Takes <canvas> element and transforms its data in such way that it becomes grayscale - - - - -
- - - - -
-
Parameters:
- -
- {HTMLCanvasElement} canvasEl - -
-
- -
- - - - -
- - - -
- - - - - {String} - - toJSON() -
- -
- Returs JSON representation of canvas - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} json string
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns object representation of canvas - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object}
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toString() -
- -
- Returns a string representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} string representation of an instance
- - - - - - - -
- - - - -
+ +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ +
+ + {fabric.Element} + bringForward(object) + +
+
+ Moves an object one level up in stack of drawn objects + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{fabric.Object} Object to send
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
- + +
+ + {fabric.Element} + bringToFront(object) + +
+
+ Moves an object to the top of the stack of drawn objects + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{fabric.Object} Object to send
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
-
+ +
+ + {fabric.Element} + calcOffset() + +
+
+ Calculates canvas element offset relative to the document +This method is also attached as "resize" event handler of window + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} instance
+ +
+ + + + +
+ + +
+ + {fabric.Element} + centerObjectH(object) + +
+
+ Centers object horizontally. + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Object} object + +
+
Object to center
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + centerObjectV(object) + +
+
+ Centers object vertically. + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Object} object + +
+
Object to center
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + clear() + +
+
+ Clears all contexts (background, main, top) of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + clearContext(context) + +
+
+ Clears specified context of canvas element + + +
+ + + + +
+
Parameters:
+ +
+ context + +
+
{Object} ctx context to clear
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + clone(callback) + +
+
+ Clones canvas instance + + +
+ + + + +
+
Parameters:
+ +
+ {Object} callback + Optional +
+
Expects `onBeforeClone` and `onAfterClone` functions
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} Clone of this instance
+ +
+ + + + +
+ + +
+ + {Number} + complexity() + +
+
+ Returns number representation of an instance complexity + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity
+ +
+ + + + +
+ + +
+ + {Boolean} + containsPoint(e, target) + +
+
+ Applies one implementation of 'point inside polygon' algorithm + + +
+ + + + +
+
Parameters:
+ +
+ e + +
+
{ Event } event object
+ +
+ target + +
+
{ fabric.Object } object to test against
+ +
+ + + + + +
+
Returns:
+ +
{Boolean} true if point contains within area of given object
+ +
+ + + + +
+ + +
+ + {fabric.Element} + deactivateAll() + +
+
+ Deactivates all objects by calling their setActive(false) + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + deactivateAllWithDispatch() + +
+
+ Deactivates all objects and dispatches appropriate events + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + dispose() + +
+
+ Clears a canvas element and removes all event handlers. + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + + findTarget(e, skipGroup) + +
+
+ Method that determines what object we are clicking on + + +
+ + + + +
+
Parameters:
+ +
+ {Event} e + +
+
mouse event
+ +
+ {Boolean} skipGroup + +
+
when true, group is skipped and only objects are traversed through
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Element} + fxCenterObjectH(object, callbacks) + +
+
+ Centers object horizontally with animation. + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Object} object + +
+
Object to center
+ +
+ {Object} callbacks + Optional +
+
Callbacks object with optional "onComplete" and/or "onChange" properties
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + fxCenterObjectV(object, callbacks) + +
+
+ Centers object vertically with animation. + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Object} object + +
+
Object to center
+ +
+ {Object} callbacks + Optional +
+
Callbacks object with optional "onComplete" and/or "onChange" properties
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + fxRemove(object, callback) + +
+
+ Same as `fabric.Element#remove` but animated + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Object} object + +
+
Object to remove
+ +
+ {Function} callback + +
+
Callback, invoked on effect completion
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + fxStraightenObject(object) + +
+
+ Same as `fabric.Element#straightenObject`, but animated + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Object} object + +
+
Object to straighten
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Group} + getActiveGroup() + +
+
+ Returns currently active group + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Group} Current group
+ +
+ + + + +
+ + +
+ + {fabric.Object} + getActiveObject() + +
+
+ Returns currently active object + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Object} active object
+ +
+ + + + +
+ + +
+ + {Object} + getCenter() + +
+
+ Returns coordinates of a center of canvas. +Returned value is an object with top and left properties + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} object with "top" and "left" number values
+ +
+ + + + +
+ + +
+ + {CanvasRenderingContext2D} + getContext() + +
+
+ Returns topmost canvas context + + +
+ + + + + + + + +
+
Returns:
+ +
{CanvasRenderingContext2D}
+ +
+ + + + +
+ + +
+ + {HTMLCanvasElement} + getElement() + +
+
+ Returns <canvas> element corresponding to this instance + + +
+ + + + + + + + +
+
Returns:
+ +
{HTMLCanvasElement}
+ +
+ + + + +
+ + +
+ + {Number} + getHeight() + +
+
+ Returns canvas height + + +
+ + + + + + + + +
+
Returns:
+ +
{Number}
+ +
+ + + + +
+ + +
+ + {Array} + getObjects() + +
+
+ Returns an array of objects this instance has + + +
+ + + + + + + + +
+
Returns:
+ +
{Array}
+ +
+ + + + +
+ + +
+ + {Object} + getPointer(e) + +
+
+ Returns pointer coordinates relative to canvas. + + +
+ + + + +
+
Parameters:
+ +
+ e + +
+
+ +
+ + + + + +
+
Returns:
+ +
{Object} object with "x" and "y" number values
+ +
+ + + + +
+ + +
+ + {Number} + getWidth() + +
+
+ Returns canvas width + + +
+ + + + + + + + +
+
Returns:
+ +
{Number}
+ +
+ + + + +
+ + +
+ + {fabric.Element} + insertAt(object, index) + +
+
+ Inserts an object to canvas at specified index and renders canvas. +An object should be an instance of (or inherit from) fabric.Object + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{Object} Object to insert
+ +
+ index + +
+
{Number} index to insert object at
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} instance
+ +
+ + + + +
+ + +
+ + {Boolean} + isEmpty() + +
+
+ Returns true if canvas contains no objects + + +
+ + + + + + + + +
+
Returns:
+ +
{Boolean} true if canvas is empty
+ +
+ + + + +
+ + +
+ + {fabric.Object} + item(index) + +
+
+ Returns object at specified index + + +
+ + + + +
+
Parameters:
+ +
+ {Number} index + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object}
+ +
+ + + + +
+ + +
+ + {fabric.Element} + loadFromDatalessJSON(json, callback) + +
+
+ Populates canvas with data from the specified dataless JSON +JSON format must conform to the one of `fabric.Element#toDatalessJSON` + + +
+ + + + +
+
Parameters:
+ +
+ {String} json + +
+
JSON string
+ +
+ {Function} callback + +
+
Callback, invoked when json is parsed + and corresponding objects (e.g: fabric.Image) + are initialized
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} instance
+ +
+ + + + +
+ + +
+ + {fabric.Element} + loadFromJSON(json, callback) + +
+
+ Populates canvas with data from the specified JSON +JSON format must conform to the one of `fabric.Element#toJSON` + + +
+ + + + +
+
Parameters:
+ +
+ {String} json + +
+
JSON string
+ +
+ {Function} callback + +
+
Callback, invoked when json is parsed + and corresponding objects (e.g: fabric.Image) + are initialized
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} instance
+ +
+ + + + +
+ + +
+ + + loadImageFromURL(url, callback) + +
+
+ Loads an image from URL, creates an instance of fabric.Image and passes it to a callback + + +
+ + + + +
+
Parameters:
+ +
+ url + +
+
{String} url of image to load
+ +
+ callback + +
+
{Function} calback, invoked when image is loaded
+ +
+ + + + + + + + +
+ + +
+ + + loadSVGFromURL(url, callback) + +
+
+ Takes url corresponding to an SVG document, and parses it to a set of objects + + +
+ + + + +
+
Parameters:
+ +
+ {String} url + +
+
+ +
+ {Function} callback + +
+
+ +
+ + + + + + + + +
+ + +
+ + + onBeforeScaleRotate(target) + +
+
+ Callback; invoked right before object is about to be scaled/rotated + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Object} target + +
+
Object that's about to be scaled/rotated
+ +
+ + + + + + + + +
+ + +
+ + + onFpsUpdate(fps) + +
+
+ Callback; invoked on every redraw of canvas and is being passed a number indicating current fps + + +
+ + + + +
+
Parameters:
+ +
+ {Number} fps + +
+
+ +
+ + + + + + + + +
+ + +
+ + {Object} + remove(object) + +
+
+ Removes an object from canvas and returns it + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{Object} Object to remove
+ +
+ + + + + +
+
Returns:
+ +
{Object} removed object
+ +
+ + + + +
+ + +
+ + {fabric.Element} + removeActiveGroup() + +
+
+ Removes currently active group + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + removeActiveObject() + +
+
+ Removes currently active object + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + renderAll(allOnTop) + +
+
+ Renders both the top canvas and the secondary container canvas. + + +
+ + + + +
+
Parameters:
+ +
+ allOnTop + +
+
{Boolean} optional Whether we want to force all images to be rendered on the top canvas
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} instance
+ +
+ + + + +
+ + +
+ + {fabric.Element} + renderTop() + +
+
+ Method to render only the top canvas. +Also used to render the group selection box. + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + sendBackwards(object) + +
+
+ Moves an object one level down in stack of drawn objects + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{fabric.Object} Object to send
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + sendToBack(object) + +
+
+ Moves an object to the bottom of the stack of drawn objects + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{fabric.Object} Object to send to back
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + setActiveGroup(group) + +
+
+ Sets active group to a speicified one + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Group} group + +
+
Group to set as a current one
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + setActiveObject(object) + +
+
+ Sets given object as active + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{fabric.Object} Object to set as an active one
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + setDimensions(dimensions) + +
+
+ Sets dimensions (width, height) of this canvas instance + + +
+ + + + +
+
Parameters:
+ +
+ {Object} dimensions + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + setHeight(height) + +
+
+ Sets height of this canvas instance + + +
+ + + + +
+
Parameters:
+ +
+ {Number} height + +
+
value to set height to
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} instance
+ +
+ + + + +
+ + +
+ + {fabric.Element} + setOverlayImage(url, callback) + +
+
+ Sets overlay image for this canvas + + +
+ + + + +
+
Parameters:
+ +
+ {String} url + +
+
url of an image to set background to
+ +
+ {Function} callback + +
+
callback to invoke when image is loaded and set as an overlay one
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Element} + setWidth(width) + +
+
+ Sets width of this canvas instance + + +
+ + + + +
+
Parameters:
+ +
+ {Number} width + +
+
value to set width to
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} instance
+ +
+ + + + +
+ + +
+ + {fabric.Element} + straightenObject(object) + +
+
+ Straightens object, then rerenders canvas + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Object} object + +
+
Object to straighten
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Element} thisArg
+ +
+ + + + +
+ + +
<static> + + {Boolean | null} + fabric.Element.supports(methodName) + +
+
+ Provides a way to check support of some of the canvas methods +(either those of HTMLCanvasElement itself, or rendering context) + + +
+ + + + +
+
Parameters:
+ +
+ methodName + +
+
{String} Method to check support for; + Could be one of "getImageData" or "toDataURL"
+ +
+ + + + + +
+
Returns:
+ +
{Boolean | null} `true` if method is supported (or at least exists), + `null` if canvas element or context can not be initialized
+ +
+ + + + +
+ + +
+ + {String} + toDatalessJSON() + +
+
+ Returs dataless JSON representation of canvas + + +
+ + + + + + + + +
+
Returns:
+ +
{String} json string
+ +
+ + + + +
+ + +
+ + {Object} + toDatalessObject() + +
+
+ Returns dataless object representation of canvas + + +
+ + + + + + + + +
+
Returns:
+ +
{Object}
+ +
+ + + + +
+ + +
+ + {String} + toDataURL(format) + +
+
+ Exports canvas element to a dataurl image. + + +
+ + + + +
+
Parameters:
+ +
+ {String} format + +
+
the format of the output image. Either "jpeg" or "png".
+ +
+ + + + + +
+
Returns:
+ +
{String}
+ +
+ + + + +
+ + +
+ + {String} + toDataURLWithMultiplier(format, multiplier) + +
+
+ Exports canvas element to a dataurl image (allowing to change image size via multiplier). + + +
+ + + + +
+
Parameters:
+ +
+ {String} format + +
+
(png|jpeg)
+ +
+ {Number} multiplier + +
+
+ +
+ + + + + +
+
Returns:
+ +
{String}
+ +
+ + + + +
+ + +
<static> + + + fabric.Element.toGrayscale(canvasEl) + +
+
+ Takes <canvas> element and transforms its data in such way that it becomes grayscale + + +
+ + + + +
+
Parameters:
+ +
+ {HTMLCanvasElement} canvasEl + +
+
+ +
+ + + + + + + + +
+ + +
+ + {String} + toJSON() + +
+
+ Returs JSON representation of canvas + + +
+ + + + + + + + +
+
Returns:
+ +
{String} json string
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of canvas + + +
+ + + + + + + + +
+
Returns:
+ +
{Object}
+ +
+ + + + +
+ + +
+ + {String} + toString() + +
+
+ Returns a string representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{String} string representation of an instance
+ +
+ + + + + + + + + + + +
+ - + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:47 GMT-0400 (EDT) +
diff --git a/docs/symbols/fabric.Ellipse.html b/docs/symbols/fabric.Ellipse.html index 4f2a7c3e..56b9e3aa 100644 --- a/docs/symbols/fabric.Ellipse.html +++ b/docs/symbols/fabric.Ellipse.html @@ -1,4 +1,5 @@ - + @@ -6,701 +7,767 @@ JsDoc Reference - fabric.Ellipse - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Ellipse +

+ + +

+ +
Extends + fabric.Object.
+ + + Ellipse + + +
Defined in: ellipse.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Ellipse() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<static>   +
+ fabric.Ellipse.ATTRIBUTE_NAMES +
+
List of attribute names to account for when parsing SVG element (used by `fabric.Ellipse.fromElement`)
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
Returns complexity of an instance
+
<static>   +
fabric.Ellipse.fromElement(element, options) +
+
Returns fabric.Ellipse instance from an SVG element
+
<static>   +
fabric.Ellipse.fromObject(object) +
+
Returns fabric.Ellipse instance from an object representation
+
  +
initialize(options) +
+
Constructor
+
  +
render(ctx, noTransform) +
+
Renders this instance on a given context
+
  +
toObject() +
+
Returns object representation of an instance
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Ellipse() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Ellipse.ATTRIBUTE_NAMES + +
+
+ List of attribute names to account for when parsing SVG element (used by `fabric.Ellipse.fromElement`) + + +
+ + + + + + +
+
See:
+ +
http://www.w3.org/TR/SVG/shapes.html#EllipseElement
+ +
+ + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ Returns complexity of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity
+ +
+ + + + +
+ + +
<static> + + {fabric.Ellipse} + fabric.Ellipse.fromElement(element, options) + +
+
+ Returns fabric.Ellipse instance from an SVG element + + +
+ + + + +
+
Parameters:
+ +
+ {SVGElement} element + +
+
Element to parse
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Ellipse}
+ +
+ + + + +
+ + +
<static> + + {fabric.Ellipse} + fabric.Ellipse.fromObject(object) + +
+
+ Returns fabric.Ellipse instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
Object to create an instance from
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Ellipse}
+ +
+ + + + +
+ + +
+ + {Object} + initialize(options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{Object} thisArg
+ +
+ + + + +
+ + +
+ + + render(ctx, noTransform) + +
+
+ Renders this instance on a given context + + +
+ + + + +
+
Parameters:
+ +
+ ctx + +
+
{CanvasRenderingContext2D} context to render on
+ +
+ noTransform + +
+
{Boolean} context is not transformed when set to true
+ +
+ + + + + + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} object representation of an instance
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Ellipse -

- -

- Ellipse -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Ellipse() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
-
<static>   -
fabric.Ellipse.fromElement(element, options) -
-
Returns fabric.Ellipse instance from an SVG element
-
<static>   -
fabric.Ellipse.fromObject(object) -
-
Returns fabric.Ellipse instance from an object representation
-
  -
initialize(options) -
-
Constructor
-
  -
render(ctx, noTransform) -
-
-
  -
toObject() -
-
Returns object representation of an instance
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Ellipse() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - - - - - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Ellipse} - - fabric.Ellipse.fromElement(element, options) -
- -
- Returns fabric.Ellipse instance from an SVG element - - - - -
- - - - -
-
Parameters:
- -
- {SVGElement} element - -
-
Element to parse
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Ellipse}
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Ellipse} - - fabric.Ellipse.fromObject(object) -
- -
- Returns fabric.Ellipse instance from an object representation - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
Object to create an instance from
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Ellipse}
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - initialize(options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - render(ctx, noTransform) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- ctx - -
-
{CanvasRenderingContext2D} context to render on
- -
- noTransform - -
-
{Boolean} context is not transformed when set to true
- -
- - - - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns object representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} object representation of an instance
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:47 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Group.html b/docs/symbols/fabric.Group.html index c82a45d4..9a264754 100644 --- a/docs/symbols/fabric.Group.html +++ b/docs/symbols/fabric.Group.html @@ -1,4 +1,5 @@ - + @@ -6,1701 +7,1470 @@ JsDoc Reference - fabric.Group - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Group +

+ + +

+ +
Extends + fabric.Object.
+ + + Group + + +
Defined in: group.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Group() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
activateAllObjects() +
+
Activates (makes active) all group objects
+
  +
add(object) +
+
Adds an object to a group; Then recalculates group's dimension, position.
+
  +
complexity() +
+
Returns complexity of an instance
+
  +
contains(object) +
+
Returns true if a group contains an object
+
  +
containsPoint(point) +
+
Checks if point is contained within the group
+
  +
destroy() +
+
Destroys a group (restoring state of its objects)
+
  +
forEachObject(callback, context) +
+
Executes given function for each object in this group
+
<static>   +
fabric.Group.fromObject(object, options) +
+
Returns fabric.Group instance from an object representation
+
  +
getObjects() +
+
Returns an array of all objects in this group
+
  +
hasMoved() +
+
Checks whether this group was moved (since `saveCoords` was called last)
+
  +
initialize(objects, options) +
+
Constructor
+
  +
item(index) +
+
Returns object from the group at the specified index
+
  +
remove(object) +
+
Removes an object from a group; Then recalculates group's dimension, position.
+
  +
render(ctx) +
+
Renders instance on a given context
+
  +
saveCoords() +
+
Saves coordinates of this instance (to be used together with `hasMoved`)
+
  +
set(name, value) +
+
Sets property to a given value
+
  +
setActive(value) +
+
Activates (makes active) all group objects
+
  +
setObjectsCoords() +
+
Sets coordinates of all group objects
+
  +
size() +
+
Returns a size of a group (i.e: length of an array containing its objects)
+
  +
toGrayscale() +
+
Makes all of this group's objects grayscale (i.e.
+
  +
toObject() +
+
Returns object representation of an instance
+
  +
toString() +
+
Returns string represenation of a group
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toJSON, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Group() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
-
-
- -
-
-

+ +
+ + {String} + type - Class fabric .Group -

- -

- Group -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Group() -
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
activateAllObjects() -
-
Activates (makes active) all group objects
-
  -
add(object) -
-
Adds an object to a group; Then recalculates group's dimension, position.
-
  -
complexity() -
-
Returns complexity of an instance
-
  -
contains(object) -
-
Returns true if a group contains an object
-
  -
containsPoint(point) -
-
-
  -
destroy() -
-
Destroys a group (restoring state of its objects)
-
  -
forEachObject(callback, context) -
-
-
<static>   -
fabric.Group.fromObject(object, options) -
-
-
  -
getObjects() -
-
Returns an array of all objects in this group
-
  -
hasMoved() -
-
-
  -
initialize(objects, options) -
-
Constructor
-
  -
item(index) -
-
Returns object from the group at the specified index
-
  -
remove(object) -
-
Removes an object from a group; Then recalculates group's dimension, position.
-
  -
render(ctx) -
-
Renders instance on a given context
-
  -
saveCoords() -
-
-
  -
set(name, value) -
-
Sets property to a given value
-
  -
setActive(value) -
-
Activates (makes active) all group objects
-
  -
setObjectsCoords() -
-
Sets coordinates of all group objects
-
  -
size() -
-
Returns a size of a group (i.e: length of an array containing its objects)
-
  -
toGrayscale() -
-
-
  -
toObject() -
-
Returns object representation of an instance
-
  -
toString() -
-
Returns string represenation of a group
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toJSON, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Group() -
- -
- - -
- - +
+ + - - - -
+ + + + + + + + + + - + + +
+ Method Detail +
-
-
- -
- Field Detail -
- - - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
+ +
+ + {fabric.Group} + activateAllObjects() +
+
+ Activates (makes active) all group objects + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Group} thisArg
+ +
+ + + + +
+ +
+ + {fabric.Group} + add(object) + +
+
+ Adds an object to a group; Then recalculates group's dimension, position. + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Group} thisArg
+ +
+ + + - +
-
-
-
- Method Detail -
+ +
+ + {Number} + complexity() + +
+
+ Returns complexity of an instance + + +
+ + + + + + + + +
+
Returns:
+
{Number} complexity
- - -
- - - - - {fabric.Group} - - activateAllObjects() -
- -
- Activates (makes active) all group objects - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- +
+ + + -
+
+ + +
+ + {Boolean} + contains(object) + +
+
+ Returns true if a group contains an object + + +
+ + + + +
+
Parameters:
- - -
- +
+ {Object} object - - - {fabric.Group} - - add(object) -
- -
- Adds an object to a group; Then recalculates group's dimension, position. - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- + +
Object to check against
+ +
+ + + + + +
+
Returns:
+ +
{Boolean} `true` if group contains an object
+ +
+ + + -
+
+ + +
+ + {Boolean} + containsPoint(point) + +
+
+ Checks if point is contained within the group + + +
+ + + + +
+
Parameters:
- - -
- +
+ {fabric.Point} point - - - {Number} - - complexity() -
- -
- Returns complexity of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- + +
point with `x` and `y` properties
+ +
+ + + + + +
+
Returns:
+ +
{Boolean} true if point is contained within group
+ +
+ + + -
+
+ + +
+ + {fabric.Group} + destroy() + +
+
+ Destroys a group (restoring state of its objects) + + +
+ + + + + + + + +
+
Returns:
- - -
- - - - - {Boolean} - - contains(object) -
- -
- Returns true if a group contains an object - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
Object to check against
- -
- - - -
- - - - - - - - -
Returns:
- -
{Boolean} `true` if group contains an object
- - - - - - - -
- +
{fabric.Group} thisArg
+ +
+ + + -
+
+ + +
+ + {fabric.Group} + forEachObject(callback, context) + +
+
+ Executes given function for each object in this group + + +
+ + + + +
+
Parameters:
- - -
- +
+ {Function} callback - - - {Boolean} - - containsPoint(point) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Object} point - -
-
point with `x` and `y` properties
- -
- - - -
- - - - - - - - -
Returns:
- -
{Boolean} true if point is contained within group
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Group} - - destroy() -
- -
- Destroys a group (restoring state of its objects) - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Group} - - forEachObject(callback, context) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Function} callback - -
-
Callback invoked with current object as first argument, + +
Callback invoked with current object as first argument, index - as second and an array of all objects - as third. Iteration happens in reverse order (for performance reasons). Callback is invoked in a context of Global Object (e.g. `window`) when no `context` argument is given
- -
- {Object} context - -
-
Context (aka thisObject)
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- - -
- - -
- - <static> - +
+ {Object} context - {fabric.Group} - - fabric.Group.fromObject(object, options) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{Object} object to create a group from
- -
- options - -
-
{Object} options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} an instance of fabric.Group
- - - - - - - -
- - -
+ +
Context (aka thisObject)
- - -
- - - - - {Array} - - getObjects() -
- -
- Returns an array of all objects in this group - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Array} group objects
- - - - - - - -
- - -
+
+ + + + + +
+
Returns:
- - -
- - - - - {Boolean} - - hasMoved() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Boolean} true if an object was moved (since fabric.Group#saveCoords was called)
- - - - - - - -
- - -
+
{fabric.Group} thisArg
- - -
- - - - - {Object} - - initialize(objects, options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Object} objects - -
-
Group objects
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} thisArg
- - - - - - - -
- +
+ + + -
- - - -
- - - - - {fabric.Object} - - item(index) -
- -
- Returns object from the group at the specified index - - - - -
- - - - -
-
Parameters:
- -
- index - -
-
{Number} index of item to get
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object}
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Group} - - remove(object) -
- -
- Removes an object from a group; Then recalculates group's dimension, position. - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - render(ctx) -
- -
- Renders instance on a given context - - - - -
- - - - -
-
Parameters:
- -
- {CanvasRenderingContext2D} ctx - -
-
context to render instance on
- -
- - - - -
- - - -
- - - - - {fabric.Group} - - saveCoords() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Group} - - set(name, value) -
- -
- Sets property to a given value - - - - -
- - - - -
-
Parameters:
- -
- {String} name - -
-
- -
- {Object|Function} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Group} - - setActive(value) -
- -
- Activates (makes active) all group objects - - - - -
- - - - -
-
Parameters:
- -
- {Boolean} value - -
-
`true` to activate object, `false` otherwise
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Group} - - setObjectsCoords() -
- -
- Sets coordinates of all group objects - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Group} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Number} - - size() -
- -
- Returns a size of a group (i.e: length of an array containing its objects) - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} Group size
- - - - - - - -
- - -
- - - -
- - - - - - - toGrayscale() -
- -
- - - - - -
- - - - - - - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns object representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} object representation of an instance
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toString() -
- -
- Returns string represenation of a group - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String}
- - - - - - - -
- - - - -
+
+ + +
<static> + + {fabric.Group} + fabric.Group.fromObject(object, options) +
+
+ Returns fabric.Group instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{Object} object to create a group from
+ +
+ options + +
+
{Object} options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Group} an instance of fabric.Group
+ +
+ + + + +
+ +
+ + {Array} + getObjects() + +
+
+ Returns an array of all objects in this group + + +
+ + + + + + + + +
+
Returns:
+ +
{Array} group objects
+ +
+ + + + +
- + +
+ + {Boolean} + hasMoved() + +
+
+ Checks whether this group was moved (since `saveCoords` was called last) + + +
+ + + + + + + + +
+
Returns:
+ +
{Boolean} true if an object was moved (since fabric.Group#saveCoords was called)
+ +
+ + + + +
-
+ +
+ + {Object} + initialize(objects, options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Object} objects + +
+
Group objects
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + item(index) + +
+
+ Returns object from the group at the specified index + + +
+ + + + +
+
Parameters:
+ +
+ index + +
+
{Number} index of item to get
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object}
+ +
+ + + + +
+ + +
+ + {fabric.Group} + remove(object) + +
+
+ Removes an object from a group; Then recalculates group's dimension, position. + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Group} thisArg
+ +
+ + + + +
+ + +
+ + + render(ctx) + +
+
+ Renders instance on a given context + + +
+ + + + +
+
Parameters:
+ +
+ {CanvasRenderingContext2D} ctx + +
+
context to render instance on
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Group} + saveCoords() + +
+
+ Saves coordinates of this instance (to be used together with `hasMoved`) + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Group} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Group} + set(name, value) + +
+
+ Sets property to a given value + + +
+ + + + +
+
Parameters:
+ +
+ {String} name + +
+
+ +
+ {Object|Function} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Group} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Group} + setActive(value) + +
+
+ Activates (makes active) all group objects + + +
+ + + + +
+
Parameters:
+ +
+ {Boolean} value + +
+
`true` to activate object, `false` otherwise
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Group} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Group} + setObjectsCoords() + +
+
+ Sets coordinates of all group objects + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Group} thisArg
+ +
+ + + + +
+ + +
+ + {Number} + size() + +
+
+ Returns a size of a group (i.e: length of an array containing its objects) + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} Group size
+ +
+ + + + +
+ + +
+ + + toGrayscale() + +
+
+ Makes all of this group's objects grayscale (i.e. calling `toGrayscale` on them) + + +
+ + + + + + + + + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} object representation of an instance
+ +
+ + + + +
+ + +
+ + {String} + toString() + +
+
+ Returns string represenation of a group + + +
+ + + + + + + + +
+
Returns:
+ +
{String}
+ +
+ + + + + + + + + + + +
+ - + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:47 GMT-0400 (EDT) +
diff --git a/docs/symbols/fabric.Image.html b/docs/symbols/fabric.Image.html index c00323b7..c286d70c 100644 --- a/docs/symbols/fabric.Image.html +++ b/docs/symbols/fabric.Image.html @@ -1,4 +1,5 @@ - + @@ -6,1421 +7,1372 @@ JsDoc Reference - fabric.Image - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Image +

+ + +

+ +
Extends + fabric.Object.
+ + + Image + + +
Defined in: image.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Image() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
  +
+ active +
+
+
  +
+ bordervisibility +
+
+
  +
+ cornervisibility +
+
+
<static>   +
+ fabric.Image.CSS_CANVAS +
+
Default CSS class name for canvas
+
  +
+ maxheight +
+
+
  +
+ maxwidth +
+
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
clone(callback) +
+
Returns a clone of an instance
+
  +
complexity() +
+
Returns complexity of an instance
+
<static>   +
fabric.Image.fromObject(object, callback) +
+
Creates an instance of fabric.Image from its object representation
+
<static>   +
fabric.Image.fromURL(url, callback, imgOptions) +
+
Creates an instance of fabric.Image from an URL string
+
  +
getElement() +
+
Returns image element which this instance if based on
+
  +
getNormalizedSize(oImg, maxwidth, maxheight) +
+
Resizes an image depending on whether maxwidth and maxheight are set up; +Width and height have to mantain the same proportion in the final image as it was in the initial one.
+
  +
getOriginalSize() +
+
Returns original size of an image
+
  +
getSrc() +
+
Returns source of an image
+
  +
initialize(element, options) +
+
Constructor
+
  +
render(ctx, noTransform) +
+
Renders image on a specified context
+
  +
setBorderVisibility(visible) +
+
Sets border visibility
+
  +
setCornersVisibility(visible) +
+
Sets corner visibility
+
  +
setElement(element) +
+
Sets image element for this instance to a specified one
+
  +
toGrayscale(callback) +
+
Makes image grayscale
+
  +
toObject() +
+
Returns object representation of an instance
+
  +
toString() +
+
Returns string representation of an instance
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toJSON, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Image() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
-
-
- -
-
-

+ +
+ + {Boolean} + active - Class fabric .Image -

- -

- Image -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Image() -
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- active -
-
-
  -
- bordervisibility -
-
-
  -
- cornervisibility -
-
-
<static>   -
- fabric.Image.CSS_CANVAS -
-
Default CSS class name for canvas
-
  -
- maxheight -
-
-
  -
- maxwidth -
-
-
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
clone(callback) -
-
Returns a clone of an instance
-
  -
complexity() -
-
Returns complexity of an instance
-
<static>   -
fabric.Image.fromObject(object, callback) -
-
Creates an instance of fabric.Image from its object representation
-
<static>   -
fabric.Image.fromURL(url, callback, imgOptions) -
-
Creates an instance of fabric.Image from an URL string
-
  -
getElement() -
-
Returns image element which this instance if based on
-
  -
getNormalizedSize(oImg, maxwidth, maxheight) -
-
Resizes an image depending on whether maxwidth and maxheight are set up; -Width and height have to mantain the same proportion in the final image as it was in the initial one.
-
  -
getOriginalSize() -
-
Returns original size of an image
-
  -
getSrc() -
-
Returns source of an image
-
  -
initialize(element, options) -
-
Constructor
-
  -
render(ctx, noTransform) -
-
Renders image on a specified context
-
  -
setBorderVisibility(visible) -
-
Sets border visibility
-
  -
setCornersVisibility(visible) -
-
Sets corner visibility
-
  -
setElement(element) -
-
Sets image element for this instance to a specified one
-
  -
toGrayscale(callback) -
-
Makes image grayscale
-
  -
toObject() -
-
Returns object representation of an instance
-
  -
toString() -
-
Returns string representation of an instance
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toJSON, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Image() -
- -
- - -
- - +
+ + - - - -
+ + + + + + + + +
- - - -
-
- -
- Field Detail -
- - - - -
- - - - - {Boolean} - - active -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Boolean} - - bordervisibility -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Boolean} - - cornervisibility -
- -
- - - - -
- - - - - -
- - - -
- - <static> - - - {String} - - fabric.Image.CSS_CANVAS -
- -
- Default CSS class name for canvas - - - -
- - - - - -
- - - -
- - - - - {Number} - - maxheight -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Number} - - maxwidth -
- -
- - - - -
- - - - - -
- - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
+ +
+ + {Boolean} + bordervisibility +
+
+ + + +
+ + + + + + + + +
+ +
+ + {Boolean} + cornervisibility + +
+
+ + + +
+ + - + + + + + +
-
-
-
- Method Detail -
- - - - -
- - - - - - - clone(callback) -
- -
- Returns a clone of an instance - - - - -
- - - - -
-
Parameters:
- -
- {Function} callback - -
-
Callback is invoked with a clone as a first argument
- -
- - - + +
<static> + + {String} + fabric.Image.CSS_CANVAS + +
+
+ Default CSS class name for canvas + + +
+ + -
- - - -
- - - - - {Number} - - complexity() -
- -
- Returns complexity of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- + + + + -
- - - -
- - <static> - - - - - fabric.Image.fromObject(object, callback) -
- -
- Creates an instance of fabric.Image from its object representation - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{Object}
- -
- callback - -
-
{Function} optional
- -
- - - +
+ + +
+ + {Number} + maxheight + +
+
+ + + +
+ + -
- - - -
- - <static> - - - - - fabric.Image.fromURL(url, callback, imgOptions) -
- -
- Creates an instance of fabric.Image from an URL string - - - - -
- - - - -
-
Parameters:
- -
- {String} url - -
-
URL to create an image from
- -
- {Function} callback - Optional -
-
Callback to invoke when image is created (newly created image is passed as a first argument)
- -
- {Object} imgOptions - Optional -
-
Options object
- -
- - - + + + + -
- - - -
- - - - - {HTMLImageElement} - - getElement() -
- -
- Returns image element which this instance if based on - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{HTMLImageElement} image element
- - - - - - - -
- +
+ + +
+ + {Number} + maxwidth + +
+
+ + + +
+ + -
+ + + + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + + clone(callback) + +
+
+ Returns a clone of an instance + + +
+ + + + +
+
Parameters:
- - -
- +
+ {Function} callback - +
+
Callback is invoked with a clone as a first argument
+ +
+ + + + + + + + +
+ + +
+ + {Number} + complexity() + +
+
+ Returns complexity of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity
+ +
+ + + + +
+ + +
<static> + + + fabric.Image.fromObject(object, callback) + +
+
+ Creates an instance of fabric.Image from its object representation + + +
+ + + + +
+
Parameters:
+ +
+ object +
+
{Object}
+ +
+ callback +
+
{Function} optional
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.Image.fromURL(url, callback, imgOptions) + +
+
+ Creates an instance of fabric.Image from an URL string + + +
+ + + + +
+
Parameters:
+ +
+ {String} url - getNormalizedSize(oImg, maxwidth, maxheight) -
- -
- Resizes an image depending on whether maxwidth and maxheight are set up; + +
URL to create an image from
+ +
+ {Function} callback + Optional +
+
Callback to invoke when image is created (newly created image is passed as a first argument)
+ +
+ {Object} imgOptions + Optional +
+
Options object
+ + + + + + + + + + +
+ + +
+ + {HTMLImageElement} + getElement() + +
+
+ Returns image element which this instance if based on + + +
+ + + + + + + + +
+
Returns:
+ +
{HTMLImageElement} image element
+ +
+ + + + +
+ + +
+ + + getNormalizedSize(oImg, maxwidth, maxheight) + +
+
+ Resizes an image depending on whether maxwidth and maxheight are set up; Width and height have to mantain the same proportion in the final image as it was in the initial one. - - - - -
- - - - -
-
Parameters:
- -
- {Object} oImg - -
-
- -
- {Number} maxwidth - -
-
maximum width of the image (in px)
- -
- {Number} maxheight - -
-
maximum height of the image (in px)
- -
- - - - -
- - - -
- - - - - {Object} - - getOriginalSize() -
- -
- Returns original size of an image - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} object with "width" and "height" properties
- - - - - - - -
- - -
- - - -
- - - - - {String} - - getSrc() -
- -
- Returns source of an image - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} Source of an image
- - - - - - - -
- - -
- - - -
- - - - - - - initialize(element, options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {HTMLImageElement | String} element - -
-
Image element
- -
- {Object} options - -
-
optional
- -
- - - - -
- - - -
- - - - - - - render(ctx, noTransform) -
- -
- Renders image on a specified context - - - - -
- - - - -
-
Parameters:
- -
- {CanvasRenderingContext2D} ctx - -
-
Context to render on
- -
- noTransform - -
-
- -
- - - - -
- - - -
- - - - - - - setBorderVisibility(visible) -
- -
- Sets border visibility - - - - -
- - - - -
-
Parameters:
- -
- {Boolean} visible - -
-
When true, border is set to be visible
- -
- - - - -
- - - -
- - - - - - - setCornersVisibility(visible) -
- -
- Sets corner visibility - - - - -
- - - - -
-
Parameters:
- -
- {Boolean} visible - -
-
When true, corners are set to be visible
- -
- - - - -
- - - -
- - - - - {fabric.Image} - - setElement(element) -
- -
- Sets image element for this instance to a specified one - - - - -
- - - - -
-
Parameters:
- -
- {HTMLImageElement} element - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Image} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - toGrayscale(callback) -
- -
- Makes image grayscale - - - - -
- - - - -
-
Parameters:
- -
- {Function} callback - -
-
- -
- - - - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns object representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} Object representation of an instance
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toString() -
- -
- Returns string representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} String representation of an instance
- - - - - - - -
- - - - -
+ +
+ + + + +
+
Parameters:
+ +
+ {Object} oImg + +
+
+ +
+ {Number} maxwidth + +
+
maximum width of the image (in px)
+ +
+ {Number} maxheight + +
+
maximum height of the image (in px)
+ +
+ + + + + + + + +
+ +
+ + {Object} + getOriginalSize() + +
+
+ Returns original size of an image + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} object with "width" and "height" properties
+ +
+ + + + +
- + +
+ + {String} + getSrc() + +
+
+ Returns source of an image + + +
+ + + + + + + + +
+
Returns:
+ +
{String} Source of an image
+ +
+ + + + +
-
+ +
+ + + initialize(element, options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {HTMLImageElement | String} element + +
+
Image element
+ +
+ {Object} options + +
+
optional
+ +
+ + + + + + + + +
+ + +
+ + + render(ctx, noTransform) + +
+
+ Renders image on a specified context + + +
+ + + + +
+
Parameters:
+ +
+ {CanvasRenderingContext2D} ctx + +
+
Context to render on
+ +
+ noTransform + +
+
+ +
+ + + + + + + + +
+ + +
+ + + setBorderVisibility(visible) + +
+
+ Sets border visibility + + +
+ + + + +
+
Parameters:
+ +
+ {Boolean} visible + +
+
When true, border is set to be visible
+ +
+ + + + + + + + +
+ + +
+ + + setCornersVisibility(visible) + +
+
+ Sets corner visibility + + +
+ + + + +
+
Parameters:
+ +
+ {Boolean} visible + +
+
When true, corners are set to be visible
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Image} + setElement(element) + +
+
+ Sets image element for this instance to a specified one + + +
+ + + + +
+
Parameters:
+ +
+ {HTMLImageElement} element + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Image} thisArg
+ +
+ + + + +
+ + +
+ + + toGrayscale(callback) + +
+
+ Makes image grayscale + + +
+ + + + +
+
Parameters:
+ +
+ {Function} callback + +
+
+ +
+ + + + + + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} Object representation of an instance
+ +
+ + + + +
+ + +
+ + {String} + toString() + +
+
+ Returns string representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{String} String representation of an instance
+ +
+ + + + + + + + + + + +
+ - + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:47 GMT-0400 (EDT) +
diff --git a/docs/symbols/fabric.Intersection.html b/docs/symbols/fabric.Intersection.html index b85d7a6a..5de00d02 100644 --- a/docs/symbols/fabric.Intersection.html +++ b/docs/symbols/fabric.Intersection.html @@ -1,4 +1,5 @@ - + @@ -6,635 +7,742 @@ JsDoc Reference - fabric.Intersection - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Intersection +

+ + +

+ + + + Intersection + + +
Defined in: intersection.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Intersection(status) +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
appendPoint(status) +
+
+
  +
appendPoints(status) +
+
+
  +
init(status) +
+
+
<static>   +
fabric.Intersection.intersectLineLine(a1, a2, b1, b2) +
+
+
<static>   +
fabric.Intersection.intersectLinePolygon(a1, a2, points) +
+
+
<static>   +
fabric.Intersection.intersectPolygonPolygon(points1, points2) +
+
+
<static>   +
fabric.Intersection.intersectPolygonRectangle(points, r1, r2) +
+
+
+ + + + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Intersection(status) +
+ +
+ + +
+ + + + + +
+
Parameters:
+ +
+ status + +
+
+ +
+ + + + + + + -
-
+ + + + + + +
+ Method Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
+ + + appendPoint(status) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {String} status + +
+
+ +
+ + + + + + + + +
+ + +
+ + + appendPoints(status) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {String} status + +
+
+ +
+ + + + + + + + +
+ + +
+ + + init(status) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {String} status + +
+
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.Intersection.intersectLineLine(a1, a2, b1, b2) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ a1 + +
+
+ +
+ a2 + +
+
+ +
+ b1 + +
+
+ +
+ b2 + +
+
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.Intersection.intersectLinePolygon(a1, a2, points) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ a1 + +
+
+ +
+ a2 + +
+
+ +
+ points + +
+
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.Intersection.intersectPolygonPolygon(points1, points2) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ points1 + +
+
+ +
+ points2 + +
+
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.Intersection.intersectPolygonRectangle(points, r1, r2) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ points + +
+
+ +
+ r1 + +
+
+ +
+ r2 + +
+
+ +
+ + + + + + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Intersection -

- -

- Intersection -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Intersection(status) -
-
-
-
- - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
appendPoint(status) -
-
-
  -
appendPoints(status) -
-
-
  -
init(status) -
-
-
<static>   -
fabric.Intersection.intersectLineLine(a1, a2, b1, b2) -
-
-
<static>   -
fabric.Intersection.intersectLinePolygon(a1, a2, points) -
-
-
<static>   -
fabric.Intersection.intersectPolygonPolygon(points1, points2) -
-
-
<static>   -
fabric.Intersection.intersectPolygonRectangle(points, r1, r2) -
-
-
-
- - - - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Intersection(status) -
- -
- - -
- - - - -
-
Parameters:
- -
- status - -
-
- -
- - - -
-
- - - - - - - -
-
-
- Method Detail -
- - - - -
- - - - - - - appendPoint(status) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} status - -
-
- -
- - - - -
- - - -
- - - - - - - appendPoints(status) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} status - -
-
- -
- - - - -
- - - -
- - - - - - - init(status) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} status - -
-
- -
- - - - -
- - - -
- - <static> - - - - - fabric.Intersection.intersectLineLine(a1, a2, b1, b2) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- a1 - -
-
- -
- a2 - -
-
- -
- b1 - -
-
- -
- b2 - -
-
- -
- - - - -
- - - -
- - <static> - - - - - fabric.Intersection.intersectLinePolygon(a1, a2, points) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- a1 - -
-
- -
- a2 - -
-
- -
- points - -
-
- -
- - - - -
- - - -
- - <static> - - - - - fabric.Intersection.intersectPolygonPolygon(points1, points2) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- points1 - -
-
- -
- points2 - -
-
- -
- - - - -
- - - -
- - <static> - - - - - fabric.Intersection.intersectPolygonRectangle(points, r1, r2) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- points - -
-
- -
- r1 - -
-
- -
- r2 - -
-
- -
- - - - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:47 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Line.html b/docs/symbols/fabric.Line.html index 057c01fa..49abddaf 100644 --- a/docs/symbols/fabric.Line.html +++ b/docs/symbols/fabric.Line.html @@ -1,4 +1,5 @@ - + @@ -6,653 +7,722 @@ JsDoc Reference - fabric.Line - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Line +

+ + +

+ +
Extends + fabric.Object.
+ + + Line + + +
Defined in: line.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Line() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<static>   +
+ fabric.Line.ATTRIBUTE_NAMES +
+
List of attribute names to account for when parsing SVG element (used by `fabric.Line.fromElement`)
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
Returns complexity of an instance
+
<static>   +
fabric.Line.fromElement(element, options) +
+
Returns fabric.Line instance from an SVG element
+
<static>   +
fabric.Line.fromObject(object) +
+
Returns fabric.Line instance from an object representation
+
  +
initialize(points, options) +
+
Constructor
+
  +
toObject() +
+
Returns object representation of an instance
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Line() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Line.ATTRIBUTE_NAMES + +
+
+ List of attribute names to account for when parsing SVG element (used by `fabric.Line.fromElement`) + + +
+ + + + + + +
+
See:
+ +
http://www.w3.org/TR/SVG/shapes.html#LineElement
+ +
+ + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ Returns complexity of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity
+ +
+ + + + +
+ + +
<static> + + {fabric.Line} + fabric.Line.fromElement(element, options) + +
+
+ Returns fabric.Line instance from an SVG element + + +
+ + + + +
+
Parameters:
+ +
+ {SVGElement} element + +
+
Element to parse
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Line} instance of fabric.Line
+ +
+ + + + +
+ + +
<static> + + {fabric.Line} + fabric.Line.fromObject(object) + +
+
+ Returns fabric.Line instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
Object to create an instance from
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Line} instance of fabric.Line
+ +
+ + + + +
+ + +
+ + {fabric.Line} + initialize(points, options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Array} points + +
+
Array of points
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Line} thisArg
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object}
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Line -

- -

- Line -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Line() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
-
<static>   -
fabric.Line.fromElement(element, options) -
-
-
<static>   -
fabric.Line.fromObject(object) -
-
-
  -
initialize(points, options) -
-
Constructor
-
  -
toObject() -
-
Returns object representation of an instance
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Line() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Line} - - fabric.Line.fromElement(element, options) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {SVGElement} element - -
-
Element to parse
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Line} instance of fabric.Line
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Line} - - fabric.Line.fromObject(object) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
Object to create an instance from
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Line} instance of fabric.Line
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Line} - - initialize(points, options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Array} points - -
-
Array of points
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Line} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns object representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object}
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:47 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Object.html b/docs/symbols/fabric.Object.html index d8f62d85..7b013810 100644 --- a/docs/symbols/fabric.Object.html +++ b/docs/symbols/fabric.Object.html @@ -1,4 +1,5 @@ - + @@ -6,3123 +7,2617 @@ JsDoc Reference - fabric.Object - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Object +

+ + +

+ + + + Object + + +
Defined in: object.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Object() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<constant>   +
+ FX_DURATION +
+
+
<constant>   +
+ FX_TRANSITION +
+
+
  +
+ includeDefaultValues +
+
+
<constant>   +
+ MIN_SCALE_LIMIT +
+
+
<constant>   +
+ NUM_FRACTION_DIGITS +
+
+
  +
+ options +
+
+
  +
+ rotate +
+
+
  +
+ stateProperties +
+
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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
callSuper(methodName) +
+
+
  +
clone(options) +
+
Clones an instance
+
  +
cloneAsImage(callback) +
+
Creates an instance of fabric.Image out of an object
+
  +
complexity() +
+
+
  +
drawBorders(ctx) +
+
Draws borders of an object's bounding box.
+
  +
drawCorners(ctx) +
+
Draws corners of an object's bounding box.
+
  +
fxRemove(callbacks) +
+
+
  +
fxStraighten(callbacks) +
+
+
  +
get(property) +
+
Basic getter
+
  +
getAngle() +
+
Returns object's angle value
+
  +
getCenter() +
+
+
  +
getHeight() +
+
Returns height of an object
+
  +
getWidth() +
+
Returns width of an object
+
  +
hasStateChanged() +
+
+
  +
initialize(options) +
+
Constructor
+
  +
intersectsWithObject(other) +
+
Returns true if object intersects with another object
+
  +
intersectsWithRect(selectionTL, selectionBR) +
+
Returns true if object intersects with an area formed by 2 points
+
  +
isActive() +
+
Returns true if an object is in its active state
+
  +
isContainedWithinRect(selectionTL, selectionBR) +
+
Returns true if object is fully contained within area formed by 2 points
+
  +
isType(type) +
+
+
  +
render(ctx, noTransform) +
+
+
  +
saveState() +
+
+
  +
scale(value) +
+
Scales an object (equally by x and y)
+
  +
scaleToHeight(value) +
+
Scales an object to a given height (scaling by x/y equally)
+
  +
scaleToWidth(value) +
+
Scales an object to a given width (scaling by x/y equally)
+
  +
set(property, value) +
+
Basic setter
+
  +
setActive(active) +
+
Sets state of an object - `true` makes it active, `false` - inactive
+
  +
setAngle(value) +
+
Sets object's angle
+
  +
setCoords() +
+
Sets corner position coordinates based on current angle, width and height.
+
  +
setOpacity(value) +
+
Sets object opacity
+
  +
setOptions(options) +
+
+
  +
setSourcePath(value) +
+
+
  +
straighten() +
+
+
  +
toDatalessObject() +
+
Returns (dataless) object representation of an instance
+
  +
toDataURL() +
+
Converts an object into a data-url-like string
+
  +
toggle(property) +
+
Toggles specified property from `true` to `false` or from `false` to `true`
+
  +
toGrayscale() +
+
Makes object's color grayscale
+
  +
toJSON() +
+
Returns a JSON representation of an instance
+
  +
toObject() +
+
Returns an object representation of an instance
+
  +
toString() +
+
Returns a string representation of an instance
+
  +
transform(ctx) +
+
+
+ + + + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Object() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
-
-
- -
-
-

+ +
<constant> + + {Number} + FX_DURATION - Class fabric .Object -

- -

- Object -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Object() -
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
<constant>   -
- FX_DURATION -
-
-
<constant>   -
- FX_TRANSITION -
-
-
  -
- includeDefaultValues -
-
-
<constant>   -
- MIN_SCALE_LIMIT -
-
-
<constant>   -
- NUM_FRACTION_DIGITS -
-
-
  -
- options -
-
-
  -
- rotate -
-
-
  -
- stateProperties -
-
-
  -
- type -
-
-
-
- - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
callSuper(methodName) -
-
-
  -
clone(options) -
-
Clones an instance
-
  -
cloneAsImage(callback) -
-
Creates an instance of fabric.Image out of an object
-
  -
complexity() -
-
-
  -
drawBorders(ctx) -
-
Draws borders of an object's bounding box.
-
  -
drawCorners(ctx) -
-
Draws corners of an object's bounding box.
-
  -
fxRemove(callbacks) -
-
-
  -
fxStraighten(callbacks) -
-
-
  -
get(property) -
-
Basic getter
-
  -
getAngle() -
-
Returns object's angle value
-
  -
getCenter() -
-
-
  -
getHeight() -
-
Returns height of an object
-
  -
getWidth() -
-
Returns width of an object
-
  -
hasStateChanged() -
-
-
  -
initialize(options) -
-
Constructor
-
  -
intersectsWithObject(other) -
-
Returns true if object intersects with another object
-
  -
intersectsWithRect(selectionTL, selectionBR) -
-
Returns true if object intersects with an area formed by 2 points
-
  -
isActive() -
-
Returns true if an object is in its active state
-
  -
isContainedWithinRect(selectionTL, selectionBR) -
-
Returns true if object is fully contained within area formed by 2 points
-
  -
isType(type) -
-
-
  -
render(ctx, noTransform) -
-
-
  -
saveState() -
-
-
  -
scale(value) -
-
Scales an object (equally by x and y)
-
  -
scaleToHeight(value) -
-
Scales an object to a given height (scaling by x/y equally)
-
  -
scaleToWidth(value) -
-
Scales an object to a given width (scaling by x/y equally)
-
  -
set(property, value) -
-
Basic setter
-
  -
setActive(active) -
-
Sets state of an object - `true` makes it active, `false` - inactive
-
  -
setAngle(value) -
-
Sets object's angle
-
  -
setCoords() -
-
Sets corner position coordinates based on current angle, width and height.
-
  -
setOpacity(value) -
-
Sets object opacity
-
  -
setOptions(options) -
-
-
  -
setSourcePath(value) -
-
-
  -
straighten() -
-
-
  -
toDatalessObject() -
-
-
  -
toDataURL() -
-
Converts an object into a data-url-like string
-
  -
toggle(property) -
-
Toggles specified property from `true` to `false` or from `false` to `true`
-
  -
toGrayscale() -
-
Makes object's color grayscale
-
  -
toJSON() -
-
Returns a JSON representation of an instance
-
  -
toObject() -
-
Returns an object representation of an instance
-
  -
toString() -
-
Returns a string representation of an instance
-
  -
transform(ctx) -
-
-
-
- - - - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Object() -
- -
- - -
- - +
+ + - - - -
+ + + + + + + + +
- - - -
-
- -
- Field Detail -
- - - - -
- - <constant> - - - {Number} - - FX_DURATION -
- -
- - - - -
- - - - - -
- - - -
- - <constant> - - - {String} - - FX_TRANSITION -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Boolean} - - includeDefaultValues -
- -
- - - - -
- - - - - -
- - - -
- - <constant> - - - {Number} - - MIN_SCALE_LIMIT -
- -
- - - - -
- - - - - -
- - - -
- - <constant> - - - {Number} - - NUM_FRACTION_DIGITS -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Object} - - options -
- -
- - - - -
- - - - - -
- - - -
- - - - - - - rotate -
- -
- - - - -
- - - - - -
- - - -
- - - - - {Array} - - stateProperties -
- -
- - - - -
- - - - - -
- - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
+ +
<constant> + + {String} + FX_TRANSITION +
+
+ + + +
+ + + + + + + + +
+ +
+ + {Boolean} + includeDefaultValues + +
+
+ + + +
+ + - + + + + + +
-
-
-
- Method Detail -
- - - - -
- - - - - - - callSuper(methodName) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} methodName - -
-
- -
- - - + +
<constant> + + {Number} + MIN_SCALE_LIMIT + +
+
+ + + +
+ + -
- - - -
- - - - - {fabric.Object} - - clone(options) -
- -
- Clones an instance - - - - -
- - - - -
-
Parameters:
- -
- {Object} options - -
-
object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} clone of an instance
- - - - - - - -
- + + + + -
- - - -
- - - - - {fabric.Object} - - cloneAsImage(callback) -
- -
- Creates an instance of fabric.Image out of an object - - - - -
- - - - -
-
Parameters:
- -
- callback - -
-
{Function} callback, invoked with an instance as a first argument
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- +
+ + +
<constant> + + {Number} + NUM_FRACTION_DIGITS + +
+
+ + + +
+ + -
- - - -
- - - - - {Number} - - complexity() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number}
- - - - - - - -
- + + + + -
+
+ + +
+ + {Object} + options + +
+
+ + + +
+ + + + + + + + +
+ + +
+ + + rotate + +
+
+ + + +
+ + + + + + + + +
+ + +
+ + {Array} + stateProperties + +
+
+ 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 + + +
+ + + + + + + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + + callSuper(methodName) + +
+
+ + + +
+ + + + +
+
Parameters:
- - -
- +
+ {String} methodName - +
+
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Object} + clone(options) + +
+
+ Clones an instance + + +
+ + + + +
+
Parameters:
+ +
+ {Object} options - {fabric.Object} +
+
object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} clone of an instance
+ +
+ + + + +
+ + +
+ + {fabric.Object} + cloneAsImage(callback) + +
+
+ Creates an instance of fabric.Image out of an object + + +
+ + + + +
+
Parameters:
+ +
+ callback - drawBorders(ctx) -
- -
- Draws borders of an object's bounding box. + +
{Function} callback, invoked with an instance as a first argument
+ + + + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {Number} + complexity() + +
+
+ + + +
+ + + + + + + + +
+
Returns:
+ +
{Number}
+ +
+ + + + +
+ + +
+ + {fabric.Object} + drawBorders(ctx) + +
+
+ Draws borders of an object's bounding box. Requires public properties: width, height Requires public options: padding, borderColor - - - - -
- - - - -
-
Parameters:
- -
- {CanvasRenderingContext2D} ctx - -
-
Context to draw on
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
+ + +
+ + + + +
+
Parameters:
- - -
- +
+ {CanvasRenderingContext2D} ctx - - - {fabric.Object} - - drawCorners(ctx) -
- -
- Draws corners of an object's bounding box. + +
Context to draw on
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + drawCorners(ctx) + +
+
+ Draws corners of an object's bounding box. Requires public properties: width, height, scaleX, scaleY Requires public options: cornersize, padding - - - - -
- - - - -
-
Parameters:
- -
- {CanvasRenderingContext2D} ctx - -
-
Context to draw on
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - fxRemove(callbacks) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Object} callbacks - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - fxStraighten(callbacks) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Object} callbacks - -
-
- onComplete: invoked on completion - - onChange: invoked on every step of animation
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Any} - - get(property) -
- -
- Basic getter - - - - -
- - - - -
-
Parameters:
- -
- {Any} property - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{Any} value of a property
- - - - - - - -
- - -
- - - -
- - - - - {Number} - - getAngle() -
- -
- Returns object's angle value - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} angle value
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - getCenter() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} object with `x`, `y` properties corresponding to path center coordinates
- - - - - - - -
- - -
- - - -
- - - - - {Number} - - getHeight() -
- -
- Returns height of an object - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} height value
- - - - - - - -
- - -
- - - -
- - - - - {Number} - - getWidth() -
- -
- Returns width of an object - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} width value
- - - - - - - -
- - -
- - - -
- - - - - {Boolean} - - hasStateChanged() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Boolean} true if instance' state has changed
- - - - - - - -
- - -
- - - -
- - - - - - - initialize(options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Object} options - Optional -
-
Options object
- -
- - - - -
- - - -
- - - - - {Boolean} - - intersectsWithObject(other) -
- -
- Returns true if object intersects with another object - - - - -
- - - - -
-
Parameters:
- -
- {Object} other - -
-
Object to test
- -
- - - -
- - - - - - - - -
Returns:
- -
{Boolean}
- - - - - - - -
- - -
- - - -
- - - - - {Boolean} - - intersectsWithRect(selectionTL, selectionBR) -
- -
- Returns true if object intersects with an area formed by 2 points - - - - -
- - - - -
-
Parameters:
- -
- {Object} selectionTL - -
-
- -
- {Object} selectionBR - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{Boolean}
- - - - - - - -
- - -
- - - -
- - - - - {Boolean} - - isActive() -
- -
- Returns true if an object is in its active state - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Boolean} true if an object is in its active state
- - - - - - - -
- - -
- - - -
- - - - - {Boolean} - - isContainedWithinRect(selectionTL, selectionBR) -
- -
- Returns true if object is fully contained within area formed by 2 points - - - - -
- - - - -
-
Parameters:
- -
- {Object} selectionTL - -
-
- -
- {Object} selectionBR - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{Boolean}
- - - - - - - -
- - -
- - - -
- - - - - {Boolean} - - isType(type) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- type - -
-
{String} type to check against
- -
- - - -
- - - - - - - - -
Returns:
- -
{Boolean} true if specified type is identical to the type of instance
- - - - - - - -
- - -
- - - -
- - - - - - - render(ctx, noTransform) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {CanvasRenderingContext2D} ctx - -
-
context to render on
- -
- {Boolean} noTransform - -
-
- -
- - - - -
- - - -
- - - - - {fabric.Object} - - saveState() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - scale(value) -
- -
- Scales an object (equally by x and y) - - - - -
- - - - -
-
Parameters:
- -
- value - -
-
{Number} scale factor
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - scaleToHeight(value) -
- -
- Scales an object to a given height (scaling by x/y equally) - - - - -
- - - - -
-
Parameters:
- -
- value - -
-
{Number} new height value
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - scaleToWidth(value) -
- -
- Scales an object to a given width (scaling by x/y equally) - - - - -
- - - - -
-
Parameters:
- -
- value - -
-
{Number} new width value
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - set(property, value) -
- -
- Basic setter - - - - -
- - - - -
-
Parameters:
- -
- {Any} property - -
-
- -
- {Any} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - setActive(active) -
- -
- Sets state of an object - `true` makes it active, `false` - inactive - - - - -
- - - - -
-
Parameters:
- -
- {Boolean} active - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - setAngle(value) -
- -
- Sets object's angle - - - - -
- - - - -
-
Parameters:
- -
- value - -
-
{Number} angle value
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - setCoords() -
- -
- Sets corner position coordinates based on current angle, width and height. - - - - -
- - - - - - - -
- - - -
- - - - - {fabric.Object} - - setOpacity(value) -
- -
- Sets object opacity - - - - -
- - - - -
-
Parameters:
- -
- value - -
-
{Number} value 0-1
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - setOptions(options) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Object} options - Optional -
-
- -
- - - - -
- - - -
- - - - - {fabric.Object} - - setSourcePath(value) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - straighten() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - toDatalessObject() -
- -
- - - - - -
- - - - - - - -
- - - -
- - - - - {String} - - toDataURL() -
- -
- Converts an object into a data-url-like string - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} string of data
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - toggle(property) -
- -
- Toggles specified property from `true` to `false` or from `false` to `true` - - - - -
- - - - -
-
Parameters:
- -
- {String} property - -
-
property to toggle
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Object} - - toGrayscale() -
- -
- Makes object's color grayscale - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toJSON() -
- -
- Returns a JSON representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} json
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns an object representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object}
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toString() -
- -
- Returns a string representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String}
- - - - - - - -
- - -
- - - -
- - - - - - - transform(ctx) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {CanvasRenderingContext2D} ctx - -
-
Context
- -
- - - - - - -
+ +
+ + + + +
+
Parameters:
+ +
+ {CanvasRenderingContext2D} ctx + +
+
Context to draw on
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ +
+ + {fabric.Object} + fxRemove(callbacks) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {Object} callbacks + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
- + +
+ + {fabric.Object} + fxStraighten(callbacks) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {Object} callbacks + +
+
- onComplete: invoked on completion + - onChange: invoked on every step of animation
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
-
+ +
+ + {Any} + get(property) + +
+
+ Basic getter + + +
+ + + + +
+
Parameters:
+ +
+ {Any} property + +
+
+ +
+ + + + + +
+
Returns:
+ +
{Any} value of a property
+ +
+ + + + +
+ + +
+ + {Number} + getAngle() + +
+
+ Returns object's angle value + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} angle value
+ +
+ + + + +
+ + +
+ + {Object} + getCenter() + +
+
+ + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} object with `x`, `y` properties corresponding to path center coordinates
+ +
+ + + + +
+ + +
+ + {Number} + getHeight() + +
+
+ Returns height of an object + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} height value
+ +
+ + + + +
+ + +
+ + {Number} + getWidth() + +
+
+ Returns width of an object + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} width value
+ +
+ + + + +
+ + +
+ + {Boolean} + hasStateChanged() + +
+
+ + + +
+ + + + + + + + +
+
Returns:
+ +
{Boolean} true if instance' state has changed
+ +
+ + + + +
+ + +
+ + + initialize(options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + + + + +
+ + +
+ + {Boolean} + intersectsWithObject(other) + +
+
+ Returns true if object intersects with another object + + +
+ + + + +
+
Parameters:
+ +
+ {Object} other + +
+
Object to test
+ +
+ + + + + +
+
Returns:
+ +
{Boolean}
+ +
+ + + + +
+ + +
+ + {Boolean} + intersectsWithRect(selectionTL, selectionBR) + +
+
+ Returns true if object intersects with an area formed by 2 points + + +
+ + + + +
+
Parameters:
+ +
+ {Object} selectionTL + +
+
+ +
+ {Object} selectionBR + +
+
+ +
+ + + + + +
+
Returns:
+ +
{Boolean}
+ +
+ + + + +
+ + +
+ + {Boolean} + isActive() + +
+
+ Returns true if an object is in its active state + + +
+ + + + + + + + +
+
Returns:
+ +
{Boolean} true if an object is in its active state
+ +
+ + + + +
+ + +
+ + {Boolean} + isContainedWithinRect(selectionTL, selectionBR) + +
+
+ Returns true if object is fully contained within area formed by 2 points + + +
+ + + + +
+
Parameters:
+ +
+ {Object} selectionTL + +
+
+ +
+ {Object} selectionBR + +
+
+ +
+ + + + + +
+
Returns:
+ +
{Boolean}
+ +
+ + + + +
+ + +
+ + {Boolean} + isType(type) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ type + +
+
{String} type to check against
+ +
+ + + + + +
+
Returns:
+ +
{Boolean} true if specified type is identical to the type of instance
+ +
+ + + + +
+ + +
+ + + render(ctx, noTransform) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {CanvasRenderingContext2D} ctx + +
+
context to render on
+ +
+ {Boolean} noTransform + +
+
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Object} + saveState() + +
+
+ + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + scale(value) + +
+
+ Scales an object (equally by x and y) + + +
+ + + + +
+
Parameters:
+ +
+ value + +
+
{Number} scale factor
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + scaleToHeight(value) + +
+
+ Scales an object to a given height (scaling by x/y equally) + + +
+ + + + +
+
Parameters:
+ +
+ value + +
+
{Number} new height value
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + scaleToWidth(value) + +
+
+ Scales an object to a given width (scaling by x/y equally) + + +
+ + + + +
+
Parameters:
+ +
+ value + +
+
{Number} new width value
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + set(property, value) + +
+
+ Basic setter + + +
+ + + + +
+
Parameters:
+ +
+ {Any} property + +
+
+ +
+ {Any} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + setActive(active) + +
+
+ Sets state of an object - `true` makes it active, `false` - inactive + + +
+ + + + +
+
Parameters:
+ +
+ {Boolean} active + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {Object} + setAngle(value) + +
+
+ Sets object's angle + + +
+ + + + +
+
Parameters:
+ +
+ value + +
+
{Number} angle value
+ +
+ + + + + +
+
Returns:
+ +
{Object} thisArg
+ +
+ + + + +
+ + +
+ + + setCoords() + +
+
+ Sets corner position coordinates based on current angle, width and height. + + +
+ + + + + + + + + + + +
+ + +
+ + {fabric.Object} + setOpacity(value) + +
+
+ Sets object opacity + + +
+ + + + +
+
Parameters:
+ +
+ value + +
+
{Number} value 0-1
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + + setOptions(options) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {Object} options + Optional +
+
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Object} + setSourcePath(value) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {String} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + straighten() + +
+
+ + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + + toDatalessObject() + +
+
+ Returns (dataless) object representation of an instance + + +
+ + + + + + + + + + + +
+ + +
+ + {String} + toDataURL() + +
+
+ Converts an object into a data-url-like string + + +
+ + + + + + + + +
+
Returns:
+ +
{String} string of data
+ +
+ + + + +
+ + +
+ + {fabric.Object} + toggle(property) + +
+
+ Toggles specified property from `true` to `false` or from `false` to `true` + + +
+ + + + +
+
Parameters:
+ +
+ {String} property + +
+
property to toggle
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Object} + toGrayscale() + +
+
+ Makes object's color grayscale + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.Object} thisArg
+ +
+ + + + +
+ + +
+ + {String} + toJSON() + +
+
+ Returns a JSON representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{String} json
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns an object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object}
+ +
+ + + + +
+ + +
+ + {String} + toString() + +
+
+ Returns a string representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{String}
+ +
+ + + + +
+ + +
+ + + transform(ctx) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {CanvasRenderingContext2D} ctx + +
+
Context
+ +
+ + + + + + + + + + + + + + + +
+ - + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT) +
diff --git a/docs/symbols/fabric.Path.html b/docs/symbols/fabric.Path.html index 748720e7..1963caf1 100644 --- a/docs/symbols/fabric.Path.html +++ b/docs/symbols/fabric.Path.html @@ -1,4 +1,5 @@ - + @@ -6,856 +7,848 @@ JsDoc Reference - fabric.Path - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Path +

+ + +

+ +
Extends + fabric.Object.
+ + + Path + + +
Defined in: path.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Path() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<static>   +
+ fabric.Path.ATTRIBUTE_NAMES +
+
List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`)
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
Returns number representation of an instance complexity
+
<static>   +
fabric.Path.fromElement(element, options) +
+
Creates an instance of fabric.Path from an SVG element
+
<static>   +
fabric.Path.fromObject(object) +
+
Creates an instance of fabric.Path from an object
+
  +
initialize(path, options) +
+
Constructor
+
  +
render(ctx, noTransform) +
+
Renders path on a specified context
+
  +
toDatalessObject() +
+
Returns dataless object representation of an instance
+
  +
toObject() +
+
Returns object representation of an instance
+
  +
toString() +
+
Returns string representation of an instance
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDataURL, toggle, toGrayscale, toJSON, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Path() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Path.ATTRIBUTE_NAMES + +
+
+ List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) + + +
+ + + + + + +
+
See:
+ +
http://www.w3.org/TR/SVG/paths.html#PathElement
+ +
+ + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ Returns number representation of an instance complexity + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity
+ +
+ + + + +
+ + +
<static> + + {fabric.Path} + fabric.Path.fromElement(element, options) + +
+
+ Creates an instance of fabric.Path from an SVG element + + +
+ + + + +
+
Parameters:
+ +
+ {SVGElement} element + +
+
to parse
+ +
+ {Object} options + +
+
object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Path} Instance of fabric.Path
+ +
+ + + + +
+ + +
<static> + + {fabric.Path} + fabric.Path.fromObject(object) + +
+
+ Creates an instance of fabric.Path from an object + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Path} Instance of fabric.Path
+ +
+ + + + +
+ + +
+ + + initialize(path, options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Array|String} path + +
+
Path data (sequence of coordinates and corresponding "command" tokens)
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + + + + +
+ + +
+ + + render(ctx, noTransform) + +
+
+ Renders path on a specified context + + +
+ + + + +
+
Parameters:
+ +
+ {CanvasRenderingContext2D} ctx + +
+
context to render path on
+ +
+ {Boolean} noTransform + +
+
When true, context is not transformed
+ +
+ + + + + + + + +
+ + +
+ + {Object} + toDatalessObject() + +
+
+ Returns dataless object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object}
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object}
+ +
+ + + + +
+ + +
+ + {String} + toString() + +
+
+ Returns string representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{String} string representation of an instance
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Path -

- -

- Path -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Path() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
Returns number representation of an instance complexity
-
<static>   -
fabric.Path.fromElement(element, options) -
-
Creates an instance of fabric.Path from an SVG element
-
<static>   -
fabric.Path.fromObject(object) -
-
Creates an instance of fabric.Path from an object
-
  -
initialize(path, options) -
-
Constructor
-
  -
render(ctx, noTransform) -
-
-
  -
set(prop, value) -
-
-
  -
toDatalessObject() -
-
-
  -
toObject() -
-
-
  -
toString() -
-
Returns string representation of an instance
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDataURL, toggle, toGrayscale, toJSON, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Path() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- Returns number representation of an instance complexity - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Path} - - fabric.Path.fromElement(element, options) -
- -
- Creates an instance of fabric.Path from an SVG element - - - - -
- - - - -
-
Parameters:
- -
- {SVGElement} element - -
-
to parse
- -
- {Object} options - -
-
object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Path} Instance of fabric.Path
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Path} - - fabric.Path.fromObject(object) -
- -
- Creates an instance of fabric.Path from an object - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Path} Instance of fabric.Path
- - - - - - - -
- - -
- - - -
- - - - - - - initialize(path, options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Array|String} path - -
-
Path data (sequence of coordinates and corresponding "command" tokens)
- -
- {Object} options - Optional -
-
Options object
- -
- - - - -
- - - -
- - - - - - - render(ctx, noTransform) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- ctx - -
-
- -
- noTransform - -
-
- -
- - - - -
- - - -
- - - - - - - set(prop, value) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- prop - -
-
- -
- value - -
-
- -
- - - - -
- - - -
- - - - - {Object} - - toDatalessObject() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object}
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object}
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toString() -
- -
- Returns string representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} string representation of an instance
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.PathGroup.html b/docs/symbols/fabric.PathGroup.html index 871da9c4..6a8db8ff 100644 --- a/docs/symbols/fabric.PathGroup.html +++ b/docs/symbols/fabric.PathGroup.html @@ -1,4 +1,5 @@ - + @@ -6,1063 +7,965 @@ JsDoc Reference - fabric.PathGroup - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.PathGroup +

+ + +

+ +
Extends + fabric.Path.
+ + + PathGroup + + +
Defined in: path_group.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.PathGroup() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
  +
+ forceFillOverwrite +
+
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
Returns number representation of object's complexity
+
<static>   +
fabric.PathGroup.fromObject(object) +
+
Creates fabric.Triangle instance from an object representation
+
  +
getObjects() +
+
Returns all paths in this path group
+
  +
initialize(paths, options) +
+
Constructor
+
  +
isSameColor() +
+
Returns true if all paths in this group are of same color
+
  +
render(ctx) +
+
Renders this group on a specified context
+
  +
set(prop, value) +
+
Sets certain property to a certain value
+
  +
toDatalessObject() +
+
Returns dataless object representation of this path group
+
  +
toGrayscale() +
+
Makes path group grayscale
+
  +
toObject() +
+
Returns object representation of this path group
+
  +
toString() +
+
Returns a string representation of this path group
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDataURL, toggle, toJSON, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.PathGroup() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
+ + {Boolean} + forceFillOverwrite + +
+
+ + + +
+ + + + + + + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ Returns number representation of object's complexity + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity
+ +
+ + + + +
+ + +
<static> + + {fabric.PathGroup} + fabric.PathGroup.fromObject(object) + +
+
+ Creates fabric.Triangle instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.PathGroup}
+ +
+ + + + +
+ + +
+ + {Array} + getObjects() + +
+
+ Returns all paths in this path group + + +
+ + + + + + + + +
+
Returns:
+ +
{Array} array of path objects included in this path group
+ +
+ + + + +
+ + +
+ + {fabric.PathGroup} + initialize(paths, options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Array} paths + +
+
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.PathGroup} thisArg
+ +
+ + + + +
+ + +
+ + {Boolean} + isSameColor() + +
+
+ Returns true if all paths in this group are of same color + + +
+ + + + + + + + +
+
Returns:
+ +
{Boolean} true if all paths are of the same color (`fill`)
+ +
+ + + + +
+ + +
+ + + render(ctx) + +
+
+ Renders this group on a specified context + + +
+ + + + +
+
Parameters:
+ +
+ {CanvasRenderingContext2D} ctx + +
+
Context to render this instance on
+ +
+ + + + + + + + +
+ + +
+ + {fabric.PathGroup} + set(prop, value) + +
+
+ Sets certain property to a certain value + + +
+ + + + +
+
Parameters:
+ +
+ {String} prop + +
+
+ +
+ {Any} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.PathGroup} thisArg
+ +
+ + + + +
+ + +
+ + {Object} + toDatalessObject() + +
+
+ Returns dataless object representation of this path group + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} dataless object representation of an instance
+ +
+ + + + +
+ + +
+ + {fabric.PathGroup} + toGrayscale() + +
+
+ Makes path group grayscale + + +
+ + + + + + + + +
+
Returns:
+ +
{fabric.PathGroup} thisArg
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of this path group + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} object representation of an instance
+ +
+ + + + +
+ + +
+ + {String} + toString() + +
+
+ Returns a string representation of this path group + + +
+ + + + + + + + +
+
Returns:
+ +
{String} string representation of an object
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .PathGroup -

- -

- PathGroup -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.PathGroup() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- forceFillOverwrite -
-
-
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
Returns number representation of object's complexity
-
<static>   -
fabric.PathGroup.fromObject(object) -
-
-
  -
getObjects() -
-
-
  -
initialize(paths, options) -
-
Constructor
-
  -
initProperties() -
-
-
  -
isSameColor() -
-
-
  -
render(ctx) -
-
-
  -
set(prop, value) -
-
-
  -
toDatalessObject() -
-
-
  -
toGrayscale() -
-
Makes path group grayscale
-
  -
toObject() -
-
-
  -
toString() -
-
Returns a string representation of an object
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDataURL, toggle, toJSON, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.PathGroup() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - - - - {Boolean} - - forceFillOverwrite -
- -
- - - - -
- - - - - -
- - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- Returns number representation of object's complexity - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.PathGroup} - - fabric.PathGroup.fromObject(object) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.PathGroup}
- - - - - - - -
- - -
- - - -
- - - - - {Array} - - getObjects() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Array} array of path objects included in this path group
- - - - - - - -
- - -
- - - -
- - - - - {fabric.PathGroup} - - initialize(paths, options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Array} paths - -
-
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.PathGroup} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - initProperties() -
- -
- - - - - -
- - - - - - - -
- - - -
- - - - - {Boolean} - - isSameColor() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Boolean} true if all paths are of the same color (`fill`)
- - - - - - - -
- - -
- - - -
- - - - - - - render(ctx) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- ctx - -
-
- -
- - - - -
- - - -
- - - - - {fabric.PathGroup} - - set(prop, value) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} prop - -
-
- -
- {Any} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.PathGroup} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toDatalessObject() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} dataless object representation of an instance
- - - - - - - -
- - -
- - - -
- - - - - {fabric.PathGroup} - - toGrayscale() -
- -
- Makes path group grayscale - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{fabric.PathGroup} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} object representation of an instance
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toString() -
- -
- Returns a string representation of an object - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} string representation of an object
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Point.html b/docs/symbols/fabric.Point.html index 3c4da482..e726eccb 100644 --- a/docs/symbols/fabric.Point.html +++ b/docs/symbols/fabric.Point.html @@ -1,4 +1,5 @@ - + @@ -6,1642 +7,1610 @@ JsDoc Reference - fabric.Point - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Point +

+ + +

+ + + + + + +
Defined in: point.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Point(x, y) +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
add(that) +
+
+
  +
addEquals(that) +
+
+
  +
distanceFrom(that) +
+
+
  +
divide(scalar) +
+
+
  +
divideEquals(scalar) +
+
+
  +
eq(that) +
+
+
  +
gt(that) +
+
+
  +
gte(that) +
+
+
  +
init(x, y) +
+
+
  +
lerp(that, t) +
+
+
  +
lt(that) +
+
+
  +
lte(that) +
+
+
  +
max(that) +
+
+
  +
min(that) +
+
+
  +
multiply(scalar) +
+
+
  +
multiplyEquals(scalar) +
+
+
  +
scalarAdd(scalar) +
+
+
  +
scalarAddEquals(scalar, thisArg) +
+
+
  +
scalarSubtract(scalar) +
+
+
  +
scalarSubtractEquals(scalar) +
+
+
  +
setFromPoint(that) +
+
+
  +
setXY(x, y) +
+
+
  +
subtract(that) +
+
+
  +
subtractEquals(that) +
+
+
  +
swap(that) +
+
+
  +
toString() +
+
+
+ + + + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Point(x, y) +
+ +
+ + +
+ + + + + +
+
Parameters:
+ +
+ {Number} x + +
+
+ +
+ {Number} y + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Point} thisArg
+ +
+ + + -
-
+ + + + + + +
+ Method Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:01 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
+ + {fabric.Point} + add(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Point} that + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Point} new Point instance with added values
+ +
+ + + + +
+ + +
+ + {fabric.Point} + addEquals(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Point} that + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Point} thisArg
+ +
+ + + + +
+ + +
+ + + distanceFrom(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + divide(scalar) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ scalar + +
+
+ +
+ + + + + + + + +
+ + +
+ + + divideEquals(scalar) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ scalar + +
+
+ +
+ + + + + + + + +
+ + +
+ + + eq(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + gt(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + gte(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + init(x, y) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {Number} x + +
+
+ +
+ {Number} y + +
+
+ +
+ + + + + + + + +
+ + +
+ + + lerp(that, t) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ t + +
+
+ +
+ + + + + + + + +
+ + +
+ + + lt(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + lte(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + max(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + min(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + multiply(scalar) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ scalar + +
+
+ +
+ + + + + + + + +
+ + +
+ + + multiplyEquals(scalar) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ scalar + +
+
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Point} + scalarAdd(scalar) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {Number} scalar + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Point} new Point with added value
+ +
+ + + + +
+ + +
+ + + scalarAddEquals(scalar, thisArg) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {Number} scalar + +
+
+ +
+ {fabric.Point} thisArg + +
+
+ +
+ + + + + + + + +
+ + +
+ + + scalarSubtract(scalar) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ scalar + +
+
+ +
+ + + + + + + + +
+ + +
+ + + scalarSubtractEquals(scalar) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ scalar + +
+
+ +
+ + + + + + + + +
+ + +
+ + + setFromPoint(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + setXY(x, y) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ x + +
+
+ +
+ y + +
+
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Point} + subtract(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Point} that + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Point} new Point object with subtracted values
+ +
+ + + + +
+ + +
+ + {fabric.Point} + subtractEquals(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {fabric.Point} that + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Point} thisArg
+ +
+ + + + +
+ + +
+ + + swap(that) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ that + +
+
+ +
+ + + + + + + + +
+ + +
+ + + toString() + +
+
+ + + +
+ + + + + + + + + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Point -

- -

- -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Point(x, y) -
-
-
-
- - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
add(that) -
-
-
  -
addEquals(that) -
-
-
  -
distanceFrom(that) -
-
-
  -
divide(scalar) -
-
-
  -
divideEquals(scalar) -
-
-
  -
eq(that) -
-
-
  -
gt(that) -
-
-
  -
gte(that) -
-
-
  -
init(x, y) -
-
-
  -
lerp(that, t) -
-
-
  -
lt(that) -
-
-
  -
lte(that) -
-
-
  -
max(that) -
-
-
  -
min(that) -
-
-
  -
multiply(scalar) -
-
-
  -
multiplyEquals(scalar) -
-
-
  -
scalarAdd(scalar) -
-
-
  -
scalarAddEquals(scalar, thisArg) -
-
-
  -
scalarSubtract(scalar) -
-
-
  -
scalarSubtractEquals(scalar) -
-
-
  -
setFromPoint(that) -
-
-
  -
setXY(x, y) -
-
-
  -
subtract(that) -
-
-
  -
subtractEquals(that) -
-
-
  -
swap(that) -
-
-
  -
toString() -
-
-
-
- - - - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Point(x, y) -
- -
- - -
- - - - -
-
Parameters:
- -
- {Number} x - -
-
- -
- {Number} y - -
-
- -
- - - -
- - - - - - - -
Returns:
- -
{fabric.Point} thisArg
- - - - - - -
- -
-
- - - - - - - -
-
-
- Method Detail -
- - - - -
- - - - - {fabric.Point} - - add(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Point} that - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Point} new Point instance with added values
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Point} - - addEquals(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Point} that - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Point} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - distanceFrom(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - divide(scalar) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- scalar - -
-
- -
- - - - -
- - - -
- - - - - - - divideEquals(scalar) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- scalar - -
-
- -
- - - - -
- - - -
- - - - - - - eq(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - gt(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - gte(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - init(x, y) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Number} x - -
-
- -
- {Number} y - -
-
- -
- - - - -
- - - -
- - - - - - - lerp(that, t) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- t - -
-
- -
- - - - -
- - - -
- - - - - - - lt(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - lte(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - max(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - min(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - multiply(scalar) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- scalar - -
-
- -
- - - - -
- - - -
- - - - - - - multiplyEquals(scalar) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- scalar - -
-
- -
- - - - -
- - - -
- - - - - {fabric.Point} - - scalarAdd(scalar) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Number} scalar - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Point} new Point with added value
- - - - - - - -
- - -
- - - -
- - - - - - - scalarAddEquals(scalar, thisArg) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Number} scalar - -
-
- -
- {fabric.Point} thisArg - -
-
- -
- - - - -
- - - -
- - - - - - - scalarSubtract(scalar) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- scalar - -
-
- -
- - - - -
- - - -
- - - - - - - scalarSubtractEquals(scalar) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- scalar - -
-
- -
- - - - -
- - - -
- - - - - - - setFromPoint(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - setXY(x, y) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- x - -
-
- -
- y - -
-
- -
- - - - -
- - - -
- - - - - {fabric.Point} - - subtract(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Point} that - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Point} new Point object with subtracted values
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Point} - - subtractEquals(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {fabric.Point} that - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Point} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - swap(that) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- that - -
-
- -
- - - - -
- - - -
- - - - - - - toString() -
- -
- - - - - -
- - - - - - - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Polygon.html b/docs/symbols/fabric.Polygon.html index 83c1b066..de5d4144 100644 --- a/docs/symbols/fabric.Polygon.html +++ b/docs/symbols/fabric.Polygon.html @@ -1,4 +1,5 @@ - + @@ -6,688 +7,715 @@ JsDoc Reference - fabric.Polygon - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Polygon +

+ + +

+ +
Extends + fabric.Object.
+ + + Polygon + + +
Defined in: polygon.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Polygon() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<static>   +
+ fabric.Polygon.ATTRIBUTE_NAMES +
+
List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
Returns complexity of an instance
+
<static>   +
fabric.Polygon.fromElement(element, options) +
+
Returns fabric.Polygon instance from an SVG element
+
<static>   +
fabric.Polygon.fromObject(object) +
+
Returns fabric.Polygon instance from an object representation
+
  +
initialize(points, options) +
+
Constructor
+
  +
toObject() +
+
Returns object representation of an instance
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Polygon() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Polygon.ATTRIBUTE_NAMES + +
+
+ List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) + + +
+ + + + + + + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ Returns complexity of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity of this instance
+ +
+ + + + +
+ + +
<static> + + {fabric.Polygon} + fabric.Polygon.fromElement(element, options) + +
+
+ Returns fabric.Polygon instance from an SVG element + + +
+ + + + +
+
Parameters:
+ +
+ {SVGElement} element + +
+
Element to parse
+ +
+ {Object} options + +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Polygon}
+ +
+ + + + +
+ + +
<static> + + {fabric.Polygon} + fabric.Polygon.fromObject(object) + +
+
+ Returns fabric.Polygon instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
Object to create an instance from
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Polygon}
+ +
+ + + + +
+ + +
+ + {fabric.Polygon} + initialize(points, options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Array} points + +
+
Array of points
+ +
+ {Object} options + +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Polygon} thisArg
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} object representation of an instance
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Polygon -

- -

- Polygon -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Polygon() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
<static>   -
- fabric.Polygon.ATTRIBUTE_NAMES -
-
List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
-
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
Returns complexity of an instance
-
<static>   -
fabric.Polygon.fromElement(element, options) -
-
Returns fabric.Polygon instance from an SVG element
-
<static>   -
fabric.Polygon.fromObject(object) -
-
Returns fabric.Polygon instance from an object representation
-
  -
initialize(points, options) -
-
Constructor
-
  -
toObject() -
-
Returns object representation of an instance
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Polygon() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - <static> - - - - - fabric.Polygon.ATTRIBUTE_NAMES -
- -
- List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) - - - -
- - - - - -
- - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- Returns complexity of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity of this instance
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Polygon} - - fabric.Polygon.fromElement(element, options) -
- -
- Returns fabric.Polygon instance from an SVG element - - - - -
- - - - -
-
Parameters:
- -
- {SVGElement} element - -
-
Element to parse
- -
- {Object} options - -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Polygon}
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Polygon} - - fabric.Polygon.fromObject(object) -
- -
- Returns fabric.Polygon instance from an object representation - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
Object to create an instance from
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Polygon}
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Polygon} - - initialize(points, options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Array} points - -
-
Array of points
- -
- {Object} options - -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Polygon} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns object representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} object representation of an instance
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Polyline.html b/docs/symbols/fabric.Polyline.html index 9c70a721..f4354f50 100644 --- a/docs/symbols/fabric.Polyline.html +++ b/docs/symbols/fabric.Polyline.html @@ -1,4 +1,5 @@ - + @@ -6,653 +7,715 @@ JsDoc Reference - fabric.Polyline - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Polyline +

+ + +

+ +
Extends + fabric.Object.
+ + + Polyline + + +
Defined in: polyline.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Polyline() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<static>   +
+ fabric.Polyline.ATTRIBUTE_NAMES +
+
List of attribute names to account for when parsing SVG element (used by `fabric.Polyline.fromElement`)
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
Returns complexity of an instance
+
<static>   +
fabric.Polyline.fromElement(element, options) +
+
Returns fabric.Polyline instance from an SVG element
+
<static>   +
fabric.Polyline.fromObject(object) +
+
Returns fabric.Polyline instance from an object representation
+
  +
initialize(points, options) +
+
Constructor
+
  +
toObject() +
+
Returns object representation of an instance
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Polyline() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Polyline.ATTRIBUTE_NAMES + +
+
+ List of attribute names to account for when parsing SVG element (used by `fabric.Polyline.fromElement`) + + +
+ + + + + + + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ Returns complexity of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity
+ +
+ + + + +
+ + +
<static> + + {Object} + fabric.Polyline.fromElement(element, options) + +
+
+ Returns fabric.Polyline instance from an SVG element + + +
+ + + + +
+
Parameters:
+ +
+ {SVGElement} element + +
+
Element to parse
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{Object} instance of fabric.Polyline
+ +
+ + + + +
+ + +
<static> + + {fabric.Polyline} + fabric.Polyline.fromObject(object) + +
+
+ Returns fabric.Polyline instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + Optional +
+
Object to create an instance from
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Polyline}
+ +
+ + + + +
+ + +
+ + {Object} + initialize(points, options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {Array} points + +
+
array of points
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{Object} thisArg
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} Object representation of an instance
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Polyline -

- -

- Polyline -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Polyline() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
Returns complexity of an instance
-
<static>   -
fabric.Polyline.fromElement(element, options) -
-
Returns fabric.Polyline instance from an SVG element
-
<static>   -
fabric.Polyline.fromObject(object) -
-
Returns fabric.Polyline instance from an object representation
-
  -
initialize(points, options) -
-
Constructor
-
  -
toObject() -
-
Returns object representation of an instance
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toString, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Polyline() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- Returns complexity of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- - -
- - - -
- - <static> - - - {Object} - - fabric.Polyline.fromElement(element, options) -
- -
- Returns fabric.Polyline instance from an SVG element - - - - -
- - - - -
-
Parameters:
- -
- {SVGElement} element - -
-
Element to parse
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} instance of fabric.Polyline
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Polyline} - - fabric.Polyline.fromObject(object) -
- -
- Returns fabric.Polyline instance from an object representation - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - Optional -
-
Object to create an instance from
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Polyline}
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - initialize(points, options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {Array} points - -
-
array of points
- -
- {Object} options - Optional -
-
Options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- Returns object representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} Object representation of an instance
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Rect.html b/docs/symbols/fabric.Rect.html index 80472e15..ec474e67 100644 --- a/docs/symbols/fabric.Rect.html +++ b/docs/symbols/fabric.Rect.html @@ -1,4 +1,5 @@ - + @@ -6,624 +7,700 @@ JsDoc Reference - fabric.Rect - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Rect +

+ + +

+ +
Extends + fabric.Object.
+ + + Rect + + +
Defined in: rect.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Rect() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
<static>   +
+ fabric.Rect.ATTRIBUTE_NAMES +
+
List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
+
  +
+ options +
+
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
+
<static>   +
fabric.Rect.fromElement(element, options) +
+
Returns fabric.Rect instance from an SVG element
+
<static>   +
fabric.Rect.fromObject(object) +
+
Returns fabric.Rect instance from an object representation
+
  +
initialize(options) +
+
Constructor
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toObject, toString, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Rect() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.Rect.ATTRIBUTE_NAMES + +
+
+ List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) + + +
+ + + + + + + + +
+ + +
+ + {Object} + options + +
+
+ + + +
+ + + + + + + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity
+ +
+ + + + +
+ + +
<static> + + {fabric.Rect} + fabric.Rect.fromElement(element, options) + +
+
+ Returns fabric.Rect instance from an SVG element + + +
+ + + + +
+
Parameters:
+ +
+ element + +
+
{SVGElement} element to parse
+ +
+ options + +
+
{Object} options object
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Rect} instance of fabric.Rect
+ +
+ + + + +
+ + +
<static> + + {Object} + fabric.Rect.fromObject(object) + +
+
+ Returns fabric.Rect instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{Object} object to create an instance from
+ +
+ + + + + +
+
Returns:
+ +
{Object} instance of fabric.Rect
+ +
+ + + + +
+ + +
+ + {Object} + initialize(options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ options + +
+
{Object} options object
+ +
+ + + + + +
+
Returns:
+ +
{Object} thisArg
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Rect -

- -

- Rect -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Rect() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- options -
-
-
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
-
<static>   -
fabric.Rect.fromElement(element, options) -
-
-
<static>   -
fabric.Rect.fromObject(object) -
-
-
  -
initialize(options) -
-
Constructor
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toObject, toString, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Rect() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - - - - {Object} - - options -
- -
- - - - -
- - - - - -
- - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Rect} - - fabric.Rect.fromElement(element, options) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- element - -
-
{SVGElement} element to parse
- -
- options - -
-
{Object} options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Rect} instance of fabric.Rect
- - - - - - - -
- - -
- - - -
- - <static> - - - {Object} - - fabric.Rect.fromObject(object) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{Object} object to create an instance from
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} instance of fabric.Rect
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - initialize(options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- options - -
-
{Object} options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} thisArg
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Text.html b/docs/symbols/fabric.Text.html index 6695c1b2..d93005e5 100644 --- a/docs/symbols/fabric.Text.html +++ b/docs/symbols/fabric.Text.html @@ -1,4 +1,5 @@ - + @@ -6,1107 +7,1009 @@ JsDoc Reference - fabric.Text - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Text +

+ + +

+ +
Extends + fabric.Object.
+ + + Text + + +
Defined in: text.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Text() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
  +
+ options +
+
+
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
<static>   +
fabric.Text.fromElement(element) +
+
Returns fabric.Text instance from an SVG element (not yet implemented)
+
<static>   +
fabric.Text.fromObject(object) +
+
Returns fabric.Text instance from an object representation
+
  +
getText() +
+
Returns actual text value of an instance
+
  +
initialize(text, options) +
+
Constructor
+
  +
render(ctx) +
+
Renders text instance on a specified context
+
  +
set(name, value) +
+
Sets specified property to a specified value
+
  +
setColor(value) +
+
Sets "color" of an instance (alias of `set('fill', …)`)
+
  +
setFontsize(value) +
+
Sets fontsize of an instance and updates its coordinates
+
  +
setText(value) +
+
Sets text of an instance, and updates its coordinates
+
  +
toObject() +
+
Returns object representation of an instance
+
  +
toString() +
+
Returns string representation of an instance
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, complexity, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Text() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
+ + {Object} + options + +
+
+ + + +
+ + + + + + + + +
+ + +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
<static> + + {fabric.Text} + fabric.Text.fromElement(element) + +
+
+ Returns fabric.Text instance from an SVG element (not yet implemented) + + +
+ + + + +
+
Parameters:
+ +
+ element + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Text} an instance
+ +
+ + + + +
+ + +
<static> + + {fabric.Text} + fabric.Text.fromObject(object) + +
+
+ Returns fabric.Text instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
to create an instance from
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Text} an instance
+ +
+ + + + +
+ + +
+ + {String} + getText() + +
+
+ Returns actual text value of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{String}
+ +
+ + + + +
+ + +
+ + {fabric.Text} + initialize(text, options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ {String} text + +
+
+ +
+ {Object} options + Optional +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Text} thisArg
+ +
+ + + + +
+ + +
+ + + render(ctx) + +
+
+ Renders text instance on a specified context + + +
+ + + + +
+
Parameters:
+ +
+ ctx + +
+
{CanvasRenderingContext2D} context to render on
+ +
+ + + + + + + + +
+ + +
+ + {fabric.Text} + set(name, value) + +
+
+ Sets specified property to a specified value + + +
+ + + + +
+
Parameters:
+ +
+ {String} name + +
+
+ +
+ {Any} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Text} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Text} + setColor(value) + +
+
+ Sets "color" of an instance (alias of `set('fill', …)`) + + +
+ + + + +
+
Parameters:
+ +
+ {String} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Text} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Text} + setFontsize(value) + +
+
+ Sets fontsize of an instance and updates its coordinates + + +
+ + + + +
+
Parameters:
+ +
+ {Number} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Text} thisArg
+ +
+ + + + +
+ + +
+ + {fabric.Text} + setText(value) + +
+
+ Sets text of an instance, and updates its coordinates + + +
+ + + + +
+
Parameters:
+ +
+ {String} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{fabric.Text} thisArg
+ +
+ + + + +
+ + +
+ + {Object} + toObject() + +
+
+ Returns object representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Object} Object representation of text object
+ +
+ + + + +
+ + +
+ + {String} + toString() + +
+
+ Returns string representation of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{String} String representation of text object
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Text -

- -

- Text -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Text() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- options -
-
-
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
<static>   -
fabric.Text.fromElement(element) -
-
-
<static>   -
fabric.Text.fromObject(object) -
-
Returns fabric.Text instance from an object representation
-
  -
getText() -
-
-
  -
initialize(text, options) -
-
Constructor
-
  -
initStateProperties() -
-
-
  -
render(ctx) -
-
-
  -
set(name, value) -
-
Sets specified property to a specified value
-
  -
setColor(value) -
-
-
  -
setFontsize(value) -
-
-
  -
setText(value) -
-
Sets text of an instance, and updates its coordinates
-
  -
toObject() -
-
-
  -
toString() -
-
Returns string representation of an instance
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, complexity, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, saveState, scale, scaleToHeight, scaleToWidth, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Text() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - - - - {Object} - - options -
- -
- - - - -
- - - - - -
- - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - <static> - - - {fabric.Text} - - fabric.Text.fromElement(element) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- element - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Text} an instance
- - - - - - - -
- - -
- - - -
- - <static> - - - {fabric.Text} - - fabric.Text.fromObject(object) -
- -
- Returns fabric.Text instance from an object representation - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
to create an instance from
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Text} an instance
- - - - - - - -
- - -
- - - -
- - - - - {String} - - getText() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String}
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Text} - - initialize(text, options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- {String} text - -
-
- -
- {Object} options - Optional -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Text} thisArg
- - - - - - - -
- - -
- - - -
- - - - - - - initStateProperties() -
- -
- - - - - -
- - - - - - - -
- - - -
- - - - - - - render(ctx) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- ctx - -
-
{CanvasRenderingContext2D} context to render on
- -
- - - - -
- - - -
- - - - - {fabric.Text} - - set(name, value) -
- -
- Sets specified property to a specified value - - - - -
- - - - -
-
Parameters:
- -
- {String} name - -
-
- -
- {Any} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Text} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Text} - - setColor(value) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {String} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Text} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Text} - - setFontsize(value) -
- -
- - - - - -
- - - - -
-
Parameters:
- -
- {Number} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Text} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {fabric.Text} - - setText(value) -
- -
- Sets text of an instance, and updates its coordinates - - - - -
- - - - -
-
Parameters:
- -
- {String} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{fabric.Text} thisArg
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - toObject() -
- -
- - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Object} Object representation of text object
- - - - - - - -
- - -
- - - -
- - - - - {String} - - toString() -
- -
- Returns string representation of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{String} String representation of text object
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.Triangle.html b/docs/symbols/fabric.Triangle.html index f1076b52..bb4ab549 100644 --- a/docs/symbols/fabric.Triangle.html +++ b/docs/symbols/fabric.Triangle.html @@ -1,4 +1,5 @@ - + @@ -6,514 +7,578 @@ JsDoc Reference - fabric.Triangle - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Class fabric.Triangle +

+ + +

+ +
Extends + fabric.Object.
+ + + Triangle + + +
Defined in: triangle.class.js. + +

+ + + + + + + + + + + + + + + + + +
Class Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.Triangle() +
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
Field Summary
Field AttributesField Name and Description
  +
+ type +
+
+
+ + + +
+
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
  +
complexity() +
+
Returns complexity of an instance
+
<static>   +
fabric.Triangle.fromObject(object) +
+
Returns fabric.Triangle instance from an object representation
+
  +
initialize(options) +
+
Constructor
+
+ + + +
+
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toObject, toString, transform
+
+ + + + + + + +
+
+ Class Detail +
+ +
+ fabric.Triangle() +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + +
+ Field Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
+ + {String} + type + +
+
+ + + +
+ + + + + + + + + + + + + + +
+ Method Detail +
+ + +
+ + {Number} + complexity() + +
+
+ Returns complexity of an instance + + +
+ + + + + + + + +
+
Returns:
+ +
{Number} complexity of this instance
+ +
+ + + + +
+ + +
<static> + + {Object} + fabric.Triangle.fromObject(object) + +
+
+ Returns fabric.Triangle instance from an object representation + + +
+ + + + +
+
Parameters:
+ +
+ object + +
+
{Object} object to create an instance from
+ +
+ + + + + +
+
Returns:
+ +
{Object} instance of Canvas.Triangle
+ +
+ + + + +
+ + +
+ + {Object} + initialize(options) + +
+
+ Constructor + + +
+ + + + +
+
Parameters:
+ +
+ options + +
+
{Object} options object
+ +
+ + + + + +
+
Returns:
+ +
{Object} thisArg
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Class fabric .Triangle -

- -

- Triangle -

- - - - - - - -
- - - - - - - - - - - - - - -
Class Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.Triangle() -
-
-
-
- - - - - -
- - - - - - - - - - - - - - - - - - -
Field Summary
Field AttributesField Name and Description
  -
- type -
-
-
-
- - - -
-
Fields borrowed from class fabric.Object:
FX_DURATION, FX_TRANSITION, includeDefaultValues, MIN_SCALE_LIMIT, NUM_FRACTION_DIGITS, options, rotate, stateProperties
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
  -
complexity() -
-
Returns complexity of an instance
-
<static>   -
fabric.Triangle.fromObject(object) -
-
Returns fabric.Triangle instance from an object representation
-
  -
initialize(options) -
-
Constructor
-
-
- - - -
-
Methods borrowed from class fabric.Object:
callSuper, clone, cloneAsImage, drawBorders, drawCorners, fxRemove, fxStraighten, get, getAngle, getCenter, getHeight, getWidth, hasStateChanged, intersectsWithObject, intersectsWithRect, isActive, isContainedWithinRect, isType, render, saveState, scale, scaleToHeight, scaleToWidth, set, setActive, setAngle, setCoords, setOpacity, setOptions, setSourcePath, straighten, toDatalessObject, toDataURL, toggle, toGrayscale, toJSON, toObject, toString, transform
-
- - - - - - - - -
-
- - -
- Class Detail -
- -
- fabric.Triangle() -
- -
- - -
- - - - - - -
-
- - - - -
-
- -
- Field Detail -
- - - - -
- - - - - {String} - - type -
- -
- - - - -
- - - - - - - -
-
- - - - -
-
-
- Method Detail -
- - - - -
- - - - - {Number} - - complexity() -
- -
- Returns complexity of an instance - - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Number} complexity of this instance
- - - - - - - -
- - -
- - - -
- - <static> - - - {Object} - - fabric.Triangle.fromObject(object) -
- -
- Returns fabric.Triangle instance from an object representation - - - - -
- - - - -
-
Parameters:
- -
- object - -
-
{Object} object to create an instance from
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} instance of Canvas.Triangle
- - - - - - - -
- - -
- - - -
- - - - - {Object} - - initialize(options) -
- -
- Constructor - - - - -
- - - - -
-
Parameters:
- -
- options - -
-
{Object} options object
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} thisArg
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.html b/docs/symbols/fabric.html new file mode 100644 index 00000000..b2e5380e --- /dev/null +++ b/docs/symbols/fabric.html @@ -0,0 +1,800 @@ + + + + + + + JsDoc Reference - fabric + + + + + + + + + + + + + +
+ +

+ + Namespace fabric +

+ + +

+ + + + + + +
Defined in: parser.js. + +

+ + + + + + + + + + + + + + + + + +
Namespace Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
<static>   +
fabric.log(Values) +
+
Wrapper around `console.log` (when available)
+
<static>   +
fabric.parseAttributes(element, attributes) +
+
Returns an object of attributes' name/value, given element and an array of attribute names; +Parses parent "g" nodes recursively upwards.
+
<static>   +
fabric.parseElements(elements, options) +
+
+
<static>   +
fabric.parsePointsAttribute(points) +
+
+
<static>   +
fabric.parseStyleAttribute(element) +
+
+
<static>   +
fabric.parseSVGDocument(doc, callback) +
+
+
<static>   +
fabric.parseTransformAttribute(attributeValue) +
+
+
<static>   +
fabric.warn(Values) +
+
Wrapper around `console.warn` (when available)
+
+ + + + + + + + + +
+
+ Namespace Detail +
+ +
+ fabric +
+ +
+ + +
+ + + + + + + + + + + + +
+ + + + + + + +
+ Method Detail +
+ + +
<static> + + + fabric.log(Values) + +
+
+ Wrapper around `console.log` (when available) + +
+ Defined in: fabric.js. + + +
+ + + + +
+
Parameters:
+ +
+ {Any} Values + +
+
to log
+ +
+ + + + + + + + +
+ + +
<static> + + {Object} + fabric.parseAttributes(element, attributes) + +
+
+ Returns an object of attributes' name/value, given element and an array of attribute names; +Parses parent "g" nodes recursively upwards. + + +
+ + + + +
+
Parameters:
+ +
+ {DOMElement} element + +
+
Element to parse
+ +
+ {Array} attributes + +
+
Array of attributes to parse
+ +
+ + + + + +
+
Returns:
+ +
{Object} object containing parsed attributes' names/values
+ +
+ + + + +
+ + +
<static> + + {Array} + fabric.parseElements(elements, options) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {Array} elements + +
+
Array of elements to parse
+ +
+ {Object} options + +
+
Options object
+ +
+ + + + + +
+
Returns:
+ +
{Array} Array of corresponding instances (transformed from SVG elements)
+ +
+ + + + +
+ + +
<static> + + {Array} + fabric.parsePointsAttribute(points) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ points + +
+
{String} points attribute string
+ +
+ + + + + +
+
Returns:
+ +
{Array} array of points
+ +
+ + + + +
+ + +
<static> + + {Object} + fabric.parseStyleAttribute(element) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {SVGElement} element + +
+
Element to parse
+ +
+ + + + + +
+
Returns:
+ +
{Object} Objects with values parsed from style attribute of an element
+ +
+ + + + +
+ + +
<static> + + + fabric.parseSVGDocument(doc, callback) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ {SVGDocument} doc + +
+
SVG document to parse
+ +
+ {Function} callback + +
+
Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).
+ +
+ + + + + + + + +
+ + +
<static> + + {Array} + fabric.parseTransformAttribute(attributeValue) + +
+
+ + + +
+ + + + +
+
Parameters:
+ +
+ attributeValue + +
+
{String} string containing attribute value
+ +
+ + + + + +
+
Returns:
+ +
{Array} array of 6 elements representing transformation matrix
+ +
+ + + + +
+ + +
<static> + + + fabric.warn(Values) + +
+
+ Wrapper around `console.warn` (when available) + +
+ Defined in: fabric.js. + + +
+ + + + +
+
Parameters:
+ +
+ {Any} Values + +
+
to log as a warning
+ +
+ + + + + + + + + + + + + + + +
+
+ + + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:46 GMT-0400 (EDT) +
+ + diff --git a/docs/symbols/fabric.util.array.html b/docs/symbols/fabric.util.array.html index 0f2a60c7..65c87d05 100644 --- a/docs/symbols/fabric.util.array.html +++ b/docs/symbols/fabric.util.array.html @@ -1,4 +1,5 @@ - + @@ -6,402 +7,521 @@ JsDoc Reference - fabric.util.array - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Namespace fabric.util.array +

+ + +

+ + + + + + +
Defined in: lang_array.js. + +

+ + + + + + + + + + + + + + + + + +
Namespace Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.util.array +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
<static>   +
fabric.util.array.invoke(array, method) +
+
Invokes method on all items in a given array
+
<static>   +
fabric.util.array.max(array, byProperty) +
+
Finds maximum value in array (not necessarily "first" one)
+
<static>   +
fabric.util.array.min(array, byProperty) +
+
Finds minimum value in array (not necessarily "first" one)
+
+ + + + + + + + + +
+
+ Namespace Detail +
+ +
+ fabric.util.array +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + + + + +
+ Method Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.util.array.invoke(array, method) + +
+
+ Invokes method on all items in a given array + + +
+ + + + +
+
Parameters:
+ +
+ {Array} array + +
+
Array to iterate over
+ +
+ {String} method + +
+
Name of a method to invoke
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.util.array.max(array, byProperty) + +
+
+ Finds maximum value in array (not necessarily "first" one) + + +
+ + + + +
+
Parameters:
+ +
+ {Array} array + +
+
Array to iterate over
+ +
+ {String} byProperty + +
+
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.util.array.min(array, byProperty) + +
+
+ Finds minimum value in array (not necessarily "first" one) + + +
+ + + + +
+
Parameters:
+ +
+ {Array} array + +
+
Array to iterate over
+ +
+ {String} byProperty + +
+
+ +
+ + + + + + + + + + + + + + + +
-
+ -
-
-

- - Namespace fabric .util .array -

- -

- -

- - - - - - - -
- - - - - - - - - - - - - - -
Namespace Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.util.array -
-
-
-
- - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
<static>   -
fabric.util.array.invoke(array, method) -
-
Invokes method on all items in a given array
-
<static>   -
fabric.util.array.max(array, byProperty) -
-
Finds maximum value in array (not necessarily "first" one)
-
<static>   -
fabric.util.array.min(array, byProperty) -
-
Finds minimum value in array (not necessarily "first" one)
-
-
- - - - - - - - - - -
-
- - -
- Namespace Detail -
- -
- fabric.util.array -
- -
- - -
- - - - - - -
-
- - - - - - - -
-
-
- Method Detail -
- - - - -
- - <static> - - - - - fabric.util.array.invoke(array, method) -
- -
- Invokes method on all items in a given array - - - - -
- - - - -
-
Parameters:
- -
- {Array} array - -
-
Array to iterate over
- -
- {String} method - -
-
Name of a method to invoke
- -
- - - - -
- - - -
- - <static> - - - - - fabric.util.array.max(array, byProperty) -
- -
- Finds maximum value in array (not necessarily "first" one) - - - - -
- - - - -
-
Parameters:
- -
- {Array} array - -
-
Array to iterate over
- -
- {String} byProperty - -
-
- -
- - - - -
- - - -
- - <static> - - - - - fabric.util.array.min(array, byProperty) -
- -
- Finds minimum value in array (not necessarily "first" one) - - - - -
- - - - -
-
Parameters:
- -
- {Array} array - -
-
Array to iterate over
- -
- {String} byProperty - -
-
- -
- - - - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.util.html b/docs/symbols/fabric.util.html index af3343ea..2b7a27e5 100644 --- a/docs/symbols/fabric.util.html +++ b/docs/symbols/fabric.util.html @@ -1,4 +1,5 @@ - + @@ -6,1763 +7,1643 @@ JsDoc Reference - fabric.util - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Namespace fabric.util +

+ + +

+ + + + + + +
Defined in: util.js. + +

+ + + + + + + + + + + + + + + + + +
Namespace Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.util +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
<static>   +
fabric.util.addClass(element, className) +
+
Adds class to an element
+
<static>   +
fabric.util.addListener(element, eventName, handler) +
+
Adds an event listener to an element
+
<static>   +
fabric.util.animate(options) +
+
Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
+
<static>   +
fabric.util.createClass() +
+
Helper for creation of "classes"
+
<static>   +
fabric.util.degreesToRadians(degrees) +
+
Transforms degrees to radians.
+
<static>   +
fabric.util.falseFunction() +
+
Function which always returns `false`.
+
<static>   +
fabric.util.fireEvent(eventName, memo) +
+
Fires event with an optional memo object
+
<static>   +
fabric.util.getById(id) +
+
Takes id and returns an element with that id (if one exists in a document)
+
<static>   +
fabric.util.getElementOffset(element) +
+
Returns offset for a given element
+
<static>   +
fabric.util.getPointer(event) +
+
Cross-browser wrapper for getting event's coordinates
+
<static>   +
fabric.util.getRandomInt(min, max) +
+
Returns random number between 2 specified ones.
+
<static>   +
fabric.util.getScript(url, callback) +
+
Inserts a script element with a given url into a document; invokes callback, when that script is finished loading
+
<static>   +
fabric.util.makeElement(tagName, attributes) +
+
Creates specified element with specified attributes
+
<static>   +
fabric.util.makeElementUnselectable(element) +
+
Makes element unselectable
+
<static>   +
fabric.util.observeEvent(eventName, handler) +
+
+
<static>   +
fabric.util.removeFromArray(array, value) +
+
Removes value from an array.
+
<static>   +
fabric.util.removeListener(element, eventName, handler) +
+
Removes an event listener from an element
+
<static>   +
fabric.util.request(url, options) +
+
Cross-browser abstraction for sending XMLHttpRequest
+
<static>   +
fabric.util.setStyle(element, styles) +
+
Cross-browser wrapper for setting element's style
+
<static>   +
fabric.util.toArray(arrayLike) +
+
Converts an array-like object (e.g.
+
<static>   +
fabric.util.toFixed(number, fractionDigits) +
+
A wrapper around Number#toFixed, which contrary to native method returns number, not string.
+
<static>   +
fabric.util.wrapElement(element, wrapper, attributes) +
+
Wraps element with another element
+
+ + + + + + + + + +
+
+ Namespace Detail +
+ +
+ fabric.util +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + + + + +
+ Method Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
-
-
- -
-
-

+ +
<static> - Namespace fabric .util -

- -

-

- - - -
    - - - -
  • Defined in: util.js
    • - - - -
- - - -
- - - - - - - - - - - - - - -
Namespace Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.util -
-
-
+ fabric.util.addClass(element, className) +
- - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
<static>   -
fabric.util.addClass(element, className) -
-
Adds class to an element
-
<static>   -
fabric.util.addListener(element, eventName, handler) -
-
Adds an event listener to an element
-
<static>   -
fabric.util.animate(options) -
-
Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
-
<static>   -
fabric.util.createClass() -
-
Helper for creation of "classes"
-
<static>   -
fabric.util.degreesToRadians(degrees) -
-
Transforms degrees to radians.
-
<static>   -
fabric.util.falseFunction() -
-
Function which always returns `false`.
-
<static>   -
fabric.util.fireEvent(eventName, memo) -
-
Fires event with an optional memo object
-
<static>   -
fabric.util.getById(id) -
-
Takes id and returns an element with that id (if one exists in a document)
-
<static>   -
fabric.util.getElementOffset(element) -
-
Returns offset for a given element
-
<static>   -
fabric.util.getPointer(event) -
-
Cross-browser wrapper for getting event's coordinates
-
<static>   -
fabric.util.getRandomInt(min, max) -
-
Returns random number between 2 specified ones.
-
<static>   -
fabric.util.getScript(url, callback) -
-
Inserts a script element with a given url into a document; invokes callback, when that script is finished loading
-
<static>   -
fabric.util.makeElement(tagName, attributes) -
-
Creates specified element with specified attributes
-
<static>   -
fabric.util.makeElementUnselectable(element) -
-
Makes element unselectable
-
<static>   -
fabric.util.observeEvent(eventName, handler) -
-
-
<static>   -
fabric.util.removeFromArray(array, value) -
-
Removes value from an array.
-
<static>   -
fabric.util.removeListener(element, eventName, handler) -
-
Removes an event listener from an element
-
<static>   -
fabric.util.request(url, options) -
-
Cross-browser abstraction for sending XMLHttpRequest
-
<static>   -
fabric.util.setStyle(element, styles) -
-
Cross-browser wrapper for setting element's style
-
<static>   -
fabric.util.toArray(arrayLike) -
-
Converts an array-like object (e.g.
-
<static>   -
fabric.util.toFixed(number, fractionDigits) -
-
A wrapper around Number#toFixed, which contrary to native method returns number, not string.
-
<static>   -
fabric.util.wrapElement(element, wrapper, attributes) -
-
Wraps element with another element
-
-
- - - - - - - - - - -
-
- - -
- Namespace Detail -
- -
- fabric.util -
- -
- - -
- - +
+ Adds class to an element + +
+ Defined in: dom_misc.js. + - - - -
+ + + + +
+
Parameters:
+ +
+ {HTMLElement} element + +
+
Element to add class to
+ +
+ {String} className + +
+
Class to add to an element
+ +
+ + + + + + + + +
+ +
<static> + + + fabric.util.addListener(element, eventName, handler) + +
+
+ Adds an event listener to an element + +
+ Defined in: dom_event.js. + + +
+ + + + +
+
Parameters:
+ +
+ {HTMLElement} element + +
+
+ +
+ {String} eventName + +
+
+ +
+ {Function} handler + +
+
+ +
+ + + + + + + - +
+ +
<static> + + + fabric.util.animate(options) + +
+
+ Changes value from one to another within certain period of time, invoking callbacks as value is being changed. + +
+ Defined in: dom_misc.js. + + +
+ + + + +
+
Parameters:
+ +
+ {Object} options + Optional +
+
Animation options
+ +
+ {Function} options.onChange + Optional +
+
Callback; invoked on every value change
+ +
+ {Function} options.onComplete + Optional +
+
Callback; invoked when value change is completed
+ +
+ {Number} options.startValue + Optional, Default: 0 +
+
Starting value
+ +
+ {Number} options.endValue + Optional, Default: 100 +
+
Ending value
+ +
+ {Function} options.easing + Optional +
+
Easing function
+ +
+ {Number} options.duration + Optional, Default: 500 +
+
Duration of change
+ +
+ + + + + + + - +
-
-
-
- Method Detail -
- - - - -
- - <static> - - - - - fabric.util.addClass(element, className) -
- -
- Adds class to an element - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {HTMLElement} element - -
-
Element to add class to
- -
- {String} className - -
-
Class to add to an element
- -
- - - + +
<static> + + + fabric.util.createClass() + +
+
+ Helper for creation of "classes" + +
+ Defined in: lang_class.js. + + +
+ + + + + + + + + + -
+
+ + +
<static> + + {Number} + fabric.util.degreesToRadians(degrees) + +
+
+ Transforms degrees to radians. + +
+ Defined in: misc.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {Number} degrees - - - fabric.util.addListener(element, eventName, handler) -
- -
- Adds an event listener to an element - - -
- Defined in: dom_event.js. - - - -
- - - - -
-
Parameters:
- -
- {HTMLElement} element - -
-
- -
- {String} eventName - -
-
- -
- {Function} handler - -
-
- -
- - - + +
value in degrees
+ +
+ + + + + +
+
Returns:
+ +
{Number} value in radians
+ +
+ + + -
+
+ + +
<static> + + {Boolean} + fabric.util.falseFunction() + +
+
+ Function which always returns `false`. + +
+ Defined in: misc.js. + + +
+ + + + + + + + +
+
Returns:
- - -
- - <static> - - - - - fabric.util.animate(options) -
- -
- Changes value from one to another within certain period of time, invoking callbacks as value is being changed. - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {Object} options - Optional -
-
Animation options
- -
- {Function} options.onChange - Optional -
-
Callback; invoked on every value change
- -
- {Function} options.onComplete - Optional -
-
Callback; invoked when value change is completed
- -
- {Number} options.startValue - Optional, Default: 0 -
-
Starting value
- -
- {Number} options.endValue - Optional, Default: 100 -
-
Ending value
- -
- {Function} options.easing - Optional -
-
Easing function
- -
- {Number} options.duration - Optional, Default: 500 -
-
Duration of change
- -
- - - +
{Boolean}
+ +
+ + + -
+
+ + +
<static> + + + fabric.util.fireEvent(eventName, memo) + +
+
+ Fires event with an optional memo object + +
+ Defined in: dom_event.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {String} eventName - - - fabric.util.createClass() -
- -
- Helper for creation of "classes" - - -
- Defined in: lang_class.js. - - - -
- - - - - - + +
+ +
+ {Object} memo + Optional +
+
+ +
+ + + + + + + -
+
+ + +
<static> + + {HTMLElement|null} + fabric.util.getById(id) + +
+
+ Takes id and returns an element with that id (if one exists in a document) + +
+ Defined in: dom_misc.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {String|HTMLElement} id - {Number} - - fabric.util.degreesToRadians(degrees) -
- -
- Transforms degrees to radians. - - -
- Defined in: misc.js. - - - -
- - - - -
-
Parameters:
- -
- {Number} degrees - -
-
value in degrees
- -
- - - -
- - - - - - - - -
Returns:
- -
{Number} value in radians
- - - - - - - -
- + +
+ +
+ + + + + +
+
Returns:
+ +
{HTMLElement|null}
+ +
+ + + -
+
+ + +
<static> + + {Object} + fabric.util.getElementOffset(element) + +
+
+ Returns offset for a given element + +
+ Defined in: dom_misc.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {HTMLElement} element - {Boolean} - - fabric.util.falseFunction() -
- -
- Function which always returns `false`. - - -
- Defined in: misc.js. - - - -
- - - - - - -
- - - - - - - - -
Returns:
- -
{Boolean}
- - - - - - - -
- + +
Element to get offset for
+ +
+ + + + + +
+
Returns:
+ +
{Object} Object with "left" and "top" properties
+ +
+ + + -
+
+ + +
<static> + + + fabric.util.getPointer(event) + +
+
+ Cross-browser wrapper for getting event's coordinates + +
+ Defined in: dom_event.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {Event} event - - - fabric.util.fireEvent(eventName, memo) -
- -
- Fires event with an optional memo object - - -
- Defined in: dom_event.js. - - - -
- - - - -
-
Parameters:
- -
- {String} eventName - -
-
- -
- {Object} memo - Optional -
-
- -
- - - + +
+ +
+ + + + + + + -
+
+ + +
<static> + + {Number} + fabric.util.getRandomInt(min, max) + +
+
+ Returns random number between 2 specified ones. + +
+ Defined in: misc.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {Number} min - {HTMLElement|null} +
+
lower limit
+ +
+ {Number} max - fabric.util.getById(id) -
- -
- Takes id and returns an element with that id (if one exists in a document) - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {String|HTMLElement} id - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{HTMLElement|null}
- - - - - - - -
- + +
upper limit
+ +
+ + + + + +
+
Returns:
+ +
{Number} random value (between min and max)
+ +
+ + + -
+
+ + +
<static> + + + fabric.util.getScript(url, callback) + +
+
+ Inserts a script element with a given url into a document; invokes callback, when that script is finished loading + +
+ Defined in: dom_misc.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {String} url - {Object} +
+
URL of a script to load
+ +
+ {Function} callback - fabric.util.getElementOffset(element) -
- -
- Returns offset for a given element - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {HTMLElement} element - -
-
Element to get offset for
- -
- - - -
- - - - - - - - -
Returns:
- -
{Object} Object with "left" and "top" properties
- - - - - - - -
- + +
Callback to execute when script is finished loading
+ +
+ + + + + + + -
+
+ + +
<static> + + {HTMLElement} + fabric.util.makeElement(tagName, attributes) + +
+
+ Creates specified element with specified attributes + +
+ Defined in: dom_misc.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {String} tagName - - - fabric.util.getPointer(event) -
- -
- Cross-browser wrapper for getting event's coordinates - - -
- Defined in: dom_event.js. - - - -
- - - - -
-
Parameters:
- -
- {Event} event - -
-
- -
- - - + +
Type of an element to create
+ +
+ {Object} attributes + Optional +
+
Attributes to set on an element
+ +
+ + + + + +
+
Returns:
+ +
{HTMLElement} Newly created element
+ +
+ + + -
+
+ + +
<static> + + {HTMLElement} + fabric.util.makeElementUnselectable(element) + +
+
+ Makes element unselectable + +
+ Defined in: dom_misc.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {HTMLElement} element - {Number} - - fabric.util.getRandomInt(min, max) -
- -
- Returns random number between 2 specified ones. - - -
- Defined in: misc.js. - - - -
- - - - -
-
Parameters:
- -
- {Number} min - -
-
lower limit
- -
- {Number} max - -
-
upper limit
- -
- - - -
- - - - - - - - -
Returns:
- -
{Number} random value (between min and max)
- - - - - - - -
- + +
Element to make unselectable
+ +
+ + + + + +
+
Returns:
+ +
{HTMLElement} Element that was passed in
+ +
+ + + -
+
+ + +
<static> + + + fabric.util.observeEvent(eventName, handler) + +
+
+ + +
+ Defined in: dom_event.js. + + +
+ + + + +
+
Parameters:
- - -
- - <static> - +
+ {String} eventName +
+
+ +
+ {Function} handler - - fabric.util.getScript(url, callback) -
- -
- Inserts a script element with a given url into a document; invokes callback, when that script is finished loading - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {String} url - -
-
URL of a script to load
- -
- {Function} callback - -
-
Callback to execute when script is finished loading
- -
- - - + +
+ +
+ + + + + + + -
- - - -
- - <static> - - - {HTMLElement} - - fabric.util.makeElement(tagName, attributes) -
- -
- Creates specified element with specified attributes - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {String} tagName - -
-
Type of an element to create
- -
- {Object} attributes - Optional -
-
Attributes to set on an element
- -
- - - -
- - - - - - - - -
Returns:
- -
{HTMLElement} Newly created element
- - - - - - - -
- - -
- - - -
- - <static> - - - {HTMLElement} - - fabric.util.makeElementUnselectable(element) -
- -
- Makes element unselectable - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {HTMLElement} element - -
-
Element to make unselectable
- -
- - - -
- - - - - - - - -
Returns:
- -
{HTMLElement} Element that was passed in
- - - - - - - -
- - -
- - - -
- - <static> - - - - - fabric.util.observeEvent(eventName, handler) -
- -
- - - -
- Defined in: dom_event.js. - - - -
- - - - -
-
Parameters:
- -
- {String} eventName - -
-
- -
- {Function} handler - -
-
- -
- - - - -
- - - -
- - <static> - - - {Array} - - fabric.util.removeFromArray(array, value) -
- -
- Removes value from an array. +
+ + +
<static> + + {Array} + fabric.util.removeFromArray(array, value) + +
+
+ Removes value from an array. Presence of value (and its position in an array) is determined via `Array.prototype.indexOf` - - -
- Defined in: misc.js. - - - -
- - - - -
-
Parameters:
- -
- {Array} array - -
-
- -
- {Any} value - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{Array} original array
- - - - - - - -
- - -
- - - -
- - <static> - - - - - fabric.util.removeListener(element, eventName, handler) -
- -
- Removes an event listener from an element - - -
- Defined in: dom_event.js. - - - -
- - - - -
-
Parameters:
- -
- {HTMLElement} element - -
-
- -
- {String} eventName - -
-
- -
- {Function} handler - -
-
- -
- - - - -
- - - -
- - <static> - - - {XMLHttpRequest} - - fabric.util.request(url, options) -
- -
- Cross-browser abstraction for sending XMLHttpRequest - - -
- Defined in: dom_request.js. - - - -
- - - - -
-
Parameters:
- -
- {String} url - -
-
URL to send XMLHttpRequest to
- -
- {Object} options - Optional -
-
Options object
- -
- {String} options.method - Optional, Default: "GET" -
-
- -
- {Function} options.onComplete - -
-
Callback to invoke when request is completed
- -
- - - -
- - - - - - - - -
Returns:
- -
{XMLHttpRequest} request
- - - - - - - -
- - -
- - - -
- - <static> - - - {HTMLElement} - - fabric.util.setStyle(element, styles) -
- -
- Cross-browser wrapper for setting element's style - - -
- Defined in: dom_style.js. - - - -
- - - - -
-
Parameters:
- -
- {HTMLElement} element - -
-
- -
- {Object} styles - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{HTMLElement} Element that was passed as a first argument
- - - - - - - -
- - -
- - - -
- - <static> - - - {Array} - - fabric.util.toArray(arrayLike) -
- -
- Converts an array-like object (e.g. arguments or NodeList) to an array - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {Object} arrayLike - -
-
- -
- - - -
- - - - - - - - -
Returns:
- -
{Array}
- - - - - - - -
- - -
- - - -
- - <static> - - - {Number} - - fabric.util.toFixed(number, fractionDigits) -
- -
- A wrapper around Number#toFixed, which contrary to native method returns number, not string. - - -
- Defined in: misc.js. - - - -
- - - - -
-
Parameters:
- -
- {Number | String} number - -
-
number to operate on
- -
- {Number} fractionDigits - -
-
number of fraction digits to "leave"
- -
- - - -
- - - - - - - - -
Returns:
- -
{Number}
- - - - - - - -
- - -
- - - -
- - <static> - - - {HTMLElement} - - fabric.util.wrapElement(element, wrapper, attributes) -
- -
- Wraps element with another element - - -
- Defined in: dom_misc.js. - - - -
- - - - -
-
Parameters:
- -
- {HTMLElement} element - -
-
Element to wrap
- -
- {HTMLElement|String} wrapper - -
-
Element to wrap with
- -
- {Object} attributes - Optional -
-
Attributes to set on a wrapper
- -
- - - -
- - - - - - - - -
Returns:
- -
{HTMLElement} wrapper
- - - - - - - -
- - - - -
+ +
+ Defined in: misc.js. + +
+ + + + +
+
Parameters:
+ +
+ {Array} array + +
+
+ +
+ {Any} value + +
+
+ +
+ + + + + +
+
Returns:
+ +
{Array} original array
+ +
+ + + + +
+ +
<static> + + + fabric.util.removeListener(element, eventName, handler) + +
+
+ Removes an event listener from an element + +
+ Defined in: dom_event.js. + + +
+ + + + +
+
Parameters:
+ +
+ {HTMLElement} element + +
+
+ +
+ {String} eventName + +
+
+ +
+ {Function} handler + +
+
+ +
+ + + + + + + + +
- + +
<static> + + {XMLHttpRequest} + fabric.util.request(url, options) + +
+
+ Cross-browser abstraction for sending XMLHttpRequest + +
+ Defined in: dom_request.js. + + +
+ + + + +
+
Parameters:
+ +
+ {String} url + +
+
URL to send XMLHttpRequest to
+ +
+ {Object} options + Optional +
+
Options object
+ +
+ {String} options.method + Optional, Default: "GET" +
+
+ +
+ {Function} options.onComplete + +
+
Callback to invoke when request is completed
+ +
+ + + + + +
+
Returns:
+ +
{XMLHttpRequest} request
+ +
+ + + + +
-
+ +
<static> + + {HTMLElement} + fabric.util.setStyle(element, styles) + +
+
+ Cross-browser wrapper for setting element's style + +
+ Defined in: dom_style.js. + + +
+ + + + +
+
Parameters:
+ +
+ {HTMLElement} element + +
+
+ +
+ {Object} styles + +
+
+ +
+ + + + + +
+
Returns:
+ +
{HTMLElement} Element that was passed as a first argument
+ +
+ + + + +
+ + +
<static> + + {Array} + fabric.util.toArray(arrayLike) + +
+
+ Converts an array-like object (e.g. arguments or NodeList) to an array + +
+ Defined in: dom_misc.js. + + +
+ + + + +
+
Parameters:
+ +
+ {Object} arrayLike + +
+
+ +
+ + + + + +
+
Returns:
+ +
{Array}
+ +
+ + + + +
+ + +
<static> + + {Number} + fabric.util.toFixed(number, fractionDigits) + +
+
+ A wrapper around Number#toFixed, which contrary to native method returns number, not string. + +
+ Defined in: misc.js. + + +
+ + + + +
+
Parameters:
+ +
+ {Number | String} number + +
+
number to operate on
+ +
+ {Number} fractionDigits + +
+
number of fraction digits to "leave"
+ +
+ + + + + +
+
Returns:
+ +
{Number}
+ +
+ + + + +
+ + +
<static> + + {HTMLElement} + fabric.util.wrapElement(element, wrapper, attributes) + +
+
+ Wraps element with another element + +
+ Defined in: dom_misc.js. + + +
+ + + + +
+
Parameters:
+ +
+ {HTMLElement} element + +
+
Element to wrap
+ +
+ {HTMLElement|String} wrapper + +
+
Element to wrap with
+ +
+ {Object} attributes + Optional +
+
Attributes to set on a wrapper
+ +
+ + + + + +
+
Returns:
+ +
{HTMLElement} wrapper
+ +
+ + + + + + + + + + + +
+ - + +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT) +
diff --git a/docs/symbols/fabric.util.object.html b/docs/symbols/fabric.util.object.html index 2611614b..c0a90b2a 100644 --- a/docs/symbols/fabric.util.object.html +++ b/docs/symbols/fabric.util.object.html @@ -1,4 +1,5 @@ - + @@ -6,342 +7,464 @@ JsDoc Reference - fabric.util.object - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Namespace fabric.util.object +

+ + +

+ + + + fabric.util.object + + +
Defined in: lang_object.js. + +

+ + + + + + + + + + + + + + + + + +
Namespace Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.util.object +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
<static>   +
fabric.util.object.clone(object) +
+
Creates an empty object and copies all enumerable properties of another object to it
+
<static>   +
fabric.util.object.extend(destination, source) +
+
Copies all enumerable properties of one object to another
+
+ + + + + + + + + +
+
+ Namespace Detail +
+ +
+ fabric.util.object +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + + + + +
+ Method Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + + fabric.util.object.clone(object) + +
+
+ Creates an empty object and copies all enumerable properties of another object to it + + +
+ + + + +
+
Parameters:
+ +
+ {Object} object + +
+
Object to clone
+ +
+ + + + + + + + +
+ + +
<static> + + + fabric.util.object.extend(destination, source) + +
+
+ Copies all enumerable properties of one object to another + + +
+ + + + +
+
Parameters:
+ +
+ {Object} destination + +
+
Where to copy to
+ +
+ {Object} source + +
+
Where to copy from
+ +
+ + + + + + + + + + + + + + + +
-
+ -
-
-

- - Namespace fabric .util .object -

- -

- fabric.util.object -

- - - - - - - -
- - - - - - - - - - - - - - -
Namespace Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.util.object -
-
-
-
- - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
<static>   -
fabric.util.object.clone(object) -
-
Creates an empty object and copies all enumerable properties of another object to it
-
<static>   -
fabric.util.object.extend(destination, source) -
-
Copies all enumerable properties of one object to another
-
-
- - - - - - - - - - -
-
- - -
- Namespace Detail -
- -
- fabric.util.object -
- -
- - -
- - - - - - -
-
- - - - - - - -
-
-
- Method Detail -
- - - - -
- - <static> - - - - - fabric.util.object.clone(object) -
- -
- Creates an empty object and copies all enumerable properties of another object to it - - - - -
- - - - -
-
Parameters:
- -
- {Object} object - -
-
Object to clone
- -
- - - - -
- - - -
- - <static> - - - - - fabric.util.object.extend(destination, source) -
- -
- Copies all enumerable properties of one object to another - - - - -
- - - - -
-
Parameters:
- -
- {Object} destination - -
-
Where to copy to
- -
- {Object} source - -
-
Where to copy from
- -
- - - - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/fabric.util.string.html b/docs/symbols/fabric.util.string.html index 50a1c219..d0846484 100644 --- a/docs/symbols/fabric.util.string.html +++ b/docs/symbols/fabric.util.string.html @@ -1,4 +1,5 @@ - + @@ -6,378 +7,472 @@ JsDoc Reference - fabric.util.string - - - - - - - + + + + -
-
- -
- Classes - Files -
- -

Classes

- + + + +
+ +

+ + Namespace fabric.util.string +

+ + +

+ + + + + + +
Defined in: lang_string.js. + +

+ + + + + + + + + + + + + + + + + +
Namespace Summary
Constructor AttributesConstructor Name and Description
  +
+ fabric.util.string +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Summary
Method AttributesMethod Name and Description
<static>   +
fabric.util.string.camelize(string) +
+
Camelizes a string
+
<static>   +
fabric.util.string.capitalize(string) +
+
Capitalizes a string
+
+ + + + + + + + + +
+
+ Namespace Detail +
+ +
+ fabric.util.string +
+ +
+ + +
+ + + + + + + + + + + -
-
+ + + + + + +
+ Method Detail +
- Generated by JsDoc Toolkit 2.4.0 on Fri Oct 15 2010 13:14:02 GMT-0400 (EDT)
- HTML template: Codeview 1.1.1 -
+ +
<static> + + {String} + fabric.util.string.camelize(string) + +
+
+ Camelizes a string + + +
+ + + + +
+
Parameters:
+ +
+ {String} string + +
+
String to camelize
+ +
+ + + + + +
+
Returns:
+ +
{String} Camelized version of a string
+ +
+ + + + +
+ + +
<static> + + {String} + fabric.util.string.capitalize(string) + +
+
+ Capitalizes a string + + +
+ + + + +
+
Parameters:
+ +
+ {String} string + +
+
String to capitalize
+ +
+ + + + + +
+
Returns:
+ +
{String} Capitalized version of a string
+ +
+ + + + + + + + + + + +
-
+ -
-
-

- - Namespace fabric .util .string -

- -

- -

- - - - - - - -
- - - - - - - - - - - - - - -
Namespace Summary
Constructor AttributesConstructor Name and Description
  -
- fabric.util.string -
-
-
-
- - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
Method Summary
Method AttributesMethod Name and Description
<static>   -
fabric.util.string.camelize(string) -
-
Camelizes a string
-
<static>   -
fabric.util.string.capitalize(string) -
-
Capitalizes a string
-
-
- - - - - - - - - - -
-
- - -
- Namespace Detail -
- -
- fabric.util.string -
- -
- - -
- - - - - - -
-
- - - - - - - -
-
-
- Method Detail -
- - - - -
- - <static> - - - {String} - - fabric.util.string.camelize(string) -
- -
- Camelizes a string - - - - -
- - - - -
-
Parameters:
- -
- {String} string - -
-
String to camelize
- -
- - - -
- - - - - - - - -
Returns:
- -
{String} Camelized version of a string
- - - - - - - -
- - -
- - - -
- - <static> - - - {String} - - fabric.util.string.capitalize(string) -
- -
- Capitalizes a string - - - - -
- - - - -
-
Parameters:
- -
- {String} string - -
-
String to capitalize
- -
- - - -
- - - - - - - - -
Returns:
- -
{String} Capitalized version of a string
- - - - - - - -
- - - - -
-
- - - - -
+ +
+ + Documentation generated by JsDoc Toolkit 2.4.0 on Tue Oct 19 2010 16:02:48 GMT-0400 (EDT)
- - diff --git a/docs/symbols/src/src_circle.class.js.html b/docs/symbols/src/src_circle.class.js.html index 0e78bb5a..1433b6b5 100644 --- a/docs/symbols/src/src_circle.class.js.html +++ b/docs/symbols/src/src_circle.class.js.html @@ -24,110 +24,113 @@ 17 */ 18 fabric.Circle = fabric.util.createClass(fabric.Object, /** @scope fabric.Circle.prototype */ { 19 - 20 /** @property */ - 21 type: 'circle', - 22 - 23 /** - 24 * Constructor - 25 * @method initialize - 26 * @param {Object} [options] Options object - 27 * @return {fabric.Circle} thisArg - 28 */ - 29 initialize: function(options) { - 30 options = options || { }; - 31 - 32 this.set('radius', options.radius || 0); - 33 this.callSuper('initialize', options); + 20 /** + 21 * @property + 22 * @type String + 23 */ + 24 type: 'circle', + 25 + 26 /** + 27 * Constructor + 28 * @method initialize + 29 * @param {Object} [options] Options object + 30 * @return {fabric.Circle} thisArg + 31 */ + 32 initialize: function(options) { + 33 options = options || { }; 34 - 35 var radiusBy2ByScale = this.get('radius') * 2 * this.get('scaleX'); - 36 this.set('width', radiusBy2ByScale).set('height', radiusBy2ByScale); - 37 }, - 38 - 39 /** - 40 * Returns object representation of an instance - 41 * @method toObject - 42 * @return {Object} object representation of an instance - 43 */ - 44 toObject: function() { - 45 return extend(this.callSuper('toObject'), { - 46 radius: this.get('radius') - 47 }); - 48 }, - 49 - 50 /** - 51 * @private - 52 * @method _render - 53 * @param ctx {CanvasRenderingContext2D} context to render on - 54 */ - 55 _render: function(ctx, noTransform) { - 56 ctx.beginPath(); - 57 ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false); - 58 ctx.closePath(); - 59 if (this.fill) { - 60 ctx.fill(); - 61 } - 62 if (this.stroke) { - 63 ctx.stroke(); + 35 this.set('radius', options.radius || 0); + 36 this.callSuper('initialize', options); + 37 + 38 var radiusBy2ByScale = this.get('radius') * 2 * this.get('scaleX'); + 39 this.set('width', radiusBy2ByScale).set('height', radiusBy2ByScale); + 40 }, + 41 + 42 /** + 43 * Returns object representation of an instance + 44 * @method toObject + 45 * @return {Object} object representation of an instance + 46 */ + 47 toObject: function() { + 48 return extend(this.callSuper('toObject'), { + 49 radius: this.get('radius') + 50 }); + 51 }, + 52 + 53 /** + 54 * @private + 55 * @method _render + 56 * @param ctx {CanvasRenderingContext2D} context to render on + 57 */ + 58 _render: function(ctx, noTransform) { + 59 ctx.beginPath(); + 60 ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false); + 61 ctx.closePath(); + 62 if (this.fill) { + 63 ctx.fill(); 64 } - 65 }, - 66 - 67 - 68 /** - 69 * Returns complexity of an instance - 70 * @method complexity - 71 * @return {Number} complexity of this instance - 72 */ - 73 complexity: function() { - 74 return 1; - 75 } - 76 }); - 77 - 78 /** - 79 * List of attribute names to account for when parsing SVG element (used by `fabric.Circle.fromElement`) - 80 * @static - 81 * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement - 82 */ - 83 fabric.Circle.ATTRIBUTE_NAMES = 'cx cy r fill fill-opacity stroke stroke-width transform'.split(' '); - 84 - 85 /** - 86 * Returns fabric.Circle instance from an SVG element - 87 * @static - 88 * @method fabric.Circle.fromElement - 89 * @param element {SVGElement} element to parse - 90 * @param options {Object} options object - 91 * @throws {Error} If value of `r` attribute is missing or invalid - 92 * @return {Object} instance of fabric.Circle - 93 */ - 94 fabric.Circle.fromElement = function(element, options) { - 95 options || (options = { }); - 96 var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); - 97 if (!isValidRadius(parsedAttributes)) { - 98 throw Error('value of `r` attribute is required and can not be negative'); - 99 } -100 if ('left' in parsedAttributes) { -101 parsedAttributes.left -= (options.width / 2) || 0; + 65 if (this.stroke) { + 66 ctx.stroke(); + 67 } + 68 }, + 69 + 70 + 71 /** + 72 * Returns complexity of an instance + 73 * @method complexity + 74 * @return {Number} complexity of this instance + 75 */ + 76 complexity: function() { + 77 return 1; + 78 } + 79 }); + 80 + 81 /** + 82 * List of attribute names to account for when parsing SVG element (used by `fabric.Circle.fromElement`) + 83 * @static + 84 * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement + 85 */ + 86 fabric.Circle.ATTRIBUTE_NAMES = 'cx cy r fill fill-opacity stroke stroke-width transform'.split(' '); + 87 + 88 /** + 89 * Returns fabric.Circle instance from an SVG element + 90 * @static + 91 * @method fabric.Circle.fromElement + 92 * @param element {SVGElement} element to parse + 93 * @param options {Object} options object + 94 * @throws {Error} If value of `r` attribute is missing or invalid + 95 * @return {Object} instance of fabric.Circle + 96 */ + 97 fabric.Circle.fromElement = function(element, options) { + 98 options || (options = { }); + 99 var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); +100 if (!isValidRadius(parsedAttributes)) { +101 throw Error('value of `r` attribute is required and can not be negative'); 102 } -103 if ('top' in parsedAttributes) { -104 parsedAttributes.top -= (options.height / 2) || 0; +103 if ('left' in parsedAttributes) { +104 parsedAttributes.left -= (options.width / 2) || 0; 105 } -106 return new fabric.Circle(extend(parsedAttributes, options)); -107 }; -108 -109 /** -110 * @private -111 */ -112 function isValidRadius(attributes) { -113 return (('radius' in attributes) && (attributes.radius > 0)); -114 } -115 -116 /** -117 * Returns fabric.Circle instance from an object representation -118 * @static -119 * @method fabric.Circle.fromObject -120 * @param {Object} object Object to create an instance from -121 * @return {Object} Instance of fabric.Circle -122 */ -123 fabric.Circle.fromObject = function(object) { -124 return new fabric.Circle(object); -125 } -126 })(); \ No newline at end of file +106 if ('top' in parsedAttributes) { +107 parsedAttributes.top -= (options.height / 2) || 0; +108 } +109 return new fabric.Circle(extend(parsedAttributes, options)); +110 }; +111 +112 /** +113 * @private +114 */ +115 function isValidRadius(attributes) { +116 return (('radius' in attributes) && (attributes.radius > 0)); +117 } +118 +119 /** +120 * Returns fabric.Circle instance from an object representation +121 * @static +122 * @method fabric.Circle.fromObject +123 * @param {Object} object Object to create an instance from +124 * @return {Object} Instance of fabric.Circle +125 */ +126 fabric.Circle.fromObject = function(object) { +127 return new fabric.Circle(object); +128 } +129 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_element.class.js.html b/docs/symbols/src/src_element.class.js.html index 7334c43c..a506c3ed 100644 --- a/docs/symbols/src/src_element.class.js.html +++ b/docs/symbols/src/src_element.class.js.html @@ -145,2237 +145,2246 @@ 138 extend(fabric.Element.prototype, /** @scope fabric.Element.prototype */ { 139 140 /** -141 * @property -142 * @type String -143 */ -144 selectionColor: 'rgba(100, 100, 255, 0.3)', // blue -145 -146 /** -147 * @property -148 * @type String -149 */ -150 selectionBorderColor: 'rgba(255, 255, 255, 0.3)', -151 -152 /** -153 * @property -154 * @type String -155 */ -156 freeDrawingColor: 'rgb(0, 0, 0)', -157 -158 /** -159 * @property -160 * @type String -161 */ -162 backgroundColor: 'rgba(0, 0, 0, 0)', -163 -164 /** -165 * @property -166 * @type Number -167 */ -168 freeDrawingLineWidth: 1, -169 -170 /** -171 * @property -172 * @type Number -173 */ -174 selectionLineWidth: 1, -175 -176 /** +141 * Background color of this canvas instance +142 * @property +143 * @type String +144 */ +145 backgroundColor: 'rgba(0, 0, 0, 0)', +146 +147 /** +148 * Color of selection +149 * @property +150 * @type String +151 */ +152 selectionColor: 'rgba(100, 100, 255, 0.3)', // blue +153 +154 /** +155 * Color of the border of selection (usually slightly darker than color of selection itself) +156 * @property +157 * @type String +158 */ +159 selectionBorderColor: 'rgba(255, 255, 255, 0.3)', +160 +161 /** +162 * Width of a line used in selection +163 * @property +164 * @type Number +165 */ +166 selectionLineWidth: 1, +167 +168 /** +169 * Color of the line used in free drawing mode +170 * @property +171 * @type String +172 */ +173 freeDrawingColor: 'rgb(0, 0, 0)', +174 +175 /** +176 * Width of a line used in free drawing mode 177 * @property -178 * @type Boolean +178 * @type Number 179 */ -180 includeDefaultValues: true, +180 freeDrawingLineWidth: 1, 181 182 /** 183 * @property 184 * @type Boolean 185 */ -186 shouldCacheImages: false, +186 includeDefaultValues: true, 187 188 /** -189 * @constant -190 * @type Number -191 */ -192 CANVAS_WIDTH: 600, -193 -194 /** -195 * @constant -196 * @type Number -197 */ -198 CANVAS_HEIGHT: 600, -199 -200 /** -201 * Callback; invoked right before object is about to be scaled/rotated -202 * @method onBeforeScaleRotate -203 * @param {fabric.Object} target Object that's about to be scaled/rotated +189 * Indicates whether images loaded via `fabric.Element#loadImageFromUrl` should be cached +190 * @property +191 * @type Boolean +192 */ +193 shouldCacheImages: false, +194 +195 /** +196 * @constant +197 * @type Number +198 */ +199 CANVAS_WIDTH: 600, +200 +201 /** +202 * @constant +203 * @type Number 204 */ -205 onBeforeScaleRotate: function (target) { -206 /* NOOP */ -207 }, -208 -209 /** -210 * Callback; invoked on every redraw of canvas and is being passed a number indicating current fps -211 * @method onFpsUpdate -212 * @param {Number} fps -213 */ -214 onFpsUpdate: function(fps) { -215 /* NOOP */ -216 }, -217 -218 /** -219 * Calculates canvas element offset relative to the document -220 * This method is also attached as "resize" event handler of window -221 * @method calcOffset -222 * @return {fabric.Element} instance -223 * @chainable -224 */ -225 calcOffset: function () { -226 this._offset = getElementOffset(this.getElement()); -227 return this; -228 }, -229 -230 /** -231 * Sets overlay image for this canvas -232 * @method setOverlayImage -233 * @param {String} url url of an image to set background to -234 * @param {Function} callback callback to invoke when image is loaded and set as an overlay one -235 * @return {fabric.Element} thisArg -236 * @chainable -237 */ -238 setOverlayImage: function (url, callback) { // TODO (kangax): test callback -239 if (url) { -240 var _this = this, img = new Image(); -241 -242 /** @ignore */ -243 img.onload = function () { -244 _this.overlayImage = img; -245 if (callback) { -246 callback(); -247 } -248 img = img.onload = null; -249 }; -250 img.src = url; -251 } -252 return this; -253 }, -254 -255 /** -256 * Canvas class' initialization method; Automatically called by constructor; -257 * Sets up all DOM references for pre-existing markup and creates required markup if it's not yet created. -258 * already present. -259 * @method _initElement -260 * @param {HTMLElement|String} canvasEl Canvas element -261 * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized -262 */ -263 _initElement: function (canvasEl) { -264 var el = fabric.util.getById(canvasEl); -265 this._element = el || document.createElement('canvas'); -266 -267 if (typeof this._element.getContext === 'undefined' && typeof G_vmlCanvasManager !== 'undefined') { -268 G_vmlCanvasManager.initElement(this._element); -269 } -270 if (typeof this._element.getContext === 'undefined') { -271 throw CANVAS_INIT_ERROR; -272 } -273 if (!(this.contextTop = this._element.getContext('2d'))) { -274 throw CANVAS_INIT_ERROR; -275 } -276 -277 var width = this._element.width || 0, -278 height = this._element.height || 0; -279 -280 this._initWrapperElement(width, height); -281 this._setElementStyle(width, height); -282 }, -283 -284 /** -285 * @private -286 * @method _initWrapperElement -287 * @param {Number} width -288 * @param {Number} height -289 */ -290 _initWrapperElement: function (width, height) { -291 var wrapper = fabric.util.wrapElement(this.getElement(), 'div', { 'class': 'canvas_container' }); -292 fabric.util.setStyle(wrapper, { -293 width: width + 'px', -294 height: height + 'px' -295 }); -296 fabric.util.makeElementUnselectable(wrapper); -297 this.wrapper = wrapper; -298 }, -299 -300 /** -301 * @private -302 * @method _setElementStyle -303 * @param {Number} width -304 * @param {Number} height -305 */ -306 _setElementStyle: function (width, height) { -307 fabric.util.setStyle(this.getElement(), { -308 position: 'absolute', -309 width: width + 'px', -310 height: height + 'px', -311 left: 0, -312 top: 0 -313 }); -314 }, -315 -316 /** -317 * For now, use an object literal without methods to store the config params -318 * @method _initConfig -319 * @param config {Object} userConfig The configuration Object literal -320 * containing the configuration that should be set for this module; -321 * See configuration documentation for more details. -322 */ -323 _initConfig: function (config) { -324 extend(this._config, config || { }); -325 -326 this._config.width = parseInt(this._element.width, 10) || 0; -327 this._config.height = parseInt(this._element.height, 10) || 0; -328 -329 this._element.style.width = this._config.width + 'px'; -330 this._element.style.height = this._config.height + 'px'; -331 }, -332 -333 /** -334 * Adds mouse listeners to canvas -335 * @method _initEvents -336 * @private -337 * See configuration documentation for more details. -338 */ -339 _initEvents: function () { -340 -341 var _this = this; -342 -343 this._onMouseDown = function (e) { _this.__onMouseDown(e); }; -344 this._onMouseUp = function (e) { _this.__onMouseUp(e); }; -345 this._onMouseMove = function (e) { _this.__onMouseMove(e); }; -346 this._onResize = function (e) { _this.calcOffset() }; +205 CANVAS_HEIGHT: 600, +206 +207 /** +208 * Callback; invoked right before object is about to be scaled/rotated +209 * @method onBeforeScaleRotate +210 * @param {fabric.Object} target Object that's about to be scaled/rotated +211 */ +212 onBeforeScaleRotate: function (target) { +213 /* NOOP */ +214 }, +215 +216 /** +217 * Callback; invoked on every redraw of canvas and is being passed a number indicating current fps +218 * @method onFpsUpdate +219 * @param {Number} fps +220 */ +221 onFpsUpdate: function(fps) { +222 /* NOOP */ +223 }, +224 +225 /** +226 * Calculates canvas element offset relative to the document +227 * This method is also attached as "resize" event handler of window +228 * @method calcOffset +229 * @return {fabric.Element} instance +230 * @chainable +231 */ +232 calcOffset: function () { +233 this._offset = getElementOffset(this.getElement()); +234 return this; +235 }, +236 +237 /** +238 * Sets overlay image for this canvas +239 * @method setOverlayImage +240 * @param {String} url url of an image to set background to +241 * @param {Function} callback callback to invoke when image is loaded and set as an overlay one +242 * @return {fabric.Element} thisArg +243 * @chainable +244 */ +245 setOverlayImage: function (url, callback) { // TODO (kangax): test callback +246 if (url) { +247 var _this = this, img = new Image(); +248 +249 /** @ignore */ +250 img.onload = function () { +251 _this.overlayImage = img; +252 if (callback) { +253 callback(); +254 } +255 img = img.onload = null; +256 }; +257 img.src = url; +258 } +259 return this; +260 }, +261 +262 /** +263 * Canvas class' initialization method; Automatically called by constructor; +264 * Sets up all DOM references for pre-existing markup and creates required markup if it's not yet created. +265 * already present. +266 * @method _initElement +267 * @param {HTMLElement|String} canvasEl Canvas element +268 * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized +269 */ +270 _initElement: function (canvasEl) { +271 var el = fabric.util.getById(canvasEl); +272 this._element = el || document.createElement('canvas'); +273 +274 if (typeof this._element.getContext === 'undefined' && typeof G_vmlCanvasManager !== 'undefined') { +275 G_vmlCanvasManager.initElement(this._element); +276 } +277 if (typeof this._element.getContext === 'undefined') { +278 throw CANVAS_INIT_ERROR; +279 } +280 if (!(this.contextTop = this._element.getContext('2d'))) { +281 throw CANVAS_INIT_ERROR; +282 } +283 +284 var width = this._element.width || 0, +285 height = this._element.height || 0; +286 +287 this._initWrapperElement(width, height); +288 this._setElementStyle(width, height); +289 }, +290 +291 /** +292 * @private +293 * @method _initWrapperElement +294 * @param {Number} width +295 * @param {Number} height +296 */ +297 _initWrapperElement: function (width, height) { +298 var wrapper = fabric.util.wrapElement(this.getElement(), 'div', { 'class': 'canvas_container' }); +299 fabric.util.setStyle(wrapper, { +300 width: width + 'px', +301 height: height + 'px' +302 }); +303 fabric.util.makeElementUnselectable(wrapper); +304 this.wrapper = wrapper; +305 }, +306 +307 /** +308 * @private +309 * @method _setElementStyle +310 * @param {Number} width +311 * @param {Number} height +312 */ +313 _setElementStyle: function (width, height) { +314 fabric.util.setStyle(this.getElement(), { +315 position: 'absolute', +316 width: width + 'px', +317 height: height + 'px', +318 left: 0, +319 top: 0 +320 }); +321 }, +322 +323 /** +324 * For now, use an object literal without methods to store the config params +325 * @method _initConfig +326 * @param config {Object} userConfig The configuration Object literal +327 * containing the configuration that should be set for this module; +328 * See configuration documentation for more details. +329 */ +330 _initConfig: function (config) { +331 extend(this._config, config || { }); +332 +333 this._config.width = parseInt(this._element.width, 10) || 0; +334 this._config.height = parseInt(this._element.height, 10) || 0; +335 +336 this._element.style.width = this._config.width + 'px'; +337 this._element.style.height = this._config.height + 'px'; +338 }, +339 +340 /** +341 * Adds mouse listeners to canvas +342 * @method _initEvents +343 * @private +344 * See configuration documentation for more details. +345 */ +346 _initEvents: function () { 347 -348 addListener(this._element, 'mousedown', this._onMouseDown); -349 addListener(document, 'mousemove', this._onMouseMove); -350 addListener(document, 'mouseup', this._onMouseUp); -351 addListener(window, 'resize', this._onResize); -352 }, -353 -354 /** -355 * Creates canvas elements -356 * @method _createCanvasElement -357 * @private -358 */ -359 _createCanvasElement: function (className) { -360 -361 var element = document.createElement('canvas'); -362 if (!element) { -363 return; -364 } -365 -366 element.className = className; -367 var oContainer = this._element.parentNode.insertBefore(element, this._element); -368 -369 oContainer.width = this.getWidth(); -370 oContainer.height = this.getHeight(); -371 oContainer.style.width = this.getWidth() + 'px'; -372 oContainer.style.height = this.getHeight() + 'px'; -373 oContainer.style.position = 'absolute'; -374 oContainer.style.left = 0; -375 oContainer.style.top = 0; -376 -377 if (typeof element.getContext === 'undefined' && typeof G_vmlCanvasManager !== 'undefined') { -378 // try augmenting element with excanvas' G_vmlCanvasManager -379 G_vmlCanvasManager.initElement(element); -380 } -381 if (typeof element.getContext === 'undefined') { -382 // if that didn't work, throw error -383 throw CANVAS_INIT_ERROR; -384 } -385 fabric.util.makeElementUnselectable(oContainer); -386 return oContainer; -387 }, -388 -389 /** -390 * Creates a secondary canvas to contain all the images are not being translated/rotated/scaled -391 * @method _createCanvasContainer -392 */ -393 _createCanvasContainer: function () { -394 var canvas = this._createCanvasElement('canvas-container'); -395 this.contextContainerEl = canvas; -396 this.contextContainer = canvas.getContext('2d'); -397 }, -398 -399 /** -400 * Creates a "background" canvas -401 * @method _createCanvasBackground -402 */ -403 _createCanvasBackground: function () { -404 var canvas = this._createCanvasElement('canvas-container'); -405 this._contextBackgroundEl = canvas; -406 this._contextBackground = canvas.getContext('2d'); -407 }, -408 -409 /** -410 * Returns canvas width -411 * @method getWidth -412 * @return {Number} -413 */ -414 getWidth: function () { -415 return this._config.width; -416 }, -417 -418 /** -419 * Returns canvas height -420 * @method getHeight -421 * @return {Number} -422 */ -423 getHeight: function () { -424 return this._config.height; -425 }, -426 -427 /** -428 * Sets width of this canvas instance -429 * @method setWidth -430 * @param {Number} width value to set width to -431 * @return {fabric.Element} instance -432 * @chainable true -433 */ -434 setWidth: function (value) { -435 return this._setDimension('width', value); -436 }, -437 -438 /** -439 * Sets height of this canvas instance -440 * @method setHeight -441 * @param {Number} height value to set height to -442 * @return {fabric.Element} instance -443 * @chainable true -444 */ -445 setHeight: function (value) { -446 return this._setDimension('height', value); -447 }, -448 -449 /** -450 * Sets dimensions (width, height) of this canvas instance -451 * @method setDimensions -452 * @param {Object} dimensions -453 * @return {fabric.Element} thisArg -454 * @chainable -455 */ -456 setDimensions: function(dimensions) { -457 for (var prop in dimensions) { -458 this._setDimension(prop, dimensions[prop]); -459 } -460 return this; -461 }, -462 -463 /** -464 * Helper for setting width/height -465 * @private -466 * @method _setDimensions -467 * @param {String} prop property (width|height) -468 * @param {Number} value value to set property to -469 * @return {fabric.Element} instance -470 * @chainable true -471 */ -472 _setDimension: function (prop, value) { -473 this.contextContainerEl[prop] = value; -474 this.contextContainerEl.style[prop] = value + 'px'; -475 -476 this._contextBackgroundEl[prop] = value; -477 this._contextBackgroundEl.style[prop] = value + 'px'; -478 -479 this._element[prop] = value; -480 this._element.style[prop] = value + 'px'; -481 -482 // <DIV> container (parent of all <CANVAS> elements) -483 this._element.parentNode.style[prop] = value + 'px'; -484 -485 this._config[prop] = value; -486 this.calcOffset(); -487 this.renderAll(); +348 var _this = this; +349 +350 this._onMouseDown = function (e) { _this.__onMouseDown(e); }; +351 this._onMouseUp = function (e) { _this.__onMouseUp(e); }; +352 this._onMouseMove = function (e) { _this.__onMouseMove(e); }; +353 this._onResize = function (e) { _this.calcOffset() }; +354 +355 addListener(this._element, 'mousedown', this._onMouseDown); +356 addListener(document, 'mousemove', this._onMouseMove); +357 addListener(document, 'mouseup', this._onMouseUp); +358 addListener(window, 'resize', this._onResize); +359 }, +360 +361 /** +362 * Creates canvas elements +363 * @method _createCanvasElement +364 * @private +365 */ +366 _createCanvasElement: function (className) { +367 +368 var element = document.createElement('canvas'); +369 if (!element) { +370 return; +371 } +372 +373 element.className = className; +374 var oContainer = this._element.parentNode.insertBefore(element, this._element); +375 +376 oContainer.width = this.getWidth(); +377 oContainer.height = this.getHeight(); +378 oContainer.style.width = this.getWidth() + 'px'; +379 oContainer.style.height = this.getHeight() + 'px'; +380 oContainer.style.position = 'absolute'; +381 oContainer.style.left = 0; +382 oContainer.style.top = 0; +383 +384 if (typeof element.getContext === 'undefined' && typeof G_vmlCanvasManager !== 'undefined') { +385 // try augmenting element with excanvas' G_vmlCanvasManager +386 G_vmlCanvasManager.initElement(element); +387 } +388 if (typeof element.getContext === 'undefined') { +389 // if that didn't work, throw error +390 throw CANVAS_INIT_ERROR; +391 } +392 fabric.util.makeElementUnselectable(oContainer); +393 return oContainer; +394 }, +395 +396 /** +397 * Creates a secondary canvas to contain all the images are not being translated/rotated/scaled +398 * @method _createCanvasContainer +399 */ +400 _createCanvasContainer: function () { +401 var canvas = this._createCanvasElement('canvas-container'); +402 this.contextContainerEl = canvas; +403 this.contextContainer = canvas.getContext('2d'); +404 }, +405 +406 /** +407 * Creates a "background" canvas +408 * @method _createCanvasBackground +409 */ +410 _createCanvasBackground: function () { +411 var canvas = this._createCanvasElement('canvas-container'); +412 this._contextBackgroundEl = canvas; +413 this._contextBackground = canvas.getContext('2d'); +414 }, +415 +416 /** +417 * Returns canvas width +418 * @method getWidth +419 * @return {Number} +420 */ +421 getWidth: function () { +422 return this._config.width; +423 }, +424 +425 /** +426 * Returns canvas height +427 * @method getHeight +428 * @return {Number} +429 */ +430 getHeight: function () { +431 return this._config.height; +432 }, +433 +434 /** +435 * Sets width of this canvas instance +436 * @method setWidth +437 * @param {Number} width value to set width to +438 * @return {fabric.Element} instance +439 * @chainable true +440 */ +441 setWidth: function (value) { +442 return this._setDimension('width', value); +443 }, +444 +445 /** +446 * Sets height of this canvas instance +447 * @method setHeight +448 * @param {Number} height value to set height to +449 * @return {fabric.Element} instance +450 * @chainable true +451 */ +452 setHeight: function (value) { +453 return this._setDimension('height', value); +454 }, +455 +456 /** +457 * Sets dimensions (width, height) of this canvas instance +458 * @method setDimensions +459 * @param {Object} dimensions +460 * @return {fabric.Element} thisArg +461 * @chainable +462 */ +463 setDimensions: function(dimensions) { +464 for (var prop in dimensions) { +465 this._setDimension(prop, dimensions[prop]); +466 } +467 return this; +468 }, +469 +470 /** +471 * Helper for setting width/height +472 * @private +473 * @method _setDimensions +474 * @param {String} prop property (width|height) +475 * @param {Number} value value to set property to +476 * @return {fabric.Element} instance +477 * @chainable true +478 */ +479 _setDimension: function (prop, value) { +480 this.contextContainerEl[prop] = value; +481 this.contextContainerEl.style[prop] = value + 'px'; +482 +483 this._contextBackgroundEl[prop] = value; +484 this._contextBackgroundEl.style[prop] = value + 'px'; +485 +486 this._element[prop] = value; +487 this._element.style[prop] = value + 'px'; 488 -489 return this; -490 }, -491 -492 /** -493 * Method that defines the actions when mouse is released on canvas. -494 * The method resets the currentTransform parameters, store the image corner -495 * position in the image object and render the canvas on top. -496 * @method __onMouseUp -497 * @param {Event} e Event object fired on mouseup -498 * -499 */ -500 __onMouseUp: function (e) { -501 -502 if (this.isDrawingMode && this._isCurrentlyDrawing) { -503 this._finalizeDrawingPath(); -504 return; -505 } -506 -507 if (this._currentTransform) { -508 -509 var transform = this._currentTransform, -510 target = transform.target; -511 -512 if (target._scaling) { -513 fireEvent('object:scaled', { target: target }); -514 target._scaling = false; -515 } -516 -517 // determine the new coords everytime the image changes its position -518 var i = this._objects.length; -519 while (i--) { -520 this._objects[i].setCoords(); -521 } -522 -523 // only fire :modified event if target coordinates were changed during mousedown-mouseup -524 if (target.hasStateChanged()) { -525 target.isMoving = false; -526 fireEvent('object:modified', { target: target }); -527 } -528 } -529 -530 this._currentTransform = null; -531 -532 if (this._groupSelector) { -533 // group selection was completed, determine its bounds -534 this._findSelectedObjects(e); +489 // <DIV> container (parent of all <CANVAS> elements) +490 this._element.parentNode.style[prop] = value + 'px'; +491 +492 this._config[prop] = value; +493 this.calcOffset(); +494 this.renderAll(); +495 +496 return this; +497 }, +498 +499 /** +500 * Method that defines the actions when mouse is released on canvas. +501 * The method resets the currentTransform parameters, store the image corner +502 * position in the image object and render the canvas on top. +503 * @method __onMouseUp +504 * @param {Event} e Event object fired on mouseup +505 * +506 */ +507 __onMouseUp: function (e) { +508 +509 if (this.isDrawingMode && this._isCurrentlyDrawing) { +510 this._finalizeDrawingPath(); +511 return; +512 } +513 +514 if (this._currentTransform) { +515 +516 var transform = this._currentTransform, +517 target = transform.target; +518 +519 if (target._scaling) { +520 fireEvent('object:scaled', { target: target }); +521 target._scaling = false; +522 } +523 +524 // determine the new coords everytime the image changes its position +525 var i = this._objects.length; +526 while (i--) { +527 this._objects[i].setCoords(); +528 } +529 +530 // only fire :modified event if target coordinates were changed during mousedown-mouseup +531 if (target.hasStateChanged()) { +532 target.isMoving = false; +533 fireEvent('object:modified', { target: target }); +534 } 535 } -536 var activeGroup = this.getActiveGroup(); -537 if (activeGroup) { -538 if (activeGroup.hasStateChanged() && -539 activeGroup.containsPoint(this.getPointer(e))) { -540 fireEvent('group:modified', { target: activeGroup }); -541 } -542 activeGroup.setObjectsCoords(); -543 activeGroup.set('isMoving', false); -544 this._setCursor('default'); -545 } -546 -547 // clear selection -548 this._groupSelector = null; -549 this.renderAll(); -550 -551 this._setCursorFromEvent(e, target); -552 // fix for FF -553 this._setCursor(''); -554 -555 var _this = this; -556 setTimeout(function () { -557 _this._setCursorFromEvent(e, target); -558 }, 50); -559 }, -560 -561 _shouldClearSelection: function (e) { -562 var target = this.findTarget(e), -563 activeGroup = this.getActiveGroup(); -564 return ( -565 !target || ( -566 target && -567 activeGroup && -568 !activeGroup.contains(target) && -569 activeGroup !== target && -570 !e.shiftKey -571 ) -572 ); -573 }, -574 -575 /** -576 * Method that defines the actions when mouse is clic ked on canvas. -577 * The method inits the currentTransform parameters and renders all the -578 * canvas so the current image can be placed on the top canvas and the rest -579 * in on the container one. -580 * @method __onMouseDown -581 * @param e {Event} Event object fired on mousedown -582 * -583 */ -584 __onMouseDown: function (e) { -585 -586 if (this.isDrawingMode) { -587 this._prepareForDrawing(e); -588 -589 // capture coordinates immediately; this allows to draw dots (when movement never occurs) -590 this._captureDrawingPath(e); -591 -592 return; -593 } -594 -595 // ignore if some object is being transformed at this moment -596 if (this._currentTransform) return; -597 -598 var target = this.findTarget(e), -599 pointer = this.getPointer(e), -600 activeGroup = this.getActiveGroup(), -601 corner; -602 -603 if (this._shouldClearSelection(e)) { -604 -605 this._groupSelector = { -606 ex: pointer.x, -607 ey: pointer.y, -608 top: 0, -609 left: 0 -610 }; +536 +537 this._currentTransform = null; +538 +539 if (this._groupSelector) { +540 // group selection was completed, determine its bounds +541 this._findSelectedObjects(e); +542 } +543 var activeGroup = this.getActiveGroup(); +544 if (activeGroup) { +545 if (activeGroup.hasStateChanged() && +546 activeGroup.containsPoint(this.getPointer(e))) { +547 fireEvent('group:modified', { target: activeGroup }); +548 } +549 activeGroup.setObjectsCoords(); +550 activeGroup.set('isMoving', false); +551 this._setCursor('default'); +552 } +553 +554 // clear selection +555 this._groupSelector = null; +556 this.renderAll(); +557 +558 this._setCursorFromEvent(e, target); +559 // fix for FF +560 this._setCursor(''); +561 +562 var _this = this; +563 setTimeout(function () { +564 _this._setCursorFromEvent(e, target); +565 }, 50); +566 }, +567 +568 _shouldClearSelection: function (e) { +569 var target = this.findTarget(e), +570 activeGroup = this.getActiveGroup(); +571 return ( +572 !target || ( +573 target && +574 activeGroup && +575 !activeGroup.contains(target) && +576 activeGroup !== target && +577 !e.shiftKey +578 ) +579 ); +580 }, +581 +582 /** +583 * Method that defines the actions when mouse is clic ked on canvas. +584 * The method inits the currentTransform parameters and renders all the +585 * canvas so the current image can be placed on the top canvas and the rest +586 * in on the container one. +587 * @method __onMouseDown +588 * @param e {Event} Event object fired on mousedown +589 * +590 */ +591 __onMouseDown: function (e) { +592 +593 if (this.isDrawingMode) { +594 this._prepareForDrawing(e); +595 +596 // capture coordinates immediately; this allows to draw dots (when movement never occurs) +597 this._captureDrawingPath(e); +598 +599 return; +600 } +601 +602 // ignore if some object is being transformed at this moment +603 if (this._currentTransform) return; +604 +605 var target = this.findTarget(e), +606 pointer = this.getPointer(e), +607 activeGroup = this.getActiveGroup(), +608 corner; +609 +610 if (this._shouldClearSelection(e)) { 611 -612 this.deactivateAllWithDispatch(); -613 } -614 else { -615 // determine if it's a drag or rotate case -616 // rotate and scale will happen at the same time -617 target.saveState(); +612 this._groupSelector = { +613 ex: pointer.x, +614 ey: pointer.y, +615 top: 0, +616 left: 0 +617 }; 618 -619 if (corner = target._findTargetCorner(e, this._offset)) { -620 this.onBeforeScaleRotate(target); -621 } -622 -623 this._setupCurrentTransform(e, target); -624 -625 var shouldHandleGroupLogic = e.shiftKey && (activeGroup || this.getActiveObject()); -626 if (shouldHandleGroupLogic) { -627 this._handleGroupLogic(e, target); +619 this.deactivateAllWithDispatch(); +620 } +621 else { +622 // determine if it's a drag or rotate case +623 // rotate and scale will happen at the same time +624 target.saveState(); +625 +626 if (corner = target._findTargetCorner(e, this._offset)) { +627 this.onBeforeScaleRotate(target); 628 } -629 else { -630 if (target !== this.getActiveGroup()) { -631 this.deactivateAll(); -632 } -633 this.setActiveObject(target); -634 } -635 } -636 // we must renderAll so that active image is placed on the top canvas -637 this.renderAll(); -638 }, -639 -640 /** -641 * Returns <canvas> element corresponding to this instance -642 * @method getElement -643 * @return {HTMLCanvasElement} -644 */ -645 getElement: function () { -646 return this._element; -647 }, -648 -649 /** -650 * Deactivates all objects and dispatches appropriate events -651 * @method deactivateAllWithDispatch -652 * @return {fabric.Element} thisArg -653 */ -654 deactivateAllWithDispatch: function () { -655 var activeGroup = this.getActiveGroup(); -656 if (activeGroup) { -657 fireEvent('before:group:destroyed', { -658 target: activeGroup -659 }); -660 } -661 this.deactivateAll(); -662 if (activeGroup) { -663 fireEvent('after:group:destroyed'); -664 } -665 fireEvent('selection:cleared'); -666 return this; -667 }, -668 -669 /** -670 * @private -671 * @method _setupCurrentTransform -672 */ -673 _setupCurrentTransform: function (e, target) { -674 var action = 'drag', -675 corner, -676 pointer = getPointer(e); -677 -678 if (corner = target._findTargetCorner(e, this._offset)) { -679 action = (corner === 'ml' || corner === 'mr') -680 ? 'scaleX' -681 : (corner === 'mt' || corner === 'mb') -682 ? 'scaleY' -683 : 'rotate'; -684 } -685 -686 this._currentTransform = { -687 target: target, -688 action: action, -689 scaleX: target.scaleX, -690 scaleY: target.scaleY, -691 offsetX: pointer.x - target.left, -692 offsetY: pointer.y - target.top, -693 ex: pointer.x, -694 ey: pointer.y, -695 left: target.left, -696 top: target.top, -697 theta: target.theta, -698 width: target.width * target.scaleX -699 }; -700 -701 this._currentTransform.original = { -702 left: target.left, -703 top: target.top -704 }; -705 }, -706 -707 _handleGroupLogic: function (e, target) { -708 if (target.isType('group')) { -709 // if it's a group, find target again, this time skipping group -710 target = this.findTarget(e, true); -711 // if even object is not found, bail out -712 if (!target || target.isType('group')) { -713 return; -714 } -715 } -716 var activeGroup = this.getActiveGroup(); -717 if (activeGroup) { -718 if (activeGroup.contains(target)) { -719 activeGroup.remove(target); -720 target.setActive(false); -721 if (activeGroup.size() === 1) { -722 // remove group alltogether if after removal it only contains 1 object -723 this.removeActiveGroup(); -724 } -725 } -726 else { -727 activeGroup.add(target); -728 } -729 fireEvent('group:selected', { target: activeGroup }); -730 activeGroup.setActive(true); -731 } -732 else { -733 // group does not exist -734 if (this._activeObject) { -735 // only if there's an active object -736 if (target !== this._activeObject) { -737 // and that object is not the actual target -738 var group = new fabric.Group([ this._activeObject,target ]); -739 this.setActiveGroup(group); -740 activeGroup = this.getActiveGroup(); -741 } -742 } -743 // activate target object in any case -744 target.setActive(true); -745 } -746 -747 if (activeGroup) { -748 activeGroup.saveCoords(); -749 } -750 }, -751 -752 /** -753 * @private -754 * @method _prepareForDrawing -755 */ -756 _prepareForDrawing: function(e) { -757 -758 this._isCurrentlyDrawing = true; -759 -760 this.removeActiveObject().renderAll(); -761 -762 var pointer = this.getPointer(e); -763 -764 this._freeDrawingXPoints.length = this._freeDrawingYPoints.length = 0; -765 -766 this._freeDrawingXPoints.push(pointer.x); -767 this._freeDrawingYPoints.push(pointer.y); +629 +630 this._setupCurrentTransform(e, target); +631 +632 var shouldHandleGroupLogic = e.shiftKey && (activeGroup || this.getActiveObject()); +633 if (shouldHandleGroupLogic) { +634 this._handleGroupLogic(e, target); +635 } +636 else { +637 if (target !== this.getActiveGroup()) { +638 this.deactivateAll(); +639 } +640 this.setActiveObject(target); +641 } +642 } +643 // we must renderAll so that active image is placed on the top canvas +644 this.renderAll(); +645 }, +646 +647 /** +648 * Returns <canvas> element corresponding to this instance +649 * @method getElement +650 * @return {HTMLCanvasElement} +651 */ +652 getElement: function () { +653 return this._element; +654 }, +655 +656 /** +657 * Deactivates all objects and dispatches appropriate events +658 * @method deactivateAllWithDispatch +659 * @return {fabric.Element} thisArg +660 */ +661 deactivateAllWithDispatch: function () { +662 var activeGroup = this.getActiveGroup(); +663 if (activeGroup) { +664 fireEvent('before:group:destroyed', { +665 target: activeGroup +666 }); +667 } +668 this.deactivateAll(); +669 if (activeGroup) { +670 fireEvent('after:group:destroyed'); +671 } +672 fireEvent('selection:cleared'); +673 return this; +674 }, +675 +676 /** +677 * @private +678 * @method _setupCurrentTransform +679 */ +680 _setupCurrentTransform: function (e, target) { +681 var action = 'drag', +682 corner, +683 pointer = getPointer(e); +684 +685 if (corner = target._findTargetCorner(e, this._offset)) { +686 action = (corner === 'ml' || corner === 'mr') +687 ? 'scaleX' +688 : (corner === 'mt' || corner === 'mb') +689 ? 'scaleY' +690 : 'rotate'; +691 } +692 +693 this._currentTransform = { +694 target: target, +695 action: action, +696 scaleX: target.scaleX, +697 scaleY: target.scaleY, +698 offsetX: pointer.x - target.left, +699 offsetY: pointer.y - target.top, +700 ex: pointer.x, +701 ey: pointer.y, +702 left: target.left, +703 top: target.top, +704 theta: target.theta, +705 width: target.width * target.scaleX +706 }; +707 +708 this._currentTransform.original = { +709 left: target.left, +710 top: target.top +711 }; +712 }, +713 +714 _handleGroupLogic: function (e, target) { +715 if (target.isType('group')) { +716 // if it's a group, find target again, this time skipping group +717 target = this.findTarget(e, true); +718 // if even object is not found, bail out +719 if (!target || target.isType('group')) { +720 return; +721 } +722 } +723 var activeGroup = this.getActiveGroup(); +724 if (activeGroup) { +725 if (activeGroup.contains(target)) { +726 activeGroup.remove(target); +727 target.setActive(false); +728 if (activeGroup.size() === 1) { +729 // remove group alltogether if after removal it only contains 1 object +730 this.removeActiveGroup(); +731 } +732 } +733 else { +734 activeGroup.add(target); +735 } +736 fireEvent('group:selected', { target: activeGroup }); +737 activeGroup.setActive(true); +738 } +739 else { +740 // group does not exist +741 if (this._activeObject) { +742 // only if there's an active object +743 if (target !== this._activeObject) { +744 // and that object is not the actual target +745 var group = new fabric.Group([ this._activeObject,target ]); +746 this.setActiveGroup(group); +747 activeGroup = this.getActiveGroup(); +748 } +749 } +750 // activate target object in any case +751 target.setActive(true); +752 } +753 +754 if (activeGroup) { +755 activeGroup.saveCoords(); +756 } +757 }, +758 +759 /** +760 * @private +761 * @method _prepareForDrawing +762 */ +763 _prepareForDrawing: function(e) { +764 +765 this._isCurrentlyDrawing = true; +766 +767 this.removeActiveObject().renderAll(); 768 -769 this.contextTop.beginPath(); -770 this.contextTop.moveTo(pointer.x, pointer.y); -771 this.contextTop.strokeStyle = this.freeDrawingColor; -772 this.contextTop.lineWidth = this.freeDrawingLineWidth; -773 this.contextTop.lineCap = this.contextTop.lineJoin = 'round'; -774 }, -775 -776 /** -777 * @private -778 * @method _captureDrawingPath -779 */ -780 _captureDrawingPath: function(e) { -781 var pointer = this.getPointer(e); -782 -783 this._freeDrawingXPoints.push(pointer.x); -784 this._freeDrawingYPoints.push(pointer.y); -785 -786 this.contextTop.lineTo(pointer.x, pointer.y); -787 this.contextTop.stroke(); -788 }, -789 -790 /** -791 * @private -792 * @method _finalizeDrawingPath -793 */ -794 _finalizeDrawingPath: function() { -795 -796 this.contextTop.closePath(); -797 -798 this._isCurrentlyDrawing = false; -799 -800 var minX = utilMin(this._freeDrawingXPoints), -801 minY = utilMin(this._freeDrawingYPoints), -802 maxX = utilMax(this._freeDrawingXPoints), -803 maxY = utilMax(this._freeDrawingYPoints), -804 ctx = this.contextTop, -805 path = [ ], -806 xPoints = this._freeDrawingXPoints, -807 yPoints = this._freeDrawingYPoints; -808 -809 path.push('M ', xPoints[0] - minX, ' ', yPoints[0] - minY, ' '); -810 -811 for (var i = 1; xPoint = xPoints[i], yPoint = yPoints[i]; i++) { -812 path.push('L ', xPoint - minX, ' ', yPoint - minY, ' '); -813 } -814 -815 // TODO (kangax): maybe remove Path creation from here, to decouple fabric.Element from fabric.Path, -816 // and instead fire something like "drawing:completed" event with path string +769 var pointer = this.getPointer(e); +770 +771 this._freeDrawingXPoints.length = this._freeDrawingYPoints.length = 0; +772 +773 this._freeDrawingXPoints.push(pointer.x); +774 this._freeDrawingYPoints.push(pointer.y); +775 +776 this.contextTop.beginPath(); +777 this.contextTop.moveTo(pointer.x, pointer.y); +778 this.contextTop.strokeStyle = this.freeDrawingColor; +779 this.contextTop.lineWidth = this.freeDrawingLineWidth; +780 this.contextTop.lineCap = this.contextTop.lineJoin = 'round'; +781 }, +782 +783 /** +784 * @private +785 * @method _captureDrawingPath +786 */ +787 _captureDrawingPath: function(e) { +788 var pointer = this.getPointer(e); +789 +790 this._freeDrawingXPoints.push(pointer.x); +791 this._freeDrawingYPoints.push(pointer.y); +792 +793 this.contextTop.lineTo(pointer.x, pointer.y); +794 this.contextTop.stroke(); +795 }, +796 +797 /** +798 * @private +799 * @method _finalizeDrawingPath +800 */ +801 _finalizeDrawingPath: function() { +802 +803 this.contextTop.closePath(); +804 +805 this._isCurrentlyDrawing = false; +806 +807 var minX = utilMin(this._freeDrawingXPoints), +808 minY = utilMin(this._freeDrawingYPoints), +809 maxX = utilMax(this._freeDrawingXPoints), +810 maxY = utilMax(this._freeDrawingYPoints), +811 ctx = this.contextTop, +812 path = [ ], +813 xPoints = this._freeDrawingXPoints, +814 yPoints = this._freeDrawingYPoints; +815 +816 path.push('M ', xPoints[0] - minX, ' ', yPoints[0] - minY, ' '); 817 -818 var p = new fabric.Path(path.join('')); -819 p.fill = null; -820 p.stroke = this.freeDrawingColor; -821 p.strokeWidth = this.freeDrawingLineWidth; -822 this.add(p); -823 p.set("left", minX + (maxX - minX) / 2).set("top", minY + (maxY - minY) / 2).setCoords(); -824 this.renderAll(); -825 fireEvent('path:created', { path: p }); -826 }, -827 -828 /** -829 * Method that defines the actions when mouse is hovering the canvas. -830 * The currentTransform parameter will definde whether the user is rotating/scaling/translating -831 * an image or neither of them (only hovering). A group selection is also possible and would cancel -832 * all any other type of action. -833 * In case of an image transformation only the top canvas will be rendered. -834 * @method __onMouseMove -835 * @param e {Event} Event object fired on mousemove -836 * -837 */ -838 __onMouseMove: function (e) { -839 -840 if (this.isDrawingMode) { -841 if (this._isCurrentlyDrawing) { -842 this._captureDrawingPath(e); -843 } -844 return; -845 } +818 for (var i = 1; xPoint = xPoints[i], yPoint = yPoints[i]; i++) { +819 path.push('L ', xPoint - minX, ' ', yPoint - minY, ' '); +820 } +821 +822 // TODO (kangax): maybe remove Path creation from here, to decouple fabric.Element from fabric.Path, +823 // and instead fire something like "drawing:completed" event with path string +824 +825 var p = new fabric.Path(path.join('')); +826 p.fill = null; +827 p.stroke = this.freeDrawingColor; +828 p.strokeWidth = this.freeDrawingLineWidth; +829 this.add(p); +830 p.set("left", minX + (maxX - minX) / 2).set("top", minY + (maxY - minY) / 2).setCoords(); +831 this.renderAll(); +832 fireEvent('path:created', { path: p }); +833 }, +834 +835 /** +836 * Method that defines the actions when mouse is hovering the canvas. +837 * The currentTransform parameter will definde whether the user is rotating/scaling/translating +838 * an image or neither of them (only hovering). A group selection is also possible and would cancel +839 * all any other type of action. +840 * In case of an image transformation only the top canvas will be rendered. +841 * @method __onMouseMove +842 * @param e {Event} Event object fired on mousemove +843 * +844 */ +845 __onMouseMove: function (e) { 846 -847 var groupSelector = this._groupSelector; -848 -849 // We initially clicked in an empty area, so we draw a box for multiple selection. -850 if (groupSelector !== null) { -851 var pointer = getPointer(e); -852 groupSelector.left = pointer.x - this._offset.left - groupSelector.ex; -853 groupSelector.top = pointer.y - this._offset.top - groupSelector.ey; -854 this.renderTop(); -855 } -856 else if (!this._currentTransform) { -857 -858 // alias style to elimintate unnecessary lookup -859 var style = this._element.style; -860 -861 // Here we are hovering the canvas then we will determine -862 // what part of the pictures we are hovering to change the caret symbol. -863 // We won't do that while dragging or rotating in order to improve the -864 // performance. -865 var target = this.findTarget(e); -866 -867 if (!target) { -868 // image/text was hovered-out from, we remove its borders -869 for (var i = this._objects.length; i--; ) { -870 if (!this._objects[i].active) { -871 this._objects[i].setActive(false); -872 } -873 } -874 style.cursor = 'default'; -875 } -876 else { -877 // set proper cursor -878 this._setCursorFromEvent(e, target); -879 if (target.isActive()) { -880 // display corners when hovering over an image -881 target.setCornersVisibility && target.setCornersVisibility(true); -882 } -883 } -884 } -885 else { -886 // object is being transformed (scaled/rotated/moved/etc.) -887 var pointer = getPointer(e), -888 x = pointer.x, -889 y = pointer.y; -890 -891 this._currentTransform.target.isMoving = true; -892 -893 if (this._currentTransform.action === 'rotate') { -894 // rotate object only if shift key is not pressed -895 // and if it is not a group we are transforming -896 -897 if (!e.shiftKey) { -898 this._rotateObject(x, y); -899 } -900 this._scaleObject(x, y); -901 } -902 else if (this._currentTransform.action === 'scaleX') { -903 this._scaleObject(x, y, 'x'); -904 } -905 else if (this._currentTransform.action === 'scaleY') { -906 this._scaleObject(x, y, 'y'); -907 } -908 else { -909 this._translateObject(x, y); -910 } -911 // only commit here. when we are actually moving the pictures -912 this.renderAll(); -913 } -914 }, -915 -916 /** -917 * Translates object by "setting" its left/top -918 * @method _translateObject -919 * @param x {Number} pointer's x coordinate -920 * @param y {Number} pointer's y coordinate -921 */ -922 _translateObject: function (x, y) { -923 var target = this._currentTransform.target; -924 target.lockHorizontally || target.set('left', x - this._currentTransform.offsetX); -925 target.lockVertically || target.set('top', y - this._currentTransform.offsetY); -926 }, -927 -928 /** -929 * Scales object by invoking its scaleX/scaleY methods -930 * @method _scaleObject -931 * @param x {Number} pointer's x coordinate -932 * @param y {Number} pointer's y coordinate -933 * @param by {String} Either 'x' or 'y' - specifies dimension constraint by which to scale an object. -934 * When not provided, an object is scaled by both dimensions equally -935 */ -936 _scaleObject: function (x, y, by) { -937 var t = this._currentTransform, -938 offset = this._offset, -939 target = t.target; -940 -941 if (target.lockScaling) return; -942 -943 var lastLen = sqrt(pow(t.ey - t.top - offset.top, 2) + pow(t.ex - t.left - offset.left, 2)), -944 curLen = sqrt(pow(y - t.top - offset.top, 2) + pow(x - t.left - offset.left, 2)); -945 -946 target._scaling = true; +847 if (this.isDrawingMode) { +848 if (this._isCurrentlyDrawing) { +849 this._captureDrawingPath(e); +850 } +851 return; +852 } +853 +854 var groupSelector = this._groupSelector; +855 +856 // We initially clicked in an empty area, so we draw a box for multiple selection. +857 if (groupSelector !== null) { +858 var pointer = getPointer(e); +859 groupSelector.left = pointer.x - this._offset.left - groupSelector.ex; +860 groupSelector.top = pointer.y - this._offset.top - groupSelector.ey; +861 this.renderTop(); +862 } +863 else if (!this._currentTransform) { +864 +865 // alias style to elimintate unnecessary lookup +866 var style = this._element.style; +867 +868 // Here we are hovering the canvas then we will determine +869 // what part of the pictures we are hovering to change the caret symbol. +870 // We won't do that while dragging or rotating in order to improve the +871 // performance. +872 var target = this.findTarget(e); +873 +874 if (!target) { +875 // image/text was hovered-out from, we remove its borders +876 for (var i = this._objects.length; i--; ) { +877 if (!this._objects[i].active) { +878 this._objects[i].setActive(false); +879 } +880 } +881 style.cursor = 'default'; +882 } +883 else { +884 // set proper cursor +885 this._setCursorFromEvent(e, target); +886 if (target.isActive()) { +887 // display corners when hovering over an image +888 target.setCornersVisibility && target.setCornersVisibility(true); +889 } +890 } +891 } +892 else { +893 // object is being transformed (scaled/rotated/moved/etc.) +894 var pointer = getPointer(e), +895 x = pointer.x, +896 y = pointer.y; +897 +898 this._currentTransform.target.isMoving = true; +899 +900 if (this._currentTransform.action === 'rotate') { +901 // rotate object only if shift key is not pressed +902 // and if it is not a group we are transforming +903 +904 if (!e.shiftKey) { +905 this._rotateObject(x, y); +906 } +907 this._scaleObject(x, y); +908 } +909 else if (this._currentTransform.action === 'scaleX') { +910 this._scaleObject(x, y, 'x'); +911 } +912 else if (this._currentTransform.action === 'scaleY') { +913 this._scaleObject(x, y, 'y'); +914 } +915 else { +916 this._translateObject(x, y); +917 } +918 // only commit here. when we are actually moving the pictures +919 this.renderAll(); +920 } +921 }, +922 +923 /** +924 * Translates object by "setting" its left/top +925 * @method _translateObject +926 * @param x {Number} pointer's x coordinate +927 * @param y {Number} pointer's y coordinate +928 */ +929 _translateObject: function (x, y) { +930 var target = this._currentTransform.target; +931 target.lockHorizontally || target.set('left', x - this._currentTransform.offsetX); +932 target.lockVertically || target.set('top', y - this._currentTransform.offsetY); +933 }, +934 +935 /** +936 * Scales object by invoking its scaleX/scaleY methods +937 * @method _scaleObject +938 * @param x {Number} pointer's x coordinate +939 * @param y {Number} pointer's y coordinate +940 * @param by {String} Either 'x' or 'y' - specifies dimension constraint by which to scale an object. +941 * When not provided, an object is scaled by both dimensions equally +942 */ +943 _scaleObject: function (x, y, by) { +944 var t = this._currentTransform, +945 offset = this._offset, +946 target = t.target; 947 -948 if (!by) { -949 target.set('scaleX', t.scaleX * curLen/lastLen); -950 target.set('scaleY', t.scaleY * curLen/lastLen); -951 } -952 else if (by === 'x') { -953 target.set('scaleX', t.scaleX * curLen/lastLen); -954 } -955 else if (by === 'y') { -956 target.set('scaleY', t.scaleY * curLen/lastLen); -957 } -958 }, -959 -960 /** -961 * Rotates object by invoking its rotate method -962 * @method _rotateObject -963 * @param x {Number} pointer's x coordinate -964 * @param y {Number} pointer's y coordinate -965 */ -966 _rotateObject: function (x, y) { -967 -968 var t = this._currentTransform, -969 o = this._offset; -970 -971 if (t.target.lockRotation) return; -972 -973 var lastAngle = atan2(t.ey - t.top - o.top, t.ex - t.left - o.left), -974 curAngle = atan2(y - t.top - o.top, x - t.left - o.left); -975 -976 t.target.set('theta', (curAngle - lastAngle) + t.theta); -977 }, -978 -979 /** -980 * @method _setCursor -981 */ -982 _setCursor: function (value) { -983 this._element.style.cursor = value; +948 if (target.lockScaling) return; +949 +950 var lastLen = sqrt(pow(t.ey - t.top - offset.top, 2) + pow(t.ex - t.left - offset.left, 2)), +951 curLen = sqrt(pow(y - t.top - offset.top, 2) + pow(x - t.left - offset.left, 2)); +952 +953 target._scaling = true; +954 +955 if (!by) { +956 target.set('scaleX', t.scaleX * curLen/lastLen); +957 target.set('scaleY', t.scaleY * curLen/lastLen); +958 } +959 else if (by === 'x') { +960 target.set('scaleX', t.scaleX * curLen/lastLen); +961 } +962 else if (by === 'y') { +963 target.set('scaleY', t.scaleY * curLen/lastLen); +964 } +965 }, +966 +967 /** +968 * Rotates object by invoking its rotate method +969 * @method _rotateObject +970 * @param x {Number} pointer's x coordinate +971 * @param y {Number} pointer's y coordinate +972 */ +973 _rotateObject: function (x, y) { +974 +975 var t = this._currentTransform, +976 o = this._offset; +977 +978 if (t.target.lockRotation) return; +979 +980 var lastAngle = atan2(t.ey - t.top - o.top, t.ex - t.left - o.left), +981 curAngle = atan2(y - t.top - o.top, x - t.left - o.left); +982 +983 t.target.set('theta', (curAngle - lastAngle) + t.theta); 984 }, 985 986 /** -987 * Sets the cursor depending on where the canvas is being hovered. -988 * Note: very buggy in Opera -989 * @method _setCursorFromEvent -990 * @param e {Event} Event object -991 * @param target {Object} Object that the mouse is hovering, if so. -992 */ -993 _setCursorFromEvent: function (e, target) { -994 var s = this._element.style; -995 if (!target) { -996 s.cursor = 'default'; -997 return false; -998 } -999 else { -1000 var activeGroup = this.getActiveGroup(); -1001 // only show proper corner when group selection is not active -1002 var corner = !!target._findTargetCorner -1003 && (!activeGroup || !activeGroup.contains(target)) -1004 && target._findTargetCorner(e, this._offset); -1005 -1006 if (!corner) { -1007 s.cursor = 'move'; -1008 } -1009 else { -1010 if (corner in cursorMap) { -1011 s.cursor = cursorMap[corner]; -1012 } -1013 else { -1014 s.cursor = 'default'; -1015 return false; -1016 } -1017 } -1018 } -1019 return true; -1020 }, -1021 -1022 /** -1023 * Given a context, renders an object on that context -1024 * @param ctx {Object} context to render object on -1025 * @param object {Object} object to render -1026 * @private -1027 */ -1028 _draw: function (ctx, object) { -1029 object && object.render(ctx); -1030 }, -1031 -1032 /** -1033 * @method _drawSelection -1034 * @private -1035 */ -1036 _drawSelection: function () { -1037 var groupSelector = this._groupSelector, -1038 left = groupSelector.left, -1039 top = groupSelector.top, -1040 aleft = abs(left), -1041 atop = abs(top); -1042 -1043 this.contextTop.fillStyle = this.selectionColor; -1044 -1045 this.contextTop.fillRect( -1046 groupSelector.ex - ((left > 0) ? 0 : -left), -1047 groupSelector.ey - ((top > 0) ? 0 : -top), -1048 aleft, -1049 atop -1050 ); +987 * @method _setCursor +988 */ +989 _setCursor: function (value) { +990 this._element.style.cursor = value; +991 }, +992 +993 /** +994 * Sets the cursor depending on where the canvas is being hovered. +995 * Note: very buggy in Opera +996 * @method _setCursorFromEvent +997 * @param e {Event} Event object +998 * @param target {Object} Object that the mouse is hovering, if so. +999 */ +1000 _setCursorFromEvent: function (e, target) { +1001 var s = this._element.style; +1002 if (!target) { +1003 s.cursor = 'default'; +1004 return false; +1005 } +1006 else { +1007 var activeGroup = this.getActiveGroup(); +1008 // only show proper corner when group selection is not active +1009 var corner = !!target._findTargetCorner +1010 && (!activeGroup || !activeGroup.contains(target)) +1011 && target._findTargetCorner(e, this._offset); +1012 +1013 if (!corner) { +1014 s.cursor = 'move'; +1015 } +1016 else { +1017 if (corner in cursorMap) { +1018 s.cursor = cursorMap[corner]; +1019 } +1020 else { +1021 s.cursor = 'default'; +1022 return false; +1023 } +1024 } +1025 } +1026 return true; +1027 }, +1028 +1029 /** +1030 * Given a context, renders an object on that context +1031 * @param ctx {Object} context to render object on +1032 * @param object {Object} object to render +1033 * @private +1034 */ +1035 _draw: function (ctx, object) { +1036 object && object.render(ctx); +1037 }, +1038 +1039 /** +1040 * @method _drawSelection +1041 * @private +1042 */ +1043 _drawSelection: function () { +1044 var groupSelector = this._groupSelector, +1045 left = groupSelector.left, +1046 top = groupSelector.top, +1047 aleft = abs(left), +1048 atop = abs(top); +1049 +1050 this.contextTop.fillStyle = this.selectionColor; 1051 -1052 this.contextTop.lineWidth = this.selectionLineWidth; -1053 this.contextTop.strokeStyle = this.selectionBorderColor; -1054 -1055 this.contextTop.strokeRect( -1056 groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft), -1057 groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop), -1058 aleft, -1059 atop -1060 ); -1061 }, -1062 -1063 _findSelectedObjects: function (e) { -1064 var target, -1065 targetRegion, -1066 group = [ ], -1067 x1 = this._groupSelector.ex, -1068 y1 = this._groupSelector.ey, -1069 x2 = x1 + this._groupSelector.left, -1070 y2 = y1 + this._groupSelector.top, -1071 currentObject, -1072 selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), -1073 selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)); -1074 -1075 for (var i = 0, len = this._objects.length; i < len; ++i) { -1076 currentObject = this._objects[i]; -1077 -1078 if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) || -1079 currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2)) { -1080 -1081 currentObject.setActive(true); -1082 group.push(currentObject); -1083 } -1084 } -1085 // do not create group for 1 element only -1086 if (group.length === 1) { -1087 this.setActiveObject(group[0]); -1088 fireEvent('object:selected', { -1089 target: group[0] -1090 }); -1091 } -1092 else if (group.length > 1) { -1093 var group = new fabric.Group(group); -1094 this.setActiveGroup(group); -1095 group.saveCoords(); -1096 fireEvent('group:selected', { target: group }); -1097 } -1098 this.renderAll(); -1099 }, -1100 -1101 /** -1102 * Adds objects to canvas, then renders canvas; -1103 * Objects should be instances of (or inherit from) fabric.Object -1104 * @method add -1105 * @return {fabric.Element} thisArg -1106 * @chainable -1107 */ -1108 add: function () { -1109 this._objects.push.apply(this._objects, arguments); -1110 this.renderAll(); -1111 return this; -1112 }, -1113 -1114 /** -1115 * Inserts an object to canvas at specified index and renders canvas. -1116 * An object should be an instance of (or inherit from) fabric.Object -1117 * @method insertAt -1118 * @param object {Object} Object to insert -1119 * @param index {Number} index to insert object at -1120 * @return {fabric.Element} instance -1121 */ -1122 insertAt: function (object, index) { -1123 this._objects.splice(index, 0, object); -1124 this.renderAll(); -1125 return this; -1126 }, -1127 -1128 /** -1129 * Returns an array of objects this instance has -1130 * @method getObjects -1131 * @return {Array} -1132 */ -1133 getObjects: function () { -1134 return this._objects; -1135 }, -1136 -1137 /** -1138 * Returns topmost canvas context -1139 * @method getContext -1140 * @return {CanvasRenderingContext2D} -1141 */ -1142 getContext: function () { -1143 return this.contextTop; -1144 }, -1145 -1146 /** -1147 * Clears specified context of canvas element -1148 * @method clearContext -1149 * @param context {Object} ctx context to clear -1150 * @return {fabric.Element} thisArg -1151 * @chainable -1152 */ -1153 clearContext: function(ctx) { -1154 // this sucks, but we can't use `getWidth`/`getHeight` here for perf. reasons -1155 ctx.clearRect(0, 0, this._config.width, this._config.height); -1156 return this; -1157 }, -1158 -1159 /** -1160 * Clears all contexts (background, main, top) of an instance -1161 * @method clear -1162 * @return {fabric.Element} thisArg -1163 * @chainable -1164 */ -1165 clear: function () { -1166 this._objects.length = 0; -1167 this.clearContext(this.contextTop); -1168 this.clearContext(this.contextContainer); -1169 this.renderAll(); -1170 return this; -1171 }, -1172 -1173 /** -1174 * Renders both the top canvas and the secondary container canvas. -1175 * @method renderAll -1176 * @param allOnTop {Boolean} optional Whether we want to force all images to be rendered on the top canvas -1177 * @return {fabric.Element} instance -1178 * @chainable -1179 */ -1180 renderAll: function (allOnTop) { -1181 -1182 // this sucks, but we can't use `getWidth`/`getHeight` here for perf. reasons -1183 var w = this._config.width, -1184 h = this._config.height; -1185 -1186 // when allOnTop is true all images are rendered in the top canvas. -1187 // This is used for actions like toDataUrl that needs to take some actions on a unique canvas. -1188 var containerCanvas = allOnTop ? this.contextTop : this.contextContainer; -1189 -1190 this.clearContext(this.contextTop); -1191 -1192 if (!allOnTop) { -1193 this.clearContext(containerCanvas); -1194 } -1195 containerCanvas.fillStyle = this.backgroundColor; -1196 containerCanvas.fillRect(0, 0, w, h); -1197 -1198 var length = this._objects.length, -1199 activeGroup = this.getActiveGroup(); -1200 -1201 var startTime = new Date(); -1202 -1203 if (length) { -1204 for (var i = 0; i < length; ++i) { -1205 if (!activeGroup || -1206 (activeGroup && -1207 !activeGroup.contains(this._objects[i]))) { -1208 this._draw(containerCanvas, this._objects[i]); -1209 } -1210 } -1211 } -1212 -1213 // delegate rendering to group selection (if one exists) -1214 if (activeGroup) { -1215 this._draw(this.contextTop, activeGroup); -1216 } -1217 -1218 if (this.overlayImage) { -1219 this.contextTop.drawImage(this.overlayImage, 0, 0); -1220 } -1221 -1222 var elapsedTime = new Date() - startTime; -1223 this.onFpsUpdate(~~(1000 / elapsedTime)); +1052 this.contextTop.fillRect( +1053 groupSelector.ex - ((left > 0) ? 0 : -left), +1054 groupSelector.ey - ((top > 0) ? 0 : -top), +1055 aleft, +1056 atop +1057 ); +1058 +1059 this.contextTop.lineWidth = this.selectionLineWidth; +1060 this.contextTop.strokeStyle = this.selectionBorderColor; +1061 +1062 this.contextTop.strokeRect( +1063 groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft), +1064 groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop), +1065 aleft, +1066 atop +1067 ); +1068 }, +1069 +1070 _findSelectedObjects: function (e) { +1071 var target, +1072 targetRegion, +1073 group = [ ], +1074 x1 = this._groupSelector.ex, +1075 y1 = this._groupSelector.ey, +1076 x2 = x1 + this._groupSelector.left, +1077 y2 = y1 + this._groupSelector.top, +1078 currentObject, +1079 selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), +1080 selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)); +1081 +1082 for (var i = 0, len = this._objects.length; i < len; ++i) { +1083 currentObject = this._objects[i]; +1084 +1085 if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) || +1086 currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2)) { +1087 +1088 currentObject.setActive(true); +1089 group.push(currentObject); +1090 } +1091 } +1092 // do not create group for 1 element only +1093 if (group.length === 1) { +1094 this.setActiveObject(group[0]); +1095 fireEvent('object:selected', { +1096 target: group[0] +1097 }); +1098 } +1099 else if (group.length > 1) { +1100 var group = new fabric.Group(group); +1101 this.setActiveGroup(group); +1102 group.saveCoords(); +1103 fireEvent('group:selected', { target: group }); +1104 } +1105 this.renderAll(); +1106 }, +1107 +1108 /** +1109 * Adds objects to canvas, then renders canvas; +1110 * Objects should be instances of (or inherit from) fabric.Object +1111 * @method add +1112 * @return {fabric.Element} thisArg +1113 * @chainable +1114 */ +1115 add: function () { +1116 this._objects.push.apply(this._objects, arguments); +1117 this.renderAll(); +1118 return this; +1119 }, +1120 +1121 /** +1122 * Inserts an object to canvas at specified index and renders canvas. +1123 * An object should be an instance of (or inherit from) fabric.Object +1124 * @method insertAt +1125 * @param object {Object} Object to insert +1126 * @param index {Number} index to insert object at +1127 * @return {fabric.Element} instance +1128 */ +1129 insertAt: function (object, index) { +1130 this._objects.splice(index, 0, object); +1131 this.renderAll(); +1132 return this; +1133 }, +1134 +1135 /** +1136 * Returns an array of objects this instance has +1137 * @method getObjects +1138 * @return {Array} +1139 */ +1140 getObjects: function () { +1141 return this._objects; +1142 }, +1143 +1144 /** +1145 * Returns topmost canvas context +1146 * @method getContext +1147 * @return {CanvasRenderingContext2D} +1148 */ +1149 getContext: function () { +1150 return this.contextTop; +1151 }, +1152 +1153 /** +1154 * Clears specified context of canvas element +1155 * @method clearContext +1156 * @param context {Object} ctx context to clear +1157 * @return {fabric.Element} thisArg +1158 * @chainable +1159 */ +1160 clearContext: function(ctx) { +1161 // this sucks, but we can't use `getWidth`/`getHeight` here for perf. reasons +1162 ctx.clearRect(0, 0, this._config.width, this._config.height); +1163 return this; +1164 }, +1165 +1166 /** +1167 * Clears all contexts (background, main, top) of an instance +1168 * @method clear +1169 * @return {fabric.Element} thisArg +1170 * @chainable +1171 */ +1172 clear: function () { +1173 this._objects.length = 0; +1174 this.clearContext(this.contextTop); +1175 this.clearContext(this.contextContainer); +1176 this.renderAll(); +1177 return this; +1178 }, +1179 +1180 /** +1181 * Renders both the top canvas and the secondary container canvas. +1182 * @method renderAll +1183 * @param allOnTop {Boolean} optional Whether we want to force all images to be rendered on the top canvas +1184 * @return {fabric.Element} instance +1185 * @chainable +1186 */ +1187 renderAll: function (allOnTop) { +1188 +1189 // this sucks, but we can't use `getWidth`/`getHeight` here for perf. reasons +1190 var w = this._config.width, +1191 h = this._config.height; +1192 +1193 // when allOnTop is true all images are rendered in the top canvas. +1194 // This is used for actions like toDataUrl that needs to take some actions on a unique canvas. +1195 var containerCanvas = allOnTop ? this.contextTop : this.contextContainer; +1196 +1197 this.clearContext(this.contextTop); +1198 +1199 if (!allOnTop) { +1200 this.clearContext(containerCanvas); +1201 } +1202 containerCanvas.fillStyle = this.backgroundColor; +1203 containerCanvas.fillRect(0, 0, w, h); +1204 +1205 var length = this._objects.length, +1206 activeGroup = this.getActiveGroup(); +1207 +1208 var startTime = new Date(); +1209 +1210 if (length) { +1211 for (var i = 0; i < length; ++i) { +1212 if (!activeGroup || +1213 (activeGroup && +1214 !activeGroup.contains(this._objects[i]))) { +1215 this._draw(containerCanvas, this._objects[i]); +1216 } +1217 } +1218 } +1219 +1220 // delegate rendering to group selection (if one exists) +1221 if (activeGroup) { +1222 this._draw(this.contextTop, activeGroup); +1223 } 1224 -1225 if (this.afterRender) { -1226 this.afterRender(); +1225 if (this.overlayImage) { +1226 this.contextTop.drawImage(this.overlayImage, 0, 0); 1227 } 1228 -1229 return this; -1230 }, -1231 -1232 /** -1233 * Method to render only the top canvas. -1234 * Also used to render the group selection box. -1235 * @method renderTop -1236 * @return {fabric.Element} thisArg -1237 * @chainable -1238 */ -1239 renderTop: function () { -1240 -1241 this.clearContext(this.contextTop); -1242 if (this.overlayImage) { -1243 this.contextTop.drawImage(this.overlayImage, 0, 0); -1244 } -1245 -1246 // we render the top context - last object -1247 if (this._groupSelector) { -1248 this._drawSelection(); -1249 } -1250 -1251 // delegate rendering to group selection if one exists -1252 // used for drawing selection borders/corners -1253 var activeGroup = this.getActiveGroup(); -1254 if (activeGroup) { -1255 activeGroup.render(this.contextTop); +1229 var elapsedTime = new Date() - startTime; +1230 this.onFpsUpdate(~~(1000 / elapsedTime)); +1231 +1232 if (this.afterRender) { +1233 this.afterRender(); +1234 } +1235 +1236 return this; +1237 }, +1238 +1239 /** +1240 * Method to render only the top canvas. +1241 * Also used to render the group selection box. +1242 * @method renderTop +1243 * @return {fabric.Element} thisArg +1244 * @chainable +1245 */ +1246 renderTop: function () { +1247 +1248 this.clearContext(this.contextTop); +1249 if (this.overlayImage) { +1250 this.contextTop.drawImage(this.overlayImage, 0, 0); +1251 } +1252 +1253 // we render the top context - last object +1254 if (this._groupSelector) { +1255 this._drawSelection(); 1256 } 1257 -1258 if (this.afterRender) { -1259 this.afterRender(); -1260 } -1261 -1262 return this; -1263 }, -1264 -1265 /** -1266 * Applies one implementation of 'point inside polygon' algorithm -1267 * @method containsPoint -1268 * @param e { Event } event object -1269 * @param target { fabric.Object } object to test against -1270 * @return {Boolean} true if point contains within area of given object -1271 */ -1272 containsPoint: function (e, target) { -1273 var pointer = this.getPointer(e), -1274 xy = this._normalizePointer(target, pointer), -1275 x = xy.x, -1276 y = xy.y; -1277 -1278 // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html -1279 // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html -1280 -1281 // we iterate through each object. If target found, return it. -1282 var iLines = target._getImageLines(target.oCoords), -1283 xpoints = target._findCrossPoints(x, y, iLines); +1258 // delegate rendering to group selection if one exists +1259 // used for drawing selection borders/corners +1260 var activeGroup = this.getActiveGroup(); +1261 if (activeGroup) { +1262 activeGroup.render(this.contextTop); +1263 } +1264 +1265 if (this.afterRender) { +1266 this.afterRender(); +1267 } +1268 +1269 return this; +1270 }, +1271 +1272 /** +1273 * Applies one implementation of 'point inside polygon' algorithm +1274 * @method containsPoint +1275 * @param e { Event } event object +1276 * @param target { fabric.Object } object to test against +1277 * @return {Boolean} true if point contains within area of given object +1278 */ +1279 containsPoint: function (e, target) { +1280 var pointer = this.getPointer(e), +1281 xy = this._normalizePointer(target, pointer), +1282 x = xy.x, +1283 y = xy.y; 1284 -1285 // if xcount is odd then we clicked inside the object -1286 // For the specific case of square images xcount === 1 in all true cases -1287 if ((xpoints && xpoints % 2 === 1) || target._findTargetCorner(e, this._offset)) { -1288 return true; -1289 } -1290 return false; -1291 }, -1292 -1293 /** -1294 * @private -1295 * @method _normalizePointer -1296 */ -1297 _normalizePointer: function (object, pointer) { -1298 -1299 var activeGroup = this.getActiveGroup(), -1300 x = pointer.x, -1301 y = pointer.y; -1302 -1303 var isObjectInGroup = ( -1304 activeGroup && -1305 object.type !== 'group' && -1306 activeGroup.contains(object) -1307 ); -1308 -1309 if (isObjectInGroup) { -1310 x -= activeGroup.left; -1311 y -= activeGroup.top; -1312 } -1313 return { x: x, y: y }; -1314 }, -1315 -1316 /** -1317 * Method that determines what object we are clicking on -1318 * @method findTarget -1319 * @param {Event} e mouse event -1320 * @param {Boolean} skipGroup when true, group is skipped and only objects are traversed through -1321 */ -1322 findTarget: function (e, skipGroup) { -1323 var target, -1324 pointer = this.getPointer(e); -1325 -1326 // first check current group (if one exists) -1327 var activeGroup = this.getActiveGroup(); -1328 -1329 if (activeGroup && !skipGroup && this.containsPoint(e, activeGroup)) { -1330 target = activeGroup; -1331 return target; -1332 } -1333 -1334 // then check all of the objects on canvas -1335 for (var i = this._objects.length; i--; ) { -1336 if (this.containsPoint(e, this._objects[i])) { -1337 target = this._objects[i]; -1338 this.relatedTarget = target; -1339 break; -1340 } -1341 } -1342 return target; -1343 }, -1344 -1345 /** -1346 * Exports canvas element to a dataurl image. -1347 * @method toDataURL -1348 * @param {String} format the format of the output image. Either "jpeg" or "png". -1349 * @return {String} -1350 */ -1351 toDataURL: function (format) { -1352 var data; -1353 if (!format) { -1354 format = 'png'; -1355 } -1356 if (format === 'jpeg' || format === 'png') { -1357 this.renderAll(true); -1358 data = this.getElement().toDataURL('image/' + format); -1359 this.renderAll(); -1360 } -1361 return data; -1362 }, -1363 -1364 /** -1365 * Exports canvas element to a dataurl image (allowing to change image size via multiplier). -1366 * @method toDataURLWithMultiplier -1367 * @param {String} format (png|jpeg) -1368 * @param {Number} multiplier -1369 * @return {String} -1370 */ -1371 toDataURLWithMultiplier: function (format, multiplier) { -1372 -1373 var origWidth = this.getWidth(), -1374 origHeight = this.getHeight(), -1375 scaledWidth = origWidth * multiplier, -1376 scaledHeight = origHeight * multiplier, -1377 activeObject = this.getActiveObject(); -1378 -1379 this.setWidth(scaledWidth).setHeight(scaledHeight); -1380 this.contextTop.scale(multiplier, multiplier); -1381 -1382 if (activeObject) { -1383 this.deactivateAll().renderAll(); -1384 } -1385 var dataURL = this.toDataURL(format); -1386 -1387 this.contextTop.scale( 1 / multiplier, 1 / multiplier); -1388 this.setWidth(origWidth).setHeight(origHeight); -1389 -1390 if (activeObject) { -1391 this.setActiveObject(activeObject); -1392 } -1393 this.renderAll(); -1394 -1395 return dataURL; -1396 }, -1397 -1398 /** -1399 * Returns pointer coordinates relative to canvas. -1400 * @method getPointer -1401 * @return {Object} object with "x" and "y" number values -1402 */ -1403 getPointer: function (e) { -1404 var pointer = getPointer(e); -1405 return { -1406 x: pointer.x - this._offset.left, -1407 y: pointer.y - this._offset.top -1408 }; -1409 }, -1410 -1411 /** -1412 * Returns coordinates of a center of canvas. -1413 * Returned value is an object with top and left properties -1414 * @method getCenter -1415 * @return {Object} object with "top" and "left" number values -1416 */ -1417 getCenter: function () { -1418 return { -1419 top: this.getHeight() / 2, -1420 left: this.getWidth() / 2 -1421 }; -1422 }, -1423 -1424 /** -1425 * Centers object horizontally. -1426 * @method centerObjectH -1427 * @param {fabric.Object} object Object to center -1428 * @return {fabric.Element} thisArg -1429 */ -1430 centerObjectH: function (object) { -1431 object.set('left', this.getCenter().left); -1432 this.renderAll(); -1433 return this; -1434 }, -1435 -1436 /** -1437 * Centers object horizontally with animation. -1438 * @method fxCenterObjectH -1439 * @param {fabric.Object} object Object to center -1440 * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties -1441 * @return {fabric.Element} thisArg -1442 * @chainable -1443 */ -1444 fxCenterObjectH: function (object, callbacks) { -1445 callbacks = callbacks || { }; -1446 -1447 var empty = function() { }, -1448 onComplete = callbacks.onComplete || empty, -1449 onChange = callbacks.onChange || empty, -1450 _this = this; -1451 -1452 fabric.util.animate({ -1453 startValue: object.get('left'), -1454 endValue: this.getCenter().left, -1455 duration: this.FX_DURATION, -1456 onChange: function(value) { -1457 object.set('left', value); -1458 _this.renderAll(); -1459 onChange(); -1460 }, -1461 onComplete: function() { -1462 object.setCoords(); -1463 onComplete(); -1464 } -1465 }); -1466 -1467 return this; -1468 }, -1469 -1470 /** -1471 * Centers object vertically. -1472 * @method centerObjectH -1473 * @param {fabric.Object} object Object to center -1474 * @return {fabric.Element} thisArg -1475 * @chainable -1476 */ -1477 centerObjectV: function (object) { -1478 object.set('top', this.getCenter().top); -1479 this.renderAll(); -1480 return this; -1481 }, -1482 -1483 /** -1484 * Centers object vertically with animation. -1485 * @method fxCenterObjectV -1486 * @param {fabric.Object} object Object to center -1487 * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties -1488 * @return {fabric.Element} thisArg -1489 * @chainable -1490 */ -1491 fxCenterObjectV: function (object, callbacks) { -1492 callbacks = callbacks || { }; -1493 -1494 var empty = function() { }, -1495 onComplete = callbacks.onComplete || empty, -1496 onChange = callbacks.onChange || empty, -1497 _this = this; -1498 -1499 fabric.util.animate({ -1500 startValue: object.get('top'), -1501 endValue: this.getCenter().top, -1502 duration: this.FX_DURATION, -1503 onChange: function(value) { -1504 object.set('top', value); -1505 _this.renderAll(); -1506 onChange(); -1507 }, -1508 onComplete: function() { -1509 object.setCoords(); -1510 onComplete(); -1511 } -1512 }); -1513 -1514 return this; -1515 }, -1516 -1517 /** -1518 * Straightens object, then rerenders canvas -1519 * @method straightenObject -1520 * @param {fabric.Object} object Object to straighten -1521 * @return {fabric.Element} thisArg -1522 * @chainable -1523 */ -1524 straightenObject: function (object) { -1525 object.straighten(); -1526 this.renderAll(); -1527 return this; -1528 }, -1529 -1530 /** -1531 * Same as `fabric.Element#straightenObject`, but animated -1532 * @method fxStraightenObject -1533 * @param {fabric.Object} object Object to straighten -1534 * @return {fabric.Element} thisArg -1535 * @chainable -1536 */ -1537 fxStraightenObject: function (object) { -1538 object.fxStraighten({ -1539 onChange: this.renderAll.bind(this) -1540 }); -1541 return this; -1542 }, -1543 -1544 /** -1545 * Returs dataless JSON representation of canvas -1546 * @method toDatalessJSON -1547 * @return {String} json string -1548 */ -1549 toDatalessJSON: function () { -1550 return this.toDatalessObject(); -1551 }, -1552 -1553 /** -1554 * Returns object representation of canvas -1555 * @method toObject -1556 * @return {Object} -1557 */ -1558 toObject: function () { -1559 return this._toObjectMethod('toObject'); -1560 }, -1561 -1562 /** -1563 * Returns dataless object representation of canvas -1564 * @method toDatalessObject -1565 * @return {Object} -1566 */ -1567 toDatalessObject: function () { -1568 return this._toObjectMethod('toDatalessObject'); -1569 }, -1570 -1571 /** -1572 * @private -1573 * @method _toObjectMethod -1574 */ -1575 _toObjectMethod: function (methodName) { -1576 return { -1577 objects: this._objects.map(function (instance){ -1578 // TODO (kangax): figure out how to clean this up -1579 if (!this.includeDefaultValues) { -1580 var originalValue = instance.includeDefaultValues; -1581 instance.includeDefaultValues = false; -1582 } -1583 var object = instance[methodName](); -1584 if (!this.includeDefaultValues) { -1585 instance.includeDefaultValues = originalValue; -1586 } -1587 return object; -1588 }, this), -1589 background: this.backgroundColor -1590 } -1591 }, -1592 -1593 /** -1594 * Returns true if canvas contains no objects -1595 * @method isEmpty -1596 * @return {Boolean} true if canvas is empty -1597 */ -1598 isEmpty: function () { -1599 return this._objects.length === 0; -1600 }, -1601 -1602 /** -1603 * Populates canvas with data from the specified JSON -1604 * JSON format must conform to the one of `fabric.Element#toJSON` -1605 * @method loadFromJSON -1606 * @param {String} json JSON string -1607 * @param {Function} callback Callback, invoked when json is parsed -1608 * and corresponding objects (e.g: fabric.Image) -1609 * are initialized -1610 * @return {fabric.Element} instance -1611 * @chainable -1612 */ -1613 loadFromJSON: function (json, callback) { -1614 if (!json) return; -1615 -1616 var serialized = JSON.parse(json); -1617 if (!serialized || (serialized && !serialized.objects)) return; -1618 -1619 this.clear(); -1620 var _this = this; -1621 this._enlivenObjects(serialized.objects, function () { -1622 _this.backgroundColor = serialized.background; -1623 if (callback) { -1624 callback(); -1625 } -1626 }); -1627 -1628 return this; -1629 }, -1630 -1631 /** -1632 * @method _enlivenObjects -1633 * @param {Array} objects -1634 * @param {Function} callback -1635 */ -1636 _enlivenObjects: function (objects, callback) { -1637 var numLoadedImages = 0, -1638 // get length of all images -1639 numTotalImages = objects.filter(function (o) { -1640 return o.type === 'image'; -1641 }).length; -1642 -1643 var _this = this; -1644 -1645 objects.forEach(function (o, index) { -1646 if (!o.type) { -1647 return; -1648 } -1649 switch (o.type) { -1650 case 'image': -1651 case 'font': -1652 fabric[capitalize(o.type)].fromObject(o, function (o) { -1653 _this.insertAt(o, index); -1654 if (++numLoadedImages === numTotalImages) { -1655 if (callback) { -1656 callback(); -1657 } -1658 } -1659 }); -1660 break; -1661 default: -1662 var klass = fabric[camelize(capitalize(o.type))]; -1663 if (klass && klass.fromObject) { -1664 _this.insertAt(klass.fromObject(o), index); -1665 } -1666 break; -1667 } -1668 }); -1669 -1670 if (numTotalImages === 0 && callback) { -1671 callback(); -1672 } -1673 }, -1674 -1675 /** -1676 * Populates canvas with data from the specified dataless JSON -1677 * JSON format must conform to the one of `fabric.Element#toDatalessJSON` -1678 * @method loadFromDatalessJSON -1679 * @param {String} json JSON string -1680 * @param {Function} callback Callback, invoked when json is parsed -1681 * and corresponding objects (e.g: fabric.Image) -1682 * are initialized -1683 * @return {fabric.Element} instance -1684 * @chainable -1685 */ -1686 loadFromDatalessJSON: function (json, callback) { -1687 -1688 if (!json) { -1689 return; -1690 } -1691 -1692 // serialize if it wasn't already -1693 var serialized = (typeof json === 'string') -1694 ? JSON.parse(json) -1695 : json; -1696 -1697 if (!serialized || (serialized && !serialized.objects)) return; -1698 -1699 this.clear(); -1700 -1701 // TODO: test this -1702 this.backgroundColor = serialized.background; -1703 this._enlivenDatalessObjects(serialized.objects, callback); -1704 }, -1705 -1706 /** -1707 * @method _enlivenDatalessObjects -1708 * @param {Array} objects -1709 * @param {Function} callback -1710 */ -1711 _enlivenDatalessObjects: function (objects, callback) { -1712 -1713 /** @ignore */ -1714 function onObjectLoaded(object, index) { -1715 _this.insertAt(object, index); -1716 object.setCoords(); -1717 if (++numLoadedObjects === numTotalObjects) { -1718 callback && callback(); -1719 } -1720 } -1721 -1722 var _this = this, -1723 numLoadedObjects = 0, -1724 numTotalObjects = objects.length; -1725 -1726 if (numTotalObjects === 0 && callback) { -1727 callback(); -1728 } -1729 -1730 try { -1731 objects.forEach(function (obj, index) { -1732 -1733 var pathProp = obj.paths ? 'paths' : 'path'; -1734 var path = obj[pathProp]; -1735 -1736 delete obj[pathProp]; -1737 -1738 if (typeof path !== 'string') { -1739 switch (obj.type) { -1740 case 'image': -1741 case 'text': -1742 fabric[capitalize(obj.type)].fromObject(obj, function (o) { -1743 onObjectLoaded(o, index); -1744 }); -1745 break; -1746 default: -1747 var klass = fabric[camelize(capitalize(obj.type))]; -1748 if (klass && klass.fromObject) { -1749 onObjectLoaded(klass.fromObject(obj), index); -1750 } -1751 break; -1752 } -1753 } -1754 else { -1755 if (obj.type === 'image') { -1756 _this.loadImageFromURL(path, function (image) { -1757 image.setSourcePath(path); -1758 -1759 extend(image, obj); -1760 image.setAngle(obj.angle); -1761 -1762 onObjectLoaded(image, index); -1763 }); -1764 } -1765 else if (obj.type === 'text') { -1766 -1767 obj.path = path; -1768 var object = fabric.Text.fromObject(obj); -1769 var onscriptload = function () { -1770 // TODO (kangax): find out why Opera refuses to work without this timeout -1771 if (Object.prototype.toString.call(window.opera) === '[object Opera]') { -1772 setTimeout(function () { -1773 onObjectLoaded(object, index); -1774 }, 500); -1775 } -1776 else { -1777 onObjectLoaded(object, index); -1778 } -1779 } -1780 -1781 fabric.util.getScript(path, onscriptload); -1782 } -1783 else { -1784 _this.loadSVGFromURL(path, function (elements, options) { -1785 if (elements.length > 1) { -1786 var object = new fabric.PathGroup(elements, obj); -1787 } -1788 else { -1789 var object = elements[0]; -1790 } -1791 object.setSourcePath(path); -1792 -1793 // copy parameters from serialied json to object (left, top, scaleX, scaleY, etc.) -1794 // skip this step if an object is a PathGroup, since we already passed it options object before -1795 if (!(object instanceof fabric.PathGroup)) { -1796 extend(object, obj); -1797 if (typeof obj.angle !== 'undefined') { -1798 object.setAngle(obj.angle); -1799 } -1800 } -1801 -1802 onObjectLoaded(object, index); -1803 }); -1804 } -1805 } -1806 }, this); -1807 } -1808 catch(e) { -1809 fabric.log(e.message); -1810 } -1811 }, -1812 -1813 /** -1814 * Loads an image from URL -1815 * @function -1816 * @method loadImageFromURL -1817 * @param url {String} url of image to load -1818 * @param callback {Function} calback, invoked when image is loaded -1819 */ -1820 loadImageFromURL: (function () { -1821 var imgCache = { }; -1822 -1823 return function (url, callback) { -1824 // check cache first -1825 -1826 var _this = this; -1827 -1828 function checkIfLoaded() { -1829 var imgEl = document.getElementById(imgCache[url]); -1830 if (imgEl.width && imgEl.height) { -1831 callback(new fabric.Image(imgEl)); -1832 } -1833 else { -1834 setTimeout(checkIfLoaded, 50); -1835 } -1836 } -1837 -1838 // get by id from cache -1839 if (imgCache[url]) { -1840 // id can be cached but image might still not be loaded, so we poll here -1841 checkIfLoaded(); -1842 } -1843 // else append a new image element -1844 else { -1845 var imgEl = new Image(); -1846 -1847 /** @ignore */ -1848 imgEl.onload = function () { -1849 imgEl.onload = null; -1850 -1851 _this._resizeImageToFit(imgEl); -1852 -1853 var oImg = new fabric.Image(imgEl); -1854 callback(oImg); -1855 }; -1856 -1857 imgEl.className = 'canvas-img-clone'; -1858 imgEl.src = url; -1859 -1860 if (this.shouldCacheImages) { -1861 imgCache[url] = Element.identify(imgEl); -1862 } -1863 document.body.appendChild(imgEl); -1864 } -1865 } -1866 })(), -1867 -1868 /** -1869 * Takes url corresponding to an SVG document, and parses it to a set of objects -1870 * @method loadSVGFromURL -1871 * @param {String} url -1872 * @param {Function} callback -1873 */ -1874 loadSVGFromURL: function (url, callback) { -1875 -1876 var _this = this; -1877 -1878 url = url.replace(/^\n\s*/, '').replace(/\?.*$/, '').trim(); -1879 -1880 this.cache.has(url, function (hasUrl) { -1881 if (hasUrl) { -1882 _this.cache.get(url, function (value) { -1883 var enlivedRecord = _this._enlivenCachedObject(value); -1884 callback(enlivedRecord.objects, enlivedRecord.options); -1885 }); -1886 } -1887 else { -1888 // TODO (kangax): replace Prototype's API with fabric's util one -1889 new Ajax.Request(url, { -1890 method: 'get', -1891 onComplete: onComplete, -1892 onFailure: onFailure +1285 // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html +1286 // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html +1287 +1288 // we iterate through each object. If target found, return it. +1289 var iLines = target._getImageLines(target.oCoords), +1290 xpoints = target._findCrossPoints(x, y, iLines); +1291 +1292 // if xcount is odd then we clicked inside the object +1293 // For the specific case of square images xcount === 1 in all true cases +1294 if ((xpoints && xpoints % 2 === 1) || target._findTargetCorner(e, this._offset)) { +1295 return true; +1296 } +1297 return false; +1298 }, +1299 +1300 /** +1301 * @private +1302 * @method _normalizePointer +1303 */ +1304 _normalizePointer: function (object, pointer) { +1305 +1306 var activeGroup = this.getActiveGroup(), +1307 x = pointer.x, +1308 y = pointer.y; +1309 +1310 var isObjectInGroup = ( +1311 activeGroup && +1312 object.type !== 'group' && +1313 activeGroup.contains(object) +1314 ); +1315 +1316 if (isObjectInGroup) { +1317 x -= activeGroup.left; +1318 y -= activeGroup.top; +1319 } +1320 return { x: x, y: y }; +1321 }, +1322 +1323 /** +1324 * Method that determines what object we are clicking on +1325 * @method findTarget +1326 * @param {Event} e mouse event +1327 * @param {Boolean} skipGroup when true, group is skipped and only objects are traversed through +1328 */ +1329 findTarget: function (e, skipGroup) { +1330 var target, +1331 pointer = this.getPointer(e); +1332 +1333 // first check current group (if one exists) +1334 var activeGroup = this.getActiveGroup(); +1335 +1336 if (activeGroup && !skipGroup && this.containsPoint(e, activeGroup)) { +1337 target = activeGroup; +1338 return target; +1339 } +1340 +1341 // then check all of the objects on canvas +1342 for (var i = this._objects.length; i--; ) { +1343 if (this.containsPoint(e, this._objects[i])) { +1344 target = this._objects[i]; +1345 this.relatedTarget = target; +1346 break; +1347 } +1348 } +1349 return target; +1350 }, +1351 +1352 /** +1353 * Exports canvas element to a dataurl image. +1354 * @method toDataURL +1355 * @param {String} format the format of the output image. Either "jpeg" or "png". +1356 * @return {String} +1357 */ +1358 toDataURL: function (format) { +1359 var data; +1360 if (!format) { +1361 format = 'png'; +1362 } +1363 if (format === 'jpeg' || format === 'png') { +1364 this.renderAll(true); +1365 data = this.getElement().toDataURL('image/' + format); +1366 this.renderAll(); +1367 } +1368 return data; +1369 }, +1370 +1371 /** +1372 * Exports canvas element to a dataurl image (allowing to change image size via multiplier). +1373 * @method toDataURLWithMultiplier +1374 * @param {String} format (png|jpeg) +1375 * @param {Number} multiplier +1376 * @return {String} +1377 */ +1378 toDataURLWithMultiplier: function (format, multiplier) { +1379 +1380 var origWidth = this.getWidth(), +1381 origHeight = this.getHeight(), +1382 scaledWidth = origWidth * multiplier, +1383 scaledHeight = origHeight * multiplier, +1384 activeObject = this.getActiveObject(); +1385 +1386 this.setWidth(scaledWidth).setHeight(scaledHeight); +1387 this.contextTop.scale(multiplier, multiplier); +1388 +1389 if (activeObject) { +1390 this.deactivateAll().renderAll(); +1391 } +1392 var dataURL = this.toDataURL(format); +1393 +1394 this.contextTop.scale( 1 / multiplier, 1 / multiplier); +1395 this.setWidth(origWidth).setHeight(origHeight); +1396 +1397 if (activeObject) { +1398 this.setActiveObject(activeObject); +1399 } +1400 this.renderAll(); +1401 +1402 return dataURL; +1403 }, +1404 +1405 /** +1406 * Returns pointer coordinates relative to canvas. +1407 * @method getPointer +1408 * @return {Object} object with "x" and "y" number values +1409 */ +1410 getPointer: function (e) { +1411 var pointer = getPointer(e); +1412 return { +1413 x: pointer.x - this._offset.left, +1414 y: pointer.y - this._offset.top +1415 }; +1416 }, +1417 +1418 /** +1419 * Returns coordinates of a center of canvas. +1420 * Returned value is an object with top and left properties +1421 * @method getCenter +1422 * @return {Object} object with "top" and "left" number values +1423 */ +1424 getCenter: function () { +1425 return { +1426 top: this.getHeight() / 2, +1427 left: this.getWidth() / 2 +1428 }; +1429 }, +1430 +1431 /** +1432 * Centers object horizontally. +1433 * @method centerObjectH +1434 * @param {fabric.Object} object Object to center +1435 * @return {fabric.Element} thisArg +1436 */ +1437 centerObjectH: function (object) { +1438 object.set('left', this.getCenter().left); +1439 this.renderAll(); +1440 return this; +1441 }, +1442 +1443 /** +1444 * Centers object horizontally with animation. +1445 * @method fxCenterObjectH +1446 * @param {fabric.Object} object Object to center +1447 * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties +1448 * @return {fabric.Element} thisArg +1449 * @chainable +1450 */ +1451 fxCenterObjectH: function (object, callbacks) { +1452 callbacks = callbacks || { }; +1453 +1454 var empty = function() { }, +1455 onComplete = callbacks.onComplete || empty, +1456 onChange = callbacks.onChange || empty, +1457 _this = this; +1458 +1459 fabric.util.animate({ +1460 startValue: object.get('left'), +1461 endValue: this.getCenter().left, +1462 duration: this.FX_DURATION, +1463 onChange: function(value) { +1464 object.set('left', value); +1465 _this.renderAll(); +1466 onChange(); +1467 }, +1468 onComplete: function() { +1469 object.setCoords(); +1470 onComplete(); +1471 } +1472 }); +1473 +1474 return this; +1475 }, +1476 +1477 /** +1478 * Centers object vertically. +1479 * @method centerObjectH +1480 * @param {fabric.Object} object Object to center +1481 * @return {fabric.Element} thisArg +1482 * @chainable +1483 */ +1484 centerObjectV: function (object) { +1485 object.set('top', this.getCenter().top); +1486 this.renderAll(); +1487 return this; +1488 }, +1489 +1490 /** +1491 * Centers object vertically with animation. +1492 * @method fxCenterObjectV +1493 * @param {fabric.Object} object Object to center +1494 * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties +1495 * @return {fabric.Element} thisArg +1496 * @chainable +1497 */ +1498 fxCenterObjectV: function (object, callbacks) { +1499 callbacks = callbacks || { }; +1500 +1501 var empty = function() { }, +1502 onComplete = callbacks.onComplete || empty, +1503 onChange = callbacks.onChange || empty, +1504 _this = this; +1505 +1506 fabric.util.animate({ +1507 startValue: object.get('top'), +1508 endValue: this.getCenter().top, +1509 duration: this.FX_DURATION, +1510 onChange: function(value) { +1511 object.set('top', value); +1512 _this.renderAll(); +1513 onChange(); +1514 }, +1515 onComplete: function() { +1516 object.setCoords(); +1517 onComplete(); +1518 } +1519 }); +1520 +1521 return this; +1522 }, +1523 +1524 /** +1525 * Straightens object, then rerenders canvas +1526 * @method straightenObject +1527 * @param {fabric.Object} object Object to straighten +1528 * @return {fabric.Element} thisArg +1529 * @chainable +1530 */ +1531 straightenObject: function (object) { +1532 object.straighten(); +1533 this.renderAll(); +1534 return this; +1535 }, +1536 +1537 /** +1538 * Same as `fabric.Element#straightenObject`, but animated +1539 * @method fxStraightenObject +1540 * @param {fabric.Object} object Object to straighten +1541 * @return {fabric.Element} thisArg +1542 * @chainable +1543 */ +1544 fxStraightenObject: function (object) { +1545 object.fxStraighten({ +1546 onChange: this.renderAll.bind(this) +1547 }); +1548 return this; +1549 }, +1550 +1551 /** +1552 * Returs dataless JSON representation of canvas +1553 * @method toDatalessJSON +1554 * @return {String} json string +1555 */ +1556 toDatalessJSON: function () { +1557 return this.toDatalessObject(); +1558 }, +1559 +1560 /** +1561 * Returns object representation of canvas +1562 * @method toObject +1563 * @return {Object} +1564 */ +1565 toObject: function () { +1566 return this._toObjectMethod('toObject'); +1567 }, +1568 +1569 /** +1570 * Returns dataless object representation of canvas +1571 * @method toDatalessObject +1572 * @return {Object} +1573 */ +1574 toDatalessObject: function () { +1575 return this._toObjectMethod('toDatalessObject'); +1576 }, +1577 +1578 /** +1579 * @private +1580 * @method _toObjectMethod +1581 */ +1582 _toObjectMethod: function (methodName) { +1583 return { +1584 objects: this._objects.map(function (instance){ +1585 // TODO (kangax): figure out how to clean this up +1586 if (!this.includeDefaultValues) { +1587 var originalValue = instance.includeDefaultValues; +1588 instance.includeDefaultValues = false; +1589 } +1590 var object = instance[methodName](); +1591 if (!this.includeDefaultValues) { +1592 instance.includeDefaultValues = originalValue; +1593 } +1594 return object; +1595 }, this), +1596 background: this.backgroundColor +1597 } +1598 }, +1599 +1600 /** +1601 * Returns true if canvas contains no objects +1602 * @method isEmpty +1603 * @return {Boolean} true if canvas is empty +1604 */ +1605 isEmpty: function () { +1606 return this._objects.length === 0; +1607 }, +1608 +1609 /** +1610 * Populates canvas with data from the specified JSON +1611 * JSON format must conform to the one of `fabric.Element#toJSON` +1612 * @method loadFromJSON +1613 * @param {String} json JSON string +1614 * @param {Function} callback Callback, invoked when json is parsed +1615 * and corresponding objects (e.g: fabric.Image) +1616 * are initialized +1617 * @return {fabric.Element} instance +1618 * @chainable +1619 */ +1620 loadFromJSON: function (json, callback) { +1621 if (!json) return; +1622 +1623 var serialized = JSON.parse(json); +1624 if (!serialized || (serialized && !serialized.objects)) return; +1625 +1626 this.clear(); +1627 var _this = this; +1628 this._enlivenObjects(serialized.objects, function () { +1629 _this.backgroundColor = serialized.background; +1630 if (callback) { +1631 callback(); +1632 } +1633 }); +1634 +1635 return this; +1636 }, +1637 +1638 /** +1639 * @method _enlivenObjects +1640 * @param {Array} objects +1641 * @param {Function} callback +1642 */ +1643 _enlivenObjects: function (objects, callback) { +1644 var numLoadedImages = 0, +1645 // get length of all images +1646 numTotalImages = objects.filter(function (o) { +1647 return o.type === 'image'; +1648 }).length; +1649 +1650 var _this = this; +1651 +1652 objects.forEach(function (o, index) { +1653 if (!o.type) { +1654 return; +1655 } +1656 switch (o.type) { +1657 case 'image': +1658 case 'font': +1659 fabric[capitalize(o.type)].fromObject(o, function (o) { +1660 _this.insertAt(o, index); +1661 if (++numLoadedImages === numTotalImages) { +1662 if (callback) { +1663 callback(); +1664 } +1665 } +1666 }); +1667 break; +1668 default: +1669 var klass = fabric[camelize(capitalize(o.type))]; +1670 if (klass && klass.fromObject) { +1671 _this.insertAt(klass.fromObject(o), index); +1672 } +1673 break; +1674 } +1675 }); +1676 +1677 if (numTotalImages === 0 && callback) { +1678 callback(); +1679 } +1680 }, +1681 +1682 /** +1683 * Populates canvas with data from the specified dataless JSON +1684 * JSON format must conform to the one of `fabric.Element#toDatalessJSON` +1685 * @method loadFromDatalessJSON +1686 * @param {String} json JSON string +1687 * @param {Function} callback Callback, invoked when json is parsed +1688 * and corresponding objects (e.g: fabric.Image) +1689 * are initialized +1690 * @return {fabric.Element} instance +1691 * @chainable +1692 */ +1693 loadFromDatalessJSON: function (json, callback) { +1694 +1695 if (!json) { +1696 return; +1697 } +1698 +1699 // serialize if it wasn't already +1700 var serialized = (typeof json === 'string') +1701 ? JSON.parse(json) +1702 : json; +1703 +1704 if (!serialized || (serialized && !serialized.objects)) return; +1705 +1706 this.clear(); +1707 +1708 // TODO: test this +1709 this.backgroundColor = serialized.background; +1710 this._enlivenDatalessObjects(serialized.objects, callback); +1711 }, +1712 +1713 /** +1714 * @method _enlivenDatalessObjects +1715 * @param {Array} objects +1716 * @param {Function} callback +1717 */ +1718 _enlivenDatalessObjects: function (objects, callback) { +1719 +1720 /** @ignore */ +1721 function onObjectLoaded(object, index) { +1722 _this.insertAt(object, index); +1723 object.setCoords(); +1724 if (++numLoadedObjects === numTotalObjects) { +1725 callback && callback(); +1726 } +1727 } +1728 +1729 var _this = this, +1730 numLoadedObjects = 0, +1731 numTotalObjects = objects.length; +1732 +1733 if (numTotalObjects === 0 && callback) { +1734 callback(); +1735 } +1736 +1737 try { +1738 objects.forEach(function (obj, index) { +1739 +1740 var pathProp = obj.paths ? 'paths' : 'path'; +1741 var path = obj[pathProp]; +1742 +1743 delete obj[pathProp]; +1744 +1745 if (typeof path !== 'string') { +1746 switch (obj.type) { +1747 case 'image': +1748 case 'text': +1749 fabric[capitalize(obj.type)].fromObject(obj, function (o) { +1750 onObjectLoaded(o, index); +1751 }); +1752 break; +1753 default: +1754 var klass = fabric[camelize(capitalize(obj.type))]; +1755 if (klass && klass.fromObject) { +1756 onObjectLoaded(klass.fromObject(obj), index); +1757 } +1758 break; +1759 } +1760 } +1761 else { +1762 if (obj.type === 'image') { +1763 _this.loadImageFromURL(path, function (image) { +1764 image.setSourcePath(path); +1765 +1766 extend(image, obj); +1767 image.setAngle(obj.angle); +1768 +1769 onObjectLoaded(image, index); +1770 }); +1771 } +1772 else if (obj.type === 'text') { +1773 +1774 obj.path = path; +1775 var object = fabric.Text.fromObject(obj); +1776 var onscriptload = function () { +1777 // TODO (kangax): find out why Opera refuses to work without this timeout +1778 if (Object.prototype.toString.call(window.opera) === '[object Opera]') { +1779 setTimeout(function () { +1780 onObjectLoaded(object, index); +1781 }, 500); +1782 } +1783 else { +1784 onObjectLoaded(object, index); +1785 } +1786 } +1787 +1788 fabric.util.getScript(path, onscriptload); +1789 } +1790 else { +1791 _this.loadSVGFromURL(path, function (elements, options) { +1792 if (elements.length > 1) { +1793 var object = new fabric.PathGroup(elements, obj); +1794 } +1795 else { +1796 var object = elements[0]; +1797 } +1798 object.setSourcePath(path); +1799 +1800 // copy parameters from serialied json to object (left, top, scaleX, scaleY, etc.) +1801 // skip this step if an object is a PathGroup, since we already passed it options object before +1802 if (!(object instanceof fabric.PathGroup)) { +1803 extend(object, obj); +1804 if (typeof obj.angle !== 'undefined') { +1805 object.setAngle(obj.angle); +1806 } +1807 } +1808 +1809 onObjectLoaded(object, index); +1810 }); +1811 } +1812 } +1813 }, this); +1814 } +1815 catch(e) { +1816 fabric.log(e.message); +1817 } +1818 }, +1819 +1820 /** +1821 * Loads an image from URL, creates an instance of fabric.Image and passes it to a callback +1822 * @function +1823 * @method loadImageFromURL +1824 * @param url {String} url of image to load +1825 * @param callback {Function} calback, invoked when image is loaded +1826 */ +1827 loadImageFromURL: (function () { +1828 var imgCache = { }; +1829 +1830 return function (url, callback) { +1831 // check cache first +1832 +1833 var _this = this; +1834 +1835 function checkIfLoaded() { +1836 var imgEl = document.getElementById(imgCache[url]); +1837 if (imgEl.width && imgEl.height) { +1838 callback(new fabric.Image(imgEl)); +1839 } +1840 else { +1841 setTimeout(checkIfLoaded, 50); +1842 } +1843 } +1844 +1845 // get by id from cache +1846 if (imgCache[url]) { +1847 // id can be cached but image might still not be loaded, so we poll here +1848 checkIfLoaded(); +1849 } +1850 // else append a new image element +1851 else { +1852 var imgEl = new Image(); +1853 +1854 /** @ignore */ +1855 imgEl.onload = function () { +1856 imgEl.onload = null; +1857 +1858 _this._resizeImageToFit(imgEl); +1859 +1860 var oImg = new fabric.Image(imgEl); +1861 callback(oImg); +1862 }; +1863 +1864 imgEl.className = 'canvas-img-clone'; +1865 imgEl.src = url; +1866 +1867 if (this.shouldCacheImages) { +1868 // TODO (kangax): replace Element.identify w. fabric -based alternative +1869 imgCache[url] = Element.identify(imgEl); +1870 } +1871 document.body.appendChild(imgEl); +1872 } +1873 } +1874 })(), +1875 +1876 /** +1877 * Takes url corresponding to an SVG document, and parses it to a set of objects +1878 * @method loadSVGFromURL +1879 * @param {String} url +1880 * @param {Function} callback +1881 */ +1882 loadSVGFromURL: function (url, callback) { +1883 +1884 var _this = this; +1885 +1886 url = url.replace(/^\n\s*/, '').replace(/\?.*$/, '').trim(); +1887 +1888 this.cache.has(url, function (hasUrl) { +1889 if (hasUrl) { +1890 _this.cache.get(url, function (value) { +1891 var enlivedRecord = _this._enlivenCachedObject(value); +1892 callback(enlivedRecord.objects, enlivedRecord.options); 1893 }); 1894 } -1895 }); -1896 -1897 function onComplete(r) { -1898 -1899 var xml = r.responseXML; -1900 if (!xml) return; -1901 -1902 var doc = xml.documentElement; -1903 if (!doc) return; -1904 -1905 fabric.parseSVGDocument(doc, function (results, options) { -1906 _this.cache.set(url, { -1907 objects: results.invoke('toObject'), -1908 options: options -1909 }); -1910 callback(results, options); -1911 }); -1912 } -1913 -1914 function onFailure() { -1915 fabric.log('ERROR!'); -1916 } -1917 }, -1918 -1919 /** -1920 * @method _enlivenCachedObject -1921 */ -1922 _enlivenCachedObject: function (cachedObject) { -1923 -1924 var objects = cachedObject.objects, -1925 options = cachedObject.options; -1926 -1927 objects = objects.map(function (o) { -1928 return fabric[capitalize(o.type)].fromObject(o); -1929 }); -1930 -1931 return ({ objects: objects, options: options }); -1932 }, -1933 -1934 /** -1935 * Removes an object from canvas and returns it -1936 * @method remove -1937 * @param object {Object} Object to remove -1938 * @return {Object} removed object -1939 */ -1940 remove: function (object) { -1941 removeFromArray(this._objects, object); -1942 this.renderAll(); -1943 return object; -1944 }, -1945 -1946 /** -1947 * Same as `fabric.Element#remove` but animated -1948 * @method fxRemove -1949 * @param {fabric.Object} object Object to remove -1950 * @param {Function} callback Callback, invoked on effect completion -1951 * @return {fabric.Element} thisArg -1952 * @chainable -1953 */ -1954 fxRemove: function (object, callback) { -1955 var _this = this; -1956 object.fxRemove({ -1957 onChange: this.renderAll.bind(this), -1958 onComplete: function () { -1959 _this.remove(object); -1960 if (typeof callback === 'function') { -1961 callback(); -1962 } -1963 } -1964 }); -1965 return this; -1966 }, -1967 -1968 /** -1969 * Moves an object to the bottom of the stack of drawn objects -1970 * @method sendToBack -1971 * @param object {fabric.Object} Object to send to back -1972 * @return {fabric.Element} thisArg -1973 * @chainable -1974 */ -1975 sendToBack: function (object) { -1976 removeFromArray(this._objects, object); -1977 this._objects.unshift(object); -1978 return this.renderAll(); -1979 }, -1980 -1981 /** -1982 * Moves an object to the top of the stack of drawn objects -1983 * @method bringToFront -1984 * @param object {fabric.Object} Object to send -1985 * @return {fabric.Element} thisArg -1986 * @chainable -1987 */ -1988 bringToFront: function (object) { -1989 removeFromArray(this._objects, object); -1990 this._objects.push(object); -1991 return this.renderAll(); -1992 }, -1993 -1994 /** -1995 * Moves an object one level down in stack of drawn objects -1996 * @method sendBackwards -1997 * @param object {fabric.Object} Object to send -1998 * @return {fabric.Element} thisArg -1999 * @chainable -2000 */ -2001 sendBackwards: function (object) { -2002 var idx = this._objects.indexOf(object), -2003 nextIntersectingIdx = idx; -2004 -2005 // if object is not on the bottom of stack -2006 if (idx !== 0) { -2007 -2008 // traverse down the stack looking for the nearest intersecting object -2009 for (var i=idx-1; i>=0; --i) { -2010 if (object.intersectsWithObject(this._objects[i])) { -2011 nextIntersectingIdx = i; -2012 break; -2013 } -2014 } -2015 removeFromArray(this._objects, object); -2016 this._objects.splice(nextIntersectingIdx, 0, object); -2017 } -2018 return this.renderAll(); -2019 }, -2020 -2021 /** -2022 * Moves an object one level up in stack of drawn objects -2023 * @method sendForward -2024 * @param object {fabric.Object} Object to send -2025 * @return {fabric.Element} thisArg -2026 * @chainable -2027 */ -2028 bringForward: function (object) { -2029 var objects = this.getObjects(), -2030 idx = objects.indexOf(object), -2031 nextIntersectingIdx = idx; -2032 -2033 -2034 // if object is not on top of stack (last item in an array) -2035 if (idx !== objects.length-1) { -2036 -2037 // traverse up the stack looking for the nearest intersecting object -2038 for (var i = idx + 1, l = this._objects.length; i < l; ++i) { -2039 if (object.intersectsWithObject(objects[i])) { -2040 nextIntersectingIdx = i; -2041 break; -2042 } -2043 } -2044 removeFromArray(objects, object); -2045 objects.splice(nextIntersectingIdx, 0, object); -2046 } -2047 this.renderAll(); -2048 }, -2049 -2050 /** -2051 * Sets given object as active -2052 * @method setActiveObject -2053 * @param object {fabric.Object} Object to set as an active one -2054 * @return {fabric.Element} thisArg -2055 * @chainable -2056 */ -2057 setActiveObject: function (object) { -2058 if (this._activeObject) { -2059 this._activeObject.setActive(false); -2060 } -2061 this._activeObject = object; -2062 object.setActive(true); -2063 -2064 this.renderAll(); -2065 -2066 fireEvent('object:selected', { target: object }); -2067 return this; -2068 }, -2069 -2070 /** -2071 * Returns currently active object -2072 * @method getActiveObject -2073 * @return {fabric.Object} active object -2074 */ -2075 getActiveObject: function () { -2076 return this._activeObject; -2077 }, -2078 -2079 /** -2080 * Removes currently active object -2081 * @method removeActiveObject -2082 * @return {fabric.Element} thisArg -2083 * @chainable -2084 */ -2085 removeActiveObject: function () { -2086 if (this._activeObject) { -2087 this._activeObject.setActive(false); -2088 } -2089 this._activeObject = null; -2090 return this; -2091 }, -2092 -2093 /** -2094 * Sets active group to a speicified one -2095 * @method setActiveGroup -2096 * @param {fabric.Group} group Group to set as a current one -2097 * @return {fabric.Element} thisArg -2098 * @chainable -2099 */ -2100 setActiveGroup: function (group) { -2101 this._activeGroup = group; -2102 return this; -2103 }, -2104 -2105 /** -2106 * Returns currently active group -2107 * @method getActiveGroup -2108 * @return {fabric.Group} Current group -2109 */ -2110 getActiveGroup: function () { -2111 return this._activeGroup; -2112 }, -2113 -2114 /** -2115 * Removes currently active group -2116 * @method removeActiveGroup -2117 * @return {fabric.Element} thisArg -2118 */ -2119 removeActiveGroup: function () { -2120 var g = this.getActiveGroup(); -2121 if (g) { -2122 g.destroy(); -2123 } -2124 return this.setActiveGroup(null); -2125 }, -2126 -2127 /** -2128 * Returns object at specified index -2129 * @method item -2130 * @param {Number} index -2131 * @return {fabric.Object} -2132 */ -2133 item: function (index) { -2134 return this.getObjects()[index]; -2135 }, -2136 -2137 /** -2138 * Deactivates all objects by calling their setActive(false) -2139 * @method deactivateAll -2140 * @return {fabric.Element} thisArg -2141 */ -2142 deactivateAll: function () { -2143 var allObjects = this.getObjects(), -2144 i = 0, -2145 len = allObjects.length; -2146 for ( ; i < len; i++) { -2147 allObjects[i].setActive(false); -2148 } -2149 this.removeActiveGroup(); -2150 this.removeActiveObject(); -2151 return this; -2152 }, -2153 -2154 /** -2155 * Returns number representation of an instance complexity -2156 * @method complexity -2157 * @return {Number} complexity -2158 */ -2159 complexity: function () { -2160 return this.getObjects().reduce(function (memo, current) { -2161 memo += current.complexity ? current.complexity() : 0; -2162 return memo; -2163 }, 0); -2164 }, -2165 -2166 /** -2167 * Clears a canvas element and removes all event handlers. -2168 * @method dispose -2169 * @return {fabric.Element} thisArg -2170 * @chainable -2171 */ -2172 dispose: function () { -2173 this.clear(); -2174 removeListener(this.getElement(), 'mousedown', this._onMouseDown); -2175 removeListener(document, 'mouseup', this._onMouseUp); -2176 removeListener(document, 'mousemove', this._onMouseMove); -2177 removeListener(window, 'resize', this._onResize); -2178 return this; -2179 }, -2180 -2181 /** -2182 * Clones canvas instance -2183 * @method clone -2184 * @param {Object} [callback] Expects `onBeforeClone` and `onAfterClone` functions -2185 * @return {fabric.Element} Clone of this instance -2186 */ -2187 clone: function (callback) { -2188 var el = document.createElement('canvas'); -2189 -2190 el.width = this.getWidth(); -2191 el.height = this.getHeight(); -2192 -2193 // cache -2194 var clone = this.__clone || (this.__clone = new fabric.Element(el)); -2195 -2196 return clone.loadFromJSON(JSON.stringify(this.toJSON()), function () { -2197 if (callback) { -2198 callback(clone); -2199 } -2200 }); -2201 }, -2202 -2203 /** -2204 * @private -2205 * @method _toDataURL -2206 * @param {String} format -2207 * @param {Function} callback -2208 */ -2209 _toDataURL: function (format, callback) { -2210 this.clone(function (clone) { -2211 callback(clone.toDataURL(format)); -2212 }); -2213 }, -2214 -2215 /** -2216 * @private -2217 * @method _toDataURLWithMultiplier -2218 * @param {String} format -2219 * @param {Number} multiplier -2220 * @param {Function} callback -2221 */ -2222 _toDataURLWithMultiplier: function (format, multiplier, callback) { -2223 this.clone(function (clone) { -2224 callback(clone.toDataURLWithMultiplier(format, multiplier)); -2225 }); -2226 }, -2227 -2228 /** -2229 * @private -2230 * @method _resizeImageToFit -2231 * @param {HTMLImageElement} imgEl -2232 */ -2233 _resizeImageToFit: function (imgEl) { -2234 -2235 var imageWidth = imgEl.width || imgEl.offsetWidth, -2236 widthScaleFactor = this.getWidth() / imageWidth; -2237 -2238 // scale image down so that it has original dimensions when printed in large resolution -2239 if (imageWidth) { -2240 imgEl.width = imageWidth * widthScaleFactor; -2241 } -2242 }, -2243 -2244 /** -2245 * @property -2246 * @namespace -2247 */ -2248 cache: { -2249 -2250 /** -2251 * @method has -2252 * @param {String} name -2253 * @param {Function} callback -2254 */ -2255 has: function (name, callback) { -2256 callback(false); -2257 }, +1895 else { +1896 // TODO (kangax): replace Prototype's API with fabric's util one +1897 new Ajax.Request(url, { +1898 method: 'get', +1899 onComplete: onComplete, +1900 onFailure: onFailure +1901 }); +1902 } +1903 }); +1904 +1905 function onComplete(r) { +1906 +1907 var xml = r.responseXML; +1908 if (!xml) return; +1909 +1910 var doc = xml.documentElement; +1911 if (!doc) return; +1912 +1913 fabric.parseSVGDocument(doc, function (results, options) { +1914 _this.cache.set(url, { +1915 objects: results.invoke('toObject'), +1916 options: options +1917 }); +1918 callback(results, options); +1919 }); +1920 } +1921 +1922 function onFailure() { +1923 fabric.log('ERROR!'); +1924 } +1925 }, +1926 +1927 /** +1928 * @method _enlivenCachedObject +1929 */ +1930 _enlivenCachedObject: function (cachedObject) { +1931 +1932 var objects = cachedObject.objects, +1933 options = cachedObject.options; +1934 +1935 objects = objects.map(function (o) { +1936 return fabric[capitalize(o.type)].fromObject(o); +1937 }); +1938 +1939 return ({ objects: objects, options: options }); +1940 }, +1941 +1942 /** +1943 * Removes an object from canvas and returns it +1944 * @method remove +1945 * @param object {Object} Object to remove +1946 * @return {Object} removed object +1947 */ +1948 remove: function (object) { +1949 removeFromArray(this._objects, object); +1950 this.renderAll(); +1951 return object; +1952 }, +1953 +1954 /** +1955 * Same as `fabric.Element#remove` but animated +1956 * @method fxRemove +1957 * @param {fabric.Object} object Object to remove +1958 * @param {Function} callback Callback, invoked on effect completion +1959 * @return {fabric.Element} thisArg +1960 * @chainable +1961 */ +1962 fxRemove: function (object, callback) { +1963 var _this = this; +1964 object.fxRemove({ +1965 onChange: this.renderAll.bind(this), +1966 onComplete: function () { +1967 _this.remove(object); +1968 if (typeof callback === 'function') { +1969 callback(); +1970 } +1971 } +1972 }); +1973 return this; +1974 }, +1975 +1976 /** +1977 * Moves an object to the bottom of the stack of drawn objects +1978 * @method sendToBack +1979 * @param object {fabric.Object} Object to send to back +1980 * @return {fabric.Element} thisArg +1981 * @chainable +1982 */ +1983 sendToBack: function (object) { +1984 removeFromArray(this._objects, object); +1985 this._objects.unshift(object); +1986 return this.renderAll(); +1987 }, +1988 +1989 /** +1990 * Moves an object to the top of the stack of drawn objects +1991 * @method bringToFront +1992 * @param object {fabric.Object} Object to send +1993 * @return {fabric.Element} thisArg +1994 * @chainable +1995 */ +1996 bringToFront: function (object) { +1997 removeFromArray(this._objects, object); +1998 this._objects.push(object); +1999 return this.renderAll(); +2000 }, +2001 +2002 /** +2003 * Moves an object one level down in stack of drawn objects +2004 * @method sendBackwards +2005 * @param object {fabric.Object} Object to send +2006 * @return {fabric.Element} thisArg +2007 * @chainable +2008 */ +2009 sendBackwards: function (object) { +2010 var idx = this._objects.indexOf(object), +2011 nextIntersectingIdx = idx; +2012 +2013 // if object is not on the bottom of stack +2014 if (idx !== 0) { +2015 +2016 // traverse down the stack looking for the nearest intersecting object +2017 for (var i=idx-1; i>=0; --i) { +2018 if (object.intersectsWithObject(this._objects[i])) { +2019 nextIntersectingIdx = i; +2020 break; +2021 } +2022 } +2023 removeFromArray(this._objects, object); +2024 this._objects.splice(nextIntersectingIdx, 0, object); +2025 } +2026 return this.renderAll(); +2027 }, +2028 +2029 /** +2030 * Moves an object one level up in stack of drawn objects +2031 * @method sendForward +2032 * @param object {fabric.Object} Object to send +2033 * @return {fabric.Element} thisArg +2034 * @chainable +2035 */ +2036 bringForward: function (object) { +2037 var objects = this.getObjects(), +2038 idx = objects.indexOf(object), +2039 nextIntersectingIdx = idx; +2040 +2041 +2042 // if object is not on top of stack (last item in an array) +2043 if (idx !== objects.length-1) { +2044 +2045 // traverse up the stack looking for the nearest intersecting object +2046 for (var i = idx + 1, l = this._objects.length; i < l; ++i) { +2047 if (object.intersectsWithObject(objects[i])) { +2048 nextIntersectingIdx = i; +2049 break; +2050 } +2051 } +2052 removeFromArray(objects, object); +2053 objects.splice(nextIntersectingIdx, 0, object); +2054 } +2055 this.renderAll(); +2056 }, +2057 +2058 /** +2059 * Sets given object as active +2060 * @method setActiveObject +2061 * @param object {fabric.Object} Object to set as an active one +2062 * @return {fabric.Element} thisArg +2063 * @chainable +2064 */ +2065 setActiveObject: function (object) { +2066 if (this._activeObject) { +2067 this._activeObject.setActive(false); +2068 } +2069 this._activeObject = object; +2070 object.setActive(true); +2071 +2072 this.renderAll(); +2073 +2074 fireEvent('object:selected', { target: object }); +2075 return this; +2076 }, +2077 +2078 /** +2079 * Returns currently active object +2080 * @method getActiveObject +2081 * @return {fabric.Object} active object +2082 */ +2083 getActiveObject: function () { +2084 return this._activeObject; +2085 }, +2086 +2087 /** +2088 * Removes currently active object +2089 * @method removeActiveObject +2090 * @return {fabric.Element} thisArg +2091 * @chainable +2092 */ +2093 removeActiveObject: function () { +2094 if (this._activeObject) { +2095 this._activeObject.setActive(false); +2096 } +2097 this._activeObject = null; +2098 return this; +2099 }, +2100 +2101 /** +2102 * Sets active group to a speicified one +2103 * @method setActiveGroup +2104 * @param {fabric.Group} group Group to set as a current one +2105 * @return {fabric.Element} thisArg +2106 * @chainable +2107 */ +2108 setActiveGroup: function (group) { +2109 this._activeGroup = group; +2110 return this; +2111 }, +2112 +2113 /** +2114 * Returns currently active group +2115 * @method getActiveGroup +2116 * @return {fabric.Group} Current group +2117 */ +2118 getActiveGroup: function () { +2119 return this._activeGroup; +2120 }, +2121 +2122 /** +2123 * Removes currently active group +2124 * @method removeActiveGroup +2125 * @return {fabric.Element} thisArg +2126 */ +2127 removeActiveGroup: function () { +2128 var g = this.getActiveGroup(); +2129 if (g) { +2130 g.destroy(); +2131 } +2132 return this.setActiveGroup(null); +2133 }, +2134 +2135 /** +2136 * Returns object at specified index +2137 * @method item +2138 * @param {Number} index +2139 * @return {fabric.Object} +2140 */ +2141 item: function (index) { +2142 return this.getObjects()[index]; +2143 }, +2144 +2145 /** +2146 * Deactivates all objects by calling their setActive(false) +2147 * @method deactivateAll +2148 * @return {fabric.Element} thisArg +2149 */ +2150 deactivateAll: function () { +2151 var allObjects = this.getObjects(), +2152 i = 0, +2153 len = allObjects.length; +2154 for ( ; i < len; i++) { +2155 allObjects[i].setActive(false); +2156 } +2157 this.removeActiveGroup(); +2158 this.removeActiveObject(); +2159 return this; +2160 }, +2161 +2162 /** +2163 * Returns number representation of an instance complexity +2164 * @method complexity +2165 * @return {Number} complexity +2166 */ +2167 complexity: function () { +2168 return this.getObjects().reduce(function (memo, current) { +2169 memo += current.complexity ? current.complexity() : 0; +2170 return memo; +2171 }, 0); +2172 }, +2173 +2174 /** +2175 * Clears a canvas element and removes all event handlers. +2176 * @method dispose +2177 * @return {fabric.Element} thisArg +2178 * @chainable +2179 */ +2180 dispose: function () { +2181 this.clear(); +2182 removeListener(this.getElement(), 'mousedown', this._onMouseDown); +2183 removeListener(document, 'mouseup', this._onMouseUp); +2184 removeListener(document, 'mousemove', this._onMouseMove); +2185 removeListener(window, 'resize', this._onResize); +2186 return this; +2187 }, +2188 +2189 /** +2190 * Clones canvas instance +2191 * @method clone +2192 * @param {Object} [callback] Expects `onBeforeClone` and `onAfterClone` functions +2193 * @return {fabric.Element} Clone of this instance +2194 */ +2195 clone: function (callback) { +2196 var el = document.createElement('canvas'); +2197 +2198 el.width = this.getWidth(); +2199 el.height = this.getHeight(); +2200 +2201 // cache +2202 var clone = this.__clone || (this.__clone = new fabric.Element(el)); +2203 +2204 return clone.loadFromJSON(JSON.stringify(this.toJSON()), function () { +2205 if (callback) { +2206 callback(clone); +2207 } +2208 }); +2209 }, +2210 +2211 /** +2212 * @private +2213 * @method _toDataURL +2214 * @param {String} format +2215 * @param {Function} callback +2216 */ +2217 _toDataURL: function (format, callback) { +2218 this.clone(function (clone) { +2219 callback(clone.toDataURL(format)); +2220 }); +2221 }, +2222 +2223 /** +2224 * @private +2225 * @method _toDataURLWithMultiplier +2226 * @param {String} format +2227 * @param {Number} multiplier +2228 * @param {Function} callback +2229 */ +2230 _toDataURLWithMultiplier: function (format, multiplier, callback) { +2231 this.clone(function (clone) { +2232 callback(clone.toDataURLWithMultiplier(format, multiplier)); +2233 }); +2234 }, +2235 +2236 /** +2237 * @private +2238 * @method _resizeImageToFit +2239 * @param {HTMLImageElement} imgEl +2240 */ +2241 _resizeImageToFit: function (imgEl) { +2242 +2243 var imageWidth = imgEl.width || imgEl.offsetWidth, +2244 widthScaleFactor = this.getWidth() / imageWidth; +2245 +2246 // scale image down so that it has original dimensions when printed in large resolution +2247 if (imageWidth) { +2248 imgEl.width = imageWidth * widthScaleFactor; +2249 } +2250 }, +2251 +2252 /** +2253 * Used for caching SVG documents (loaded via `fabric.Element#loadSVGFromURL`) +2254 * @property +2255 * @namespace +2256 */ +2257 cache: { 2258 2259 /** -2260 * @method get -2261 * @param {String} url +2260 * @method has +2261 * @param {String} name 2262 * @param {Function} callback 2263 */ -2264 get: function (url, callback) { -2265 /* NOOP */ +2264 has: function (name, callback) { +2265 callback(false); 2266 }, 2267 2268 /** -2269 * @method set +2269 * @method get 2270 * @param {String} url -2271 * @param {Object} object +2271 * @param {Function} callback 2272 */ -2273 set: function (url, object) { +2273 get: function (url, callback) { 2274 /* NOOP */ -2275 } -2276 } -2277 }); -2278 -2279 /** -2280 * Returns a string representation of an instance -2281 * @method toString -2282 * @return {String} string representation of an instance -2283 */ -2284 fabric.Element.prototype.toString = function () { // Assign explicitly since `extend` doesn't take care of DontEnum bug yet -2285 return '#<fabric.Element (' + this.complexity() + '): '+ -2286 '{ objects: ' + this.getObjects().length + ' }>'; -2287 }; -2288 -2289 extend(fabric.Element, /** @scope fabric.Element */ { -2290 -2291 /** -2292 * @static -2293 * @property EMPTY_JSON -2294 * @type String -2295 */ -2296 EMPTY_JSON: '{"objects": [], "background": "white"}', -2297 -2298 /** -2299 * Takes <canvas> element and transforms its data in such way that it becomes grayscale -2300 * @static -2301 * @method toGrayscale -2302 * @param {HTMLCanvasElement} canvasEl -2303 */ -2304 toGrayscale: function (canvasEl) { -2305 var context = canvasEl.getContext('2d'), -2306 imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height), -2307 data = imageData.data, -2308 iLen = imageData.width, -2309 jLen = imageData.height, -2310 index, average; -2311 -2312 for (i = 0; i < iLen; i++) { -2313 for (j = 0; j < jLen; j++) { -2314 -2315 index = (i * 4) * jLen + (j * 4); -2316 average = (data[index] + data[index + 1] + data[index + 2]) / 3; -2317 -2318 data[index] = average; -2319 data[index + 1] = average; -2320 data[index + 2] = average; -2321 } -2322 } +2275 }, +2276 +2277 /** +2278 * @method set +2279 * @param {String} url +2280 * @param {Object} object +2281 */ +2282 set: function (url, object) { +2283 /* NOOP */ +2284 } +2285 } +2286 }); +2287 +2288 /** +2289 * Returns a string representation of an instance +2290 * @method toString +2291 * @return {String} string representation of an instance +2292 */ +2293 fabric.Element.prototype.toString = function () { // Assign explicitly since `extend` doesn't take care of DontEnum bug yet +2294 return '#<fabric.Element (' + this.complexity() + '): '+ +2295 '{ objects: ' + this.getObjects().length + ' }>'; +2296 }; +2297 +2298 extend(fabric.Element, /** @scope fabric.Element */ { +2299 +2300 /** +2301 * @static +2302 * @property EMPTY_JSON +2303 * @type String +2304 */ +2305 EMPTY_JSON: '{"objects": [], "background": "white"}', +2306 +2307 /** +2308 * Takes <canvas> element and transforms its data in such way that it becomes grayscale +2309 * @static +2310 * @method toGrayscale +2311 * @param {HTMLCanvasElement} canvasEl +2312 */ +2313 toGrayscale: function (canvasEl) { +2314 var context = canvasEl.getContext('2d'), +2315 imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height), +2316 data = imageData.data, +2317 iLen = imageData.width, +2318 jLen = imageData.height, +2319 index, average; +2320 +2321 for (i = 0; i < iLen; i++) { +2322 for (j = 0; j < jLen; j++) { 2323 -2324 context.putImageData(imageData, 0, 0); -2325 }, -2326 -2327 /** -2328 * Provides a way to check support of some of the canvas methods -2329 * (either those of HTMLCanvasElement itself, or rendering context) -2330 * -2331 * @method supports -2332 * @param methodName {String} Method to check support for; -2333 * Could be one of "getImageData" or "toDataURL" -2334 * @return {Boolean | null} `true` if method is supported (or at least exists), -2335 * `null` if canvas element or context can not be initialized -2336 */ -2337 supports: function (methodName) { -2338 var el = document.createElement('canvas'); -2339 -2340 if (typeof G_vmlCanvasManager !== 'undefined') { -2341 G_vmlCanvasManager.initElement(el); -2342 } -2343 if (!el || !el.getContext) { -2344 return null; -2345 } -2346 -2347 var ctx = el.getContext('2d'); -2348 if (!ctx) { -2349 return null; -2350 } -2351 -2352 switch (methodName) { -2353 -2354 case 'getImageData': -2355 return typeof ctx.getImageData !== 'undefined'; -2356 -2357 case 'toDataURL': -2358 return typeof el.toDataURL !== 'undefined'; -2359 -2360 default: -2361 return null; -2362 } -2363 } -2364 -2365 }); -2366 -2367 /** -2368 * Returs JSON representation of canvas -2369 * @function -2370 * @method toJSON -2371 * @return {String} json string -2372 */ -2373 fabric.Element.prototype.toJSON = fabric.Element.prototype.toObject; -2374 })(); \ No newline at end of file +2324 index = (i * 4) * jLen + (j * 4); +2325 average = (data[index] + data[index + 1] + data[index + 2]) / 3; +2326 +2327 data[index] = average; +2328 data[index + 1] = average; +2329 data[index + 2] = average; +2330 } +2331 } +2332 +2333 context.putImageData(imageData, 0, 0); +2334 }, +2335 +2336 /** +2337 * Provides a way to check support of some of the canvas methods +2338 * (either those of HTMLCanvasElement itself, or rendering context) +2339 * +2340 * @method supports +2341 * @param methodName {String} Method to check support for; +2342 * Could be one of "getImageData" or "toDataURL" +2343 * @return {Boolean | null} `true` if method is supported (or at least exists), +2344 * `null` if canvas element or context can not be initialized +2345 */ +2346 supports: function (methodName) { +2347 var el = document.createElement('canvas'); +2348 +2349 if (typeof G_vmlCanvasManager !== 'undefined') { +2350 G_vmlCanvasManager.initElement(el); +2351 } +2352 if (!el || !el.getContext) { +2353 return null; +2354 } +2355 +2356 var ctx = el.getContext('2d'); +2357 if (!ctx) { +2358 return null; +2359 } +2360 +2361 switch (methodName) { +2362 +2363 case 'getImageData': +2364 return typeof ctx.getImageData !== 'undefined'; +2365 +2366 case 'toDataURL': +2367 return typeof el.toDataURL !== 'undefined'; +2368 +2369 default: +2370 return null; +2371 } +2372 } +2373 +2374 }); +2375 +2376 /** +2377 * Returs JSON representation of canvas +2378 * @function +2379 * @method toJSON +2380 * @return {String} json string +2381 */ +2382 fabric.Element.prototype.toJSON = fabric.Element.prototype.toObject; +2383 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_ellipse.class.js.html b/docs/symbols/src/src_ellipse.class.js.html index 02efb8c7..cfc4c5c0 100644 --- a/docs/symbols/src/src_ellipse.class.js.html +++ b/docs/symbols/src/src_ellipse.class.js.html @@ -24,108 +24,118 @@ 17 */ 18 fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @scope fabric.Ellipse.prototype */ { 19 - 20 /** @property */ - 21 type: 'ellipse', - 22 - 23 /** - 24 * Constructor - 25 * @method initialize - 26 * @param {Object} [options] Options object - 27 * @return {Object} thisArg - 28 */ - 29 initialize: function(options) { - 30 options = options || { }; - 31 - 32 this.callSuper('initialize', options); - 33 - 34 this.set('rx', options.rx || 0); - 35 this.set('ry', options.ry || 0); + 20 /** + 21 * @property + 22 * @type String + 23 */ + 24 type: 'ellipse', + 25 + 26 /** + 27 * Constructor + 28 * @method initialize + 29 * @param {Object} [options] Options object + 30 * @return {Object} thisArg + 31 */ + 32 initialize: function(options) { + 33 options = options || { }; + 34 + 35 this.callSuper('initialize', options); 36 - 37 this.set('width', this.get('rx') * 2); - 38 this.set('height', this.get('ry') * 2); - 39 }, - 40 - 41 /** - 42 * Returns object representation of an instance - 43 * @method toObject - 44 * @return {Object} object representation of an instance - 45 */ - 46 toObject: function() { - 47 return extend(this.callSuper('toObject'), { - 48 rx: this.get('rx'), - 49 ry: this.get('ry') - 50 }); - 51 }, - 52 - 53 /** - 54 * @method render - 55 * @param ctx {CanvasRenderingContext2D} context to render on - 56 * @param noTransform {Boolean} context is not transformed when set to true - 57 */ - 58 render: function(ctx, noTransform) { - 59 // do not use `get` for perf. reasons - 60 if (this.rx === 0 || this.ry === 0) return; - 61 return this.callSuper('render', ctx, noTransform); - 62 }, - 63 - 64 /** - 65 * @private - 66 * @method _render - 67 * @param ctx {CanvasRenderingContext2D} context to render on - 68 */ - 69 _render: function(ctx, noTransform) { - 70 ctx.beginPath(); - 71 ctx.save(); - 72 ctx.transform(1, 0, 0, this.ry/this.rx, 0, 0); - 73 ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.rx, 0, piBy2, false); - 74 ctx.restore(); - 75 if (this.stroke) { - 76 ctx.stroke(); - 77 } - 78 if (this.fill) { - 79 ctx.fill(); - 80 } - 81 }, - 82 - 83 /** - 84 * @method complexity - 85 * @return {Number} complexity - 86 */ - 87 complexity: function() { - 88 return 1; - 89 } - 90 }); - 91 - 92 fabric.Ellipse.ATTRIBUTE_NAMES = 'cx cy rx ry fill fill-opacity stroke stroke-width transform'.split(' '); - 93 - 94 /** - 95 * Returns fabric.Ellipse instance from an SVG element - 96 * @static - 97 * @method fabric.Ellipse.fromElement - 98 * @param {SVGElement} element Element to parse - 99 * @param {Object} [options] Options object -100 * @return {fabric.Ellipse} + 37 this.set('rx', options.rx || 0); + 38 this.set('ry', options.ry || 0); + 39 + 40 this.set('width', this.get('rx') * 2); + 41 this.set('height', this.get('ry') * 2); + 42 }, + 43 + 44 /** + 45 * Returns object representation of an instance + 46 * @method toObject + 47 * @return {Object} object representation of an instance + 48 */ + 49 toObject: function() { + 50 return extend(this.callSuper('toObject'), { + 51 rx: this.get('rx'), + 52 ry: this.get('ry') + 53 }); + 54 }, + 55 + 56 /** + 57 * Renders this instance on a given context + 58 * @method render + 59 * @param ctx {CanvasRenderingContext2D} context to render on + 60 * @param noTransform {Boolean} context is not transformed when set to true + 61 */ + 62 render: function(ctx, noTransform) { + 63 // do not use `get` for perf. reasons + 64 if (this.rx === 0 || this.ry === 0) return; + 65 return this.callSuper('render', ctx, noTransform); + 66 }, + 67 + 68 /** + 69 * @private + 70 * @method _render + 71 * @param ctx {CanvasRenderingContext2D} context to render on + 72 */ + 73 _render: function(ctx, noTransform) { + 74 ctx.beginPath(); + 75 ctx.save(); + 76 ctx.transform(1, 0, 0, this.ry/this.rx, 0, 0); + 77 ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.rx, 0, piBy2, false); + 78 ctx.restore(); + 79 if (this.stroke) { + 80 ctx.stroke(); + 81 } + 82 if (this.fill) { + 83 ctx.fill(); + 84 } + 85 }, + 86 + 87 /** + 88 * Returns complexity of an instance + 89 * @method complexity + 90 * @return {Number} complexity + 91 */ + 92 complexity: function() { + 93 return 1; + 94 } + 95 }); + 96 + 97 /** + 98 * List of attribute names to account for when parsing SVG element (used by `fabric.Ellipse.fromElement`) + 99 * @static +100 * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement 101 */ -102 fabric.Ellipse.fromElement = function(element, options) { -103 options || (options = { }); -104 var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); -105 if ('left' in parsedAttributes) { -106 parsedAttributes.left -= (options.width / 2) || 0; -107 } -108 if ('top' in parsedAttributes) { -109 parsedAttributes.top -= (options.height / 2) || 0; -110 } -111 return new fabric.Ellipse(extend(parsedAttributes, options)); -112 }; -113 -114 /** -115 * Returns fabric.Ellipse instance from an object representation -116 * @static -117 * @method fabric.Ellipse.fromObject -118 * @param {Object} object Object to create an instance from -119 * @return {fabric.Ellipse} -120 */ -121 fabric.Ellipse.fromObject = function(object) { -122 return new fabric.Ellipse(object); -123 } -124 })(); \ No newline at end of file +102 fabric.Ellipse.ATTRIBUTE_NAMES = 'cx cy rx ry fill fill-opacity stroke stroke-width transform'.split(' '); +103 +104 /** +105 * Returns fabric.Ellipse instance from an SVG element +106 * @static +107 * @method fabric.Ellipse.fromElement +108 * @param {SVGElement} element Element to parse +109 * @param {Object} [options] Options object +110 * @return {fabric.Ellipse} +111 */ +112 fabric.Ellipse.fromElement = function(element, options) { +113 options || (options = { }); +114 var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); +115 if ('left' in parsedAttributes) { +116 parsedAttributes.left -= (options.width / 2) || 0; +117 } +118 if ('top' in parsedAttributes) { +119 parsedAttributes.top -= (options.height / 2) || 0; +120 } +121 return new fabric.Ellipse(extend(parsedAttributes, options)); +122 }; +123 +124 /** +125 * Returns fabric.Ellipse instance from an object representation +126 * @static +127 * @method fabric.Ellipse.fromObject +128 * @param {Object} object Object to create an instance from +129 * @return {fabric.Ellipse} +130 */ +131 fabric.Ellipse.fromObject = function(object) { +132 return new fabric.Ellipse(object); +133 } +134 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_group.class.js.html b/docs/symbols/src/src_group.class.js.html index 42755894..d0233ae6 100644 --- a/docs/symbols/src/src_group.class.js.html +++ b/docs/symbols/src/src_group.class.js.html @@ -293,171 +293,180 @@ 286 }, 287 288 /** -289 * @saveCoords -290 * @return {fabric.Group} thisArg -291 * @chainable -292 */ -293 saveCoords: function() { -294 this._originalLeft = this.get('left'); -295 this._originalTop = this.get('top'); -296 return this; -297 }, -298 -299 /** -300 * @method hasMoved -301 * @return {Boolean} true if an object was moved (since fabric.Group#saveCoords was called) -302 */ -303 hasMoved: function() { -304 return this._originalLeft !== this.get('left') || -305 this._originalTop !== this.get('top'); -306 }, -307 -308 /** -309 * Sets coordinates of all group objects -310 * @method setObjectsCoords -311 * @return {fabric.Group} thisArg -312 * @chainable -313 */ -314 setObjectsCoords: function() { -315 this.forEachObject(function(object) { -316 object.setCoords(); -317 }); -318 return this; -319 }, -320 -321 /** -322 * Activates (makes active) all group objects -323 * @method activateAllObjects -324 * @return {fabric.Group} thisArg -325 * @chainable -326 */ -327 activateAllObjects: function() { -328 return this.setActive(true); -329 }, -330 -331 /** -332 * Activates (makes active) all group objects -333 * @method setActive -334 * @param {Boolean} value `true` to activate object, `false` otherwise -335 * @return {fabric.Group} thisArg -336 * @chainable -337 */ -338 setActive: function(value) { -339 this.forEachObject(function(object) { -340 object.setActive(value); -341 }); -342 return this; -343 }, -344 -345 /** -346 * @method forEachObject -347 * @param {Function} callback -348 * Callback invoked with current object as first argument, -349 * index - as second and an array of all objects - as third. -350 * Iteration happens in reverse order (for performance reasons). -351 * Callback is invoked in a context of Global Object (e.g. `window`) -352 * when no `context` argument is given -353 * -354 * @param {Object} context Context (aka thisObject) -355 * -356 * @return {fabric.Group} thisArg -357 * @chainable -358 */ -359 forEachObject: function(callback, context) { -360 var objects = this.getObjects(), -361 i = objects.length; -362 while (i--) { -363 callback.call(context, objects[i], i, objects); -364 } -365 return this; -366 }, -367 -368 /** -369 * @private -370 * @method _setOpacityIfSame -371 */ -372 _setOpacityIfSame: function() { -373 var objects = this.getObjects(), -374 firstValue = objects[0] ? objects[0].get('opacity') : 1; -375 -376 var isSameOpacity = objects.every(function(o) { -377 return o.get('opacity') === firstValue; -378 }); -379 -380 if (isSameOpacity) { -381 this.opacity = firstValue; -382 } -383 }, -384 -385 /** -386 * @private -387 * @method _calcBounds -388 */ -389 _calcBounds: function() { -390 var aX = [], -391 aY = [], -392 minX, minY, maxX, maxY, o, width, height, -393 i = 0, -394 len = this.objects.length; -395 -396 for (; i < len; ++i) { -397 o = this.objects[i]; -398 o.setCoords(); -399 for (var prop in o.oCoords) { -400 aX.push(o.oCoords[prop].x); -401 aY.push(o.oCoords[prop].y); -402 } -403 }; -404 -405 minX = min(aX); -406 maxX = max(aX); -407 minY = min(aY); -408 maxY = max(aY); -409 -410 width = maxX - minX; -411 height = maxY - minY; +289 * Saves coordinates of this instance (to be used together with `hasMoved`) +290 * @saveCoords +291 * @return {fabric.Group} thisArg +292 * @chainable +293 */ +294 saveCoords: function() { +295 this._originalLeft = this.get('left'); +296 this._originalTop = this.get('top'); +297 return this; +298 }, +299 +300 /** +301 * Checks whether this group was moved (since `saveCoords` was called last) +302 * @method hasMoved +303 * @return {Boolean} true if an object was moved (since fabric.Group#saveCoords was called) +304 */ +305 hasMoved: function() { +306 return this._originalLeft !== this.get('left') || +307 this._originalTop !== this.get('top'); +308 }, +309 +310 /** +311 * Sets coordinates of all group objects +312 * @method setObjectsCoords +313 * @return {fabric.Group} thisArg +314 * @chainable +315 */ +316 setObjectsCoords: function() { +317 this.forEachObject(function(object) { +318 object.setCoords(); +319 }); +320 return this; +321 }, +322 +323 /** +324 * Activates (makes active) all group objects +325 * @method activateAllObjects +326 * @return {fabric.Group} thisArg +327 * @chainable +328 */ +329 activateAllObjects: function() { +330 return this.setActive(true); +331 }, +332 +333 /** +334 * Activates (makes active) all group objects +335 * @method setActive +336 * @param {Boolean} value `true` to activate object, `false` otherwise +337 * @return {fabric.Group} thisArg +338 * @chainable +339 */ +340 setActive: function(value) { +341 this.forEachObject(function(object) { +342 object.setActive(value); +343 }); +344 return this; +345 }, +346 +347 /** +348 * Executes given function for each object in this group +349 * @method forEachObject +350 * @param {Function} callback +351 * Callback invoked with current object as first argument, +352 * index - as second and an array of all objects - as third. +353 * Iteration happens in reverse order (for performance reasons). +354 * Callback is invoked in a context of Global Object (e.g. `window`) +355 * when no `context` argument is given +356 * +357 * @param {Object} context Context (aka thisObject) +358 * +359 * @return {fabric.Group} thisArg +360 * @chainable +361 */ +362 forEachObject: function(callback, context) { +363 var objects = this.getObjects(), +364 i = objects.length; +365 while (i--) { +366 callback.call(context, objects[i], i, objects); +367 } +368 return this; +369 }, +370 +371 /** +372 * @private +373 * @method _setOpacityIfSame +374 */ +375 _setOpacityIfSame: function() { +376 var objects = this.getObjects(), +377 firstValue = objects[0] ? objects[0].get('opacity') : 1; +378 +379 var isSameOpacity = objects.every(function(o) { +380 return o.get('opacity') === firstValue; +381 }); +382 +383 if (isSameOpacity) { +384 this.opacity = firstValue; +385 } +386 }, +387 +388 /** +389 * @private +390 * @method _calcBounds +391 */ +392 _calcBounds: function() { +393 var aX = [], +394 aY = [], +395 minX, minY, maxX, maxY, o, width, height, +396 i = 0, +397 len = this.objects.length; +398 +399 for (; i < len; ++i) { +400 o = this.objects[i]; +401 o.setCoords(); +402 for (var prop in o.oCoords) { +403 aX.push(o.oCoords[prop].x); +404 aY.push(o.oCoords[prop].y); +405 } +406 }; +407 +408 minX = min(aX); +409 maxX = max(aX); +410 minY = min(aY); +411 maxY = max(aY); 412 -413 this.width = width; -414 this.height = height; +413 width = maxX - minX; +414 height = maxY - minY; 415 -416 this.left = minX + width / 2; -417 this.top = minY + height / 2; -418 }, -419 -420 /** -421 * @method containsPoint -422 * @param {Object} point point with `x` and `y` properties -423 * @return {Boolean} true if point is contained within group -424 */ -425 containsPoint: function(point) { -426 -427 var halfWidth = this.get('width') / 2, -428 halfHeight = this.get('height') / 2, -429 centerX = this.get('left'), -430 centerY = this.get('top'); -431 -432 return centerX - halfWidth < point.x && -433 centerX + halfWidth > point.x && -434 centerY - halfHeight < point.y && -435 centerY + halfHeight > point.y; -436 }, -437 -438 toGrayscale: function() { -439 var i = this.objects.length; -440 while (i--) { -441 this.objects[i].toGrayscale(); -442 } -443 } -444 }); -445 -446 /** -447 * @static -448 * @method fabric.Group.fromObject -449 * @param object {Object} object to create a group from -450 * @param options {Object} options object -451 * @return {fabric.Group} an instance of fabric.Group -452 */ -453 fabric.Group.fromObject = function(object) { -454 return new fabric.Group(object.objects, object); -455 } -456 })(); \ No newline at end of file +416 this.width = width; +417 this.height = height; +418 +419 this.left = minX + width / 2; +420 this.top = minY + height / 2; +421 }, +422 +423 /** +424 * Checks if point is contained within the group +425 * @method containsPoint +426 * @param {fabric.Point} point point with `x` and `y` properties +427 * @return {Boolean} true if point is contained within group +428 */ +429 containsPoint: function(point) { +430 +431 var halfWidth = this.get('width') / 2, +432 halfHeight = this.get('height') / 2, +433 centerX = this.get('left'), +434 centerY = this.get('top'); +435 +436 return centerX - halfWidth < point.x && +437 centerX + halfWidth > point.x && +438 centerY - halfHeight < point.y && +439 centerY + halfHeight > point.y; +440 }, +441 +442 /** +443 * Makes all of this group's objects grayscale (i.e. calling `toGrayscale` on them) +444 * @method toGrayscale +445 */ +446 toGrayscale: function() { +447 var i = this.objects.length; +448 while (i--) { +449 this.objects[i].toGrayscale(); +450 } +451 } +452 }); +453 +454 /** +455 * Returns fabric.Group instance from an object representation +456 * @static +457 * @method fabric.Group.fromObject +458 * @param object {Object} object to create a group from +459 * @param options {Object} options object +460 * @return {fabric.Group} an instance of fabric.Group +461 */ +462 fabric.Group.fromObject = function(object) { +463 return new fabric.Group(object.objects, object); +464 } +465 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_line.class.js.html b/docs/symbols/src/src_line.class.js.html index b38de76d..608a03a7 100644 --- a/docs/symbols/src/src_line.class.js.html +++ b/docs/symbols/src/src_line.class.js.html @@ -76,59 +76,64 @@ 69 }, 70 71 /** - 72 * @method complexity - 73 * @return {Number} complexity - 74 */ - 75 complexity: function() { - 76 return 1; - 77 }, - 78 - 79 /** - 80 * Returns object representation of an instance - 81 * @methd toObject - 82 * @return {Object} - 83 */ - 84 toObject: function() { - 85 return extend(this.callSuper('toObject'), { - 86 x1: this.get('x1'), - 87 y1: this.get('y1'), - 88 x2: this.get('x2'), - 89 y2: this.get('y2') - 90 }); - 91 } - 92 }); - 93 - 94 /** - 95 * @see http://www.w3.org/TR/SVG/shapes.html#LineElement - 96 */ - 97 fabric.Element.ATTRIBUTE_NAMES = 'x1 y1 x2 y2 stroke stroke-width transform'.split(' '); - 98 - 99 /** -100 * @static -101 * @method fabric.Line.fromElement -102 * @param {SVGElement} element Element to parse -103 * @param {Object} [options] Options object -104 * @return {fabric.Line} instance of fabric.Line -105 */ -106 fabric.Line.fromElement = function(element, options) { -107 var parsedAttributes = fabric.parseAttributes(element, fabric.Element.ATTRIBUTE_NAMES); -108 var points = [ -109 parsedAttributes.x1 || 0, -110 parsedAttributes.y1 || 0, -111 parsedAttributes.x2 || 0, -112 parsedAttributes.y2 || 0 -113 ]; -114 return new fabric.Line(points, extend(parsedAttributes, options)); -115 }; -116 -117 /** -118 * @static -119 * @method fabric.Line.fromObject -120 * @param {Object} object Object to create an instance from -121 * @return {fabric.Line} instance of fabric.Line -122 */ -123 fabric.Line.fromObject = function(object) { -124 var points = [object.x1, object.y1, object.x2, object.y2]; -125 return new fabric.Line(points, object); -126 }; -127 })(); \ No newline at end of file + 72 * Returns complexity of an instance + 73 * @method complexity + 74 * @return {Number} complexity + 75 */ + 76 complexity: function() { + 77 return 1; + 78 }, + 79 + 80 /** + 81 * Returns object representation of an instance + 82 * @methd toObject + 83 * @return {Object} + 84 */ + 85 toObject: function() { + 86 return extend(this.callSuper('toObject'), { + 87 x1: this.get('x1'), + 88 y1: this.get('y1'), + 89 x2: this.get('x2'), + 90 y2: this.get('y2') + 91 }); + 92 } + 93 }); + 94 + 95 /** + 96 * List of attribute names to account for when parsing SVG element (used by `fabric.Line.fromElement`) + 97 * @static + 98 * @see http://www.w3.org/TR/SVG/shapes.html#LineElement + 99 */ +100 fabric.Line.ATTRIBUTE_NAMES = 'x1 y1 x2 y2 stroke stroke-width transform'.split(' '); +101 +102 /** +103 * Returns fabric.Line instance from an SVG element +104 * @static +105 * @method fabric.Line.fromElement +106 * @param {SVGElement} element Element to parse +107 * @param {Object} [options] Options object +108 * @return {fabric.Line} instance of fabric.Line +109 */ +110 fabric.Line.fromElement = function(element, options) { +111 var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES); +112 var points = [ +113 parsedAttributes.x1 || 0, +114 parsedAttributes.y1 || 0, +115 parsedAttributes.x2 || 0, +116 parsedAttributes.y2 || 0 +117 ]; +118 return new fabric.Line(points, extend(parsedAttributes, options)); +119 }; +120 +121 /** +122 * Returns fabric.Line instance from an object representation +123 * @static +124 * @method fabric.Line.fromObject +125 * @param {Object} object Object to create an instance from +126 * @return {fabric.Line} instance of fabric.Line +127 */ +128 fabric.Line.fromObject = function(object) { +129 var points = [object.x1, object.y1, object.x2, object.y2]; +130 return new fabric.Line(points, object); +131 }; +132 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_object.class.js.html b/docs/symbols/src/src_object.class.js.html index 91775f41..b0005f95 100644 --- a/docs/symbols/src/src_object.class.js.html +++ b/docs/symbols/src/src_object.class.js.html @@ -63,1221 +63,1224 @@ 56 MIN_SCALE_LIMIT: 0.1, 57 58 /** - 59 * @property - 60 * @type Array - 61 */ - 62 stateProperties: ('top left width height scaleX scaleY flipX flipY ' + - 63 'theta angle opacity cornersize fill overlayFill stroke ' + - 64 'strokeWidth fillRule borderScaleFactor transformMatrix').split(' '), - 65 - 66 // TODO (kangax): rename to `defaultOptions` + 59 * List of properties to consider when checking if state of an object is changed (fabric.Object#hasStateChanged); + 60 * as well as for history (undo/redo) purposes + 61 * @property + 62 * @type Array + 63 */ + 64 stateProperties: ('top left width height scaleX scaleY flipX flipY ' + + 65 'theta angle opacity cornersize fill overlayFill stroke ' + + 66 'strokeWidth fillRule borderScaleFactor transformMatrix').split(' '), 67 - 68 /** - 69 * @property - 70 * @type Object - 71 */ - 72 options: { - 73 top: 0, - 74 left: 0, - 75 width: 100, - 76 height: 100, - 77 scaleX: 1, - 78 scaleY: 1, - 79 flipX: false, - 80 flipY: false, - 81 theta: 0, - 82 opacity: 1, - 83 angle: 0, - 84 cornersize: 10, - 85 padding: 0, - 86 borderColor: 'rgba(102,153,255,0.75)', - 87 cornerColor: 'rgba(102,153,255,0.5)', - 88 fill: 'rgb(0,0,0)', - 89 overlayFill: null, - 90 stroke: null, - 91 strokeWidth: 1, - 92 fillRule: 'source-over', - 93 borderOpacityWhenMoving: 0.4, - 94 borderScaleFactor: 1, - 95 transformMatrix: null - 96 }, - 97 - 98 /** - 99 * @method callSuper -100 * @param {String} methodName -101 */ -102 callSuper: function(methodName) { -103 var fn = this.constructor.superclass.prototype[methodName]; -104 return (arguments.length > 1) -105 ? fn.apply(this, slice.call(arguments, 1)) -106 : fn.call(this); -107 }, -108 -109 /** -110 * Constructor -111 * @method initialize -112 * @param {Object} [options] Options object -113 */ -114 initialize: function(options) { -115 // overwrite default options with specified ones -116 this.setOptions(options); -117 // "import" state properties into an instance -118 this._importProperties(); -119 // create "local" members -120 this.originalState = { }; -121 // set initial coords -122 this.setCoords(); -123 // setup state properties -124 this.saveState(); -125 }, -126 -127 /** -128 * @method setOptions -129 * @param {Object} [options] -130 */ -131 setOptions: function(options) { -132 // this.constructor.superclass.prototype.options -> this.options -> options -133 this.options = extend(this._getOptions(), options); -134 }, -135 -136 /** -137 * @private -138 * @method _getOptions -139 */ -140 _getOptions: function() { -141 return extend(clone(this._getSuperOptions()), this.options); -142 }, -143 -144 /** -145 * @private -146 * @method _getSuperOptions -147 */ -148 _getSuperOptions: function() { -149 var c = this.constructor; -150 if (c) { -151 var s = c.superclass; -152 if (s) { -153 var p = s.prototype; -154 if (p && typeof p._getOptions == 'function') { -155 return p._getOptions(); -156 } -157 } -158 } -159 return { }; -160 }, -161 -162 /** -163 * @private -164 * @method _importProperties -165 */ -166 _importProperties: function() { -167 this.stateProperties.forEach(function(prop) { -168 (prop === 'angle') -169 ? this.setAngle(this.options[prop]) -170 : (this[prop] = this.options[prop]); -171 }, this); -172 }, -173 -174 /** -175 * @method transform -176 * @param {CanvasRenderingContext2D} ctx Context -177 */ -178 transform: function(ctx) { -179 ctx.globalAlpha = this.opacity; -180 ctx.translate(this.left, this.top); -181 ctx.rotate(this.theta); -182 ctx.scale( -183 this.scaleX * (this.flipX ? -1 : 1), -184 this.scaleY * (this.flipY ? -1 : 1) -185 ); -186 }, -187 -188 /** -189 * Returns an object representation of an instance -190 * @method toObject -191 * @return {Object} -192 */ -193 toObject: function() { -194 var object = { -195 type: this.type, -196 left: toFixed(this.left, this.NUM_FRACTION_DIGITS), -197 top: toFixed(this.top, this.NUM_FRACTION_DIGITS), -198 width: toFixed(this.width, this.NUM_FRACTION_DIGITS), -199 height: toFixed(this.height, this.NUM_FRACTION_DIGITS), -200 fill: this.fill, -201 overlayFill: this.overlayFill, -202 stroke: this.stroke, -203 strokeWidth: this.strokeWidth, -204 scaleX: toFixed(this.scaleX, this.NUM_FRACTION_DIGITS), -205 scaleY: toFixed(this.scaleY, this.NUM_FRACTION_DIGITS), -206 angle: toFixed(this.getAngle(), this.NUM_FRACTION_DIGITS), -207 flipX: this.flipX, -208 flipY: this.flipY, -209 opacity: toFixed(this.opacity, this.NUM_FRACTION_DIGITS) -210 }; -211 -212 if (!this.includeDefaultValues) { -213 object = this._removeDefaultValues(object); -214 } -215 return object; -216 }, -217 -218 /** -219 * @method toDatalessObject -220 */ -221 toDatalessObject: function() { -222 // will be overwritten by subclasses -223 return this.toObject(); -224 }, -225 -226 /** -227 * @private -228 * @method _removeDefaultValues -229 */ -230 _removeDefaultValues: function(object) { -231 var defaultOptions = fabric.Object.prototype.options; -232 this.stateProperties.forEach(function(prop) { -233 if (object[prop] === defaultOptions[prop]) { -234 delete object[prop]; -235 } -236 }); -237 return object; -238 }, -239 -240 /** -241 * Returns true if an object is in its active state -242 * @return {Boolean} true if an object is in its active state -243 */ -244 isActive: function() { -245 return !!this.active; -246 }, -247 -248 /** -249 * Sets state of an object - `true` makes it active, `false` - inactive -250 * @param {Boolean} active -251 * @return {fabric.Object} thisArg -252 * @chainable -253 */ -254 setActive: function(active) { -255 this.active = !!active; -256 return this; -257 }, -258 -259 /** -260 * Returns a string representation of an instance -261 * @return {String} -262 */ -263 toString: function() { -264 return "#<fabric." + capitalize(this.type) + ">"; -265 }, -266 -267 /** -268 * Basic setter -269 * @param {Any} property -270 * @param {Any} value -271 * @return {fabric.Object} thisArg -272 * @chainable -273 */ -274 set: function(property, value) { -275 var shouldConstrainValue = (property === 'scaleX' || property === 'scaleY') && value < this.MIN_SCALE_LIMIT; -276 if (shouldConstrainValue) { -277 value = this.MIN_SCALE_LIMIT; -278 } -279 if (property === 'angle') { -280 this.setAngle(value); + 68 // TODO (kangax): rename to `defaultOptions` + 69 + 70 /** + 71 * @property + 72 * @type Object + 73 */ + 74 options: { + 75 top: 0, + 76 left: 0, + 77 width: 100, + 78 height: 100, + 79 scaleX: 1, + 80 scaleY: 1, + 81 flipX: false, + 82 flipY: false, + 83 theta: 0, + 84 opacity: 1, + 85 angle: 0, + 86 cornersize: 10, + 87 padding: 0, + 88 borderColor: 'rgba(102,153,255,0.75)', + 89 cornerColor: 'rgba(102,153,255,0.5)', + 90 fill: 'rgb(0,0,0)', + 91 overlayFill: null, + 92 stroke: null, + 93 strokeWidth: 1, + 94 fillRule: 'source-over', + 95 borderOpacityWhenMoving: 0.4, + 96 borderScaleFactor: 1, + 97 transformMatrix: null + 98 }, + 99 +100 /** +101 * @method callSuper +102 * @param {String} methodName +103 */ +104 callSuper: function(methodName) { +105 var fn = this.constructor.superclass.prototype[methodName]; +106 return (arguments.length > 1) +107 ? fn.apply(this, slice.call(arguments, 1)) +108 : fn.call(this); +109 }, +110 +111 /** +112 * Constructor +113 * @method initialize +114 * @param {Object} [options] Options object +115 */ +116 initialize: function(options) { +117 // overwrite default options with specified ones +118 this.setOptions(options); +119 // "import" state properties into an instance +120 this._importProperties(); +121 // create "local" members +122 this.originalState = { }; +123 // set initial coords +124 this.setCoords(); +125 // setup state properties +126 this.saveState(); +127 }, +128 +129 /** +130 * @method setOptions +131 * @param {Object} [options] +132 */ +133 setOptions: function(options) { +134 // this.constructor.superclass.prototype.options -> this.options -> options +135 this.options = extend(this._getOptions(), options); +136 }, +137 +138 /** +139 * @private +140 * @method _getOptions +141 */ +142 _getOptions: function() { +143 return extend(clone(this._getSuperOptions()), this.options); +144 }, +145 +146 /** +147 * @private +148 * @method _getSuperOptions +149 */ +150 _getSuperOptions: function() { +151 var c = this.constructor; +152 if (c) { +153 var s = c.superclass; +154 if (s) { +155 var p = s.prototype; +156 if (p && typeof p._getOptions == 'function') { +157 return p._getOptions(); +158 } +159 } +160 } +161 return { }; +162 }, +163 +164 /** +165 * @private +166 * @method _importProperties +167 */ +168 _importProperties: function() { +169 this.stateProperties.forEach(function(prop) { +170 (prop === 'angle') +171 ? this.setAngle(this.options[prop]) +172 : (this[prop] = this.options[prop]); +173 }, this); +174 }, +175 +176 /** +177 * @method transform +178 * @param {CanvasRenderingContext2D} ctx Context +179 */ +180 transform: function(ctx) { +181 ctx.globalAlpha = this.opacity; +182 ctx.translate(this.left, this.top); +183 ctx.rotate(this.theta); +184 ctx.scale( +185 this.scaleX * (this.flipX ? -1 : 1), +186 this.scaleY * (this.flipY ? -1 : 1) +187 ); +188 }, +189 +190 /** +191 * Returns an object representation of an instance +192 * @method toObject +193 * @return {Object} +194 */ +195 toObject: function() { +196 var object = { +197 type: this.type, +198 left: toFixed(this.left, this.NUM_FRACTION_DIGITS), +199 top: toFixed(this.top, this.NUM_FRACTION_DIGITS), +200 width: toFixed(this.width, this.NUM_FRACTION_DIGITS), +201 height: toFixed(this.height, this.NUM_FRACTION_DIGITS), +202 fill: this.fill, +203 overlayFill: this.overlayFill, +204 stroke: this.stroke, +205 strokeWidth: this.strokeWidth, +206 scaleX: toFixed(this.scaleX, this.NUM_FRACTION_DIGITS), +207 scaleY: toFixed(this.scaleY, this.NUM_FRACTION_DIGITS), +208 angle: toFixed(this.getAngle(), this.NUM_FRACTION_DIGITS), +209 flipX: this.flipX, +210 flipY: this.flipY, +211 opacity: toFixed(this.opacity, this.NUM_FRACTION_DIGITS) +212 }; +213 +214 if (!this.includeDefaultValues) { +215 object = this._removeDefaultValues(object); +216 } +217 return object; +218 }, +219 +220 /** +221 * Returns (dataless) object representation of an instance +222 * @method toDatalessObject +223 */ +224 toDatalessObject: function() { +225 // will be overwritten by subclasses +226 return this.toObject(); +227 }, +228 +229 /** +230 * @private +231 * @method _removeDefaultValues +232 */ +233 _removeDefaultValues: function(object) { +234 var defaultOptions = fabric.Object.prototype.options; +235 this.stateProperties.forEach(function(prop) { +236 if (object[prop] === defaultOptions[prop]) { +237 delete object[prop]; +238 } +239 }); +240 return object; +241 }, +242 +243 /** +244 * Returns true if an object is in its active state +245 * @return {Boolean} true if an object is in its active state +246 */ +247 isActive: function() { +248 return !!this.active; +249 }, +250 +251 /** +252 * Sets state of an object - `true` makes it active, `false` - inactive +253 * @param {Boolean} active +254 * @return {fabric.Object} thisArg +255 * @chainable +256 */ +257 setActive: function(active) { +258 this.active = !!active; +259 return this; +260 }, +261 +262 /** +263 * Returns a string representation of an instance +264 * @return {String} +265 */ +266 toString: function() { +267 return "#<fabric." + capitalize(this.type) + ">"; +268 }, +269 +270 /** +271 * Basic setter +272 * @param {Any} property +273 * @param {Any} value +274 * @return {fabric.Object} thisArg +275 * @chainable +276 */ +277 set: function(property, value) { +278 var shouldConstrainValue = (property === 'scaleX' || property === 'scaleY') && value < this.MIN_SCALE_LIMIT; +279 if (shouldConstrainValue) { +280 value = this.MIN_SCALE_LIMIT; 281 } -282 else { -283 this[property] = value; +282 if (property === 'angle') { +283 this.setAngle(value); 284 } -285 return this; -286 }, -287 -288 /** -289 * Toggles specified property from `true` to `false` or from `false` to `true` -290 * @method toggle -291 * @param {String} property property to toggle -292 * @return {fabric.Object} thisArg -293 * @chainable -294 */ -295 toggle: function(property) { -296 var value = this.get(property); -297 if (typeof value === 'boolean') { -298 this.set(property, !value); -299 } -300 return this; -301 }, -302 -303 /** -304 * @method setSourcePath -305 * @param {String} value -306 * @return {fabric.Object} thisArg -307 * @chainable -308 */ -309 setSourcePath: function(value) { -310 this.sourcePath = value; -311 return this; -312 }, -313 -314 /** -315 * Basic getter -316 * @method get -317 * @param {Any} property -318 * @return {Any} value of a property -319 */ -320 get: function(property) { -321 return (property === 'angle') -322 ? this.getAngle() -323 : this[property]; -324 }, -325 -326 /** -327 * @method render -328 * @param {CanvasRenderingContext2D} ctx context to render on -329 * @param {Boolean} noTransform -330 */ -331 render: function(ctx, noTransform) { -332 -333 // do not render if width or height are zeros -334 if (this.width === 0 || this.height === 0) return; +285 else { +286 this[property] = value; +287 } +288 return this; +289 }, +290 +291 /** +292 * Toggles specified property from `true` to `false` or from `false` to `true` +293 * @method toggle +294 * @param {String} property property to toggle +295 * @return {fabric.Object} thisArg +296 * @chainable +297 */ +298 toggle: function(property) { +299 var value = this.get(property); +300 if (typeof value === 'boolean') { +301 this.set(property, !value); +302 } +303 return this; +304 }, +305 +306 /** +307 * @method setSourcePath +308 * @param {String} value +309 * @return {fabric.Object} thisArg +310 * @chainable +311 */ +312 setSourcePath: function(value) { +313 this.sourcePath = value; +314 return this; +315 }, +316 +317 /** +318 * Basic getter +319 * @method get +320 * @param {Any} property +321 * @return {Any} value of a property +322 */ +323 get: function(property) { +324 return (property === 'angle') +325 ? this.getAngle() +326 : this[property]; +327 }, +328 +329 /** +330 * @method render +331 * @param {CanvasRenderingContext2D} ctx context to render on +332 * @param {Boolean} noTransform +333 */ +334 render: function(ctx, noTransform) { 335 -336 ctx.save(); -337 -338 var m = this.transformMatrix; -339 if (m) { -340 ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]); -341 } -342 -343 if (!noTransform) { -344 this.transform(ctx); -345 } -346 -347 if (this.stroke) { -348 ctx.lineWidth = this.strokeWidth; -349 ctx.strokeStyle = this.stroke; -350 } -351 -352 if (this.overlayFill) { -353 ctx.fillStyle = this.overlayFill; -354 } -355 else if (this.fill) { -356 ctx.fillStyle = this.fill; +336 // do not render if width or height are zeros +337 if (this.width === 0 || this.height === 0) return; +338 +339 ctx.save(); +340 +341 var m = this.transformMatrix; +342 if (m) { +343 ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]); +344 } +345 +346 if (!noTransform) { +347 this.transform(ctx); +348 } +349 +350 if (this.stroke) { +351 ctx.lineWidth = this.strokeWidth; +352 ctx.strokeStyle = this.stroke; +353 } +354 +355 if (this.overlayFill) { +356 ctx.fillStyle = this.overlayFill; 357 } -358 -359 this._render(ctx, noTransform); -360 -361 if (this.active && !noTransform) { -362 this.drawBorders(ctx); -363 this.hideCorners || this.drawCorners(ctx); -364 } -365 ctx.restore(); -366 }, -367 -368 /** -369 * Returns width of an object -370 * @method getWidth -371 * @return {Number} width value -372 */ -373 getWidth: function() { -374 return this.width * this.scaleX; -375 }, -376 -377 /** -378 * Returns height of an object -379 * @method getHeight -380 * @return {Number} height value -381 */ -382 getHeight: function() { -383 return this.height * this.scaleY; -384 }, -385 -386 /** -387 * Scales an object (equally by x and y) -388 * @method scale -389 * @param value {Number} scale factor -390 * @return {fabric.Object} thisArg -391 * @chainable -392 */ -393 scale: function(value) { -394 this.scaleX = value; -395 this.scaleY = value; -396 return this; -397 }, -398 -399 /** -400 * Scales an object to a given width (scaling by x/y equally) -401 * @method scaleToWidth -402 * @param value {Number} new width value -403 * @return {fabric.Object} thisArg -404 * @chainable -405 */ -406 scaleToWidth: function(value) { -407 return this.scale(value / this.width); -408 }, -409 -410 /** -411 * Scales an object to a given height (scaling by x/y equally) -412 * @method scaleToHeight -413 * @param value {Number} new height value -414 * @return {fabric.Object} thisArg -415 * @chainable -416 */ -417 scaleToHeight: function(value) { -418 return this.scale(value / this.height); -419 }, -420 -421 /** -422 * Sets object opacity -423 * @method setOpacity -424 * @param value {Number} value 0-1 -425 * @return {fabric.Object} thisArg -426 * @chainable -427 */ -428 setOpacity: function(value) { -429 this.set('opacity', value); -430 return this; -431 }, -432 -433 /** -434 * Returns object's angle value -435 * @method getAngle -436 * @return {Number} angle value -437 */ -438 getAngle: function() { -439 return this.theta * 180 / Math.PI; -440 }, -441 -442 /** -443 * Sets object's angle -444 * @method setAngle -445 * @param value {Number} angle value -446 * @return {Object} thisArg -447 */ -448 setAngle: function(value) { -449 this.theta = value / 180 * Math.PI; -450 this.angle = value; -451 return this; -452 }, -453 -454 /** -455 * Sets corner position coordinates based on current angle, width and height. -456 * @method setCoords -457 * return {fabric.Object} thisArg -458 * @chainable -459 */ -460 setCoords: function() { -461 -462 this.currentWidth = this.width * this.scaleX; -463 this.currentHeight = this.height * this.scaleY; +358 else if (this.fill) { +359 ctx.fillStyle = this.fill; +360 } +361 +362 this._render(ctx, noTransform); +363 +364 if (this.active && !noTransform) { +365 this.drawBorders(ctx); +366 this.hideCorners || this.drawCorners(ctx); +367 } +368 ctx.restore(); +369 }, +370 +371 /** +372 * Returns width of an object +373 * @method getWidth +374 * @return {Number} width value +375 */ +376 getWidth: function() { +377 return this.width * this.scaleX; +378 }, +379 +380 /** +381 * Returns height of an object +382 * @method getHeight +383 * @return {Number} height value +384 */ +385 getHeight: function() { +386 return this.height * this.scaleY; +387 }, +388 +389 /** +390 * Scales an object (equally by x and y) +391 * @method scale +392 * @param value {Number} scale factor +393 * @return {fabric.Object} thisArg +394 * @chainable +395 */ +396 scale: function(value) { +397 this.scaleX = value; +398 this.scaleY = value; +399 return this; +400 }, +401 +402 /** +403 * Scales an object to a given width (scaling by x/y equally) +404 * @method scaleToWidth +405 * @param value {Number} new width value +406 * @return {fabric.Object} thisArg +407 * @chainable +408 */ +409 scaleToWidth: function(value) { +410 return this.scale(value / this.width); +411 }, +412 +413 /** +414 * Scales an object to a given height (scaling by x/y equally) +415 * @method scaleToHeight +416 * @param value {Number} new height value +417 * @return {fabric.Object} thisArg +418 * @chainable +419 */ +420 scaleToHeight: function(value) { +421 return this.scale(value / this.height); +422 }, +423 +424 /** +425 * Sets object opacity +426 * @method setOpacity +427 * @param value {Number} value 0-1 +428 * @return {fabric.Object} thisArg +429 * @chainable +430 */ +431 setOpacity: function(value) { +432 this.set('opacity', value); +433 return this; +434 }, +435 +436 /** +437 * Returns object's angle value +438 * @method getAngle +439 * @return {Number} angle value +440 */ +441 getAngle: function() { +442 return this.theta * 180 / Math.PI; +443 }, +444 +445 /** +446 * Sets object's angle +447 * @method setAngle +448 * @param value {Number} angle value +449 * @return {Object} thisArg +450 */ +451 setAngle: function(value) { +452 this.theta = value / 180 * Math.PI; +453 this.angle = value; +454 return this; +455 }, +456 +457 /** +458 * Sets corner position coordinates based on current angle, width and height. +459 * @method setCoords +460 * return {fabric.Object} thisArg +461 * @chainable +462 */ +463 setCoords: function() { 464 -465 this._hypotenuse = Math.sqrt( -466 Math.pow(this.currentWidth / 2, 2) + -467 Math.pow(this.currentHeight / 2, 2)); -468 -469 this._angle = Math.atan(this.currentHeight / this.currentWidth); -470 -471 // offset added for rotate and scale actions -472 var offsetX = Math.cos(this._angle + this.theta) * this._hypotenuse, -473 offsetY = Math.sin(this._angle + this.theta) * this._hypotenuse, -474 theta = this.theta, -475 sinTh = Math.sin(theta), -476 cosTh = Math.cos(theta); -477 -478 var tl = { -479 x: this.left - offsetX, -480 y: this.top - offsetY -481 }; -482 var tr = { -483 x: tl.x + (this.currentWidth * cosTh), -484 y: tl.y + (this.currentWidth * sinTh) -485 }; -486 var br = { -487 x: tr.x - (this.currentHeight * sinTh), -488 y: tr.y + (this.currentHeight * cosTh) -489 }; -490 var bl = { -491 x: tl.x - (this.currentHeight * sinTh), -492 y: tl.y + (this.currentHeight * cosTh) -493 }; -494 var ml = { -495 x: tl.x - (this.currentHeight/2 * sinTh), -496 y: tl.y + (this.currentHeight/2 * cosTh) -497 }; -498 var mt = { -499 x: tl.x + (this.currentWidth/2 * cosTh), -500 y: tl.y + (this.currentWidth/2 * sinTh) -501 }; -502 var mr = { -503 x: tr.x - (this.currentHeight/2 * sinTh), -504 y: tr.y + (this.currentHeight/2 * cosTh) -505 } -506 var mb = { -507 x: bl.x + (this.currentWidth/2 * cosTh), -508 y: bl.y + (this.currentWidth/2 * sinTh) -509 } -510 -511 // clockwise -512 this.oCoords = { tl: tl, tr: tr, br: br, bl: bl, ml: ml, mt: mt, mr: mr, mb: mb }; +465 this.currentWidth = this.width * this.scaleX; +466 this.currentHeight = this.height * this.scaleY; +467 +468 this._hypotenuse = Math.sqrt( +469 Math.pow(this.currentWidth / 2, 2) + +470 Math.pow(this.currentHeight / 2, 2)); +471 +472 this._angle = Math.atan(this.currentHeight / this.currentWidth); +473 +474 // offset added for rotate and scale actions +475 var offsetX = Math.cos(this._angle + this.theta) * this._hypotenuse, +476 offsetY = Math.sin(this._angle + this.theta) * this._hypotenuse, +477 theta = this.theta, +478 sinTh = Math.sin(theta), +479 cosTh = Math.cos(theta); +480 +481 var tl = { +482 x: this.left - offsetX, +483 y: this.top - offsetY +484 }; +485 var tr = { +486 x: tl.x + (this.currentWidth * cosTh), +487 y: tl.y + (this.currentWidth * sinTh) +488 }; +489 var br = { +490 x: tr.x - (this.currentHeight * sinTh), +491 y: tr.y + (this.currentHeight * cosTh) +492 }; +493 var bl = { +494 x: tl.x - (this.currentHeight * sinTh), +495 y: tl.y + (this.currentHeight * cosTh) +496 }; +497 var ml = { +498 x: tl.x - (this.currentHeight/2 * sinTh), +499 y: tl.y + (this.currentHeight/2 * cosTh) +500 }; +501 var mt = { +502 x: tl.x + (this.currentWidth/2 * cosTh), +503 y: tl.y + (this.currentWidth/2 * sinTh) +504 }; +505 var mr = { +506 x: tr.x - (this.currentHeight/2 * sinTh), +507 y: tr.y + (this.currentHeight/2 * cosTh) +508 } +509 var mb = { +510 x: bl.x + (this.currentWidth/2 * cosTh), +511 y: bl.y + (this.currentWidth/2 * sinTh) +512 } 513 -514 // set coordinates of the draggable boxes in the corners used to scale/rotate the image -515 this._setCornerCoords(); +514 // clockwise +515 this.oCoords = { tl: tl, tr: tr, br: br, bl: bl, ml: ml, mt: mt, mr: mr, mb: mb }; 516 -517 return this; -518 }, -519 -520 /** -521 * Draws borders of an object's bounding box. -522 * Requires public properties: width, height -523 * Requires public options: padding, borderColor -524 * @method drawBorders -525 * @param {CanvasRenderingContext2D} ctx Context to draw on -526 * @return {fabric.Object} thisArg -527 * @chainable -528 */ -529 drawBorders: function(ctx) { -530 var o = this.options, -531 padding = o.padding, -532 padding2 = padding * 2; -533 -534 ctx.save(); -535 -536 ctx.globalAlpha = this.isMoving ? o.borderOpacityWhenMoving : 1; -537 ctx.strokeStyle = o.borderColor; +517 // set coordinates of the draggable boxes in the corners used to scale/rotate the image +518 this._setCornerCoords(); +519 +520 return this; +521 }, +522 +523 /** +524 * Draws borders of an object's bounding box. +525 * Requires public properties: width, height +526 * Requires public options: padding, borderColor +527 * @method drawBorders +528 * @param {CanvasRenderingContext2D} ctx Context to draw on +529 * @return {fabric.Object} thisArg +530 * @chainable +531 */ +532 drawBorders: function(ctx) { +533 var o = this.options, +534 padding = o.padding, +535 padding2 = padding * 2; +536 +537 ctx.save(); 538 -539 var scaleX = 1 / (this.scaleX < this.MIN_SCALE_LIMIT ? this.MIN_SCALE_LIMIT : this.scaleX), -540 scaleY = 1 / (this.scaleY < this.MIN_SCALE_LIMIT ? this.MIN_SCALE_LIMIT : this.scaleY); +539 ctx.globalAlpha = this.isMoving ? o.borderOpacityWhenMoving : 1; +540 ctx.strokeStyle = o.borderColor; 541 -542 // could be set by a group, that this object is contained within -543 ctx.lineWidth = 1 / this.borderScaleFactor; +542 var scaleX = 1 / (this.scaleX < this.MIN_SCALE_LIMIT ? this.MIN_SCALE_LIMIT : this.scaleX), +543 scaleY = 1 / (this.scaleY < this.MIN_SCALE_LIMIT ? this.MIN_SCALE_LIMIT : this.scaleY); 544 -545 ctx.scale(scaleX, scaleY); -546 -547 var w = this.getWidth(), -548 h = this.getHeight(); +545 // could be set by a group, that this object is contained within +546 ctx.lineWidth = 1 / this.borderScaleFactor; +547 +548 ctx.scale(scaleX, scaleY); 549 -550 ctx.strokeRect( -551 ~~(-(w / 2) - padding) + 0.5, // offset needed to make lines look sharper -552 ~~(-(h / 2) - padding) + 0.5, -553 ~~(w + padding2), -554 ~~(h + padding2) -555 ); -556 -557 ctx.restore(); -558 return this; -559 }, -560 -561 /** -562 * Draws corners of an object's bounding box. -563 * Requires public properties: width, height, scaleX, scaleY -564 * Requires public options: cornersize, padding -565 * @method drawCorners -566 * @param {CanvasRenderingContext2D} ctx Context to draw on -567 * @return {fabric.Object} thisArg -568 * @chainable -569 */ -570 drawCorners: function(ctx) { -571 var size = this.options.cornersize, -572 size2 = size / 2, -573 padding = this.options.padding, -574 left = -(this.width / 2), -575 top = -(this.height / 2), -576 _left, -577 _top, -578 sizeX = size / this.scaleX, -579 sizeY = size / this.scaleY, -580 scaleOffsetY = (padding + size2) / this.scaleY, -581 scaleOffsetX = (padding + size2) / this.scaleX, -582 scaleOffsetSizeX = (padding + size2 - size) / this.scaleX, -583 scaleOffsetSizeY = (padding + size2 - size) / this.scaleY; -584 -585 ctx.save(); -586 -587 ctx.globalAlpha = this.isMoving ? this.options.borderOpacityWhenMoving : 1; -588 ctx.fillStyle = this.options.cornerColor; +550 var w = this.getWidth(), +551 h = this.getHeight(); +552 +553 ctx.strokeRect( +554 ~~(-(w / 2) - padding) + 0.5, // offset needed to make lines look sharper +555 ~~(-(h / 2) - padding) + 0.5, +556 ~~(w + padding2), +557 ~~(h + padding2) +558 ); +559 +560 ctx.restore(); +561 return this; +562 }, +563 +564 /** +565 * Draws corners of an object's bounding box. +566 * Requires public properties: width, height, scaleX, scaleY +567 * Requires public options: cornersize, padding +568 * @method drawCorners +569 * @param {CanvasRenderingContext2D} ctx Context to draw on +570 * @return {fabric.Object} thisArg +571 * @chainable +572 */ +573 drawCorners: function(ctx) { +574 var size = this.options.cornersize, +575 size2 = size / 2, +576 padding = this.options.padding, +577 left = -(this.width / 2), +578 top = -(this.height / 2), +579 _left, +580 _top, +581 sizeX = size / this.scaleX, +582 sizeY = size / this.scaleY, +583 scaleOffsetY = (padding + size2) / this.scaleY, +584 scaleOffsetX = (padding + size2) / this.scaleX, +585 scaleOffsetSizeX = (padding + size2 - size) / this.scaleX, +586 scaleOffsetSizeY = (padding + size2 - size) / this.scaleY; +587 +588 ctx.save(); 589 -590 // top-left -591 _left = left - scaleOffsetX; -592 _top = top - scaleOffsetY; -593 ctx.fillRect(_left, _top, sizeX, sizeY); -594 -595 // top-right -596 _left = left + this.width - scaleOffsetX; -597 _top = top - scaleOffsetY; -598 ctx.fillRect(_left, _top, sizeX, sizeY); -599 -600 // bottom-left -601 _left = left - scaleOffsetX; -602 _top = top + this.height + scaleOffsetSizeY; -603 ctx.fillRect(_left, _top, sizeX, sizeY); -604 -605 // bottom-right -606 _left = left + this.width + scaleOffsetSizeX; -607 _top = top + this.height + scaleOffsetSizeY; -608 ctx.fillRect(_left, _top, sizeX, sizeY); -609 -610 // middle-top -611 _left = left + this.width/2 - scaleOffsetX; -612 _top = top - scaleOffsetY; -613 ctx.fillRect(_left, _top, sizeX, sizeY); -614 -615 // middle-bottom -616 _left = left + this.width/2 - scaleOffsetX; -617 _top = top + this.height + scaleOffsetSizeY; -618 ctx.fillRect(_left, _top, sizeX, sizeY); -619 -620 // middle-right -621 _left = left + this.width + scaleOffsetSizeX; -622 _top = top + this.height/2 - scaleOffsetY; -623 ctx.fillRect(_left, _top, sizeX, sizeY); -624 -625 // middle-left -626 _left = left - scaleOffsetX; -627 _top = top + this.height/2 - scaleOffsetY; -628 ctx.fillRect(_left, _top, sizeX, sizeY); -629 -630 ctx.restore(); -631 -632 return this; -633 }, -634 -635 /** -636 * Clones an instance -637 * @method clone -638 * @param {Object} options object -639 * @return {fabric.Object} clone of an instance -640 */ -641 clone: function(options) { -642 if (this.constructor.fromObject) { -643 return this.constructor.fromObject(this.toObject(), options); -644 } -645 return new fabric.Object(this.toObject()); -646 }, -647 -648 /** -649 * Creates an instance of fabric.Image out of an object -650 * @method cloneAsImage -651 * @param callback {Function} callback, invoked with an instance as a first argument -652 * @return {fabric.Object} thisArg -653 * @chainable -654 */ -655 cloneAsImage: function(callback) { -656 if (fabric.Image) { -657 var i = new Image(); -658 -659 /** @ignore */ -660 i.onload = function() { -661 if (callback) { -662 callback(new fabric.Image(i), orig); -663 } -664 i = i.onload = null; -665 }; -666 -667 var orig = { -668 angle: this.get('angle'), -669 flipX: this.get('flipX'), -670 flipY: this.get('flipY') -671 }; -672 -673 // normalize angle -674 this.set('angle', 0).set('flipX', false).set('flipY', false); -675 i.src = this.toDataURL(); -676 } -677 return this; -678 }, -679 -680 /** -681 * Converts an object into a data-url-like string -682 * @method toDataURL -683 * @return {String} string of data -684 */ -685 toDataURL: function() { -686 var el = document.createElement('canvas'); -687 -688 el.width = this.getWidth(); -689 el.height = this.getHeight(); +590 ctx.globalAlpha = this.isMoving ? this.options.borderOpacityWhenMoving : 1; +591 ctx.fillStyle = this.options.cornerColor; +592 +593 // top-left +594 _left = left - scaleOffsetX; +595 _top = top - scaleOffsetY; +596 ctx.fillRect(_left, _top, sizeX, sizeY); +597 +598 // top-right +599 _left = left + this.width - scaleOffsetX; +600 _top = top - scaleOffsetY; +601 ctx.fillRect(_left, _top, sizeX, sizeY); +602 +603 // bottom-left +604 _left = left - scaleOffsetX; +605 _top = top + this.height + scaleOffsetSizeY; +606 ctx.fillRect(_left, _top, sizeX, sizeY); +607 +608 // bottom-right +609 _left = left + this.width + scaleOffsetSizeX; +610 _top = top + this.height + scaleOffsetSizeY; +611 ctx.fillRect(_left, _top, sizeX, sizeY); +612 +613 // middle-top +614 _left = left + this.width/2 - scaleOffsetX; +615 _top = top - scaleOffsetY; +616 ctx.fillRect(_left, _top, sizeX, sizeY); +617 +618 // middle-bottom +619 _left = left + this.width/2 - scaleOffsetX; +620 _top = top + this.height + scaleOffsetSizeY; +621 ctx.fillRect(_left, _top, sizeX, sizeY); +622 +623 // middle-right +624 _left = left + this.width + scaleOffsetSizeX; +625 _top = top + this.height/2 - scaleOffsetY; +626 ctx.fillRect(_left, _top, sizeX, sizeY); +627 +628 // middle-left +629 _left = left - scaleOffsetX; +630 _top = top + this.height/2 - scaleOffsetY; +631 ctx.fillRect(_left, _top, sizeX, sizeY); +632 +633 ctx.restore(); +634 +635 return this; +636 }, +637 +638 /** +639 * Clones an instance +640 * @method clone +641 * @param {Object} options object +642 * @return {fabric.Object} clone of an instance +643 */ +644 clone: function(options) { +645 if (this.constructor.fromObject) { +646 return this.constructor.fromObject(this.toObject(), options); +647 } +648 return new fabric.Object(this.toObject()); +649 }, +650 +651 /** +652 * Creates an instance of fabric.Image out of an object +653 * @method cloneAsImage +654 * @param callback {Function} callback, invoked with an instance as a first argument +655 * @return {fabric.Object} thisArg +656 * @chainable +657 */ +658 cloneAsImage: function(callback) { +659 if (fabric.Image) { +660 var i = new Image(); +661 +662 /** @ignore */ +663 i.onload = function() { +664 if (callback) { +665 callback(new fabric.Image(i), orig); +666 } +667 i = i.onload = null; +668 }; +669 +670 var orig = { +671 angle: this.get('angle'), +672 flipX: this.get('flipX'), +673 flipY: this.get('flipY') +674 }; +675 +676 // normalize angle +677 this.set('angle', 0).set('flipX', false).set('flipY', false); +678 i.src = this.toDataURL(); +679 } +680 return this; +681 }, +682 +683 /** +684 * Converts an object into a data-url-like string +685 * @method toDataURL +686 * @return {String} string of data +687 */ +688 toDataURL: function() { +689 var el = document.createElement('canvas'); 690 -691 fabric.util.wrapElement(el, 'div'); -692 -693 var canvas = new fabric.Element(el); -694 canvas.backgroundColor = 'transparent'; -695 canvas.renderAll(); -696 -697 var clone = this.clone(); -698 clone.left = el.width / 2; -699 clone.top = el.height / 2; -700 -701 clone.setActive(false); -702 -703 canvas.add(clone); -704 var data = canvas.toDataURL('png'); +691 el.width = this.getWidth(); +692 el.height = this.getHeight(); +693 +694 fabric.util.wrapElement(el, 'div'); +695 +696 var canvas = new fabric.Element(el); +697 canvas.backgroundColor = 'transparent'; +698 canvas.renderAll(); +699 +700 var clone = this.clone(); +701 clone.left = el.width / 2; +702 clone.top = el.height / 2; +703 +704 clone.setActive(false); 705 -706 canvas.dispose(); -707 canvas = clone = null; -708 return data; -709 }, -710 -711 /** -712 * @method hasStateChanged -713 * @return {Boolean} true if instance' state has changed -714 */ -715 hasStateChanged: function() { -716 return this.stateProperties.some(function(prop) { -717 return this[prop] !== this.originalState[prop]; -718 }, this); -719 }, -720 -721 /** -722 * @method saveState -723 * @return {fabric.Object} thisArg -724 * @chainable -725 */ -726 saveState: function() { -727 this.stateProperties.forEach(function(prop) { -728 this.originalState[prop] = this.get(prop); -729 }, this); -730 return this; -731 }, -732 -733 /** -734 * Returns true if object intersects with an area formed by 2 points -735 * @method intersectsWithRect -736 * @param {Object} selectionTL -737 * @param {Object} selectionBR -738 * @return {Boolean} -739 */ -740 intersectsWithRect: function(selectionTL, selectionBR) { -741 var oCoords = this.oCoords, -742 tl = new fabric.Point(oCoords.tl.x, oCoords.tl.y), -743 tr = new fabric.Point(oCoords.tr.x, oCoords.tr.y), -744 bl = new fabric.Point(oCoords.bl.x, oCoords.bl.y), -745 br = new fabric.Point(oCoords.br.x, oCoords.br.y); -746 -747 var intersection = fabric.Intersection.intersectPolygonRectangle( -748 [tl, tr, br, bl], -749 selectionTL, -750 selectionBR -751 ); -752 return (intersection.status === 'Intersection'); -753 }, -754 -755 /** -756 * Returns true if object intersects with another object -757 * @method intersectsWithObject -758 * @param {Object} other Object to test -759 * @return {Boolean} -760 */ -761 intersectsWithObject: function(other) { -762 // extracts coords -763 function getCoords(oCoords) { -764 return { -765 tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y), -766 tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y), -767 bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y), -768 br: new fabric.Point(oCoords.br.x, oCoords.br.y) -769 } -770 } -771 var thisCoords = getCoords(this.oCoords), -772 otherCoords = getCoords(other.oCoords); -773 var intersection = fabric.Intersection.intersectPolygonPolygon( -774 [thisCoords.tl, thisCoords.tr, thisCoords.br, thisCoords.bl], -775 [otherCoords.tl, otherCoords.tr, otherCoords.br, otherCoords.bl] -776 ); -777 -778 return (intersection.status === 'Intersection'); -779 }, -780 -781 /** -782 * Returns true if object is fully contained within area formed by 2 points -783 * @method isContainedWithinRect -784 * @param {Object} selectionTL -785 * @param {Object} selectionBR -786 * @return {Boolean} -787 */ -788 isContainedWithinRect: function(selectionTL, selectionBR) { -789 var oCoords = this.oCoords, -790 tl = new fabric.Point(oCoords.tl.x, oCoords.tl.y), -791 tr = new fabric.Point(oCoords.tr.x, oCoords.tr.y), -792 bl = new fabric.Point(oCoords.bl.x, oCoords.bl.y), -793 br = new fabric.Point(oCoords.br.x, oCoords.br.y); -794 return tl.x > selectionTL.x -795 && tr.x < selectionBR.x -796 && tl.y > selectionTL.y -797 && bl.y < selectionBR.y; -798 }, -799 -800 /** -801 * @method isType -802 * @param type {String} type to check against -803 * @return {Boolean} true if specified type is identical to the type of instance -804 */ -805 isType: function(type) { -806 return this.type === type; -807 }, -808 -809 /** -810 * Determines which one of the four corners has been clicked -811 * @method _findTargetCorner -812 * @private -813 * @param e {Event} event object -814 * @param offset {Object} canvas offset -815 * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found -816 */ -817 _findTargetCorner: function(e, offset) { -818 var pointer = getPointer(e), -819 ex = pointer.x - offset.left, -820 ey = pointer.y - offset.top, -821 xpoints, -822 lines; -823 -824 for (var i in this.oCoords) { -825 lines = this._getImageLines(this.oCoords[i].corner, i); -826 xpoints = this._findCrossPoints(ex, ey, lines); -827 if (xpoints % 2 == 1 && xpoints != 0) { -828 this.__corner = i; -829 return i; -830 } -831 } -832 return false; -833 }, -834 -835 /** -836 * Helper method to determine how many cross points are between the 4 image edges -837 * and the horizontal line determined by the position of our mouse when clicked on canvas -838 * @method _findCrossPoints -839 * @private -840 * @param ex {Number} x coordinate of the mouse -841 * @param ey {Number} y coordinate of the mouse -842 * @param oCoords {Object} Coordinates of the image being evaluated -843 */ -844 _findCrossPoints: function(ex, ey, oCoords) { -845 var b1, b2, a1, a2, xi, yi, -846 xcount = 0, -847 iLine; -848 -849 for (var lineKey in oCoords) { -850 iLine = oCoords[lineKey]; -851 // optimisation 1: line below dot. no cross -852 if ((iLine.o.y < ey) && (iLine.d.y < ey)) { -853 continue; -854 } -855 // optimisation 2: line above dot. no cross -856 if ((iLine.o.y >= ey) && (iLine.d.y >= ey)) { -857 continue; -858 } -859 // optimisation 3: vertical line case -860 if ((iLine.o.x == iLine.d.x) && (iLine.o.x >= ex)) { -861 xi = iLine.o.x; -862 yi = ey; -863 } -864 // calculate the intersection point -865 else { -866 b1 = 0; -867 b2 = (iLine.d.y-iLine.o.y)/(iLine.d.x-iLine.o.x); -868 a1 = ey-b1*ex; -869 a2 = iLine.o.y-b2*iLine.o.x; -870 -871 xi = - (a1-a2)/(b1-b2); -872 yi = a1+b1*xi; -873 } -874 // dont count xi < ex cases -875 if (xi >= ex) { -876 xcount += 1; -877 } -878 // optimisation 4: specific for square images -879 if (xcount == 2) { -880 break; -881 } -882 } -883 return xcount; -884 }, -885 -886 /** -887 * Method that returns an object with the image lines in it given the coordinates of the corners -888 * @method _getImageLines -889 * @private -890 * @param oCoords {Object} coordinates of the image corners -891 */ -892 _getImageLines: function(oCoords, i) { -893 return { -894 topline: { -895 o: oCoords.tl, -896 d: oCoords.tr -897 }, -898 rightline: { -899 o: oCoords.tr, -900 d: oCoords.br -901 }, -902 bottomline: { -903 o: oCoords.br, -904 d: oCoords.bl -905 }, -906 leftline: { -907 o: oCoords.bl, -908 d: oCoords.tl -909 } -910 } -911 }, -912 -913 /** -914 * Sets the coordinates of the draggable boxes in the corners of -915 * the image used to scale/rotate it. -916 * @method _setCornerCoords -917 * @private -918 */ -919 _setCornerCoords: function() { -920 var coords = this.oCoords, -921 theta = this.theta, -922 cosOffset = this.cornersize * /*this.scaleX * */ Math.cos(theta), -923 sinOffset = this.cornersize * /*this.scaleY * */ Math.sin(theta), -924 size2 = this.cornersize / 2, -925 size2x = size2 - sinOffset, -926 size2y = size2, -927 corner; -928 -929 coords.tl.x -= size2x; -930 coords.tl.y -= size2y; +706 canvas.add(clone); +707 var data = canvas.toDataURL('png'); +708 +709 canvas.dispose(); +710 canvas = clone = null; +711 return data; +712 }, +713 +714 /** +715 * @method hasStateChanged +716 * @return {Boolean} true if instance' state has changed +717 */ +718 hasStateChanged: function() { +719 return this.stateProperties.some(function(prop) { +720 return this[prop] !== this.originalState[prop]; +721 }, this); +722 }, +723 +724 /** +725 * @method saveState +726 * @return {fabric.Object} thisArg +727 * @chainable +728 */ +729 saveState: function() { +730 this.stateProperties.forEach(function(prop) { +731 this.originalState[prop] = this.get(prop); +732 }, this); +733 return this; +734 }, +735 +736 /** +737 * Returns true if object intersects with an area formed by 2 points +738 * @method intersectsWithRect +739 * @param {Object} selectionTL +740 * @param {Object} selectionBR +741 * @return {Boolean} +742 */ +743 intersectsWithRect: function(selectionTL, selectionBR) { +744 var oCoords = this.oCoords, +745 tl = new fabric.Point(oCoords.tl.x, oCoords.tl.y), +746 tr = new fabric.Point(oCoords.tr.x, oCoords.tr.y), +747 bl = new fabric.Point(oCoords.bl.x, oCoords.bl.y), +748 br = new fabric.Point(oCoords.br.x, oCoords.br.y); +749 +750 var intersection = fabric.Intersection.intersectPolygonRectangle( +751 [tl, tr, br, bl], +752 selectionTL, +753 selectionBR +754 ); +755 return (intersection.status === 'Intersection'); +756 }, +757 +758 /** +759 * Returns true if object intersects with another object +760 * @method intersectsWithObject +761 * @param {Object} other Object to test +762 * @return {Boolean} +763 */ +764 intersectsWithObject: function(other) { +765 // extracts coords +766 function getCoords(oCoords) { +767 return { +768 tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y), +769 tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y), +770 bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y), +771 br: new fabric.Point(oCoords.br.x, oCoords.br.y) +772 } +773 } +774 var thisCoords = getCoords(this.oCoords), +775 otherCoords = getCoords(other.oCoords); +776 var intersection = fabric.Intersection.intersectPolygonPolygon( +777 [thisCoords.tl, thisCoords.tr, thisCoords.br, thisCoords.bl], +778 [otherCoords.tl, otherCoords.tr, otherCoords.br, otherCoords.bl] +779 ); +780 +781 return (intersection.status === 'Intersection'); +782 }, +783 +784 /** +785 * Returns true if object is fully contained within area formed by 2 points +786 * @method isContainedWithinRect +787 * @param {Object} selectionTL +788 * @param {Object} selectionBR +789 * @return {Boolean} +790 */ +791 isContainedWithinRect: function(selectionTL, selectionBR) { +792 var oCoords = this.oCoords, +793 tl = new fabric.Point(oCoords.tl.x, oCoords.tl.y), +794 tr = new fabric.Point(oCoords.tr.x, oCoords.tr.y), +795 bl = new fabric.Point(oCoords.bl.x, oCoords.bl.y), +796 br = new fabric.Point(oCoords.br.x, oCoords.br.y); +797 return tl.x > selectionTL.x +798 && tr.x < selectionBR.x +799 && tl.y > selectionTL.y +800 && bl.y < selectionBR.y; +801 }, +802 +803 /** +804 * @method isType +805 * @param type {String} type to check against +806 * @return {Boolean} true if specified type is identical to the type of instance +807 */ +808 isType: function(type) { +809 return this.type === type; +810 }, +811 +812 /** +813 * Determines which one of the four corners has been clicked +814 * @method _findTargetCorner +815 * @private +816 * @param e {Event} event object +817 * @param offset {Object} canvas offset +818 * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found +819 */ +820 _findTargetCorner: function(e, offset) { +821 var pointer = getPointer(e), +822 ex = pointer.x - offset.left, +823 ey = pointer.y - offset.top, +824 xpoints, +825 lines; +826 +827 for (var i in this.oCoords) { +828 lines = this._getImageLines(this.oCoords[i].corner, i); +829 xpoints = this._findCrossPoints(ex, ey, lines); +830 if (xpoints % 2 == 1 && xpoints != 0) { +831 this.__corner = i; +832 return i; +833 } +834 } +835 return false; +836 }, +837 +838 /** +839 * Helper method to determine how many cross points are between the 4 image edges +840 * and the horizontal line determined by the position of our mouse when clicked on canvas +841 * @method _findCrossPoints +842 * @private +843 * @param ex {Number} x coordinate of the mouse +844 * @param ey {Number} y coordinate of the mouse +845 * @param oCoords {Object} Coordinates of the image being evaluated +846 */ +847 _findCrossPoints: function(ex, ey, oCoords) { +848 var b1, b2, a1, a2, xi, yi, +849 xcount = 0, +850 iLine; +851 +852 for (var lineKey in oCoords) { +853 iLine = oCoords[lineKey]; +854 // optimisation 1: line below dot. no cross +855 if ((iLine.o.y < ey) && (iLine.d.y < ey)) { +856 continue; +857 } +858 // optimisation 2: line above dot. no cross +859 if ((iLine.o.y >= ey) && (iLine.d.y >= ey)) { +860 continue; +861 } +862 // optimisation 3: vertical line case +863 if ((iLine.o.x == iLine.d.x) && (iLine.o.x >= ex)) { +864 xi = iLine.o.x; +865 yi = ey; +866 } +867 // calculate the intersection point +868 else { +869 b1 = 0; +870 b2 = (iLine.d.y-iLine.o.y)/(iLine.d.x-iLine.o.x); +871 a1 = ey-b1*ex; +872 a2 = iLine.o.y-b2*iLine.o.x; +873 +874 xi = - (a1-a2)/(b1-b2); +875 yi = a1+b1*xi; +876 } +877 // dont count xi < ex cases +878 if (xi >= ex) { +879 xcount += 1; +880 } +881 // optimisation 4: specific for square images +882 if (xcount == 2) { +883 break; +884 } +885 } +886 return xcount; +887 }, +888 +889 /** +890 * Method that returns an object with the image lines in it given the coordinates of the corners +891 * @method _getImageLines +892 * @private +893 * @param oCoords {Object} coordinates of the image corners +894 */ +895 _getImageLines: function(oCoords, i) { +896 return { +897 topline: { +898 o: oCoords.tl, +899 d: oCoords.tr +900 }, +901 rightline: { +902 o: oCoords.tr, +903 d: oCoords.br +904 }, +905 bottomline: { +906 o: oCoords.br, +907 d: oCoords.bl +908 }, +909 leftline: { +910 o: oCoords.bl, +911 d: oCoords.tl +912 } +913 } +914 }, +915 +916 /** +917 * Sets the coordinates of the draggable boxes in the corners of +918 * the image used to scale/rotate it. +919 * @method _setCornerCoords +920 * @private +921 */ +922 _setCornerCoords: function() { +923 var coords = this.oCoords, +924 theta = this.theta, +925 cosOffset = this.cornersize * /*this.scaleX * */ Math.cos(theta), +926 sinOffset = this.cornersize * /*this.scaleY * */ Math.sin(theta), +927 size2 = this.cornersize / 2, +928 size2x = size2 - sinOffset, +929 size2y = size2, +930 corner; 931 -932 coords.tl.corner = { -933 tl: { -934 x: coords.tl.x, -935 y: coords.tl.y -936 }, -937 tr: { -938 x: coords.tl.x + cosOffset, -939 y: coords.tl.y + sinOffset -940 }, -941 bl: { -942 x: coords.tl.x - sinOffset, -943 y: coords.tl.y + cosOffset -944 } -945 }; -946 coords.tl.corner.br = { -947 x: coords.tl.corner.tr.x - sinOffset, -948 y: coords.tl.corner.tr.y + cosOffset -949 }; -950 -951 coords.tl.x += size2x; -952 coords.tl.y += size2y; +932 coords.tl.x -= size2x; +933 coords.tl.y -= size2y; +934 +935 coords.tl.corner = { +936 tl: { +937 x: coords.tl.x, +938 y: coords.tl.y +939 }, +940 tr: { +941 x: coords.tl.x + cosOffset, +942 y: coords.tl.y + sinOffset +943 }, +944 bl: { +945 x: coords.tl.x - sinOffset, +946 y: coords.tl.y + cosOffset +947 } +948 }; +949 coords.tl.corner.br = { +950 x: coords.tl.corner.tr.x - sinOffset, +951 y: coords.tl.corner.tr.y + cosOffset +952 }; 953 -954 coords.tr.x += size2; -955 coords.tr.y -= size2; -956 coords.tr.corner = { -957 tl: { -958 x: coords.tr.x - cosOffset, -959 y: coords.tr.y - sinOffset -960 }, -961 tr: { -962 x: coords.tr.x, -963 y: coords.tr.y -964 }, -965 br: { -966 x: coords.tr.x - sinOffset, -967 y: coords.tr.y + cosOffset -968 } -969 }; -970 coords.tr.corner.bl = { -971 x: coords.tr.corner.tl.x - sinOffset, -972 y: coords.tr.corner.tl.y + cosOffset -973 }; -974 coords.tr.x -= size2; -975 coords.tr.y += size2; -976 -977 coords.bl.x -= size2; -978 coords.bl.y += size2; -979 coords.bl.corner = { -980 tl: { -981 x: coords.bl.x + sinOffset, -982 y: coords.bl.y - cosOffset -983 }, -984 bl: { -985 x: coords.bl.x, -986 y: coords.bl.y -987 }, -988 br: { -989 x: coords.bl.x + cosOffset, -990 y: coords.bl.y + sinOffset -991 } -992 }; -993 coords.bl.corner.tr = { -994 x: coords.bl.corner.br.x + sinOffset, -995 y: coords.bl.corner.br.y - cosOffset -996 }; -997 coords.bl.x += size2; -998 coords.bl.y -= size2; -999 -1000 coords.br.x += size2; -1001 coords.br.y += size2; -1002 coords.br.corner = { -1003 tr: { -1004 x: coords.br.x + sinOffset, -1005 y: coords.br.y - cosOffset -1006 }, -1007 bl: { -1008 x: coords.br.x - cosOffset, -1009 y: coords.br.y - sinOffset -1010 }, -1011 br: { -1012 x: coords.br.x, -1013 y: coords.br.y -1014 } -1015 }; -1016 coords.br.corner.tl = { -1017 x: coords.br.corner.bl.x + sinOffset, -1018 y: coords.br.corner.bl.y - cosOffset -1019 }; -1020 coords.br.x -= size2; -1021 coords.br.y -= size2; -1022 -1023 -1024 coords.ml.x -= size2; -1025 coords.ml.y -= size2; -1026 coords.ml.corner = { -1027 tl: { -1028 x: coords.ml.x, -1029 y: coords.ml.y -1030 }, -1031 tr: { -1032 x: coords.ml.x + cosOffset, -1033 y: coords.ml.y + sinOffset -1034 }, -1035 bl: { -1036 x: coords.ml.x - sinOffset, -1037 y: coords.ml.y + cosOffset -1038 } -1039 }; -1040 coords.ml.corner.br = { -1041 x: coords.ml.corner.tr.x - sinOffset, -1042 y: coords.ml.corner.tr.y + cosOffset -1043 }; -1044 coords.ml.x += size2; -1045 coords.ml.y += size2; -1046 -1047 coords.mt.x -= size2; -1048 coords.mt.y -= size2; -1049 coords.mt.corner = { -1050 tl: { -1051 x: coords.mt.x, -1052 y: coords.mt.y -1053 }, -1054 tr: { -1055 x: coords.mt.x + cosOffset, -1056 y: coords.mt.y + sinOffset -1057 }, -1058 bl: { -1059 x: coords.mt.x - sinOffset, -1060 y: coords.mt.y + cosOffset -1061 } -1062 }; -1063 coords.mt.corner.br = { -1064 x: coords.mt.corner.tr.x - sinOffset, -1065 y: coords.mt.corner.tr.y + cosOffset -1066 }; -1067 coords.mt.x += size2; -1068 coords.mt.y += size2; -1069 -1070 coords.mr.x -= size2; -1071 coords.mr.y -= size2; -1072 coords.mr.corner = { -1073 tl: { -1074 x: coords.mr.x, -1075 y: coords.mr.y -1076 }, -1077 tr: { -1078 x: coords.mr.x + cosOffset, -1079 y: coords.mr.y + sinOffset -1080 }, -1081 bl: { -1082 x: coords.mr.x - sinOffset, -1083 y: coords.mr.y + cosOffset -1084 } -1085 }; -1086 coords.mr.corner.br = { -1087 x: coords.mr.corner.tr.x - sinOffset, -1088 y: coords.mr.corner.tr.y + cosOffset -1089 }; -1090 coords.mr.x += size2; -1091 coords.mr.y += size2; -1092 -1093 coords.mb.x -= size2; -1094 coords.mb.y -= size2; -1095 coords.mb.corner = { -1096 tl: { -1097 x: coords.mb.x, -1098 y: coords.mb.y -1099 }, -1100 tr: { -1101 x: coords.mb.x + cosOffset, -1102 y: coords.mb.y + sinOffset -1103 }, -1104 bl: { -1105 x: coords.mb.x - sinOffset, -1106 y: coords.mb.y + cosOffset -1107 } -1108 }; -1109 coords.mb.corner.br = { -1110 x: coords.mb.corner.tr.x - sinOffset, -1111 y: coords.mb.corner.tr.y + cosOffset -1112 }; -1113 -1114 coords.mb.x += size2; -1115 coords.mb.y += size2; +954 coords.tl.x += size2x; +955 coords.tl.y += size2y; +956 +957 coords.tr.x += size2; +958 coords.tr.y -= size2; +959 coords.tr.corner = { +960 tl: { +961 x: coords.tr.x - cosOffset, +962 y: coords.tr.y - sinOffset +963 }, +964 tr: { +965 x: coords.tr.x, +966 y: coords.tr.y +967 }, +968 br: { +969 x: coords.tr.x - sinOffset, +970 y: coords.tr.y + cosOffset +971 } +972 }; +973 coords.tr.corner.bl = { +974 x: coords.tr.corner.tl.x - sinOffset, +975 y: coords.tr.corner.tl.y + cosOffset +976 }; +977 coords.tr.x -= size2; +978 coords.tr.y += size2; +979 +980 coords.bl.x -= size2; +981 coords.bl.y += size2; +982 coords.bl.corner = { +983 tl: { +984 x: coords.bl.x + sinOffset, +985 y: coords.bl.y - cosOffset +986 }, +987 bl: { +988 x: coords.bl.x, +989 y: coords.bl.y +990 }, +991 br: { +992 x: coords.bl.x + cosOffset, +993 y: coords.bl.y + sinOffset +994 } +995 }; +996 coords.bl.corner.tr = { +997 x: coords.bl.corner.br.x + sinOffset, +998 y: coords.bl.corner.br.y - cosOffset +999 }; +1000 coords.bl.x += size2; +1001 coords.bl.y -= size2; +1002 +1003 coords.br.x += size2; +1004 coords.br.y += size2; +1005 coords.br.corner = { +1006 tr: { +1007 x: coords.br.x + sinOffset, +1008 y: coords.br.y - cosOffset +1009 }, +1010 bl: { +1011 x: coords.br.x - cosOffset, +1012 y: coords.br.y - sinOffset +1013 }, +1014 br: { +1015 x: coords.br.x, +1016 y: coords.br.y +1017 } +1018 }; +1019 coords.br.corner.tl = { +1020 x: coords.br.corner.bl.x + sinOffset, +1021 y: coords.br.corner.bl.y - cosOffset +1022 }; +1023 coords.br.x -= size2; +1024 coords.br.y -= size2; +1025 +1026 +1027 coords.ml.x -= size2; +1028 coords.ml.y -= size2; +1029 coords.ml.corner = { +1030 tl: { +1031 x: coords.ml.x, +1032 y: coords.ml.y +1033 }, +1034 tr: { +1035 x: coords.ml.x + cosOffset, +1036 y: coords.ml.y + sinOffset +1037 }, +1038 bl: { +1039 x: coords.ml.x - sinOffset, +1040 y: coords.ml.y + cosOffset +1041 } +1042 }; +1043 coords.ml.corner.br = { +1044 x: coords.ml.corner.tr.x - sinOffset, +1045 y: coords.ml.corner.tr.y + cosOffset +1046 }; +1047 coords.ml.x += size2; +1048 coords.ml.y += size2; +1049 +1050 coords.mt.x -= size2; +1051 coords.mt.y -= size2; +1052 coords.mt.corner = { +1053 tl: { +1054 x: coords.mt.x, +1055 y: coords.mt.y +1056 }, +1057 tr: { +1058 x: coords.mt.x + cosOffset, +1059 y: coords.mt.y + sinOffset +1060 }, +1061 bl: { +1062 x: coords.mt.x - sinOffset, +1063 y: coords.mt.y + cosOffset +1064 } +1065 }; +1066 coords.mt.corner.br = { +1067 x: coords.mt.corner.tr.x - sinOffset, +1068 y: coords.mt.corner.tr.y + cosOffset +1069 }; +1070 coords.mt.x += size2; +1071 coords.mt.y += size2; +1072 +1073 coords.mr.x -= size2; +1074 coords.mr.y -= size2; +1075 coords.mr.corner = { +1076 tl: { +1077 x: coords.mr.x, +1078 y: coords.mr.y +1079 }, +1080 tr: { +1081 x: coords.mr.x + cosOffset, +1082 y: coords.mr.y + sinOffset +1083 }, +1084 bl: { +1085 x: coords.mr.x - sinOffset, +1086 y: coords.mr.y + cosOffset +1087 } +1088 }; +1089 coords.mr.corner.br = { +1090 x: coords.mr.corner.tr.x - sinOffset, +1091 y: coords.mr.corner.tr.y + cosOffset +1092 }; +1093 coords.mr.x += size2; +1094 coords.mr.y += size2; +1095 +1096 coords.mb.x -= size2; +1097 coords.mb.y -= size2; +1098 coords.mb.corner = { +1099 tl: { +1100 x: coords.mb.x, +1101 y: coords.mb.y +1102 }, +1103 tr: { +1104 x: coords.mb.x + cosOffset, +1105 y: coords.mb.y + sinOffset +1106 }, +1107 bl: { +1108 x: coords.mb.x - sinOffset, +1109 y: coords.mb.y + cosOffset +1110 } +1111 }; +1112 coords.mb.corner.br = { +1113 x: coords.mb.corner.tr.x - sinOffset, +1114 y: coords.mb.corner.tr.y + cosOffset +1115 }; 1116 -1117 corner = coords.mb.corner; -1118 -1119 corner.tl.x -= size2; -1120 corner.tl.y -= size2; -1121 corner.tr.x -= size2; -1122 corner.tr.y -= size2; -1123 corner.br.x -= size2; -1124 corner.br.y -= size2; -1125 corner.bl.x -= size2; -1126 corner.bl.y -= size2; -1127 }, -1128 -1129 /** -1130 * Makes object's color grayscale -1131 * @method toGrayscale -1132 * @return {fabric.Object} thisArg -1133 */ -1134 toGrayscale: function() { -1135 var fillValue = this.get('fill'); -1136 if (fillValue) { -1137 this.set('overlayFill', new fabric.Color(fillValue).toGrayscale().toRgb()); -1138 } -1139 return this; -1140 }, -1141 -1142 /** -1143 * @method complexity -1144 * @return {Number} -1145 */ -1146 complexity: function() { -1147 return 0; -1148 }, -1149 -1150 /** -1151 * @method getCenter -1152 * @return {Object} object with `x`, `y` properties corresponding to path center coordinates -1153 */ -1154 getCenter: function() { -1155 return { -1156 x: this.get('left') + this.width / 2, -1157 y: this.get('top') + this.height / 2 -1158 }; -1159 }, -1160 -1161 /** -1162 * @method straighten -1163 * @return {fabric.Object} thisArg -1164 * @chainable -1165 */ -1166 straighten: function() { -1167 var angle = this._getAngleValueForStraighten(); -1168 this.setAngle(angle); -1169 return this; -1170 }, -1171 -1172 /** -1173 * @method fxStraighten -1174 * @param {Object} callbacks -1175 * - onComplete: invoked on completion -1176 * - onChange: invoked on every step of animation -1177 * -1178 * @return {fabric.Object} thisArg -1179 * @chainable -1180 */ -1181 fxStraighten: function(callbacks) { -1182 callbacks = callbacks || { }; -1183 -1184 var empty = function() { }, -1185 onComplete = callbacks.onComplete || empty, -1186 onChange = callbacks.onChange || empty, -1187 _this = this; -1188 -1189 fabric.util.animate({ -1190 startValue: this.get('angle'), -1191 endValue: this._getAngleValueForStraighten(), -1192 duration: this.FX_DURATION, -1193 onChange: function(value) { -1194 _this.setAngle(value); -1195 onChange(); -1196 }, -1197 onComplete: function() { -1198 _this.setCoords(); -1199 onComplete(); -1200 }, -1201 onStart: function() { -1202 _this.setActive(false); -1203 } -1204 }); -1205 -1206 return this; -1207 }, -1208 -1209 /** -1210 * @method fxRemove -1211 * @param {Object} callbacks -1212 * @return {fabric.Object} thisArg -1213 * @chainable -1214 */ -1215 fxRemove: function(callbacks) { -1216 callbacks || (callbacks = { }); -1217 -1218 var empty = function() { }, -1219 onComplete = callbacks.onComplete || empty, -1220 onChange = callbacks.onChange || empty, -1221 _this = this; -1222 -1223 fabric.util.animate({ -1224 startValue: this.get('opacity'), -1225 endValue: 0, -1226 duration: this.FX_DURATION, -1227 onChange: function(value) { -1228 _this.set('opacity', value); -1229 onChange(); -1230 }, -1231 onComplete: onComplete, -1232 onStart: function() { -1233 _this.setActive(false); -1234 } -1235 }); -1236 -1237 return this; -1238 }, -1239 -1240 /** -1241 * @method _getAngleValueForStraighten -1242 * @return {Number} angle value -1243 * @private -1244 */ -1245 _getAngleValueForStraighten: function() { -1246 var angle = this.get('angle'); -1247 -1248 // TODO (kangax): can this be simplified? -1249 -1250 if (angle > -225 && angle <= -135) { return -180; } -1251 else if (angle > -135 && angle <= -45) { return -90; } -1252 else if (angle > -45 && angle <= 45) { return 0; } -1253 else if (angle > 45 && angle <= 135) { return 90; } -1254 else if (angle > 135 && angle <= 225 ) { return 180; } -1255 else if (angle > 225 && angle <= 315) { return 270; } -1256 else if (angle > 315) { return 360; } -1257 -1258 return 0; -1259 }, -1260 -1261 /** -1262 * Returns a JSON representation of an instance -1263 * @method toJSON -1264 * @return {String} json -1265 */ -1266 toJSON: function() { -1267 // delegate, not alias -1268 return this.toObject(); -1269 } -1270 }); -1271 -1272 /** -1273 * @alias rotate -> setAngle -1274 */ -1275 fabric.Object.prototype.rotate = fabric.Object.prototype.setAngle; -1276 })(); \ No newline at end of file +1117 coords.mb.x += size2; +1118 coords.mb.y += size2; +1119 +1120 corner = coords.mb.corner; +1121 +1122 corner.tl.x -= size2; +1123 corner.tl.y -= size2; +1124 corner.tr.x -= size2; +1125 corner.tr.y -= size2; +1126 corner.br.x -= size2; +1127 corner.br.y -= size2; +1128 corner.bl.x -= size2; +1129 corner.bl.y -= size2; +1130 }, +1131 +1132 /** +1133 * Makes object's color grayscale +1134 * @method toGrayscale +1135 * @return {fabric.Object} thisArg +1136 */ +1137 toGrayscale: function() { +1138 var fillValue = this.get('fill'); +1139 if (fillValue) { +1140 this.set('overlayFill', new fabric.Color(fillValue).toGrayscale().toRgb()); +1141 } +1142 return this; +1143 }, +1144 +1145 /** +1146 * @method complexity +1147 * @return {Number} +1148 */ +1149 complexity: function() { +1150 return 0; +1151 }, +1152 +1153 /** +1154 * @method getCenter +1155 * @return {Object} object with `x`, `y` properties corresponding to path center coordinates +1156 */ +1157 getCenter: function() { +1158 return { +1159 x: this.get('left') + this.width / 2, +1160 y: this.get('top') + this.height / 2 +1161 }; +1162 }, +1163 +1164 /** +1165 * @method straighten +1166 * @return {fabric.Object} thisArg +1167 * @chainable +1168 */ +1169 straighten: function() { +1170 var angle = this._getAngleValueForStraighten(); +1171 this.setAngle(angle); +1172 return this; +1173 }, +1174 +1175 /** +1176 * @method fxStraighten +1177 * @param {Object} callbacks +1178 * - onComplete: invoked on completion +1179 * - onChange: invoked on every step of animation +1180 * +1181 * @return {fabric.Object} thisArg +1182 * @chainable +1183 */ +1184 fxStraighten: function(callbacks) { +1185 callbacks = callbacks || { }; +1186 +1187 var empty = function() { }, +1188 onComplete = callbacks.onComplete || empty, +1189 onChange = callbacks.onChange || empty, +1190 _this = this; +1191 +1192 fabric.util.animate({ +1193 startValue: this.get('angle'), +1194 endValue: this._getAngleValueForStraighten(), +1195 duration: this.FX_DURATION, +1196 onChange: function(value) { +1197 _this.setAngle(value); +1198 onChange(); +1199 }, +1200 onComplete: function() { +1201 _this.setCoords(); +1202 onComplete(); +1203 }, +1204 onStart: function() { +1205 _this.setActive(false); +1206 } +1207 }); +1208 +1209 return this; +1210 }, +1211 +1212 /** +1213 * @method fxRemove +1214 * @param {Object} callbacks +1215 * @return {fabric.Object} thisArg +1216 * @chainable +1217 */ +1218 fxRemove: function(callbacks) { +1219 callbacks || (callbacks = { }); +1220 +1221 var empty = function() { }, +1222 onComplete = callbacks.onComplete || empty, +1223 onChange = callbacks.onChange || empty, +1224 _this = this; +1225 +1226 fabric.util.animate({ +1227 startValue: this.get('opacity'), +1228 endValue: 0, +1229 duration: this.FX_DURATION, +1230 onChange: function(value) { +1231 _this.set('opacity', value); +1232 onChange(); +1233 }, +1234 onComplete: onComplete, +1235 onStart: function() { +1236 _this.setActive(false); +1237 } +1238 }); +1239 +1240 return this; +1241 }, +1242 +1243 /** +1244 * @method _getAngleValueForStraighten +1245 * @return {Number} angle value +1246 * @private +1247 */ +1248 _getAngleValueForStraighten: function() { +1249 var angle = this.get('angle'); +1250 +1251 // TODO (kangax): can this be simplified? +1252 +1253 if (angle > -225 && angle <= -135) { return -180; } +1254 else if (angle > -135 && angle <= -45) { return -90; } +1255 else if (angle > -45 && angle <= 45) { return 0; } +1256 else if (angle > 45 && angle <= 135) { return 90; } +1257 else if (angle > 135 && angle <= 225 ) { return 180; } +1258 else if (angle > 225 && angle <= 315) { return 270; } +1259 else if (angle > 315) { return 360; } +1260 +1261 return 0; +1262 }, +1263 +1264 /** +1265 * Returns a JSON representation of an instance +1266 * @method toJSON +1267 * @return {String} json +1268 */ +1269 toJSON: function() { +1270 // delegate, not alias +1271 return this.toObject(); +1272 } +1273 }); +1274 +1275 /** +1276 * @alias rotate -> setAngle +1277 */ +1278 fabric.Object.prototype.rotate = fabric.Object.prototype.setAngle; +1279 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_parser.js.html b/docs/symbols/src/src_parser.js.html index b11a79b8..2e9ae591 100644 --- a/docs/symbols/src/src_parser.js.html +++ b/docs/symbols/src/src_parser.js.html @@ -7,397 +7,399 @@ .line {border-right: 1px dotted #666; color: #666; font-style: normal;} 
  1 (function(){
   2   
-  3   /** @name fabric */
-  4   
-  5   var fabric = this.fabric || (this.fabric = { }),
-  6       extend = fabric.util.object.extend,
-  7       capitalize = fabric.util.string.capitalize,
-  8       clone = fabric.util.object.clone;
-  9   
- 10   var attributesMap = {
- 11     'cx':             'left',
- 12     'x':              'left',
- 13     'cy':             'top',
- 14     'y':              'top',
- 15     'r':              'radius',
- 16     'fill-opacity':   'opacity',
- 17     'fill-rule':      'fillRule',
- 18     'stroke-width':   'strokeWidth',
- 19     'transform':      'transformMatrix'
- 20   };
- 21   
- 22   /**
- 23    * Returns an object of attributes' name/value, given element and an array of attribute names;
- 24    * Parses parent "g" nodes recursively upwards.
- 25    *
- 26    * @static
- 27    * @memberOf fabric
- 28    * @method parseAttributes
- 29    * @param {DOMElement} element Element to parse
- 30    * @param {Array} attributes Array of attributes to parse
- 31    * @return {Object} object containing parsed attributes' names/values
- 32    */
- 33   function parseAttributes(element, attributes) {
- 34     
- 35     if (!element) {
- 36       return;
- 37     }
- 38     
- 39     var value, 
- 40         parsed, 
- 41         parentAttributes = { };
- 42 
- 43     // if there's a parent container (`g` node), parse its attributes recursively upwards
- 44     if (element.parentNode && /^g$/i.test(element.parentNode.nodeName)) {
- 45       parentAttributes = fabric.parseAttributes(element.parentNode, attributes);
- 46     }
- 47     
- 48     var ownAttributes = attributes.reduce(function(memo, attr) {
- 49       value = element.getAttribute(attr);
- 50       parsed = parseFloat(value);
- 51       if (value) {        
- 52         // "normalize" attribute values
- 53         if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
- 54           value = '';
- 55         }
- 56         if (attr === 'fill-rule') {
- 57           value = (value === 'evenodd') ? 'destination-over' : value;
- 58         }
- 59         if (attr === 'transform') {
- 60           value = fabric.parseTransformAttribute(value);
- 61         }
- 62         // transform attribute names
- 63         if (attr in attributesMap) {
- 64           attr = attributesMap[attr];
- 65         }
- 66         memo[attr] = isNaN(parsed) ? value : parsed;
- 67       }
- 68       return memo;
- 69     }, { });
- 70     
- 71     // add values parsed from style
- 72     // TODO (kangax): check the presedence of values from the style attribute
- 73     ownAttributes = extend(fabric.parseStyleAttribute(element), ownAttributes);
- 74     return extend(parentAttributes, ownAttributes);
- 75   };
- 76   
- 77   /**
- 78    * @static
- 79    * @function
- 80    * @memberOf fabric
- 81    * @method parseTransformAttribute
- 82    * @param attributeValue {String} string containing attribute value
- 83    * @return {Array} array of 6 elements representing transformation matrix
- 84    */
- 85   fabric.parseTransformAttribute = (function() {
- 86     function rotateMatrix(matrix, args) {
- 87       var angle = args[0];
- 88       
- 89       matrix[0] = Math.cos(angle);
- 90       matrix[1] = Math.sin(angle);
- 91       matrix[2] = -Math.sin(angle);
- 92       matrix[3] = Math.cos(angle);
- 93     }
- 94     
- 95     function scaleMatrix(matrix, args) {
- 96       var multiplierX = args[0],
- 97           multiplierY = (args.length === 2) ? args[1] : args[0];
- 98 
- 99       matrix[0] = multiplierX;
-100       matrix[3] = multiplierY;
-101     }
-102     
-103     function skewXMatrix(matrix, args) {
-104       matrix[2] = args[0];
-105     }
-106     
-107     function skewYMatrix(matrix, args) {
-108       matrix[1] = args[0];
-109     }
-110     
-111     function translateMatrix(matrix, args) {
-112       matrix[4] = args[0];
-113       if (args.length === 2) {
-114         matrix[5] = args[1];
-115       }
-116     }
-117     
-118     // identity matrix
-119     var iMatrix = [
-120           1, // a
-121           0, // b
-122           0, // c
-123           1, // d
-124           0, // e
-125           0  // f
-126         ],
-127     
-128         // == begin transform regexp
-129         number = '(?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)',
-130         comma_wsp = '(?:\\s+,?\\s*|,\\s*)',
-131         
-132         skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))',
-133         skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))',
-134         rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + ')' + comma_wsp + '(' + number + '))?\\s*\\))',
-135         scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + '))?\\s*\\))',
-136         translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + '))?\\s*\\))',
-137         
-138         matrix = '(?:(matrix)\\s*\\(\\s*' + 
-139                   '(' + number + ')' + comma_wsp + 
-140                   '(' + number + ')' + comma_wsp + 
-141                   '(' + number + ')' + comma_wsp +
-142                   '(' + number + ')' + comma_wsp +
-143                   '(' + number + ')' + comma_wsp +
-144                   '(' + number + ')' + 
-145                   '\\s*\\))',
-146         
-147         transform = '(?:' +
-148                     matrix + '|' +
-149                     translate + '|' +
-150                     scale + '|' +
-151                     rotate + '|' +
-152                     skewX + '|' +
-153                     skewY + 
-154                     ')',
-155         
-156         transforms = '(?:' + transform + '(?:' + comma_wsp + transform + ')*' + ')',
+  3   /**
+  4    * @name fabric
+  5    * @namespace
+  6    */
+  7   
+  8   var fabric = this.fabric || (this.fabric = { }),
+  9       extend = fabric.util.object.extend,
+ 10       capitalize = fabric.util.string.capitalize,
+ 11       clone = fabric.util.object.clone;
+ 12   
+ 13   var attributesMap = {
+ 14     'cx':             'left',
+ 15     'x':              'left',
+ 16     'cy':             'top',
+ 17     'y':              'top',
+ 18     'r':              'radius',
+ 19     'fill-opacity':   'opacity',
+ 20     'fill-rule':      'fillRule',
+ 21     'stroke-width':   'strokeWidth',
+ 22     'transform':      'transformMatrix'
+ 23   };
+ 24   
+ 25   /**
+ 26    * Returns an object of attributes' name/value, given element and an array of attribute names;
+ 27    * Parses parent "g" nodes recursively upwards.
+ 28    * @static
+ 29    * @memberOf fabric
+ 30    * @method parseAttributes
+ 31    * @param {DOMElement} element Element to parse
+ 32    * @param {Array} attributes Array of attributes to parse
+ 33    * @return {Object} object containing parsed attributes' names/values
+ 34    */
+ 35   function parseAttributes(element, attributes) {
+ 36     
+ 37     if (!element) {
+ 38       return;
+ 39     }
+ 40     
+ 41     var value, 
+ 42         parsed, 
+ 43         parentAttributes = { };
+ 44 
+ 45     // if there's a parent container (`g` node), parse its attributes recursively upwards
+ 46     if (element.parentNode && /^g$/i.test(element.parentNode.nodeName)) {
+ 47       parentAttributes = fabric.parseAttributes(element.parentNode, attributes);
+ 48     }
+ 49     
+ 50     var ownAttributes = attributes.reduce(function(memo, attr) {
+ 51       value = element.getAttribute(attr);
+ 52       parsed = parseFloat(value);
+ 53       if (value) {        
+ 54         // "normalize" attribute values
+ 55         if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
+ 56           value = '';
+ 57         }
+ 58         if (attr === 'fill-rule') {
+ 59           value = (value === 'evenodd') ? 'destination-over' : value;
+ 60         }
+ 61         if (attr === 'transform') {
+ 62           value = fabric.parseTransformAttribute(value);
+ 63         }
+ 64         // transform attribute names
+ 65         if (attr in attributesMap) {
+ 66           attr = attributesMap[attr];
+ 67         }
+ 68         memo[attr] = isNaN(parsed) ? value : parsed;
+ 69       }
+ 70       return memo;
+ 71     }, { });
+ 72     
+ 73     // add values parsed from style
+ 74     // TODO (kangax): check the presedence of values from the style attribute
+ 75     ownAttributes = extend(fabric.parseStyleAttribute(element), ownAttributes);
+ 76     return extend(parentAttributes, ownAttributes);
+ 77   };
+ 78   
+ 79   /**
+ 80    * @static
+ 81    * @function
+ 82    * @memberOf fabric
+ 83    * @method parseTransformAttribute
+ 84    * @param attributeValue {String} string containing attribute value
+ 85    * @return {Array} array of 6 elements representing transformation matrix
+ 86    */
+ 87   fabric.parseTransformAttribute = (function() {
+ 88     function rotateMatrix(matrix, args) {
+ 89       var angle = args[0];
+ 90       
+ 91       matrix[0] = Math.cos(angle);
+ 92       matrix[1] = Math.sin(angle);
+ 93       matrix[2] = -Math.sin(angle);
+ 94       matrix[3] = Math.cos(angle);
+ 95     }
+ 96     
+ 97     function scaleMatrix(matrix, args) {
+ 98       var multiplierX = args[0],
+ 99           multiplierY = (args.length === 2) ? args[1] : args[0];
+100 
+101       matrix[0] = multiplierX;
+102       matrix[3] = multiplierY;
+103     }
+104     
+105     function skewXMatrix(matrix, args) {
+106       matrix[2] = args[0];
+107     }
+108     
+109     function skewYMatrix(matrix, args) {
+110       matrix[1] = args[0];
+111     }
+112     
+113     function translateMatrix(matrix, args) {
+114       matrix[4] = args[0];
+115       if (args.length === 2) {
+116         matrix[5] = args[1];
+117       }
+118     }
+119     
+120     // identity matrix
+121     var iMatrix = [
+122           1, // a
+123           0, // b
+124           0, // c
+125           1, // d
+126           0, // e
+127           0  // f
+128         ],
+129     
+130         // == begin transform regexp
+131         number = '(?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)',
+132         comma_wsp = '(?:\\s+,?\\s*|,\\s*)',
+133         
+134         skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))',
+135         skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))',
+136         rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + ')' + comma_wsp + '(' + number + '))?\\s*\\))',
+137         scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + '))?\\s*\\))',
+138         translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + '))?\\s*\\))',
+139         
+140         matrix = '(?:(matrix)\\s*\\(\\s*' + 
+141                   '(' + number + ')' + comma_wsp + 
+142                   '(' + number + ')' + comma_wsp + 
+143                   '(' + number + ')' + comma_wsp +
+144                   '(' + number + ')' + comma_wsp +
+145                   '(' + number + ')' + comma_wsp +
+146                   '(' + number + ')' + 
+147                   '\\s*\\))',
+148         
+149         transform = '(?:' +
+150                     matrix + '|' +
+151                     translate + '|' +
+152                     scale + '|' +
+153                     rotate + '|' +
+154                     skewX + '|' +
+155                     skewY + 
+156                     ')',
 157         
-158         transform_list = '^\\s*(?:' + transforms + '?)\\s*$',
-159     
-160         // http://www.w3.org/TR/SVG/coords.html#TransformAttribute
-161         reTransformList = new RegExp(transform_list),
-162         // == end transform regexp
-163         
-164         reTransform = new RegExp(transform);
-165     
-166     return function(attributeValue) {
-167       
-168       // start with identity matrix
-169       var matrix = iMatrix.concat();
-170       
-171       // return if no argument was given or 
-172       // an argument does not match transform attribute regexp
-173       if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) {
-174         return matrix;
-175       }
-176       
-177       attributeValue.replace(reTransform, function(match) {
-178           
-179         var m = new RegExp(transform).exec(match).filter(function (match) {
-180               return (match !== '' && match != null);
-181             }),
-182             operation = m[1],
-183             args = m.slice(2).map(parseFloat);
-184         
-185         switch(operation) {
-186           case 'translate':
-187             translateMatrix(matrix, args);
-188             break;
-189           case 'rotate':
-190             rotateMatrix(matrix, args);
-191             break;
-192           case 'scale':
-193             scaleMatrix(matrix, args);
-194             break;
-195           case 'skewX':
-196             skewXMatrix(matrix, args);
-197             break;
-198           case 'skewY':
-199             skewYMatrix(matrix, args);
-200             break;
-201           case 'matrix':
-202             matrix = args;
-203             break;
-204         }
-205       })
-206       return matrix;
-207     }
-208   })();
-209   
-210   /**
-211    * @static
-212    * @memberOf fabric
-213    * @method parsePointsAttribute
-214    * @param points {String} points attribute string
-215    * @return {Array} array of points
-216    */
-217   function parsePointsAttribute(points) {
-218         
-219     // points attribute is required and must not be empty
-220     if (!points) return null;
-221     
-222     points = points.trim();
-223     var asPairs = points.indexOf(',') > -1;
-224     
-225     points = points.split(/\s+/);
-226     var parsedPoints = [ ];
-227     
-228     // points could look like "10,20 30,40" or "10 20 30 40"
-229     if (asPairs) {  
-230      for (var i = 0, len = points.length; i < len; i++) {
-231        var pair = points[i].split(',');
-232        parsedPoints.push({ x: parseFloat(pair[0]), y: parseFloat(pair[1]) });
-233      } 
-234     }
-235     else {
-236       for (var i = 0, len = points.length; i < len; i+=2) {
-237         parsedPoints.push({ x: parseFloat(points[i]), y: parseFloat(points[i+1]) });
-238       }
-239     }
-240     
-241     // odd number of points is an error
-242     if (parsedPoints.length % 2 !== 0) {
-243       // return null;
-244     }
-245     
-246     return parsedPoints;
-247   };
-248 
-249   /**
-250    * @static
-251    * @memberOf fabric
-252    * @method parseStyleAttribute
-253    * @param {SVGElement} element Element to parse
-254    * @return {Object} Objects with values parsed from style attribute of an element
-255    */
-256   function parseStyleAttribute(element) {
-257     var oStyle = { },
-258         style = element.getAttribute('style');
-259     if (style) {
-260       if (typeof style == 'string') {
-261         style = style.split(';');
-262         style.pop();
-263         oStyle = style.reduce(function(memo, current) {
-264           var attr = current.split(':'),
-265               key = attr[0].trim(),
-266               value = attr[1].trim();
-267           memo[key] = value;
-268           return memo;
-269         }, { });
-270       }
-271       else {
-272         for (var prop in style) {
-273           if (typeof style[prop] !== 'undefined') {
-274             oStyle[prop] = style[prop];
-275           }
-276         }
-277       }
-278     }
-279     return oStyle;
-280   };
-281 
-282   /**
-283    * @static
-284    * @memberOf fabric
-285    * @method parseElements
-286    * @param {Array} elements Array of elements to parse
-287    * @param {Object} options Options object
-288    * @return {Array} Array of corresponding instances (transformed from SVG elements)
-289    */
-290    function parseElements(elements, options) {
-291     // transform svg elements to fabric.Path elements
-292     var _elements = elements.map(function(el) {
-293       var klass = fabric[capitalize(el.tagName)];
-294       if (klass && klass.fromElement) {
-295         try {
-296           return klass.fromElement(el, options);
-297         }
-298         catch(e) {
-299           fabric.log(e.message || e);
-300         }
-301       }
-302     });
-303     _elements = _elements.filter(function(el) {
-304       return el != null;
-305     });
-306     return _elements;
-307   };
-308   
-309   /**
-310    * @static
-311    * @function
-312    * @memberOf fabric
-313    * @method parseSVGDocument
-314    * @param {SVGDocument} doc SVG document to parse
-315    * @param {Function} callback Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).
-316    */
-317   fabric.parseSVGDocument = (function() {
-318 
-319     var reAllowedSVGTagNames = /^(path|circle|polygon|polyline|ellipse|rect|line)$/;
+158         transforms = '(?:' + transform + '(?:' + comma_wsp + transform + ')*' + ')',
+159         
+160         transform_list = '^\\s*(?:' + transforms + '?)\\s*$',
+161     
+162         // http://www.w3.org/TR/SVG/coords.html#TransformAttribute
+163         reTransformList = new RegExp(transform_list),
+164         // == end transform regexp
+165         
+166         reTransform = new RegExp(transform);
+167     
+168     return function(attributeValue) {
+169       
+170       // start with identity matrix
+171       var matrix = iMatrix.concat();
+172       
+173       // return if no argument was given or 
+174       // an argument does not match transform attribute regexp
+175       if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) {
+176         return matrix;
+177       }
+178       
+179       attributeValue.replace(reTransform, function(match) {
+180           
+181         var m = new RegExp(transform).exec(match).filter(function (match) {
+182               return (match !== '' && match != null);
+183             }),
+184             operation = m[1],
+185             args = m.slice(2).map(parseFloat);
+186         
+187         switch(operation) {
+188           case 'translate':
+189             translateMatrix(matrix, args);
+190             break;
+191           case 'rotate':
+192             rotateMatrix(matrix, args);
+193             break;
+194           case 'scale':
+195             scaleMatrix(matrix, args);
+196             break;
+197           case 'skewX':
+198             skewXMatrix(matrix, args);
+199             break;
+200           case 'skewY':
+201             skewYMatrix(matrix, args);
+202             break;
+203           case 'matrix':
+204             matrix = args;
+205             break;
+206         }
+207       })
+208       return matrix;
+209     }
+210   })();
+211   
+212   /**
+213    * @static
+214    * @memberOf fabric
+215    * @method parsePointsAttribute
+216    * @param points {String} points attribute string
+217    * @return {Array} array of points
+218    */
+219   function parsePointsAttribute(points) {
+220         
+221     // points attribute is required and must not be empty
+222     if (!points) return null;
+223     
+224     points = points.trim();
+225     var asPairs = points.indexOf(',') > -1;
+226     
+227     points = points.split(/\s+/);
+228     var parsedPoints = [ ];
+229     
+230     // points could look like "10,20 30,40" or "10 20 30 40"
+231     if (asPairs) {  
+232      for (var i = 0, len = points.length; i < len; i++) {
+233        var pair = points[i].split(',');
+234        parsedPoints.push({ x: parseFloat(pair[0]), y: parseFloat(pair[1]) });
+235      } 
+236     }
+237     else {
+238       for (var i = 0, len = points.length; i < len; i+=2) {
+239         parsedPoints.push({ x: parseFloat(points[i]), y: parseFloat(points[i+1]) });
+240       }
+241     }
+242     
+243     // odd number of points is an error
+244     if (parsedPoints.length % 2 !== 0) {
+245       // return null;
+246     }
+247     
+248     return parsedPoints;
+249   };
+250 
+251   /**
+252    * @static
+253    * @memberOf fabric
+254    * @method parseStyleAttribute
+255    * @param {SVGElement} element Element to parse
+256    * @return {Object} Objects with values parsed from style attribute of an element
+257    */
+258   function parseStyleAttribute(element) {
+259     var oStyle = { },
+260         style = element.getAttribute('style');
+261     if (style) {
+262       if (typeof style == 'string') {
+263         style = style.split(';');
+264         style.pop();
+265         oStyle = style.reduce(function(memo, current) {
+266           var attr = current.split(':'),
+267               key = attr[0].trim(),
+268               value = attr[1].trim();
+269           memo[key] = value;
+270           return memo;
+271         }, { });
+272       }
+273       else {
+274         for (var prop in style) {
+275           if (typeof style[prop] !== 'undefined') {
+276             oStyle[prop] = style[prop];
+277           }
+278         }
+279       }
+280     }
+281     return oStyle;
+282   };
+283 
+284   /**
+285    * @static
+286    * @memberOf fabric
+287    * @method parseElements
+288    * @param {Array} elements Array of elements to parse
+289    * @param {Object} options Options object
+290    * @return {Array} Array of corresponding instances (transformed from SVG elements)
+291    */
+292    function parseElements(elements, options) {
+293     // transform svg elements to fabric.Path elements
+294     var _elements = elements.map(function(el) {
+295       var klass = fabric[capitalize(el.tagName)];
+296       if (klass && klass.fromElement) {
+297         try {
+298           return klass.fromElement(el, options);
+299         }
+300         catch(e) {
+301           fabric.log(e.message || e);
+302         }
+303       }
+304     });
+305     _elements = _elements.filter(function(el) {
+306       return el != null;
+307     });
+308     return _elements;
+309   };
+310   
+311   /**
+312    * @static
+313    * @function
+314    * @memberOf fabric
+315    * @method parseSVGDocument
+316    * @param {SVGDocument} doc SVG document to parse
+317    * @param {Function} callback Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).
+318    */
+319   fabric.parseSVGDocument = (function() {
 320 
-321     // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
-322     // \d doesn't quite cut it (as we need to match an actual float number)
-323 
-324     // matches, e.g.: +14.56e-12, etc.
-325     var reNum = '(?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)';
-326 
-327     var reViewBoxAttrValue = new RegExp(
-328       '^' +
-329       '\\s*(' + reNum + '+)\\s*,?' +
-330       '\\s*(' + reNum + '+)\\s*,?' +
+321     var reAllowedSVGTagNames = /^(path|circle|polygon|polyline|ellipse|rect|line)$/;
+322 
+323     // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
+324     // \d doesn't quite cut it (as we need to match an actual float number)
+325 
+326     // matches, e.g.: +14.56e-12, etc.
+327     var reNum = '(?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)';
+328 
+329     var reViewBoxAttrValue = new RegExp(
+330       '^' +
 331       '\\s*(' + reNum + '+)\\s*,?' +
-332       '\\s*(' + reNum + '+)\\s*' +
-333       '$'
-334     );
-335     
-336     function hasParentWithNodeName(element, parentNodeName) {
-337       while (element && (element = element.parentNode)) {
-338         if (element.nodeName === parentNodeName) {
-339           return true;
-340         }
-341       }
-342       return false;
-343     }
-344 
-345     return function(doc, callback) {
-346       if (!doc) return;
-347       var descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
-348       
-349       var elements = descendants.filter(function(el) {
-350         return reAllowedSVGTagNames.test(el.tagName) && 
-351           !hasParentWithNodeName(el, 'pattern');
-352       });
-353 
-354       if (!elements || (elements && !elements.length)) return;
+332       '\\s*(' + reNum + '+)\\s*,?' +
+333       '\\s*(' + reNum + '+)\\s*,?' +
+334       '\\s*(' + reNum + '+)\\s*' +
+335       '$'
+336     );
+337     
+338     function hasParentWithNodeName(element, parentNodeName) {
+339       while (element && (element = element.parentNode)) {
+340         if (element.nodeName === parentNodeName) {
+341           return true;
+342         }
+343       }
+344       return false;
+345     }
+346 
+347     return function(doc, callback) {
+348       if (!doc) return;
+349       var descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
+350       
+351       var elements = descendants.filter(function(el) {
+352         return reAllowedSVGTagNames.test(el.tagName) && 
+353           !hasParentWithNodeName(el, 'pattern');
+354       });
 355 
-356       var viewBoxAttr = doc.getAttribute('viewBox'),
-357           widthAttr = doc.getAttribute('width'),
-358           heightAttr = doc.getAttribute('height'),
-359           width = null,
-360           height = null,
-361           minX,
-362           minY;
-363       
-364       if (viewBoxAttr && (viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))) {
-365         minX = parseInt(viewBoxAttr[1], 10);
-366         minY = parseInt(viewBoxAttr[2], 10);
-367         width = parseInt(viewBoxAttr[3], 10);
-368         height = parseInt(viewBoxAttr[4], 10);
-369       }
-370 
-371       // values of width/height attributes overwrite those extracted from viewbox attribute
-372       width = widthAttr ? parseFloat(widthAttr) : width;
-373       height = heightAttr ? parseFloat(heightAttr) : height;
-374 
-375       var options = { 
-376         width: width, 
-377         height: height
-378       };
-379 
-380       var elements = fabric.parseElements(elements, clone(options));
-381       if (!elements || (elements && !elements.length)) return;
-382 
-383       if (callback) {
-384         callback(elements, options);
-385       }
-386     };
-387   })();
-388   
-389   extend(fabric, {
-390     parseAttributes:        parseAttributes,
-391     parseElements:          parseElements,
-392     parseStyleAttribute:    parseStyleAttribute,
-393     parsePointsAttribute:   parsePointsAttribute
-394   });
-395   
-396 })();
\ No newline at end of file +356 if (!elements || (elements && !elements.length)) return; +357 +358 var viewBoxAttr = doc.getAttribute('viewBox'), +359 widthAttr = doc.getAttribute('width'), +360 heightAttr = doc.getAttribute('height'), +361 width = null, +362 height = null, +363 minX, +364 minY; +365 +366 if (viewBoxAttr && (viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))) { +367 minX = parseInt(viewBoxAttr[1], 10); +368 minY = parseInt(viewBoxAttr[2], 10); +369 width = parseInt(viewBoxAttr[3], 10); +370 height = parseInt(viewBoxAttr[4], 10); +371 } +372 +373 // values of width/height attributes overwrite those extracted from viewbox attribute +374 width = widthAttr ? parseFloat(widthAttr) : width; +375 height = heightAttr ? parseFloat(heightAttr) : height; +376 +377 var options = { +378 width: width, +379 height: height +380 }; +381 +382 var elements = fabric.parseElements(elements, clone(options)); +383 if (!elements || (elements && !elements.length)) return; +384 +385 if (callback) { +386 callback(elements, options); +387 } +388 }; +389 })(); +390 +391 extend(fabric, { +392 parseAttributes: parseAttributes, +393 parseElements: parseElements, +394 parseStyleAttribute: parseStyleAttribute, +395 parsePointsAttribute: parsePointsAttribute +396 }); +397 +398 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_path.class.js.html b/docs/symbols/src/src_path.class.js.html index 4c86c20d..011ad1dc 100644 --- a/docs/symbols/src/src_path.class.js.html +++ b/docs/symbols/src/src_path.class.js.html @@ -93,411 +93,432 @@ 86 } 87 }, 88 - 89 _initializeFromArray: function(options) { - 90 var isWidthSet = 'width' in options, - 91 isHeightSet = 'height' in options; - 92 - 93 this.path = this._parsePath(); - 94 - 95 if (!isWidthSet || !isHeightSet) { - 96 extend(this, this._parseDimensions()); - 97 if (isWidthSet) { - 98 this.width = this.options.width; - 99 } -100 if (isHeightSet) { -101 this.height = this.options.height; -102 } -103 } -104 }, -105 -106 _render: function(ctx) { -107 var current, // current instruction -108 x = 0, // current x -109 y = 0, // current y -110 controlX = 0, // current control point x -111 controlY = 0, // current control point y -112 tempX, -113 tempY, -114 l = -(this.width / 2), -115 t = -(this.height / 2); -116 -117 for (var i = 0, len = this.path.length; i < len; ++i) { -118 -119 current = this.path[i]; -120 -121 switch (current[0]) { // first letter -122 -123 case 'l': // lineto, relative -124 x += current[1]; -125 y += current[2]; -126 ctx.lineTo(x + l, y + t); -127 break; -128 -129 case 'L': // lineto, absolute -130 x = current[1]; -131 y = current[2]; -132 ctx.lineTo(x + l, y + t); -133 break; -134 -135 case 'h': // horizontal lineto, relative -136 x += current[1]; -137 ctx.lineTo(x + l, y + t); -138 break; -139 -140 case 'H': // horizontal lineto, absolute -141 x = current[1]; -142 ctx.lineTo(x + l, y + t); -143 break; -144 -145 case 'v': // vertical lineto, relative -146 y += current[1]; -147 ctx.lineTo(x + l, y + t); -148 break; -149 -150 case 'V': // verical lineto, absolute -151 y = current[1]; -152 ctx.lineTo(x + l, y + t); -153 break; -154 -155 case 'm': // moveTo, relative -156 x += current[1]; -157 y += current[2]; -158 ctx.moveTo(x + l, y + t); -159 break; -160 -161 case 'M': // moveTo, absolute -162 x = current[1]; -163 y = current[2]; -164 ctx.moveTo(x + l, y + t); -165 break; -166 -167 case 'c': // bezierCurveTo, relative -168 tempX = x + current[5]; -169 tempY = y + current[6]; -170 controlX = x + current[3]; -171 controlY = y + current[4]; -172 ctx.bezierCurveTo( -173 x + current[1] + l, // x1 -174 y + current[2] + t, // y1 -175 controlX + l, // x2 -176 controlY + t, // y2 -177 tempX + l, -178 tempY + t -179 ); -180 x = tempX; -181 y = tempY; -182 break; -183 -184 case 'C': // bezierCurveTo, absolute -185 x = current[5]; -186 y = current[6]; -187 controlX = current[3]; -188 controlY = current[4]; -189 ctx.bezierCurveTo( -190 current[1] + l, -191 current[2] + t, -192 controlX + l, -193 controlY + t, -194 x + l, -195 y + t -196 ); -197 break; -198 -199 case 's': // shorthand cubic bezierCurveTo, relative -200 // transform to absolute x,y -201 tempX = x + current[3]; -202 tempY = y + current[4]; -203 // calculate reflection of previous control points -204 controlX = 2 * x - controlX; -205 controlY = 2 * y - controlY; -206 ctx.bezierCurveTo( -207 controlX + l, -208 controlY + t, -209 x + current[1] + l, -210 y + current[2] + t, -211 tempX + l, -212 tempY + t -213 ); -214 x = tempX; -215 y = tempY; -216 break; -217 -218 case 'S': // shorthand cubic bezierCurveTo, absolute -219 tempX = current[3]; -220 tempY = current[4]; -221 // calculate reflection of previous control points -222 controlX = 2*x - controlX; -223 controlY = 2*y - controlY; -224 ctx.bezierCurveTo( -225 controlX + l, -226 controlY + t, -227 current[1] + l, -228 current[2] + t, -229 tempX + l, -230 tempY + t -231 ); -232 x = tempX; -233 y = tempY; -234 break; -235 -236 case 'q': // quadraticCurveTo, relative -237 x += current[3]; -238 y += current[4]; -239 ctx.quadraticCurveTo( -240 current[1] + l, -241 current[2] + t, -242 x + l, -243 y + t -244 ); -245 break; -246 -247 case 'Q': // quadraticCurveTo, absolute -248 x = current[3]; -249 y = current[4]; -250 controlX = current[1]; -251 controlY = current[2]; -252 ctx.quadraticCurveTo( -253 controlX + l, -254 controlY + t, -255 x + l, -256 y + t -257 ); -258 break; -259 -260 case 'T': -261 tempX = x; -262 tempY = y; -263 x = current[1]; -264 y = current[2]; -265 // calculate reflection of previous control points -266 controlX = -controlX + 2 * tempX; -267 controlY = -controlY + 2 * tempY; -268 ctx.quadraticCurveTo( -269 controlX + l, -270 controlY + t, -271 x + l, -272 y + t -273 ); -274 break; -275 -276 case 'a': -277 // TODO (kangax): implement arc (relative) -278 break; -279 -280 case 'A': -281 // TODO (kangax): implement arc (absolute) + 89 /** + 90 * @private + 91 * @method _initializeFromArray + 92 */ + 93 _initializeFromArray: function(options) { + 94 var isWidthSet = 'width' in options, + 95 isHeightSet = 'height' in options; + 96 + 97 this.path = this._parsePath(); + 98 + 99 if (!isWidthSet || !isHeightSet) { +100 extend(this, this._parseDimensions()); +101 if (isWidthSet) { +102 this.width = this.options.width; +103 } +104 if (isHeightSet) { +105 this.height = this.options.height; +106 } +107 } +108 }, +109 +110 /** +111 * @private +112 * @method _render +113 */ +114 _render: function(ctx) { +115 var current, // current instruction +116 x = 0, // current x +117 y = 0, // current y +118 controlX = 0, // current control point x +119 controlY = 0, // current control point y +120 tempX, +121 tempY, +122 l = -(this.width / 2), +123 t = -(this.height / 2); +124 +125 for (var i = 0, len = this.path.length; i < len; ++i) { +126 +127 current = this.path[i]; +128 +129 switch (current[0]) { // first letter +130 +131 case 'l': // lineto, relative +132 x += current[1]; +133 y += current[2]; +134 ctx.lineTo(x + l, y + t); +135 break; +136 +137 case 'L': // lineto, absolute +138 x = current[1]; +139 y = current[2]; +140 ctx.lineTo(x + l, y + t); +141 break; +142 +143 case 'h': // horizontal lineto, relative +144 x += current[1]; +145 ctx.lineTo(x + l, y + t); +146 break; +147 +148 case 'H': // horizontal lineto, absolute +149 x = current[1]; +150 ctx.lineTo(x + l, y + t); +151 break; +152 +153 case 'v': // vertical lineto, relative +154 y += current[1]; +155 ctx.lineTo(x + l, y + t); +156 break; +157 +158 case 'V': // verical lineto, absolute +159 y = current[1]; +160 ctx.lineTo(x + l, y + t); +161 break; +162 +163 case 'm': // moveTo, relative +164 x += current[1]; +165 y += current[2]; +166 ctx.moveTo(x + l, y + t); +167 break; +168 +169 case 'M': // moveTo, absolute +170 x = current[1]; +171 y = current[2]; +172 ctx.moveTo(x + l, y + t); +173 break; +174 +175 case 'c': // bezierCurveTo, relative +176 tempX = x + current[5]; +177 tempY = y + current[6]; +178 controlX = x + current[3]; +179 controlY = y + current[4]; +180 ctx.bezierCurveTo( +181 x + current[1] + l, // x1 +182 y + current[2] + t, // y1 +183 controlX + l, // x2 +184 controlY + t, // y2 +185 tempX + l, +186 tempY + t +187 ); +188 x = tempX; +189 y = tempY; +190 break; +191 +192 case 'C': // bezierCurveTo, absolute +193 x = current[5]; +194 y = current[6]; +195 controlX = current[3]; +196 controlY = current[4]; +197 ctx.bezierCurveTo( +198 current[1] + l, +199 current[2] + t, +200 controlX + l, +201 controlY + t, +202 x + l, +203 y + t +204 ); +205 break; +206 +207 case 's': // shorthand cubic bezierCurveTo, relative +208 // transform to absolute x,y +209 tempX = x + current[3]; +210 tempY = y + current[4]; +211 // calculate reflection of previous control points +212 controlX = 2 * x - controlX; +213 controlY = 2 * y - controlY; +214 ctx.bezierCurveTo( +215 controlX + l, +216 controlY + t, +217 x + current[1] + l, +218 y + current[2] + t, +219 tempX + l, +220 tempY + t +221 ); +222 x = tempX; +223 y = tempY; +224 break; +225 +226 case 'S': // shorthand cubic bezierCurveTo, absolute +227 tempX = current[3]; +228 tempY = current[4]; +229 // calculate reflection of previous control points +230 controlX = 2*x - controlX; +231 controlY = 2*y - controlY; +232 ctx.bezierCurveTo( +233 controlX + l, +234 controlY + t, +235 current[1] + l, +236 current[2] + t, +237 tempX + l, +238 tempY + t +239 ); +240 x = tempX; +241 y = tempY; +242 break; +243 +244 case 'q': // quadraticCurveTo, relative +245 x += current[3]; +246 y += current[4]; +247 ctx.quadraticCurveTo( +248 current[1] + l, +249 current[2] + t, +250 x + l, +251 y + t +252 ); +253 break; +254 +255 case 'Q': // quadraticCurveTo, absolute +256 x = current[3]; +257 y = current[4]; +258 controlX = current[1]; +259 controlY = current[2]; +260 ctx.quadraticCurveTo( +261 controlX + l, +262 controlY + t, +263 x + l, +264 y + t +265 ); +266 break; +267 +268 case 'T': +269 tempX = x; +270 tempY = y; +271 x = current[1]; +272 y = current[2]; +273 // calculate reflection of previous control points +274 controlX = -controlX + 2 * tempX; +275 controlY = -controlY + 2 * tempY; +276 ctx.quadraticCurveTo( +277 controlX + l, +278 controlY + t, +279 x + l, +280 y + t +281 ); 282 break; -283 -284 case 'z': -285 case 'Z': -286 ctx.closePath(); -287 break; -288 } -289 } -290 }, -291 -292 render: function(ctx, noTransform) { -293 ctx.save(); -294 var m = this.transformMatrix; -295 if (m) { -296 ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); +283 +284 case 'a': +285 // TODO (kangax): implement arc (relative) +286 break; +287 +288 case 'A': +289 // TODO (kangax): implement arc (absolute) +290 break; +291 +292 case 'z': +293 case 'Z': +294 ctx.closePath(); +295 break; +296 } 297 } -298 if (!noTransform) { -299 this.transform(ctx); -300 } -301 // ctx.globalCompositeOperation = this.fillRule; -302 -303 if (this.overlayFill) { -304 ctx.fillStyle = this.overlayFill; -305 } -306 else if (this.fill) { -307 ctx.fillStyle = this.fill; -308 } -309 -310 if (this.stroke) { -311 ctx.strokeStyle = this.stroke; -312 } -313 ctx.beginPath(); -314 -315 this._render(ctx); -316 -317 if (this.fill) { -318 ctx.fill(); +298 }, +299 +300 /** +301 * Renders path on a specified context +302 * @method render +303 * @param {CanvasRenderingContext2D} ctx context to render path on +304 * @param {Boolean} noTransform When true, context is not transformed +305 */ +306 render: function(ctx, noTransform) { +307 ctx.save(); +308 var m = this.transformMatrix; +309 if (m) { +310 ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); +311 } +312 if (!noTransform) { +313 this.transform(ctx); +314 } +315 // ctx.globalCompositeOperation = this.fillRule; +316 +317 if (this.overlayFill) { +318 ctx.fillStyle = this.overlayFill; 319 } -320 if (this.stroke) { -321 ctx.strokeStyle = this.stroke; -322 ctx.lineWidth = this.strokeWidth; -323 ctx.lineCap = ctx.lineJoin = 'round'; -324 ctx.stroke(); -325 } -326 if (!noTransform && this.active) { -327 this.drawBorders(ctx); -328 this.hideCorners || this.drawCorners(ctx); -329 } -330 ctx.restore(); -331 }, -332 -333 /** -334 * Returns string representation of an instance -335 * @method toString -336 * @return {String} string representation of an instance -337 */ -338 toString: function() { -339 return '#<fabric.Path ('+ this.complexity() +'): ' + -340 JSON.stringify({ top: this.top, left: this.left }) +'>'; -341 }, -342 -343 /** -344 * @method toObject -345 * @return {Object} -346 */ -347 toObject: function() { -348 var o = extend(this.callSuper('toObject'), { -349 path: this.path -350 }); -351 if (this.sourcePath) { -352 o.sourcePath = this.sourcePath; -353 } -354 if (this.transformMatrix) { -355 o.transformMatrix = this.transformMatrix; -356 } -357 return o; -358 }, -359 -360 /** -361 * @method toDatalessObject -362 * @return {Object} -363 */ -364 toDatalessObject: function() { -365 var o = this.toObject(); +320 else if (this.fill) { +321 ctx.fillStyle = this.fill; +322 } +323 +324 if (this.stroke) { +325 ctx.strokeStyle = this.stroke; +326 } +327 ctx.beginPath(); +328 +329 this._render(ctx); +330 +331 if (this.fill) { +332 ctx.fill(); +333 } +334 if (this.stroke) { +335 ctx.strokeStyle = this.stroke; +336 ctx.lineWidth = this.strokeWidth; +337 ctx.lineCap = ctx.lineJoin = 'round'; +338 ctx.stroke(); +339 } +340 if (!noTransform && this.active) { +341 this.drawBorders(ctx); +342 this.hideCorners || this.drawCorners(ctx); +343 } +344 ctx.restore(); +345 }, +346 +347 /** +348 * Returns string representation of an instance +349 * @method toString +350 * @return {String} string representation of an instance +351 */ +352 toString: function() { +353 return '#<fabric.Path ('+ this.complexity() +'): ' + +354 JSON.stringify({ top: this.top, left: this.left }) +'>'; +355 }, +356 +357 /** +358 * Returns object representation of an instance +359 * @method toObject +360 * @return {Object} +361 */ +362 toObject: function() { +363 var o = extend(this.callSuper('toObject'), { +364 path: this.path +365 }); 366 if (this.sourcePath) { -367 o.path = this.sourcePath; +367 o.sourcePath = this.sourcePath; 368 } -369 delete o.sourcePath; -370 return o; -371 }, -372 -373 /** -374 * Returns number representation of an instance complexity -375 * @method complexity -376 * @return {Number} complexity -377 */ -378 complexity: function() { -379 return this.path.length; -380 }, -381 -382 set: function(prop, value) { -383 return this.callSuper('set', prop, value); -384 }, -385 -386 _parsePath: function() { -387 -388 var result = [], -389 currentPath, -390 chunks; -391 -392 // use plain loop for perf. -393 for (var i = 0, len = this.path.length; i < len; i++) { -394 currentPath = this.path[i]; -395 chunks = currentPath.slice(1).trim().replace(/(\d)-/g, '$1###-').split(/\s|,|###/); -396 result.push([currentPath.charAt(0)].concat(chunks.map(parseFloat))); -397 } -398 return result; -399 }, -400 -401 /** -402 * @method _parseDimensions -403 */ -404 _parseDimensions: function() { -405 var aX = [], -406 aY = [], -407 previousX, -408 previousY, -409 isLowerCase = false, -410 x, -411 y; -412 -413 this.path.forEach(function(item, i) { -414 if (item[0] !== 'H') { -415 previousX = (i === 0) ? getX(item) : getX(this.path[i-1]); -416 } -417 if (item[0] !== 'V') { -418 previousY = (i === 0) ? getY(item) : getY(this.path[i-1]); -419 } -420 -421 // lowercased letter denotes relative position; -422 // transform to absolute -423 if (item[0] === item[0].toLowerCase()) { -424 isLowerCase = true; -425 } -426 -427 // last 2 items in an array of coordinates are the actualy x/y (except H/V); -428 // collect them -429 -430 // TODO (kangax): support relative h/v commands -431 -432 x = isLowerCase -433 ? previousX + getX(item) -434 : item[0] === 'V' -435 ? previousX -436 : getX(item); -437 -438 y = isLowerCase -439 ? previousY + getY(item) -440 : item[0] === 'H' -441 ? previousY -442 : getY(item); -443 -444 var val = parseInt(x, 10); -445 if (!isNaN(val)) aX.push(val); -446 -447 val = parseInt(y, 10); -448 if (!isNaN(val)) aY.push(val); -449 -450 }, this); -451 -452 var minX = min(aX), -453 minY = min(aY), -454 deltaX = deltaY = 0; -455 -456 var o = { -457 top: minY - deltaY, -458 left: minX - deltaX, -459 bottom: max(aY) - deltaY, -460 right: max(aX) - deltaX -461 }; -462 -463 o.width = o.right - o.left; -464 o.height = o.bottom - o.top; -465 -466 return o; -467 } -468 }); -469 -470 /** -471 * Creates an instance of fabric.Path from an object -472 * @static -473 * @method fabric.Path.fromObject -474 * @return {fabric.Path} Instance of fabric.Path -475 */ -476 fabric.Path.fromObject = function(object) { -477 return new fabric.Path(object.path, object); -478 }; -479 -480 var ATTRIBUTE_NAMES = fabric.Path.ATTRIBUTE_NAMES = 'd fill fill-opacity fill-rule stroke stroke-width transform'.split(' '); -481 -482 /** -483 * Creates an instance of fabric.Path from an SVG <PATH> element -484 * @static -485 * @method fabric.Path.fromElement -486 * @param {SVGElement} element to parse -487 * @param {Object} options object -488 * @return {fabric.Path} Instance of fabric.Path -489 */ -490 fabric.Path.fromElement = function(element, options) { -491 var parsedAttributes = fabric.parseAttributes(element, ATTRIBUTE_NAMES), -492 path = parsedAttributes.d; -493 delete parsedAttributes.d; -494 return new fabric.Path(path, extend(parsedAttributes, options)); -495 }; -496 })(); \ No newline at end of file +369 if (this.transformMatrix) { +370 o.transformMatrix = this.transformMatrix; +371 } +372 return o; +373 }, +374 +375 /** +376 * Returns dataless object representation of an instance +377 * @method toDatalessObject +378 * @return {Object} +379 */ +380 toDatalessObject: function() { +381 var o = this.toObject(); +382 if (this.sourcePath) { +383 o.path = this.sourcePath; +384 } +385 delete o.sourcePath; +386 return o; +387 }, +388 +389 /** +390 * Returns number representation of an instance complexity +391 * @method complexity +392 * @return {Number} complexity +393 */ +394 complexity: function() { +395 return this.path.length; +396 }, +397 +398 /** +399 * @private +400 * @method _parsePath +401 */ +402 _parsePath: function() { +403 +404 var result = [], +405 currentPath, +406 chunks; +407 +408 // use plain loop for perf. +409 for (var i = 0, len = this.path.length; i < len; i++) { +410 currentPath = this.path[i]; +411 chunks = currentPath.slice(1).trim().replace(/(\d)-/g, '$1###-').split(/\s|,|###/); +412 result.push([currentPath.charAt(0)].concat(chunks.map(parseFloat))); +413 } +414 return result; +415 }, +416 +417 /** +418 * @method _parseDimensions +419 */ +420 _parseDimensions: function() { +421 var aX = [], +422 aY = [], +423 previousX, +424 previousY, +425 isLowerCase = false, +426 x, +427 y; +428 +429 this.path.forEach(function(item, i) { +430 if (item[0] !== 'H') { +431 previousX = (i === 0) ? getX(item) : getX(this.path[i-1]); +432 } +433 if (item[0] !== 'V') { +434 previousY = (i === 0) ? getY(item) : getY(this.path[i-1]); +435 } +436 +437 // lowercased letter denotes relative position; +438 // transform to absolute +439 if (item[0] === item[0].toLowerCase()) { +440 isLowerCase = true; +441 } +442 +443 // last 2 items in an array of coordinates are the actualy x/y (except H/V); +444 // collect them +445 +446 // TODO (kangax): support relative h/v commands +447 +448 x = isLowerCase +449 ? previousX + getX(item) +450 : item[0] === 'V' +451 ? previousX +452 : getX(item); +453 +454 y = isLowerCase +455 ? previousY + getY(item) +456 : item[0] === 'H' +457 ? previousY +458 : getY(item); +459 +460 var val = parseInt(x, 10); +461 if (!isNaN(val)) aX.push(val); +462 +463 val = parseInt(y, 10); +464 if (!isNaN(val)) aY.push(val); +465 +466 }, this); +467 +468 var minX = min(aX), +469 minY = min(aY), +470 deltaX = deltaY = 0; +471 +472 var o = { +473 top: minY - deltaY, +474 left: minX - deltaX, +475 bottom: max(aY) - deltaY, +476 right: max(aX) - deltaX +477 }; +478 +479 o.width = o.right - o.left; +480 o.height = o.bottom - o.top; +481 +482 return o; +483 } +484 }); +485 +486 /** +487 * Creates an instance of fabric.Path from an object +488 * @static +489 * @method fabric.Path.fromObject +490 * @return {fabric.Path} Instance of fabric.Path +491 */ +492 fabric.Path.fromObject = function(object) { +493 return new fabric.Path(object.path, object); +494 }; +495 +496 /** +497 * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) +498 * @static +499 * @see http://www.w3.org/TR/SVG/paths.html#PathElement +500 */ +501 fabric.Path.ATTRIBUTE_NAMES = 'd fill fill-opacity fill-rule stroke stroke-width transform'.split(' '); +502 +503 /** +504 * Creates an instance of fabric.Path from an SVG <path> element +505 * @static +506 * @method fabric.Path.fromElement +507 * @param {SVGElement} element to parse +508 * @param {Object} options object +509 * @return {fabric.Path} Instance of fabric.Path +510 */ +511 fabric.Path.fromElement = function(element, options) { +512 var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES), +513 path = parsedAttributes.d; +514 delete parsedAttributes.d; +515 return new fabric.Path(path, extend(parsedAttributes, options)); +516 }; +517 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_path_group.class.js.html b/docs/symbols/src/src_path_group.class.js.html index ba75e791..b3d76ea3 100644 --- a/docs/symbols/src/src_path_group.class.js.html +++ b/docs/symbols/src/src_path_group.class.js.html @@ -55,7 +55,7 @@ 48 this.paths = paths; 49 50 this.setOptions(options); - 51 this.initProperties(); + 51 this._initProperties(); 52 53 this.setCoords(); 54 @@ -64,173 +64,188 @@ 57 } 58 }, 59 - 60 initProperties: function() { - 61 this.stateProperties.forEach(function(prop) { - 62 if (prop === 'fill') { - 63 this.set(prop, this.options[prop]); - 64 } - 65 else if (prop === 'angle') { - 66 this.setAngle(this.options[prop]); - 67 } - 68 else { - 69 this[prop] = this.options[prop]; - 70 } - 71 }, this); - 72 }, - 73 - 74 render: function(ctx) { - 75 if (this.stub) { - 76 // fast-path, rendering image stub - 77 ctx.save(); - 78 - 79 this.transform(ctx); - 80 this.stub.render(ctx, false /* no transform */); - 81 if (this.active) { - 82 this.drawBorders(ctx); - 83 this.drawCorners(ctx); - 84 } - 85 ctx.restore(); - 86 } - 87 else { - 88 ctx.save(); - 89 - 90 var m = this.transformMatrix; - 91 if (m) { - 92 ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + 60 /** + 61 * @private + 62 * @method _initProperties + 63 */ + 64 _initProperties: function() { + 65 this.stateProperties.forEach(function(prop) { + 66 if (prop === 'fill') { + 67 this.set(prop, this.options[prop]); + 68 } + 69 else if (prop === 'angle') { + 70 this.setAngle(this.options[prop]); + 71 } + 72 else { + 73 this[prop] = this.options[prop]; + 74 } + 75 }, this); + 76 }, + 77 + 78 /** + 79 * Renders this group on a specified context + 80 * @method render + 81 * @param {CanvasRenderingContext2D} ctx Context to render this instance on + 82 */ + 83 render: function(ctx) { + 84 if (this.stub) { + 85 // fast-path, rendering image stub + 86 ctx.save(); + 87 + 88 this.transform(ctx); + 89 this.stub.render(ctx, false /* no transform */); + 90 if (this.active) { + 91 this.drawBorders(ctx); + 92 this.drawCorners(ctx); 93 } - 94 - 95 this.transform(ctx); - 96 for (var i = 0, l = this.paths.length; i < l; ++i) { - 97 this.paths[i].render(ctx, true); - 98 } - 99 if (this.active) { -100 this.drawBorders(ctx); -101 this.hideCorners || this.drawCorners(ctx); + 94 ctx.restore(); + 95 } + 96 else { + 97 ctx.save(); + 98 + 99 var m = this.transformMatrix; +100 if (m) { +101 ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); 102 } -103 ctx.restore(); -104 } -105 }, -106 -107 /** -108 * @method set -109 * @param {String} prop -110 * @param {Any} value -111 * @return {fabric.PathGroup} thisArg -112 */ -113 set: function(prop, value) { -114 if ((prop === 'fill' || prop === 'overlayFill') && this.isSameColor()) { -115 this[prop] = value; -116 var i = this.paths.length; -117 while (i--) { -118 this.paths[i].set(prop, value); -119 } -120 } -121 else { -122 // skipping parent "class" - fabric.Path -123 parentSet.call(this, prop, value); -124 } -125 return this; -126 }, -127 -128 /** -129 * @method toObject -130 * @return {Object} object representation of an instance -131 */ -132 toObject: function() { -133 return extend(parentToObject.call(this), { -134 paths: invoke(this.getObjects(), 'clone'), -135 sourcePath: this.sourcePath -136 }); -137 }, -138 -139 /** -140 * @method toDatalessObject -141 * @return {Object} dataless object representation of an instance +103 +104 this.transform(ctx); +105 for (var i = 0, l = this.paths.length; i < l; ++i) { +106 this.paths[i].render(ctx, true); +107 } +108 if (this.active) { +109 this.drawBorders(ctx); +110 this.hideCorners || this.drawCorners(ctx); +111 } +112 ctx.restore(); +113 } +114 }, +115 +116 /** +117 * Sets certain property to a certain value +118 * @method set +119 * @param {String} prop +120 * @param {Any} value +121 * @return {fabric.PathGroup} thisArg +122 */ +123 set: function(prop, value) { +124 if ((prop === 'fill' || prop === 'overlayFill') && this.isSameColor()) { +125 this[prop] = value; +126 var i = this.paths.length; +127 while (i--) { +128 this.paths[i].set(prop, value); +129 } +130 } +131 else { +132 // skipping parent "class" - fabric.Path +133 parentSet.call(this, prop, value); +134 } +135 return this; +136 }, +137 +138 /** +139 * Returns object representation of this path group +140 * @method toObject +141 * @return {Object} object representation of an instance 142 */ -143 toDatalessObject: function() { -144 var o = this.toObject(); -145 if (this.sourcePath) { -146 o.paths = this.sourcePath; -147 } -148 return o; -149 }, -150 -151 /** -152 * Returns a string representation of an object -153 * @method toString -154 * @return {String} string representation of an object -155 */ -156 toString: function() { -157 return '#<fabric.PathGroup (' + this.complexity() + -158 '): { top: ' + this.top + ', left: ' + this.left + ' }>'; -159 }, -160 -161 /** -162 * @method isSameColor -163 * @return {Boolean} true if all paths are of the same color (`fill`) -164 */ -165 isSameColor: function() { -166 var firstPathFill = this.getObjects()[0].get('fill'); -167 return this.getObjects().every(function(path) { -168 return path.get('fill') === firstPathFill; -169 }); -170 }, -171 -172 /** -173 * Returns number representation of object's complexity -174 * @method complexity -175 * @return {Number} complexity -176 */ -177 complexity: function() { -178 return this.paths.reduce(function(total, path) { -179 return total + ((path && path.complexity) ? path.complexity() : 0); -180 }, 0); -181 }, -182 -183 /** -184 * Makes path group grayscale -185 * @method toGrayscale -186 * @return {fabric.PathGroup} thisArg -187 */ -188 toGrayscale: function() { -189 var i = this.paths.length; -190 while (i--) { -191 this.paths[i].toGrayscale(); -192 } -193 return this; +143 toObject: function() { +144 return extend(parentToObject.call(this), { +145 paths: invoke(this.getObjects(), 'clone'), +146 sourcePath: this.sourcePath +147 }); +148 }, +149 +150 /** +151 * Returns dataless object representation of this path group +152 * @method toDatalessObject +153 * @return {Object} dataless object representation of an instance +154 */ +155 toDatalessObject: function() { +156 var o = this.toObject(); +157 if (this.sourcePath) { +158 o.paths = this.sourcePath; +159 } +160 return o; +161 }, +162 +163 /** +164 * Returns a string representation of this path group +165 * @method toString +166 * @return {String} string representation of an object +167 */ +168 toString: function() { +169 return '#<fabric.PathGroup (' + this.complexity() + +170 '): { top: ' + this.top + ', left: ' + this.left + ' }>'; +171 }, +172 +173 /** +174 * Returns true if all paths in this group are of same color +175 * @method isSameColor +176 * @return {Boolean} true if all paths are of the same color (`fill`) +177 */ +178 isSameColor: function() { +179 var firstPathFill = this.getObjects()[0].get('fill'); +180 return this.getObjects().every(function(path) { +181 return path.get('fill') === firstPathFill; +182 }); +183 }, +184 +185 /** +186 * Returns number representation of object's complexity +187 * @method complexity +188 * @return {Number} complexity +189 */ +190 complexity: function() { +191 return this.paths.reduce(function(total, path) { +192 return total + ((path && path.complexity) ? path.complexity() : 0); +193 }, 0); 194 }, 195 196 /** -197 * @method getObjects -198 * @return {Array} array of path objects included in this path group -199 */ -200 getObjects: function() { -201 return this.paths; -202 } -203 }); -204 -205 /** -206 * @private -207 * @method instantiatePaths -208 */ -209 function instantiatePaths(paths) { -210 for (var i = 0, len = paths.length; i < len; i++) { -211 if (!(paths[i] instanceof fabric.Object)) { -212 var klassName = camelize(capitalize(paths[i].type)); -213 paths[i] = fabric[klassName].fromObject(paths[i]); -214 } -215 } -216 return paths; -217 } +197 * Makes path group grayscale +198 * @method toGrayscale +199 * @return {fabric.PathGroup} thisArg +200 */ +201 toGrayscale: function() { +202 var i = this.paths.length; +203 while (i--) { +204 this.paths[i].toGrayscale(); +205 } +206 return this; +207 }, +208 +209 /** +210 * Returns all paths in this path group +211 * @method getObjects +212 * @return {Array} array of path objects included in this path group +213 */ +214 getObjects: function() { +215 return this.paths; +216 } +217 }); 218 219 /** -220 * @static -221 * @method fabric.PathGroup.fromObject -222 * @param {Object} object -223 * @return {fabric.PathGroup} -224 */ -225 fabric.PathGroup.fromObject = function(object) { -226 var paths = instantiatePaths(object.paths); -227 return new fabric.PathGroup(paths, object); -228 }; -229 })(); \ No newline at end of file +220 * @private +221 * @method instantiatePaths +222 */ +223 function instantiatePaths(paths) { +224 for (var i = 0, len = paths.length; i < len; i++) { +225 if (!(paths[i] instanceof fabric.Object)) { +226 var klassName = camelize(capitalize(paths[i].type)); +227 paths[i] = fabric[klassName].fromObject(paths[i]); +228 } +229 } +230 return paths; +231 } +232 +233 /** +234 * Creates fabric.Triangle instance from an object representation +235 * @static +236 * @method fabric.PathGroup.fromObject +237 * @param {Object} object +238 * @return {fabric.PathGroup} +239 */ +240 fabric.PathGroup.fromObject = function(object) { +241 var paths = instantiatePaths(object.paths); +242 return new fabric.PathGroup(paths, object); +243 }; +244 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_polyline.class.js.html b/docs/symbols/src/src_polyline.class.js.html index 2963467e..db72736b 100644 --- a/docs/symbols/src/src_polyline.class.js.html +++ b/docs/symbols/src/src_polyline.class.js.html @@ -94,7 +94,7 @@ 87 * @static 88 * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement 89 */ - 90 var ATTRIBUTE_NAMES = 'fill fill-opacity stroke stroke-width transform'.split(' '); + 90 fabric.Polyline.ATTRIBUTE_NAMES = 'fill fill-opacity stroke stroke-width transform'.split(' '); 91 92 /** 93 * Returns fabric.Polyline instance from an SVG element diff --git a/docs/symbols/src/src_rect.class.js.html b/docs/symbols/src/src_rect.class.js.html index b5fe56d4..6e8ffd9e 100644 --- a/docs/symbols/src/src_rect.class.js.html +++ b/docs/symbols/src/src_rect.class.js.html @@ -115,45 +115,52 @@ 108 }); 109 110 // TODO (kangax): implement rounded rectangles (both parsing and rendering) -111 fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity stroke stroke-width transform'.split(' '); -112 -113 /** -114 * @private +111 +112 /** +113 * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) +114 * @static 115 */ -116 function _setDefaultLeftTopValues(attributes) { -117 attributes.left = attributes.left || 0; -118 attributes.top = attributes.top || 0; -119 return attributes; -120 } -121 -122 /** -123 * @static -124 * @method fabric.Rect.fromElement -125 * @param element {SVGElement} element to parse -126 * @param options {Object} options object -127 * @return {fabric.Rect} instance of fabric.Rect -128 */ -129 fabric.Rect.fromElement = function(element, options) { -130 if (!element) { -131 return null; -132 } -133 -134 var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); -135 parsedAttributes = _setDefaultLeftTopValues(parsedAttributes); -136 -137 var rect = new fabric.Rect(fabric.util.object.extend(options || { }, parsedAttributes)); -138 rect._normalizeLeftTopProperties(parsedAttributes); +116 fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity stroke stroke-width transform'.split(' '); +117 +118 /** +119 * @private +120 */ +121 function _setDefaultLeftTopValues(attributes) { +122 attributes.left = attributes.left || 0; +123 attributes.top = attributes.top || 0; +124 return attributes; +125 } +126 +127 /** +128 * Returns fabric.Rect instance from an SVG element +129 * @static +130 * @method fabric.Rect.fromElement +131 * @param element {SVGElement} element to parse +132 * @param options {Object} options object +133 * @return {fabric.Rect} instance of fabric.Rect +134 */ +135 fabric.Rect.fromElement = function(element, options) { +136 if (!element) { +137 return null; +138 } 139 -140 return rect; -141 }; -142 -143 /** -144 * @static -145 * @method fabric.Rect.fromObject -146 * @param object {Object} object to create an instance from -147 * @return {Object} instance of fabric.Rect -148 */ -149 fabric.Rect.fromObject = function(object) { -150 return new fabric.Rect(object); -151 }; -152 })(); \ No newline at end of file +140 var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); +141 parsedAttributes = _setDefaultLeftTopValues(parsedAttributes); +142 +143 var rect = new fabric.Rect(fabric.util.object.extend(options || { }, parsedAttributes)); +144 rect._normalizeLeftTopProperties(parsedAttributes); +145 +146 return rect; +147 }; +148 +149 /** +150 * Returns fabric.Rect instance from an object representation +151 * @static +152 * @method fabric.Rect.fromObject +153 * @param object {Object} object to create an instance from +154 * @return {Object} instance of fabric.Rect +155 */ +156 fabric.Rect.fromObject = function(object) { +157 return new fabric.Rect(object); +158 }; +159 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_scout.js.html b/docs/symbols/src/src_scout.js.html index c2b74e51..42b3c994 100644 --- a/docs/symbols/src/src_scout.js.html +++ b/docs/symbols/src/src_scout.js.html @@ -5,47 +5,48 @@ .STRN {color: #393;} .REGX {color: #339;} .line {border-right: 1px dotted #666; color: #666; font-style: normal;} - 
  1 var scout = (function () {
-  2   var tests = { };
-  3   return {
-  4     addTest: function (moduleName, test) {
-  5       tests[moduleName] = test;
-  6     },
-  7     fetch: function () {
-  8       var modulesToFetch = [ ];
-  9       for (var moduleName in tests) {
- 10         if (tests[moduleName]()) {
- 11           modulesToFetch.push(moduleName);
- 12         }
- 13       }
- 14       return modulesToFetch.join(',');
- 15     }
- 16   };
- 17 })();
- 18 
- 19 scout.addTest('json2', function () {
- 20   return typeof JSON === 'undefined';
- 21 });
- 22 scout.addTest('indexOf', function () {
- 23   return typeof Array.prototype.indexOf === 'undefined';
- 24 });
- 25 scout.addTest('forEach', function () {
- 26   return typeof Array.prototype.forEach === 'undefined';
- 27 });
- 28 scout.addTest('map', function () {
- 29   return typeof Array.prototype.map === 'undefined';
- 30 });
- 31 scout.addTest('every', function () {
- 32   return typeof Array.prototype.every === 'undefined';
- 33 });
- 34 scout.addTest('some', function () {
- 35   return typeof Array.prototype.some === 'undefined';
- 36 });
- 37 scout.addTest('filter', function () {
- 38   return typeof Array.prototype.filter === 'undefined';
- 39 });
- 40 scout.addTest('reduce', function () {
- 41   return typeof Array.prototype.reduce === 'undefined';
- 42 });
- 43 
- 44 scout.fetch();
\ No newline at end of file + 
  1 /** @ignore */
+  2 var scout = (function () {
+  3   var tests = { };
+  4   return {
+  5     addTest: function (moduleName, test) {
+  6       tests[moduleName] = test;
+  7     },
+  8     fetch: function () {
+  9       var modulesToFetch = [ ];
+ 10       for (var moduleName in tests) {
+ 11         if (tests[moduleName]()) {
+ 12           modulesToFetch.push(moduleName);
+ 13         }
+ 14       }
+ 15       return modulesToFetch.join(',');
+ 16     }
+ 17   };
+ 18 })();
+ 19 
+ 20 scout.addTest('json2', function () {
+ 21   return typeof JSON === 'undefined';
+ 22 });
+ 23 scout.addTest('indexOf', function () {
+ 24   return typeof Array.prototype.indexOf === 'undefined';
+ 25 });
+ 26 scout.addTest('forEach', function () {
+ 27   return typeof Array.prototype.forEach === 'undefined';
+ 28 });
+ 29 scout.addTest('map', function () {
+ 30   return typeof Array.prototype.map === 'undefined';
+ 31 });
+ 32 scout.addTest('every', function () {
+ 33   return typeof Array.prototype.every === 'undefined';
+ 34 });
+ 35 scout.addTest('some', function () {
+ 36   return typeof Array.prototype.some === 'undefined';
+ 37 });
+ 38 scout.addTest('filter', function () {
+ 39   return typeof Array.prototype.filter === 'undefined';
+ 40 });
+ 41 scout.addTest('reduce', function () {
+ 42   return typeof Array.prototype.reduce === 'undefined';
+ 43 });
+ 44 
+ 45 scout.fetch();
\ No newline at end of file diff --git a/docs/symbols/src/src_text.class.js.html b/docs/symbols/src/src_text.class.js.html index 9657072e..75c7486a 100644 --- a/docs/symbols/src/src_text.class.js.html +++ b/docs/symbols/src/src_text.class.js.html @@ -56,7 +56,7 @@ 49 */ 50 initialize: function(text, options) { 51 this.originalState = { }; - 52 this.initStateProperties(); + 52 this._initStateProperties(); 53 this.text = text; 54 this.setOptions(options); 55 extend(this, this.options); @@ -66,186 +66,194 @@ 59 }, 60 61 /** - 62 * @method initStateProperties - 63 */ - 64 initStateProperties: function() { - 65 var o; - 66 if ((o = this.constructor) && - 67 (o = o.superclass) && - 68 (o = o.prototype) && - 69 (o = o.stateProperties) && - 70 o.clone) { - 71 this.stateProperties = o.clone(); - 72 this.stateProperties.push('fontfamily', 'fontweight', 'path'); - 73 } - 74 }, - 75 - 76 /** - 77 * Returns string representation of an instance - 78 * @method toString - 79 * @return {String} String representation of text object - 80 */ - 81 toString: function() { - 82 return '#<fabric.Text ('+ this.complexity() +'): ' + - 83 JSON.stringify({ text: this.text, fontfamily: this.fontfamily }) + '>'; - 84 }, - 85 - 86 /** - 87 * @private - 88 * @method _render - 89 * @param {CanvasRenderingContext2D} ctx Context to render on - 90 */ - 91 _render: function(context) { - 92 var o = Cufon.textOptions || (Cufon.textOptions = { }); - 93 - 94 // export options to be used by cufon.js - 95 o.left = this.left; - 96 o.top = this.top; - 97 o.context = context; - 98 o.color = this.fill; - 99 -100 var el = this._initDummyElement(); + 62 * Creates `stateProperties` list on an instance, and adds `fabric.Text` -specific ones to it (such as "fontfamily", "fontweight", etc.) + 63 * @private + 64 * @method initStateProperties + 65 */ + 66 _initStateProperties: function() { + 67 var o; + 68 if ((o = this.constructor) && + 69 (o = o.superclass) && + 70 (o = o.prototype) && + 71 (o = o.stateProperties) && + 72 o.clone) { + 73 this.stateProperties = o.clone(); + 74 this.stateProperties.push('fontfamily', 'fontweight', 'path'); + 75 } + 76 }, + 77 + 78 /** + 79 * Returns string representation of an instance + 80 * @method toString + 81 * @return {String} String representation of text object + 82 */ + 83 toString: function() { + 84 return '#<fabric.Text ('+ this.complexity() +'): ' + + 85 JSON.stringify({ text: this.text, fontfamily: this.fontfamily }) + '>'; + 86 }, + 87 + 88 /** + 89 * @private + 90 * @method _render + 91 * @param {CanvasRenderingContext2D} ctx Context to render on + 92 */ + 93 _render: function(context) { + 94 var o = Cufon.textOptions || (Cufon.textOptions = { }); + 95 + 96 // export options to be used by cufon.js + 97 o.left = this.left; + 98 o.top = this.top; + 99 o.context = context; +100 o.color = this.fill; 101 -102 // set "cursor" to top/left corner -103 this.transform(context); -104 -105 // draw text -106 Cufon.replaceElement(el, { -107 separate: 'none', -108 fontFamily: this.fontfamily -109 }); -110 -111 // update width, height -112 this.width = o.width; -113 this.height = o.height; -114 }, -115 -116 /** -117 * @private -118 * @method _initDummyElement -119 */ -120 _initDummyElement: function() { -121 var el = document.createElement('div'); -122 el.innerHTML = this.text; -123 -124 // need to specify these manually, since Jaxer doesn't support retrieving computed style -125 el.style.fontSize = '40px'; -126 el.style.fontWeight = '400'; -127 el.style.fontStyle = 'normal'; -128 el.style.letterSpacing = 'normal'; -129 el.style.color = '#000000'; -130 el.style.fontWeight = '600'; -131 el.style.fontFamily = 'Verdana'; -132 -133 return el; -134 }, -135 -136 /** -137 * @method render -138 * @param ctx {CanvasRenderingContext2D} context to render on -139 */ -140 render: function(context) { -141 context.save(); -142 this._render(context); -143 if (this.active) { -144 this.drawBorders(context); -145 this.drawCorners(context); -146 } -147 context.restore(); -148 }, -149 -150 /** -151 * @method toObject -152 * @return {Object} Object representation of text object -153 */ -154 toObject: function() { -155 return extend(this.callSuper('toObject'), { -156 text: this.text, -157 fontsize: this.fontsize, -158 fontweight: this.fontweight, -159 fontfamily: this.fontfamily, -160 path: this.path -161 }); -162 }, -163 -164 /** -165 * @method setColor -166 * @param {String} value -167 * @return {fabric.Text} thisArg -168 * @chainable -169 */ -170 setColor: function(value) { -171 this.set('fill', value); -172 return this; -173 }, -174 -175 /** -176 * @method setFontsize -177 * @param {Number} value -178 * @return {fabric.Text} thisArg -179 * @chainable -180 */ -181 setFontsize: function(value) { -182 this.set('fontsize', value); -183 this.setCoords(); -184 return this; -185 }, -186 -187 /** -188 * @method getText -189 * @return {String} -190 */ -191 getText: function() { -192 return this.text; -193 }, -194 -195 /** -196 * Sets text of an instance, and updates its coordinates -197 * @method setText -198 * @param {String} value -199 * @return {fabric.Text} thisArg -200 * @chainable -201 */ -202 setText: function(value) { -203 this.set('text', value); -204 this.setCoords(); -205 return this; -206 }, -207 -208 /** -209 * Sets specified property to a specified value -210 * @method set -211 * @param {String} name -212 * @param {Any} value -213 * @return {fabric.Text} thisArg -214 * @chainable -215 */ -216 set: function(name, value) { -217 this[name] = value; -218 if (name === 'fontfamily') { -219 this.path = this.path.replace(/(.*?)([^\/]*)(\.font\.js)/, '$1' + value + '$3'); -220 } -221 return this; -222 } -223 }); -224 -225 /** -226 * Returns fabric.Text instance from an object representation -227 * @static -228 * @method fromObject -229 * @param {Object} object to create an instance from -230 * @return {fabric.Text} an instance -231 */ -232 fabric.Text.fromObject = function(object) { -233 return new fabric.Text(object.text, clone(object)); -234 }; -235 -236 /** -237 * @static -238 * @method fabric.Text.fromElement -239 * @return {fabric.Text} an instance -240 */ -241 fabric.Text.fromElement = function(element) { -242 // TODO (kangax): implement this -243 }; -244 })(); \ No newline at end of file +102 var el = this._initDummyElement(); +103 +104 // set "cursor" to top/left corner +105 this.transform(context); +106 +107 // draw text +108 Cufon.replaceElement(el, { +109 separate: 'none', +110 fontFamily: this.fontfamily +111 }); +112 +113 // update width, height +114 this.width = o.width; +115 this.height = o.height; +116 }, +117 +118 /** +119 * @private +120 * @method _initDummyElement +121 */ +122 _initDummyElement: function() { +123 var el = document.createElement('div'); +124 el.innerHTML = this.text; +125 +126 // need to specify these manually, since Jaxer doesn't support retrieving computed style +127 el.style.fontSize = '40px'; +128 el.style.fontWeight = '400'; +129 el.style.fontStyle = 'normal'; +130 el.style.letterSpacing = 'normal'; +131 el.style.color = '#000000'; +132 el.style.fontWeight = '600'; +133 el.style.fontFamily = 'Verdana'; +134 +135 return el; +136 }, +137 +138 /** +139 * Renders text instance on a specified context +140 * @method render +141 * @param ctx {CanvasRenderingContext2D} context to render on +142 */ +143 render: function(context) { +144 context.save(); +145 this._render(context); +146 if (this.active) { +147 this.drawBorders(context); +148 this.drawCorners(context); +149 } +150 context.restore(); +151 }, +152 +153 /** +154 * Returns object representation of an instance +155 * @method toObject +156 * @return {Object} Object representation of text object +157 */ +158 toObject: function() { +159 return extend(this.callSuper('toObject'), { +160 text: this.text, +161 fontsize: this.fontsize, +162 fontweight: this.fontweight, +163 fontfamily: this.fontfamily, +164 path: this.path +165 }); +166 }, +167 +168 /** +169 * Sets "color" of an instance (alias of `set('fill', …)`) +170 * @method setColor +171 * @param {String} value +172 * @return {fabric.Text} thisArg +173 * @chainable +174 */ +175 setColor: function(value) { +176 this.set('fill', value); +177 return this; +178 }, +179 +180 /** +181 * Sets fontsize of an instance and updates its coordinates +182 * @method setFontsize +183 * @param {Number} value +184 * @return {fabric.Text} thisArg +185 * @chainable +186 */ +187 setFontsize: function(value) { +188 this.set('fontsize', value); +189 this.setCoords(); +190 return this; +191 }, +192 +193 /** +194 * Returns actual text value of an instance +195 * @method getText +196 * @return {String} +197 */ +198 getText: function() { +199 return this.text; +200 }, +201 +202 /** +203 * Sets text of an instance, and updates its coordinates +204 * @method setText +205 * @param {String} value +206 * @return {fabric.Text} thisArg +207 * @chainable +208 */ +209 setText: function(value) { +210 this.set('text', value); +211 this.setCoords(); +212 return this; +213 }, +214 +215 /** +216 * Sets specified property to a specified value +217 * @method set +218 * @param {String} name +219 * @param {Any} value +220 * @return {fabric.Text} thisArg +221 * @chainable +222 */ +223 set: function(name, value) { +224 this[name] = value; +225 if (name === 'fontfamily') { +226 this.path = this.path.replace(/(.*?)([^\/]*)(\.font\.js)/, '$1' + value + '$3'); +227 } +228 return this; +229 } +230 }); +231 +232 /** +233 * Returns fabric.Text instance from an object representation +234 * @static +235 * @method fromObject +236 * @param {Object} object to create an instance from +237 * @return {fabric.Text} an instance +238 */ +239 fabric.Text.fromObject = function(object) { +240 return new fabric.Text(object.text, clone(object)); +241 }; +242 +243 /** +244 * Returns fabric.Text instance from an SVG element (<b>not yet implemented</b>) +245 * @static +246 * @method fabric.Text.fromElement +247 * @return {fabric.Text} an instance +248 */ +249 fabric.Text.fromElement = function(element) { +250 // TODO (kangax): implement this +251 }; +252 })(); \ No newline at end of file diff --git a/docs/symbols/src/src_util_lang_string.js.html b/docs/symbols/src/src_util_lang_string.js.html index 3beb32f3..e4df8985 100644 --- a/docs/symbols/src/src_util_lang_string.js.html +++ b/docs/symbols/src/src_util_lang_string.js.html @@ -9,39 +9,40 @@ 2 /** 3 * Trims a string (removing whitespace from the beginning and the end) 4 * @method trim - 5 */ - 6 String.prototype.trim = function () { - 7 // this trim is not fully ES3 or ES5 compliant, but it should cover most cases for now - 8 return this.replace(/^[\s\xA0]+/, '').replace(/[\s\xA0]+$/, ''); - 9 }; - 10 } - 11 - 12 /** - 13 * Camelizes a string - 14 * @memberOf fabric.util.string - 15 * @method camelize - 16 * @param {String} string String to camelize - 17 * @return {String} Camelized version of a string - 18 */ - 19 function camelize(string) { - 20 return string.replace(/-+(.)?/g, function(match, character) { - 21 return character ? character.toUpperCase() : ''; - 22 }); - 23 } - 24 - 25 /** - 26 * Capitalizes a string - 27 * @memberOf fabric.util.string - 28 * @method capitalize - 29 * @param {String} string String to capitalize - 30 * @return {String} Capitalized version of a string - 31 */ - 32 function capitalize(string) { - 33 return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); - 34 } - 35 - 36 /** @namespace */ - 37 fabric.util.string = { - 38 camelize: camelize, - 39 capitalize: capitalize - 40 }; \ No newline at end of file + 5 * @see <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Trim">String#trim on MDN</a> + 6 */ + 7 String.prototype.trim = function () { + 8 // this trim is not fully ES3 or ES5 compliant, but it should cover most cases for now + 9 return this.replace(/^[\s\xA0]+/, '').replace(/[\s\xA0]+$/, ''); + 10 }; + 11 } + 12 + 13 /** + 14 * Camelizes a string + 15 * @memberOf fabric.util.string + 16 * @method camelize + 17 * @param {String} string String to camelize + 18 * @return {String} Camelized version of a string + 19 */ + 20 function camelize(string) { + 21 return string.replace(/-+(.)?/g, function(match, character) { + 22 return character ? character.toUpperCase() : ''; + 23 }); + 24 } + 25 + 26 /** + 27 * Capitalizes a string + 28 * @memberOf fabric.util.string + 29 * @method capitalize + 30 * @param {String} string String to capitalize + 31 * @return {String} Capitalized version of a string + 32 */ + 33 function capitalize(string) { + 34 return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); + 35 } + 36 + 37 /** @namespace */ + 38 fabric.util.string = { + 39 camelize: camelize, + 40 capitalize: capitalize + 41 }; \ No newline at end of file diff --git a/src/circle.class.js b/src/circle.class.js index f835ac0e..b6953dce 100644 --- a/src/circle.class.js +++ b/src/circle.class.js @@ -17,7 +17,10 @@ */ fabric.Circle = fabric.util.createClass(fabric.Object, /** @scope fabric.Circle.prototype */ { - /** @property */ + /** + * @property + * @type String + */ type: 'circle', /** diff --git a/src/element.class.js b/src/element.class.js index b112ea09..fa16e9f1 100644 --- a/src/element.class.js +++ b/src/element.class.js @@ -138,41 +138,47 @@ extend(fabric.Element.prototype, /** @scope fabric.Element.prototype */ { /** - * @property - * @type String - */ - selectionColor: 'rgba(100, 100, 255, 0.3)', // blue - - /** - * @property - * @type String - */ - selectionBorderColor: 'rgba(255, 255, 255, 0.3)', - - /** - * @property - * @type String - */ - freeDrawingColor: 'rgb(0, 0, 0)', - - /** + * Background color of this canvas instance * @property * @type String */ backgroundColor: 'rgba(0, 0, 0, 0)', /** + * Color of selection * @property - * @type Number + * @type String */ - freeDrawingLineWidth: 1, + selectionColor: 'rgba(100, 100, 255, 0.3)', // blue /** + * Color of the border of selection (usually slightly darker than color of selection itself) + * @property + * @type String + */ + selectionBorderColor: 'rgba(255, 255, 255, 0.3)', + + /** + * Width of a line used in selection * @property * @type Number */ selectionLineWidth: 1, + /** + * Color of the line used in free drawing mode + * @property + * @type String + */ + freeDrawingColor: 'rgb(0, 0, 0)', + + /** + * Width of a line used in free drawing mode + * @property + * @type Number + */ + freeDrawingLineWidth: 1, + /** * @property * @type Boolean @@ -180,6 +186,7 @@ includeDefaultValues: true, /** + * Indicates whether images loaded via `fabric.Element#loadImageFromUrl` should be cached * @property * @type Boolean */ @@ -1811,7 +1818,7 @@ }, /** - * Loads an image from URL + * Loads an image from URL, creates an instance of fabric.Image and passes it to a callback * @function * @method loadImageFromURL * @param url {String} url of image to load @@ -1858,6 +1865,7 @@ imgEl.src = url; if (this.shouldCacheImages) { + // TODO (kangax): replace Element.identify w. fabric -based alternative imgCache[url] = Element.identify(imgEl); } document.body.appendChild(imgEl); @@ -2242,6 +2250,7 @@ }, /** + * Used for caching SVG documents (loaded via `fabric.Element#loadSVGFromURL`) * @property * @namespace */ diff --git a/src/ellipse.class.js b/src/ellipse.class.js index 64bb70ca..5436481b 100644 --- a/src/ellipse.class.js +++ b/src/ellipse.class.js @@ -17,7 +17,10 @@ */ fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @scope fabric.Ellipse.prototype */ { - /** @property */ + /** + * @property + * @type String + */ type: 'ellipse', /** @@ -51,6 +54,7 @@ }, /** + * Renders this instance on a given context * @method render * @param ctx {CanvasRenderingContext2D} context to render on * @param noTransform {Boolean} context is not transformed when set to true @@ -81,6 +85,7 @@ }, /** + * Returns complexity of an instance * @method complexity * @return {Number} complexity */ @@ -89,6 +94,11 @@ } }); + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Ellipse.fromElement`) + * @static + * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement + */ fabric.Ellipse.ATTRIBUTE_NAMES = 'cx cy rx ry fill fill-opacity stroke stroke-width transform'.split(' '); /** diff --git a/src/group.class.js b/src/group.class.js index 3721053e..74a97c14 100644 --- a/src/group.class.js +++ b/src/group.class.js @@ -286,6 +286,7 @@ }, /** + * Saves coordinates of this instance (to be used together with `hasMoved`) * @saveCoords * @return {fabric.Group} thisArg * @chainable @@ -297,6 +298,7 @@ }, /** + * Checks whether this group was moved (since `saveCoords` was called last) * @method hasMoved * @return {Boolean} true if an object was moved (since fabric.Group#saveCoords was called) */ @@ -343,6 +345,7 @@ }, /** + * Executes given function for each object in this group * @method forEachObject * @param {Function} callback * Callback invoked with current object as first argument, @@ -418,8 +421,9 @@ }, /** + * Checks if point is contained within the group * @method containsPoint - * @param {Object} point point with `x` and `y` properties + * @param {fabric.Point} point point with `x` and `y` properties * @return {Boolean} true if point is contained within group */ containsPoint: function(point) { @@ -435,6 +439,10 @@ centerY + halfHeight > point.y; }, + /** + * Makes all of this group's objects grayscale (i.e. calling `toGrayscale` on them) + * @method toGrayscale + */ toGrayscale: function() { var i = this.objects.length; while (i--) { @@ -444,6 +452,7 @@ }); /** + * Returns fabric.Group instance from an object representation * @static * @method fabric.Group.fromObject * @param object {Object} object to create a group from diff --git a/src/line.class.js b/src/line.class.js index a8b93094..58a8a7f1 100644 --- a/src/line.class.js +++ b/src/line.class.js @@ -69,6 +69,7 @@ }, /** + * Returns complexity of an instance * @method complexity * @return {Number} complexity */ @@ -92,11 +93,14 @@ }); /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Line.fromElement`) + * @static * @see http://www.w3.org/TR/SVG/shapes.html#LineElement */ - fabric.Element.ATTRIBUTE_NAMES = 'x1 y1 x2 y2 stroke stroke-width transform'.split(' '); + fabric.Line.ATTRIBUTE_NAMES = 'x1 y1 x2 y2 stroke stroke-width transform'.split(' '); /** + * Returns fabric.Line instance from an SVG element * @static * @method fabric.Line.fromElement * @param {SVGElement} element Element to parse @@ -104,7 +108,7 @@ * @return {fabric.Line} instance of fabric.Line */ fabric.Line.fromElement = function(element, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Element.ATTRIBUTE_NAMES); + var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES); var points = [ parsedAttributes.x1 || 0, parsedAttributes.y1 || 0, @@ -115,6 +119,7 @@ }; /** + * Returns fabric.Line instance from an object representation * @static * @method fabric.Line.fromObject * @param {Object} object Object to create an instance from diff --git a/src/object.class.js b/src/object.class.js index 46fa7a96..caf3ba45 100644 --- a/src/object.class.js +++ b/src/object.class.js @@ -56,6 +56,8 @@ MIN_SCALE_LIMIT: 0.1, /** + * 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 * @property * @type Array */ @@ -216,6 +218,7 @@ }, /** + * Returns (dataless) object representation of an instance * @method toDatalessObject */ toDatalessObject: function() { diff --git a/src/parser.js b/src/parser.js index 594dc91e..056f5811 100644 --- a/src/parser.js +++ b/src/parser.js @@ -1,6 +1,9 @@ (function(){ - /** @name fabric */ + /** + * @name fabric + * @namespace + */ var fabric = this.fabric || (this.fabric = { }), extend = fabric.util.object.extend, @@ -22,7 +25,6 @@ /** * Returns an object of attributes' name/value, given element and an array of attribute names; * Parses parent "g" nodes recursively upwards. - * * @static * @memberOf fabric * @method parseAttributes @@ -75,6 +77,7 @@ }; /** + * Parses "transform" attribute, returning an array of values * @static * @function * @memberOf fabric @@ -208,6 +211,7 @@ })(); /** + * Parses "points" attribute, returning an array of values * @static * @memberOf fabric * @method parsePointsAttribute @@ -247,6 +251,7 @@ }; /** + * Parses "style" attribute, retuning an object with values * @static * @memberOf fabric * @method parseStyleAttribute @@ -280,6 +285,7 @@ }; /** + * Transforms an array of svg elements to corresponding fabric.* instances * @static * @memberOf fabric * @method parseElements @@ -288,7 +294,6 @@ * @return {Array} Array of corresponding instances (transformed from SVG elements) */ function parseElements(elements, options) { - // transform svg elements to fabric.Path elements var _elements = elements.map(function(el) { var klass = fabric[capitalize(el.tagName)]; if (klass && klass.fromElement) { diff --git a/src/path.class.js b/src/path.class.js index 33716455..129a1e5b 100644 --- a/src/path.class.js +++ b/src/path.class.js @@ -86,6 +86,10 @@ } }, + /** + * @private + * @method _initializeFromArray + */ _initializeFromArray: function(options) { var isWidthSet = 'width' in options, isHeightSet = 'height' in options; @@ -103,6 +107,10 @@ } }, + /** + * @private + * @method _render + */ _render: function(ctx) { var current, // current instruction x = 0, // current x @@ -289,6 +297,12 @@ } }, + /** + * Renders path on a specified context + * @method render + * @param {CanvasRenderingContext2D} ctx context to render path on + * @param {Boolean} noTransform When true, context is not transformed + */ render: function(ctx, noTransform) { ctx.save(); var m = this.transformMatrix; @@ -341,6 +355,7 @@ }, /** + * Returns object representation of an instance * @method toObject * @return {Object} */ @@ -358,6 +373,7 @@ }, /** + * Returns dataless object representation of an instance * @method toDatalessObject * @return {Object} */ @@ -379,10 +395,10 @@ return this.path.length; }, - set: function(prop, value) { - return this.callSuper('set', prop, value); - }, - + /** + * @private + * @method _parsePath + */ _parsePath: function() { var result = [], @@ -477,10 +493,15 @@ return new fabric.Path(object.path, object); }; - var ATTRIBUTE_NAMES = fabric.Path.ATTRIBUTE_NAMES = 'd fill fill-opacity fill-rule stroke stroke-width transform'.split(' '); + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) + * @static + * @see http://www.w3.org/TR/SVG/paths.html#PathElement + */ + fabric.Path.ATTRIBUTE_NAMES = 'd fill fill-opacity fill-rule stroke stroke-width transform'.split(' '); /** - * Creates an instance of fabric.Path from an SVG element + * Creates an instance of fabric.Path from an SVG element * @static * @method fabric.Path.fromElement * @param {SVGElement} element to parse @@ -488,7 +509,7 @@ * @return {fabric.Path} Instance of fabric.Path */ fabric.Path.fromElement = function(element, options) { - var parsedAttributes = fabric.parseAttributes(element, ATTRIBUTE_NAMES), + var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES), path = parsedAttributes.d; delete parsedAttributes.d; return new fabric.Path(path, extend(parsedAttributes, options)); diff --git a/src/path_group.class.js b/src/path_group.class.js index 9205decb..ee376acc 100644 --- a/src/path_group.class.js +++ b/src/path_group.class.js @@ -48,7 +48,7 @@ this.paths = paths; this.setOptions(options); - this.initProperties(); + this._initProperties(); this.setCoords(); @@ -57,7 +57,11 @@ } }, - initProperties: function() { + /** + * @private + * @method _initProperties + */ + _initProperties: function() { this.stateProperties.forEach(function(prop) { if (prop === 'fill') { this.set(prop, this.options[prop]); @@ -71,6 +75,11 @@ }, this); }, + /** + * Renders this group on a specified context + * @method render + * @param {CanvasRenderingContext2D} ctx Context to render this instance on + */ render: function(ctx) { if (this.stub) { // fast-path, rendering image stub @@ -105,6 +114,7 @@ }, /** + * Sets certain property to a certain value * @method set * @param {String} prop * @param {Any} value @@ -126,6 +136,7 @@ }, /** + * Returns object representation of this path group * @method toObject * @return {Object} object representation of an instance */ @@ -137,6 +148,7 @@ }, /** + * Returns dataless object representation of this path group * @method toDatalessObject * @return {Object} dataless object representation of an instance */ @@ -149,7 +161,7 @@ }, /** - * Returns a string representation of an object + * Returns a string representation of this path group * @method toString * @return {String} string representation of an object */ @@ -159,6 +171,7 @@ }, /** + * Returns true if all paths in this group are of same color * @method isSameColor * @return {Boolean} true if all paths are of the same color (`fill`) */ @@ -194,6 +207,7 @@ }, /** + * Returns all paths in this path group * @method getObjects * @return {Array} array of path objects included in this path group */ @@ -217,6 +231,7 @@ } /** + * Creates fabric.Triangle instance from an object representation * @static * @method fabric.PathGroup.fromObject * @param {Object} object diff --git a/src/polyline.class.js b/src/polyline.class.js index d150802d..58784bde 100644 --- a/src/polyline.class.js +++ b/src/polyline.class.js @@ -87,7 +87,7 @@ * @static * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement */ - var ATTRIBUTE_NAMES = 'fill fill-opacity stroke stroke-width transform'.split(' '); + fabric.Polyline.ATTRIBUTE_NAMES = 'fill fill-opacity stroke stroke-width transform'.split(' '); /** * Returns fabric.Polyline instance from an SVG element diff --git a/src/rect.class.js b/src/rect.class.js index cbe7ffe4..0b81057d 100644 --- a/src/rect.class.js +++ b/src/rect.class.js @@ -108,6 +108,11 @@ }); // TODO (kangax): implement rounded rectangles (both parsing and rendering) + + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) + * @static + */ fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity stroke stroke-width transform'.split(' '); /** @@ -120,6 +125,7 @@ } /** + * Returns fabric.Rect instance from an SVG element * @static * @method fabric.Rect.fromElement * @param element {SVGElement} element to parse @@ -141,6 +147,7 @@ }; /** + * Returns fabric.Rect instance from an object representation * @static * @method fabric.Rect.fromObject * @param object {Object} object to create an instance from diff --git a/src/scout.js b/src/scout.js index f2c2bfef..0f848426 100644 --- a/src/scout.js +++ b/src/scout.js @@ -1,3 +1,4 @@ +/** @ignore */ var scout = (function () { var tests = { }; return { diff --git a/src/text.class.js b/src/text.class.js index 6a0a1d2e..f5453bf9 100644 --- a/src/text.class.js +++ b/src/text.class.js @@ -49,7 +49,7 @@ */ initialize: function(text, options) { this.originalState = { }; - this.initStateProperties(); + this._initStateProperties(); this.text = text; this.setOptions(options); extend(this, this.options); @@ -59,9 +59,11 @@ }, /** + * Creates `stateProperties` list on an instance, and adds `fabric.Text` -specific ones to it (such as "fontfamily", "fontweight", etc.) + * @private * @method initStateProperties */ - initStateProperties: function() { + _initStateProperties: function() { var o; if ((o = this.constructor) && (o = o.superclass) && @@ -134,6 +136,7 @@ }, /** + * Renders text instance on a specified context * @method render * @param ctx {CanvasRenderingContext2D} context to render on */ @@ -148,6 +151,7 @@ }, /** + * Returns object representation of an instance * @method toObject * @return {Object} Object representation of text object */ @@ -162,6 +166,7 @@ }, /** + * Sets "color" of an instance (alias of `set('fill', …)`) * @method setColor * @param {String} value * @return {fabric.Text} thisArg @@ -173,6 +178,7 @@ }, /** + * Sets fontsize of an instance and updates its coordinates * @method setFontsize * @param {Number} value * @return {fabric.Text} thisArg @@ -185,6 +191,7 @@ }, /** + * Returns actual text value of an instance * @method getText * @return {String} */ @@ -234,6 +241,7 @@ }; /** + * Returns fabric.Text instance from an SVG element (not yet implemented) * @static * @method fabric.Text.fromElement * @return {fabric.Text} an instance diff --git a/src/util/lang_string.js b/src/util/lang_string.js index fc7014c6..663066d5 100644 --- a/src/util/lang_string.js +++ b/src/util/lang_string.js @@ -2,6 +2,7 @@ if (!String.prototype.trim) { /** * Trims a string (removing whitespace from the beginning and the end) * @method trim + * @see String#trim on MDN */ String.prototype.trim = function () { // this trim is not fully ES3 or ES5 compliant, but it should cover most cases for now