diff --git a/build.js b/build.js index 7389abb9..c74dcc4e 100644 --- a/build.js +++ b/build.js @@ -29,12 +29,14 @@ else if (minifier === 'uglifyjs') { var includeAllModules = modulesToInclude.length === 1 && modulesToInclude[0] === 'ALL'; var noStrict = 'no-strict' in buildArgsAsObject; +var noSVGExport = 'no-svg-export' in buildArgsAsObject; var distFileContents = '/* build: `node build.js modules=' + modulesToInclude.join(',') + (modulesToExclude.length ? (' exclude=' + modulesToExclude.join(',')) : '') + (noStrict ? ' no-strict' : '') + + (noSVGExport ? ' no-svg-export' : '') + '` */\n'; function appendFileContents(fileNames, callback) { @@ -53,10 +55,14 @@ function appendFileContents(fileNames, callback) { fs.readFile(__dirname + '/' + fileName, function (err, data) { if (err) throw err; + var strData = String(data); if (noStrict) { - data = String(data).replace(/"use strict";?\n?/, ''); + strData = strData.replace(/"use strict";?\n?/, ''); } - distFileContents += (data + '\n'); + if (noSVGExport) { + strData = strData.replace(/\/\* _TO_SVG_START_ \*\/[\s\S]*\/\* _TO_SVG_END_ \*\//, ''); + } + distFileContents += (strData + '\n'); readNextFile(); }); diff --git a/dist/all.js b/dist/all.js index 47ecbcf2..ac34a8ab 100644 --- a/dist/all.js +++ b/dist/all.js @@ -4767,39 +4767,7 @@ fabric.util.string = { }; }, - /** - * Returns an instance of CanvasGradient - * @param ctx - * @return {CanvasGradient} - */ - toLive: function(ctx) { - var gradient; - - if (!this.type) return; - - if (this.type === 'linear') { - gradient = ctx.createLinearGradient( - this.coords.x1, this.coords.y1, this.coords.x2 || ctx.canvas.width, this.coords.y2); - } - else if (this.type === 'radial') { - gradient = ctx.createRadialGradient( - this.coords.x1, this.coords.y1, this.coords.r1, this.coords.x2, this.coords.y2, this.coords.r2); - } - - for (var i = 0; i < this.colorStops.length; i++) { - var color = this.colorStops[i].color, - opacity = this.colorStops[i].opacity, - offset = this.colorStops[i].offset; - - if (opacity) { - color = new fabric.Color(color).setAlpha(opacity).toRgba(); - } - gradient.addColorStop(parseFloat(offset), color); - } - - return gradient; - }, - + /* _TO_SVG_START_ */ /** * Returns SVG representation of an gradient * @param {Object} object Object to create a gradient for @@ -4864,6 +4832,40 @@ fabric.util.string = { markup.push((this.type === 'linear' ? '' : '')); return markup.join(''); + }, + /* _TO_SVG_END_ */ + + /** + * Returns an instance of CanvasGradient + * @param ctx + * @return {CanvasGradient} + */ + toLive: function(ctx) { + var gradient; + + if (!this.type) return; + + if (this.type === 'linear') { + gradient = ctx.createLinearGradient( + this.coords.x1, this.coords.y1, this.coords.x2 || ctx.canvas.width, this.coords.y2); + } + else if (this.type === 'radial') { + gradient = ctx.createRadialGradient( + this.coords.x1, this.coords.y1, this.coords.r1, this.coords.x2, this.coords.y2, this.coords.r2); + } + + for (var i = 0; i < this.colorStops.length; i++) { + var color = this.colorStops[i].color, + opacity = this.colorStops[i].opacity, + offset = this.colorStops[i].offset; + + if (opacity) { + color = new fabric.Color(color).setAlpha(opacity).toRgba(); + } + gradient.addColorStop(parseFloat(offset), color); + } + + return gradient; } }); @@ -6848,6 +6850,7 @@ fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { return data; }, + /* _TO_SVG_START_ */ /** * Returns SVG representation of canvas * @function @@ -6920,6 +6923,7 @@ fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { return markup.join(''); }, + /* _TO_SVG_END_ */ /** * Removes an object from canvas and returns it @@ -8025,10 +8029,10 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab }, /** - * Applies one implementation of 'point inside polygon' algorithm - * @param e { Event } event object - * @param target { fabric.Object } object to test against - * @return {Boolean} true if point contains within area of given object + * Checks if point is contained within an area of given object + * @param {Event} e Event object + * @param {fabric.Object} target Object to test against + * @return {Boolean} true if point is contained within an area of given object */ containsPoint: function (e, target) { var pointer = this.getPointer(e), @@ -11211,7 +11215,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati Math.pow(this.currentWidth / 2, 2) + Math.pow(this.currentHeight / 2, 2)); - var _angle = Math.atan(this.currentHeight / this.currentWidth); + var _angle = Math.atan(isFinite(this.currentHeight / this.currentWidth) ? this.currentHeight / this.currentWidth : 0); // offset added for rotate and scale actions var offsetX = Math.cos(_angle + theta) * _hypotenuse, @@ -11344,8 +11348,8 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot /** * Determines which one of the four corners has been clicked * @private - * @param e {Event} event object - * @param offset {Object} canvas offset + * @param {Event} e Event object + * @param {Object} offset Canvas offset * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found */ _findTargetCorner: function(e, offset) { @@ -11443,9 +11447,9 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot }, /** - * Method that returns an object with the image lines in it given the coordinates of the corners + * Method that returns an object with the object edges in it, given the coordinates of the corners * @private - * @param oCoords {Object} coordinates of the image corners + * @param {Object} oCoords Coordinates of the image corners */ _getImageLines: function(oCoords) { return { @@ -11947,14 +11951,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ctx.closePath(); }, - /** - * Returns complexity of an instance - * @return {Number} complexity - */ - complexity: function() { - return 1; - }, - /** * Returns object representation of an instance * @methd toObject @@ -11970,6 +11966,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot }); }, + /* _TO_SVG_START_ */ /** * Returns SVG representation of an instance * @return {String} svg representation of an instance @@ -11992,6 +11989,15 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ); return markup.join(''); + }, + /* _TO_SVG_END_ */ + + /** + * Returns complexity of an instance + * @return {Number} complexity + */ + complexity: function() { + return 1; } }); @@ -12085,6 +12091,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot }); }, + /* _TO_SVG_START_ */ /** * Returns svg representation of an instance * @return {String} svg representation of an instance @@ -12110,6 +12117,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return markup.join(''); }, + /* _TO_SVG_END_ */ /** * @private @@ -12286,14 +12294,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ctx.closePath(); }, - /** - * Returns complexity of an instance - * @return {Number} complexity of this instance - */ - complexity: function() { - return 1; - }, - + /* _TO_SVG_START_ */ /** * Returns SVG representation of an instance * @return {String} svg representation of an instance @@ -12325,6 +12326,15 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ); return markup.join(''); + }, + /* _TO_SVG_END_ */ + + /** + * Returns complexity of an instance + * @return {Number} complexity of this instance + */ + complexity: function() { + return 1; } }); @@ -12408,6 +12418,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot }); }, + /* _TO_SVG_START_ */ /** * Returns svg representation of an instance * @return {String} svg representation of an instance @@ -12433,6 +12444,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return markup.join(''); }, + /* _TO_SVG_END_ */ /** * Renders this instance on a given context @@ -12679,14 +12691,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return this; }, - /** - * Returns complexity of an instance - * @return {Number} complexity - */ - complexity: function() { - return 1; - }, - /** * Returns object representation of an instance * @param {Array} propertiesToInclude @@ -12699,6 +12703,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot }); }, + /* _TO_SVG_START_ */ /** * Returns svg representation of an instance * @return {String} svg representation of an instance @@ -12724,6 +12729,15 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ); return markup.join(''); + }, + /* _TO_SVG_END_ */ + + /** + * Returns complexity of an instance + * @return {Number} complexity + */ + complexity: function() { + return 1; } }); @@ -12831,6 +12845,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return fabric.Polygon.prototype.toObject.call(this, propertiesToInclude); }, + /* _TO_SVG_START_ */ /** * Returns SVG representation of an instance * @return {String} svg representation of an instance @@ -12860,6 +12875,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return markup.join(''); }, + /* _TO_SVG_END_ */ /** * @private @@ -13029,6 +13045,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot }); }, + /* _TO_SVG_START_ */ /** * Returns svg representation of an instance * @return {String} svg representation of an instance @@ -13058,6 +13075,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return markup.join(''); }, + /* _TO_SVG_END_ */ /** * @private @@ -13768,6 +13786,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return o; }, + /* _TO_SVG_START_ */ /** * Returns svg representation of an instance * @return {String} svg representation of an instance @@ -13801,6 +13820,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return markup.join(''); }, + /* _TO_SVG_END_ */ /** * Returns number representation of an instance complexity @@ -14092,6 +14112,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return o; }, + /* _TO_SVG_START_ */ /** * Returns svg representation of an instance * @return {String} svg representation of an instance @@ -14112,6 +14133,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return markup.join(''); }, + /* _TO_SVG_END_ */ /** * Returns a string representation of this path group @@ -14593,6 +14615,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot centerY + halfHeight > point.y; }, + /* _TO_SVG_START_ */ /** * Returns svg representation of an instance * @return {String} svg representation of an instance @@ -14608,6 +14631,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot objectsMarkup.join('') + ''); }, + /* _TO_SVG_END_ */ /** * Returns requested property @@ -14828,6 +14852,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot }); }, + /* _TO_SVG_START_ */ /** * Returns SVG representation of an instance * @return {String} svg representation of an instance @@ -14865,6 +14890,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot return markup.join(''); }, + /* _TO_SVG_END_ */ /** * Returns source of an image @@ -14921,7 +14947,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot }); /** @ignore */ - + replacement.width = imgEl.width; replacement.height = imgEl.height; @@ -14929,7 +14955,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot // cut off data:image/png;base64, part in the beginning var base64str = canvasEl.toDataURL('image/png').substring(22); replacement.src = new Buffer(base64str, 'base64'); - + // onload doesn't fire in some node versions, so we invoke callback manually _this._element = replacement; callback && callback(); @@ -16657,6 +16683,7 @@ fabric.Image.filters.Pixelate.fromObject = function(object) { }); }, + /* _TO_SVG_START_ */ /** * Returns SVG representation of an instance * @return {String} svg representation of an instance @@ -16813,6 +16840,7 @@ fabric.Image.filters.Pixelate.fromObject = function(object) { } return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; }, + /* _TO_SVG_END_ */ /** * Sets "color" of an instance (alias of `set('fill', …)`) diff --git a/dist/all.min.js b/dist/all.min.js index 5c4d2a86..700e9150 100644 --- a/dist/all.min.js +++ b/dist/all.min.js @@ -1,6 +1,6 @@ /* build: `node build.js modules=ALL exclude=gestures` *//*! Fabric.js Copyright 2008-2013, Printio (Juriy Zaytsev, Maxim Chernyak) */var fabric=fabric||{version:"1.1.12"};typeof exports!="undefined"&&(exports.fabric=fabric),typeof document!="undefined"&&typeof window!="undefined"?(fabric.document=document,fabric.window=window):(fabric.document=require("jsdom").jsdom("
"),fabric.window=fabric.document.createWindow()),fabric.isTouchSupported="ontouchstart"in fabric.document.documentElement,fabric.isLikelyNode=typeof Buffer!="undefined"&&typeof window=="undefined";var Cufon=function(){function r(e){var t=this.face=e.face;this.glyphs=e.glyphs,this.w=e.w,this.baseSize=parseInt(t["units-per-em"],10),this.family=t["font-family"].toLowerCase(),this.weight=t["font-weight"],this.style=t["font-style"]||"normal",this.viewBox=function(){var e=t.bbox.split(/\s+/),n={minX:parseInt(e[0],10),minY:parseInt(e[1],10),maxX:parseInt(e[2],10),maxY:parseInt(e[3],10)};return n.width=n.maxX-n.minX,n.height=n.maxY-n.minY,n.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")},n}(),this.ascent=-parseInt(t.ascent,10),this.descent=-parseInt(t.descent,10),this.height=-this.ascent+this.descent}function i(){var e={},t={oblique:"italic",italic:"oblique"};this.add=function(t){(e[t.style]||(e[t.style]={}))[t.weight]=t},this.get=function(n,r){var i=e[n]||e[t[n]]||e.normal||e.italic||e.oblique;if(!i)return null;r={normal:400,bold:700}[r]||parseInt(r,10);if(i[r])return i[r];var s={1:1,99:0}[r%100],o=[],u,a;s===undefined&&(s=r>400),r==500&&(r=400);for(var f in i){f=parseInt(f,10);if(!u||fa)a=f;o.push(f)}return ra&&(r=a),o.sort(function(e,t){return(s?e>r&&t>r?e-1},complexity:function(){return this.getObjects().reduce(function(e,t){return e+=t.complexity?t.complexity():0,e},0)},toGrayscale:function(){return this.forEachObject(function(e){e.toGrayscale()})}},function(){function n(e,t){var n=e.indexOf(t);return n!==-1&&e.splice(n,1),e}function r(e,t){return Math.floor(Math.random()*(t-e+1))+e}function s(e){return e*i}function o(e){return e/i}function u(e,t,n){var r=Math.sin(n),i=Math.cos(n);e.subtractEquals(t);var s=e.x*i-e.y*r,o=e.x*r+e.y*i;return(new fabric.Point(s,o)).addEquals(t)}function a(e,t){return parseFloat(Number(e).toFixed(t))}function f(){return!1}function l(e){e||(e={});var t=+(new Date),n=e.duration||500,r=t+n,i,s=e.onChange||function(){},o=e.abort||function(){return!1},u=e.easing||function(e,t,n,r){return-n*Math.cos(e/r*(Math.PI/2))+n+t},a="startValue"in e?e.startValue:0,f="endValue"in e?e.endValue:100,l=e.byValue||f-a;e.onStart&&e.onStart(),function c(){i=+(new Date);var f=i>r?n:i-t;s(u(f,a,l,n));if(i>r||o()){e.onComplete&&e.onComplete();return}h(c)}()}function p(e,t,n){if(e){var r=fabric.util.createImage();r.onload=function(){t&&t.call(n,r),r=r.onload=null},r.src=e}else t&&t.call(n,e)}function d(e,t){function n(e){return fabric[fabric.util.string.camelize(fabric.util.string.capitalize(e))]}function r(){++s===o&&t&&t(i)}var i=[],s=0,o=e.length;e.forEach(function(e,t){if(!e.type)return;var s=n(e.type);s.async?s.fromObject(e,function(e,n){n||(i[t]=e),r()}):(i[t]=s.fromObject(e),r())})}function v(e,t,n){var r;return e.length>1?r=new fabric.PathGroup(e,t):r=e[0],typeof n!="undefined"&&r.setSourcePath(n),r}function m(e,t,n){if(n&&Object.prototype.toString.call(n)==="[object Array]")for(var r=0,i=n.length;rr)r+=u[p++%h],r>l&&(r=l),n[d?"lineTo":"moveTo"](r,0),d=!d;n.restore()}function y(e){return e||(e=fabric.document.createElement("canvas")),!e.getContext&&typeof G_vmlCanvasManager!="undefined"&&G_vmlCanvasManager.initElement(e),e}function b(){return fabric.isLikelyNode?new(require("canvas").Image):fabric.document.createElement("img")}function w(e){var t=e.prototype;for(var n=t.stateProperties.length;n--;){var r=t.stateProperties[n],i=r.charAt(0).toUpperCase()+r.slice(1),s="set"+i,o="get"+i;t[o]||(t[o]=function(e){return new Function('return this.get("'+e+'")')}(r)),t[s]||(t[s]=function(e){return new Function("value",'return this.set("'+e+'", value)')}(r))}}function E(e,t){t.save(),t.beginPath(),e.clipTo(t),t.clip()}function S(e,t){var n=[[e[0],e[2],e[4]],[e[1],e[3],e[5]],[0,0,1]],r=[[t[0],t[2],t[4]],[t[1],t[3],t[5]],[0,0,1]],i=[];for(var s=0;s<3;s++){i[s]=[];for(var o=0;o<3;o++){var u=0;for(var a=0;a<3;a++)u+=n[s][a]*r[a][o];i[s][o]=u}}return[i[0][0],i[1][0],i[0][1],i[1][1],i[0][2],i[1][2]]}var e=Math.sqrt,t=Math.atan2;fabric.util={};var i=Math.PI/180,c=fabric.window.requestAnimationFrame||fabric.window.webkitRequestAnimationFrame||fabric.window.mozRequestAnimationFrame||fabric.window.oRequestAnimationFrame||fabric.window.msRequestAnimationFrame||function(e){fabric.window.setTimeout(e,1e3/60)},h=function(){return c.apply(fabric.window,arguments)};fabric.util.removeFromArray=n,fabric.util.degreesToRadians=s,fabric.util.radiansToDegrees=o,fabric.util.rotatePoint=u,fabric.util.toFixed=a,fabric.util.getRandomInt=r,fabric.util.falseFunction=f,fabric.util.animate=l,fabric.util.requestAnimFrame=h,fabric.util.loadImage=p,fabric.util.enlivenObjects=d,fabric.util.groupSVGElements=v,fabric.util.populateWithProperties=m,fabric.util.drawDashedLine=g,fabric.util.createCanvasElement=y,fabric.util.createImage=b,fabric.util.createAccessors=w,fabric.util.clipContext=E,fabric.util.multiplyTransformMatrices=S}(),function(){function t(t,n){var r=e.call(arguments,2),i=[];for(var s=0,o=t.length;s>>0,n=0,r;if(arguments.length>1)r=arguments[1];else do{if(n in this){r=this[n++];break}if(++n>=t)throw new TypeError}while(!0);for(;n0&&(i.status="Intersection"),i},t.Intersection.intersectPolygonPolygon=function(e,t){var r=new n("No Intersection"),i=e.length;for(var s=0;s0&&(r.status="Intersection"),r},t.Intersection.intersectPolygonRectangle=function(e,r,i){var s=r.min(i),o=r.max(i),u=new t.Point(o.x,s.y),a=new t.Point(s.x,o.y),f=n.intersectLinePolygon(s,u,e),l=n.intersectLinePolygon(u,o,e),c=n.intersectLinePolygon(o,a,e),h=n.intersectLinePolygon(a,s,e),p=new n("No Intersection");return p.appendPoints(f.points),p.appendPoints(l.points),p.appendPoints(c.points),p.appendPoints(h.points),p.points.length>0&&(p.status="Intersection"),p}}(typeof exports!="undefined"?exports:this),function(e){"use strict";function n(e){e?this._tryParsingColor(e):this.setSource([0,0,0,1])}var t=e.fabric||(e.fabric={});if(t.Color){t.warn("fabric.Color is already defined.");return}t.Color=n,t.Color.prototype={_tryParsingColor:function(e){var t;e in n.colorNameMap&&(e=n.colorNameMap[e]),t=n.sourceFromHex(e),t||(t=n.sourceFromRgb(e)),t&&this.setSource(t)},getSource:function(){return this._source},setSource:function(e){this._source=e},toRgb:function(){var e=this.getSource();return"rgb("+e[0]+","+e[1]+","+e[2]+")"},toRgba:function(){var e=this.getSource();return"rgba("+e[0]+","+e[1]+","+e[2]+","+e[3]+")"},toHex:function(){var e=this.getSource(),t=e[0].toString(16);t=t.length===1?"0"+t:t;var n=e[1].toString(16);n=n.length===1?"0"+n:n;var r=e[2].toString(16);return r=r.length===1?"0"+r:r,t.toUpperCase()+n.toUpperCase()+r.toUpperCase()},getAlpha:function(){return this.getSource()[3]},setAlpha:function(e){var t=this.getSource();return t[3]=e,this.setSource(t),this},toGrayscale:function(){var e=this.getSource(),t=parseInt((e[0]*.3+e[1]*.59+e[2]*.11).toFixed(0),10),n=e[3];return this.setSource([t,t,t,n]),this},toBlackWhite:function(e){var t=this.getSource(),n=(t[0]*.3+t[1]*.59+t[2]*.11).toFixed(0),r=t[3];return e=e||127,n=Number(n)0&&(i.status="Intersection"),i},t.Intersection.intersectPolygonPolygon=function(e,t){var r=new n("No Intersection"),i=e.length;for(var s=0;s0&&(r.status="Intersection"),r},t.Intersection.intersectPolygonRectangle=function(e,r,i){var s=r.min(i),o=r.max(i),u=new t.Point(o.x,s.y),a=new t.Point(s.x,o.y),f=n.intersectLinePolygon(s,u,e),l=n.intersectLinePolygon(u,o,e),c=n.intersectLinePolygon(o,a,e),h=n.intersectLinePolygon(a,s,e),p=new n("No Intersection");return p.appendPoints(f.points),p.appendPoints(l.points),p.appendPoints(c.points),p.appendPoints(h.points),p.points.length>0&&(p.status="Intersection"),p}}(typeof exports!="undefined"?exports:this),function(e){"use strict";function n(e){e?this._tryParsingColor(e):this.setSource([0,0,0,1])}var t=e.fabric||(e.fabric={});if(t.Color){t.warn("fabric.Color is already defined.");return}t.Color=n,t.Color.prototype={_tryParsingColor:function(e){var t;e in n.colorNameMap&&(e=n.colorNameMap[e]),t=n.sourceFromHex(e),t||(t=n.sourceFromRgb(e)),t&&this.setSource(t)},getSource:function(){return this._source},setSource:function(e){this._source=e},toRgb:function(){var e=this.getSource();return"rgb("+e[0]+","+e[1]+","+e[2]+")"},toRgba:function(){var e=this.getSource();return"rgba("+e[0]+","+e[1]+","+e[2]+","+e[3]+")"},toHex:function(){var e=this.getSource(),t=e[0].toString(16);t=t.length===1?"0"+t:t;var n=e[1].toString(16);n=n.length===1?"0"+n:n;var r=e[2].toString(16);return r=r.length===1?"0"+r:r,t.toUpperCase()+n.toUpperCase()+r.toUpperCase()},getAlpha:function(){return this.getSource()[3]},setAlpha:function(e){var t=this.getSource();return t[3]=e,this.setSource(t),this},toGrayscale:function(){var e=this.getSource(),t=parseInt((e[0]*.3+e[1]*.59+e[2]*.11).toFixed(0),10),n=e[3];return this.setSource([t,t,t,n]),this},toBlackWhite:function(e){var t=this.getSource(),n=(t[0]*.3+t[1]*.59+t[2]*.11).toFixed(0),r=t[3];return e=e||127,n=Number(n)