mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-22 23:04:42 +00:00
More free-drawing tweaks. Paths can now be created with different stroke width and color. Add these options to demo.
This commit is contained in:
kangax
parent
9d018caf40
commit
5f18c43e91
7 changed files with 106 additions and 79 deletions
38
dist/all.js
vendored
38
dist/all.js
vendored
|
|
@ -2227,10 +2227,13 @@ fabric.util.animate = animate;
|
|||
|
||||
extend(fabric.Element.prototype, {
|
||||
|
||||
selectionColor: 'rgba(100,100,255,0.3)', // blue
|
||||
selectionBorderColor: 'rgba(255,255,255,0.3)',
|
||||
selectionLineWidth: 1,
|
||||
selectionColor: 'rgba(100, 100, 255, 0.3)', // blue
|
||||
selectionBorderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
freeDrawingColor: 'rgb(0, 0, 0)',
|
||||
backgroundColor: 'transparent',
|
||||
|
||||
freeDrawingLineWidth: 1,
|
||||
selectionLineWidth: 1,
|
||||
includeDefaultValues: true,
|
||||
|
||||
shouldCacheImages: false,
|
||||
|
|
@ -2756,7 +2759,8 @@ fabric.util.animate = animate;
|
|||
|
||||
this.contextTop.beginPath();
|
||||
this.contextTop.moveTo(pointer.x, pointer.y);
|
||||
this.contextTop.strokeStyle = 'rgb(0,0,0)';
|
||||
this.contextTop.strokeStyle = this.freeDrawingColor;
|
||||
this.contextTop.lineWidth = this.freeDrawingLineWidth;
|
||||
},
|
||||
|
||||
_captureDrawingPath: function(e) {
|
||||
|
|
@ -2784,17 +2788,17 @@ fabric.util.animate = animate;
|
|||
xPoints = this._freeDrawingXPoints,
|
||||
yPoints = this._freeDrawingYPoints;
|
||||
|
||||
ctx.fillStyle = 'rgb(0, 0, 0)';
|
||||
|
||||
path.push('M ', xPoints[0] - minX, ' ', yPoints[0] - minY, ' ');
|
||||
|
||||
for (var i = 1; xPoint = xPoints[i], yPoint = yPoints[i]; i++) {
|
||||
path.push('L ', xPoint - minX, ' ', yPoint - minY, ' ');
|
||||
}
|
||||
|
||||
|
||||
var p = new fabric.Path(path.join(''));
|
||||
p.fill = null;
|
||||
p.options.stroke = "rgb(0,0,0)";
|
||||
p.stroke = this.freeDrawingColor;
|
||||
p.strokeWidth = this.freeDrawingLineWidth;
|
||||
this.add(p);
|
||||
p.set("left", minX + (maxX - minX) / 2).set("top", minY + (maxY - minY) / 2).setCoords();
|
||||
this.renderAll();
|
||||
|
|
@ -3150,15 +3154,13 @@ fabric.util.animate = animate;
|
|||
this.clearContext(containerCanvas);
|
||||
}
|
||||
|
||||
if (allOnTop) {
|
||||
/*if (!CAN_SET_TRANSPARENT_FILL && this.backgroundColor === 'transparent') {
|
||||
var skip = true;
|
||||
}
|
||||
if (!skip) {
|
||||
containerCanvas.fillStyle = this.backgroundColor;
|
||||
}
|
||||
containerCanvas.fillRect(0, 0, w, h);*/
|
||||
if (!CAN_SET_TRANSPARENT_FILL && this.backgroundColor === 'transparent') {
|
||||
var skip = true;
|
||||
}
|
||||
if (!skip) {
|
||||
containerCanvas.fillStyle = this.backgroundColor;
|
||||
}
|
||||
containerCanvas.fillRect(0, 0, w, h);
|
||||
|
||||
var length = this._objects.length,
|
||||
activeGroup = this.getActiveGroup();
|
||||
|
|
@ -6501,9 +6503,9 @@ fabric.util.animate = animate;
|
|||
if (this.fill) {
|
||||
ctx.fill();
|
||||
}
|
||||
if (this.options.stroke) {
|
||||
ctx.strokeStyle = this.options.stroke;
|
||||
ctx.lineWidth = this.options.strokeWidth;
|
||||
if (this.stroke) {
|
||||
ctx.strokeStyle = this.stroke;
|
||||
ctx.lineWidth = this.strokeWidth;
|
||||
ctx.stroke();
|
||||
}
|
||||
if (!noTransform && this.active) {
|
||||
|
|
|
|||
81
dist/all.min.js
vendored
81
dist/all.min.js
vendored
|
|
@ -14,7 +14,7 @@ function(e,b){return b?b.toUpperCase():""})},capitalize:function(k){return k.cha
|
|||
a.toString;if(a.valueOf!==Object.prototype.valueOf)b.prototype.valueOf=a.valueOf;for(var d in a)b.prototype[d]=a[d]}:function(b,a){for(var d in a)b.prototype[d]=a[d]};c.util.createClass=function(){function b(){this.initialize.apply(this,arguments)}var a=null,d=m.call(arguments,0);if(typeof d[0]==="function")a=d.shift();b.superclass=a;b.subclasses=[];if(a){k.prototype=a.prototype;b.prototype=new k;a.subclasses.push(b)}a=0;for(var h=d.length;a<h;a++)e(b,d[a]);if(!b.prototype.initialize)b.prototype.initialize=
|
||||
emptyFunction;return b.prototype.constructor=b}})();(function(){function k(u){var v=Array.prototype.slice.call(arguments,1),w,A,D=v.length;for(A=0;A<D;A++){w=typeof u[v[A]];if(!/^(?:function|object|unknown)$/.test(w))return false}return true}function e(u,v){return function(w){v.call(d(u),w||window.event)}}function b(u,v){return function(w){if(t[u]&&t[u][v])for(var A=t[u][v],D=0,F=A.length;D<F;D++)A[D].call(this,w||window.event)}}var a=function(){if(typeof document.documentElement.uniqueID!=="undefined")return function(v){return v.uniqueID};
|
||||
var u=0;return function(v){return v.__uniqueID||(v.__uniqueID="uniqueID__"+u++)}}(),d,h;(function(){var u={};d=function(v){return u[v]};h=function(v,w){u[v]=w}})();var o=k(document.documentElement,"addEventListener","removeEventListener")&&k(window,"addEventListener","removeEventListener"),q=k(document.documentElement,"attachEvent","detachEvent")&&k(window,"attachEvent","detachEvent"),r={},t={};if(o){addListener=function(u,v,w){u.addEventListener(v,w,false)};removeListener=function(u,v,w){u.removeEventListener(v,
|
||||
w,false)}}else if(q){addListener=function(u,v,w){var A=a(u);h(A,u);r[A]||(r[A]={});r[A][v]||(r[A][v]=[]);w={handler:w,wrappedHandler:e(A,w)};r[A][v].push(w);u.attachEvent("on"+v,w.wrappedHandler)};removeListener=function(u,v,w){var A=a(u),D;if(r[A]&&r[A][v])for(var F=0,f=r[A][v].length;F<f;F++)if((D=r[A][v][F])&&D.handler===w){u.detachEvent("on"+v,D.wrappedHandler);r[A][v][F]=null}}}else{addListener=function(u,v,w){var A=a(u);t[A]||(t[A]={});if(!t[A][v]){t[A][v]=[];var D=u["on"+v];D&&t[A][v].push(D);
|
||||
w,false)}}else if(q){addListener=function(u,v,w){var A=a(u);h(A,u);r[A]||(r[A]={});r[A][v]||(r[A][v]=[]);w={handler:w,wrappedHandler:e(A,w)};r[A][v].push(w);u.attachEvent("on"+v,w.wrappedHandler)};removeListener=function(u,v,w){var A=a(u),D;if(r[A]&&r[A][v])for(var F=0,J=r[A][v].length;F<J;F++)if((D=r[A][v][F])&&D.handler===w){u.detachEvent("on"+v,D.wrappedHandler);r[A][v][F]=null}}}else{addListener=function(u,v,w){var A=a(u);t[A]||(t[A]={});if(!t[A][v]){t[A][v]=[];var D=u["on"+v];D&&t[A][v].push(D);
|
||||
u["on"+v]=b(A,v)}t[A][v].push(w)};removeListener=function(u,v,w){u=a(u);if(t[u]&&t[u][v]){v=t[u][v];u=0;for(var A=v.length;u<A;u++)v[u]===w&&v.splice(u,1)}}}c.util.addListener=addListener;c.util.removeListener=removeListener;var x={};c.util.observeEvent=function(u,v){x[u]||(x[u]=[]);x[u].push(v)};c.util.fireEvent=function(u,v){var w=x[u];if(w)for(var A=0,D=w.length;A<D;A++)w[A]({memo:v})};c.util.getPointer=function(u){var v=document.documentElement,w=document.body||{scrollLeft:0},A=document.documentElement,
|
||||
D=document.body||{scrollTop:0};return{x:u.pageX||u.clientX+(v.scrollLeft||w.scrollLeft)-(v.clientLeft||0),y:u.pageY||u.clientY+(A.scrollTop||D.scrollTop)-(A.clientTop||0)}}})(this);(function(){var k=document.createElement("div"),e=typeof k.style.filter==="string",b=/alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,a=function(d){return d};if(typeof k.style.opacity==="string")a=function(d,h){d.style.opacity=h;return d};else if(e)a=function(d,h){var o=d.style;if(d.currentStyle&&!d.currentStyle.hasLayout)o.zoom=
|
||||
1;if(b.test(o.filter)){h=h>=0.9999?"":"alpha(opacity="+h*100+")";o.filter=o.filter.replace(b,h)}else o.filter+=" alpha(opacity="+h*100+")";return d};c.util.setStyle=function(d,h){var o=d.style;if(typeof h==="string"){d.style.cssText+=";"+h;return h.indexOf("opacity")>-1?a(d,h.match(/opacity:\s*(\d?\.?\d*)/)[1]):d}for(var q in h)if(q==="opacity")a(d,h[q]);else o[q==="float"||q==="cssFloat"?typeof o.styleFloat==="undefined"?"cssFloat":"styleFloat":q]=h[q];return d}})();(function(){var k=document.documentElement.style,
|
||||
|
|
@ -47,47 +47,48 @@ function(){var c=this.getSource(),m=parseInt((c[0]*0.3+c[1]*0.59+c[2]*0.11).toFi
|
|||
return this};g.reRGBa=/^rgba?\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d+(?:\.\d+)?))?\)$/;g.reHex=/^#?([0-9a-f]{6}|[0-9a-f]{3})$/i;g.fromRgb=function(c){return g.fromSource(g.sourceFromRgb(c))};g.sourceFromRgb=function(c){if(c=c.match(g.reRGBa))return[parseInt(c[1],10),parseInt(c[2],10),parseInt(c[3],10),c[4]?parseFloat(c[4]):1]};g.fromRgba=g.fromRgb;g.fromHex=function(c){return g.fromSource(g.sourceFromHex(c))};g.sourceFromHex=function(c){if(c.match(g.reHex)){var m=c.slice(c.indexOf("#")+
|
||||
1),k=m.length===3;c=k?m.charAt(0)+m.charAt(0):m.substring(0,2);var e=k?m.charAt(1)+m.charAt(1):m.substring(2,4);m=k?m.charAt(2)+m.charAt(2):m.substring(4,6);return[parseInt(c,16),parseInt(e,16),parseInt(m,16),1]}};g.fromSource=function(c){var m=new g;m.setSource(c);return m}}})();
|
||||
(function(){if(fabric.Element)console.warn("fabric.Element is already defined.");else{var g=this.window,p=g.document,c=fabric.util.object.extend,m=fabric.util.string.capitalize,k=fabric.util.string.camelize,e=fabric.util.fireEvent,b=fabric.util.getPointer,a=fabric.util.getElementOffset,d=fabric.util.removeFromArray,h=fabric.util.addListener,o=fabric.util.removeListener,q=fabric.util.array.min,r=fabric.util.array.max,t=Math.sqrt,x=Math.pow,u=Math.atan2,v=Math.abs,w=Math.min,A=Math.max,D=Error("Could not initialize `canvas` element"),
|
||||
F={tr:"ne-resize",br:"se-resize",bl:"sw-resize",tl:"nw-resize",ml:"w-resize",mt:"n-resize",mr:"e-resize",mb:"s-resize"};(function(){var f=p.createElement("canvas");if(f&&f.getContext)if(f=f.getContext("2d")){try{f.fillStyle="transparent";return true}catch(l){}return false}})();fabric.Element=function(f,l){this._groupSelector=null;this._objects=[];this._activeGroup=this._currentTransform=this._element=this._context=null;this._freeDrawingXPoints=[];this._freeDrawingYPoints=[];this._config={width:300,
|
||||
height:150};l=l||{};this._initElement(f);this._initConfig(l);l.overlayImage&&this.setOverlayImage(l.overlayImage);if(l.afterRender)this.afterRender=l.afterRender;this._createCanvasBackground();this._createCanvasContainer();this._initEvents();this.calcOffset()};c(fabric.Element.prototype,{selectionColor:"rgba(100,100,255,0.3)",selectionBorderColor:"rgba(255,255,255,0.3)",selectionLineWidth:1,backgroundColor:"transparent",includeDefaultValues:true,shouldCacheImages:false,CANVAS_WIDTH:600,CANVAS_HEIGHT:600,
|
||||
onBeforeScaleRotate:function(){},onFpsUpdate:function(){},calcOffset:function(){this._offset=a(this.getElement());return this},setOverlayImage:function(f,l){if(f){var n=this,s=new Image;s.onload=function(){n.overlayImage=s;l&&l();s=s.onload=null};s.src=f}return this},_initElement:function(f){this._element=fabric.util.getById(f)||p.createElement("canvas");typeof this._element.getContext==="undefined"&&G_vmlCanvasManager.initElement(this._element);if(typeof this._element.getContext==="undefined")throw D;
|
||||
if(!(this.contextTop=this._element.getContext("2d")))throw D;f=this._element.width||0;var l=this._element.height||0;this._initWrapperElement(f,l);this._setElementStyle(f,l)},_initWrapperElement:function(f,l){var n=fabric.util.wrapElement(this.getElement(),"div",{"class":"canvas_container"});fabric.util.setStyle(n,{width:f+"px",height:l+"px"});fabric.util.makeElementUnselectable(n);this.wrapper=n},_setElementStyle:function(f,l){fabric.util.setStyle(this.getElement(),{position:"absolute",width:f+"px",
|
||||
height:l+"px",left:0,top:0})},_initConfig:function(f){c(this._config,f||{});this._config.width=parseInt(this._element.width,10)||0;this._config.height=parseInt(this._element.height,10)||0;this._element.style.width=this._config.width+"px";this._element.style.height=this._config.height+"px"},_initEvents:function(){var f=this;this._onMouseDown=function(l){f.__onMouseDown(l)};this._onMouseUp=function(l){f.__onMouseUp(l)};this._onMouseMove=function(l){f.__onMouseMove(l)};this._onResize=function(){f.calcOffset()};
|
||||
h(this._element,"mousedown",this._onMouseDown);h(p,"mousemove",this._onMouseMove);h(p,"mouseup",this._onMouseUp);h(g,"resize",this._onResize)},_createCanvasElement:function(f){var l=p.createElement("canvas");if(l){l.className=f;f=this._element.parentNode.insertBefore(l,this._element);f.width=this.getWidth();f.height=this.getHeight();f.style.width=this.getWidth()+"px";f.style.height=this.getHeight()+"px";f.style.position="absolute";f.style.left=0;f.style.top=0;typeof l.getContext==="undefined"&&G_vmlCanvasManager.initElement(l);
|
||||
if(typeof l.getContext==="undefined")throw D;fabric.util.makeElementUnselectable(f);return f}},_createCanvasContainer:function(){var f=this._createCanvasElement("canvas-container");this.contextContainerEl=f;this.contextContainer=f.getContext("2d")},_createCanvasBackground:function(){var f=this._createCanvasElement("canvas-container");this._contextBackgroundEl=f;this._contextBackground=f.getContext("2d")},getWidth:function(){return this._config.width},getHeight:function(){return this._config.height},
|
||||
setWidth:function(f){return this._setDimension("width",f)},setHeight:function(f){return this._setDimension("height",f)},setDimensions:function(f){for(var l in f)this._setDimension(l,f[l]);return this},_setDimension:function(f,l){this.contextContainerEl[f]=l;this.contextContainerEl.style[f]=l+"px";this._contextBackgroundEl[f]=l;this._contextBackgroundEl.style[f]=l+"px";this._element[f]=l;this._element.style[f]=l+"px";this._element.parentNode.style[f]=l+"px";this._config[f]=l;this.calcOffset();this.renderAll();
|
||||
return this},__onMouseUp:function(f){if(this.isDrawingMode&&this._isCurrentlyDrawing)this._finalizeDrawingPath();else{if(this._currentTransform){var l=this._currentTransform.target;if(l._scaling){e("object:scaled",{target:l});l._scaling=false}for(var n=this._objects.length;n--;)this._objects[n].setCoords();if(l.hasStateChanged()){l.isMoving=false;e("object:modified",{target:l})}}this._currentTransform=null;this._groupSelector&&this._findSelectedObjects(f);if(n=this.getActiveGroup()){n.hasStateChanged()&&
|
||||
n.containsPoint(this.getPointer(f))&&e("group:modified",{target:n});n.setObjectsCoords();n.set("isMoving",false);this._setCursor("default")}this._groupSelector=null;this.renderAll();this._setCursorFromEvent(f,l);this._setCursor("");var s=this;setTimeout(function(){s._setCursorFromEvent(f,l)},50)}},_shouldClearSelection:function(f){var l=this.findTarget(f),n=this.getActiveGroup();return!l||l&&n&&!n.contains(l)&&n!==l&&!f.shiftKey},__onMouseDown:function(f){if(this.isDrawingMode)this._prepareForDrawing(f);
|
||||
F={tr:"ne-resize",br:"se-resize",bl:"sw-resize",tl:"nw-resize",ml:"w-resize",mt:"n-resize",mr:"e-resize",mb:"s-resize"},J=function(){var f=p.createElement("canvas");if(f&&f.getContext)if(f=f.getContext("2d")){try{f.fillStyle="transparent";return true}catch(l){}return false}}();fabric.Element=function(f,l){this._groupSelector=null;this._objects=[];this._activeGroup=this._currentTransform=this._element=this._context=null;this._freeDrawingXPoints=[];this._freeDrawingYPoints=[];this._config={width:300,
|
||||
height:150};l=l||{};this._initElement(f);this._initConfig(l);l.overlayImage&&this.setOverlayImage(l.overlayImage);if(l.afterRender)this.afterRender=l.afterRender;this._createCanvasBackground();this._createCanvasContainer();this._initEvents();this.calcOffset()};c(fabric.Element.prototype,{selectionColor:"rgba(100, 100, 255, 0.3)",selectionBorderColor:"rgba(255, 255, 255, 0.3)",freeDrawingColor:"rgb(0, 0, 0)",backgroundColor:"transparent",freeDrawingLineWidth:1,selectionLineWidth:1,includeDefaultValues:true,
|
||||
shouldCacheImages:false,CANVAS_WIDTH:600,CANVAS_HEIGHT:600,onBeforeScaleRotate:function(){},onFpsUpdate:function(){},calcOffset:function(){this._offset=a(this.getElement());return this},setOverlayImage:function(f,l){if(f){var n=this,s=new Image;s.onload=function(){n.overlayImage=s;l&&l();s=s.onload=null};s.src=f}return this},_initElement:function(f){this._element=fabric.util.getById(f)||p.createElement("canvas");typeof this._element.getContext==="undefined"&&G_vmlCanvasManager.initElement(this._element);
|
||||
if(typeof this._element.getContext==="undefined")throw D;if(!(this.contextTop=this._element.getContext("2d")))throw D;f=this._element.width||0;var l=this._element.height||0;this._initWrapperElement(f,l);this._setElementStyle(f,l)},_initWrapperElement:function(f,l){var n=fabric.util.wrapElement(this.getElement(),"div",{"class":"canvas_container"});fabric.util.setStyle(n,{width:f+"px",height:l+"px"});fabric.util.makeElementUnselectable(n);this.wrapper=n},_setElementStyle:function(f,l){fabric.util.setStyle(this.getElement(),
|
||||
{position:"absolute",width:f+"px",height:l+"px",left:0,top:0})},_initConfig:function(f){c(this._config,f||{});this._config.width=parseInt(this._element.width,10)||0;this._config.height=parseInt(this._element.height,10)||0;this._element.style.width=this._config.width+"px";this._element.style.height=this._config.height+"px"},_initEvents:function(){var f=this;this._onMouseDown=function(l){f.__onMouseDown(l)};this._onMouseUp=function(l){f.__onMouseUp(l)};this._onMouseMove=function(l){f.__onMouseMove(l)};
|
||||
this._onResize=function(){f.calcOffset()};h(this._element,"mousedown",this._onMouseDown);h(p,"mousemove",this._onMouseMove);h(p,"mouseup",this._onMouseUp);h(g,"resize",this._onResize)},_createCanvasElement:function(f){var l=p.createElement("canvas");if(l){l.className=f;f=this._element.parentNode.insertBefore(l,this._element);f.width=this.getWidth();f.height=this.getHeight();f.style.width=this.getWidth()+"px";f.style.height=this.getHeight()+"px";f.style.position="absolute";f.style.left=0;f.style.top=
|
||||
0;typeof l.getContext==="undefined"&&G_vmlCanvasManager.initElement(l);if(typeof l.getContext==="undefined")throw D;fabric.util.makeElementUnselectable(f);return f}},_createCanvasContainer:function(){var f=this._createCanvasElement("canvas-container");this.contextContainerEl=f;this.contextContainer=f.getContext("2d")},_createCanvasBackground:function(){var f=this._createCanvasElement("canvas-container");this._contextBackgroundEl=f;this._contextBackground=f.getContext("2d")},getWidth:function(){return this._config.width},
|
||||
getHeight:function(){return this._config.height},setWidth:function(f){return this._setDimension("width",f)},setHeight:function(f){return this._setDimension("height",f)},setDimensions:function(f){for(var l in f)this._setDimension(l,f[l]);return this},_setDimension:function(f,l){this.contextContainerEl[f]=l;this.contextContainerEl.style[f]=l+"px";this._contextBackgroundEl[f]=l;this._contextBackgroundEl.style[f]=l+"px";this._element[f]=l;this._element.style[f]=l+"px";this._element.parentNode.style[f]=
|
||||
l+"px";this._config[f]=l;this.calcOffset();this.renderAll();return this},__onMouseUp:function(f){if(this.isDrawingMode&&this._isCurrentlyDrawing)this._finalizeDrawingPath();else{if(this._currentTransform){var l=this._currentTransform.target;if(l._scaling){e("object:scaled",{target:l});l._scaling=false}for(var n=this._objects.length;n--;)this._objects[n].setCoords();if(l.hasStateChanged()){l.isMoving=false;e("object:modified",{target:l})}}this._currentTransform=null;this._groupSelector&&this._findSelectedObjects(f);
|
||||
if(n=this.getActiveGroup()){n.hasStateChanged()&&n.containsPoint(this.getPointer(f))&&e("group:modified",{target:n});n.setObjectsCoords();n.set("isMoving",false);this._setCursor("default")}this._groupSelector=null;this.renderAll();this._setCursorFromEvent(f,l);this._setCursor("");var s=this;setTimeout(function(){s._setCursorFromEvent(f,l)},50)}},_shouldClearSelection:function(f){var l=this.findTarget(f),n=this.getActiveGroup();return!l||l&&n&&!n.contains(l)&&n!==l&&!f.shiftKey},__onMouseDown:function(f){if(this.isDrawingMode)this._prepareForDrawing(f);
|
||||
else if(!this._currentTransform){var l=this.findTarget(f),n=this.getPointer(f),s=this.getActiveGroup();if(this._shouldClearSelection(f)){this._groupSelector={ex:n.x,ey:n.y,top:0,left:0};this.deactivateAllWithDispatch()}else{l.saveState();l._findTargetCorner(f,this._offset)&&this.onBeforeScaleRotate(l);this._setupCurrentTransform(f,l);if(f.shiftKey&&(s||this.getActiveObject()))this._handleGroupLogic(f,l);else{l!==this.getActiveGroup()&&this.deactivateAll();this.setActiveObject(l)}}this.renderAll()}},
|
||||
getElement:function(){return this._element},deactivateAllWithDispatch:function(){var f=this.getActiveGroup();f&&e("before:group:destroyed",{target:f});this.deactivateAll();f&&e("after:group:destroyed");e("selection:cleared");return this},_setupCurrentTransform:function(f,l){var n="drag",s,y=b(f);if(s=l._findTargetCorner(f,this._offset))n=s==="ml"||s==="mr"?"scaleX":s==="mt"||s==="mb"?"scaleY":"rotate";this._currentTransform={target:l,action:n,scaleX:l.scaleX,scaleY:l.scaleY,offsetX:y.x-l.left,offsetY:y.y-
|
||||
l.top,ex:y.x,ey:y.y,left:l.left,top:l.top,theta:l.theta,width:l.width*l.scaleX};this._currentTransform.original={left:l.left,top:l.top}},_handleGroupLogic:function(f,l){if(l.isType("group")){l=this.findTarget(f,true);if(!l||l.isType("group"))return}var n=this.getActiveGroup();if(n){if(n.contains(l)){n.remove(l);l.setActive(false);n.size()===1&&this.removeActiveGroup()}else n.add(l);e("group:selected",{target:n});n.setActive(true)}else{if(this._activeObject)if(l!==this._activeObject){this.setActiveGroup(new fabric.Group([this._activeObject,
|
||||
l]));n=this.getActiveGroup()}l.setActive(true)}n&&n.saveCoords()},_prepareForDrawing:function(f){this._isCurrentlyDrawing=true;this.removeActiveObject().renderAll();f=this.getPointer(f);this._freeDrawingXPoints.length=this._freeDrawingYPoints.length=0;this._freeDrawingXPoints.push(f.x);this._freeDrawingYPoints.push(f.y);this.contextTop.beginPath();this.contextTop.moveTo(f.x,f.y);this.contextTop.strokeStyle="rgb(0,0,0)"},_captureDrawingPath:function(f){f=this.getPointer(f);this._freeDrawingXPoints.push(f.x);
|
||||
this._freeDrawingYPoints.push(f.y);this.contextTop.lineTo(f.x,f.y);this.contextTop.stroke()},_finalizeDrawingPath:function(){this.contextTop.closePath();this._isCurrentlyDrawing=false;var f=q(this._freeDrawingXPoints),l=q(this._freeDrawingYPoints),n=r(this._freeDrawingXPoints),s=r(this._freeDrawingYPoints),y=[],z=this._freeDrawingXPoints,B=this._freeDrawingYPoints;this.contextTop.fillStyle="rgb(0, 0, 0)";y.push("M ",z[0]-f," ",B[0]-l," ");for(var C=1;xPoint=z[C],yPoint=B[C];C++)y.push("L ",xPoint-
|
||||
f," ",yPoint-l," ");y=new fabric.Path(y.join(""));y.fill=null;y.options.stroke="rgb(0,0,0)";this.add(y);y.set("left",f+(n-f)/2).set("top",l+(s-l)/2).setCoords();this.renderAll();e("path:created",{path:y})},__onMouseMove:function(f){if(this.isDrawingMode)this._isCurrentlyDrawing&&this._captureDrawingPath(f);else{var l=this._groupSelector;if(l!==null){var n=b(f);l.left=n.x-this._offset.left-l.ex;l.top=n.y-this._offset.top-l.ey;this.renderTop()}else if(this._currentTransform){n=b(f);l=n.x;n=n.y;this._currentTransform.target.isMoving=
|
||||
true;if(this._currentTransform.action==="rotate"){f.shiftKey||this._rotateObject(l,n);this._scaleObject(l,n)}else if(this._currentTransform.action==="scaleX")this._scaleObject(l,n,"x");else this._currentTransform.action==="scaleY"?this._scaleObject(l,n,"y"):this._translateObject(l,n);this.renderAll()}else{n=this._element.style;if(l=this.findTarget(f)){this._setCursorFromEvent(f,l);l.isActive()&&l.setCornersVisibility&&l.setCornersVisibility(true)}else{for(f=this._objects.length;f--;)this._objects[f].active||
|
||||
this._objects[f].setActive(false);n.cursor="default"}}}},_translateObject:function(f,l){var n=this._currentTransform.target;n.lockHorizontally||n.set("left",f-this._currentTransform.offsetX);n.lockVertically||n.set("top",l-this._currentTransform.offsetY)},_scaleObject:function(f,l,n){var s=this._currentTransform,y=this._offset,z=s.target;if(!z.lockScaling){var B=t(x(s.ey-s.top-y.top,2)+x(s.ex-s.left-y.left,2));f=t(x(l-s.top-y.top,2)+x(f-s.left-y.left,2));z._scaling=true;if(n)if(n==="x")z.set("scaleX",
|
||||
s.scaleX*f/B);else n==="y"&&z.set("scaleY",s.scaleY*f/B);else{z.set("scaleX",s.scaleX*f/B);z.set("scaleY",s.scaleY*f/B)}}},_rotateObject:function(f,l){var n=this._currentTransform,s=this._offset;if(!n.target.lockRotation){var y=u(n.ey-n.top-s.top,n.ex-n.left-s.left);s=u(l-n.top-s.top,f-n.left-s.left);n.target.set("theta",s-y+n.theta)}},_setCursor:function(f){this._element.style.cursor=f},_setCursorFromEvent:function(f,l){var n=this._element.style;if(l){var s=this.getActiveGroup();if(s=!!l._findTargetCorner&&
|
||||
(!s||!s.contains(l))&&l._findTargetCorner(f,this._offset))if(s in F)n.cursor=F[s];else{n.cursor="default";return false}else n.cursor="move"}else{n.cursor="default";return false}return true},_draw:function(f,l){l&&l.render(f)},_drawSelection:function(){var f=this._groupSelector,l=f.left,n=f.top,s=v(l),y=v(n);this.contextTop.fillStyle=this.selectionColor;this.contextTop.fillRect(f.ex-(l>0?0:-l),f.ey-(n>0?0:-n),s,y);this.contextTop.lineWidth=this.selectionLineWidth;this.contextTop.strokeStyle=this.selectionBorderColor;
|
||||
this.contextTop.strokeRect(f.ex+0.5-(l>0?0:s),f.ey+0.5-(n>0?0:y),s,y)},_findSelectedObjects:function(){var f=[],l=this._groupSelector.ex,n=this._groupSelector.ey,s=l+this._groupSelector.left,y=n+this._groupSelector.top,z=new fabric.Point(w(l,s),w(n,y));n=new fabric.Point(A(l,s),A(n,y));s=0;for(y=this._objects.length;s<y;++s){l=this._objects[s];if(l.intersectsWithRect(z,n)||l.isContainedWithinRect(z,n)){l.setActive(true);f.push(l)}}if(f.length===1){this.setActiveObject(f[0]);e("object:selected",{target:f[0]})}else if(f.length>
|
||||
1){f=new fabric.Group(f);this.setActiveGroup(f);f.saveCoords();e("group:selected",{target:f})}this.renderAll()},add:function(){this._objects.push.apply(this._objects,arguments);this.renderAll();return this},insertAt:function(f,l){this._objects.splice(l,0,f);this.renderAll();return this},getObjects:function(){return this._objects},getContext:function(){return this.contextTop},clearContext:function(f){f.clearRect(0,0,this._config.width,this._config.height);return this},clear:function(){this._objects.length=
|
||||
0;this.clearContext(this.contextTop);this.clearContext(this.contextContainer);this.renderAll();return this},renderAll:function(f){var l=f?this.contextTop:this.contextContainer;this.clearContext(this.contextTop);f||this.clearContext(l);f=this._objects.length;var n=this.getActiveGroup(),s=new Date;if(f)for(var y=0;y<f;++y)if(!n||n&&!n.contains(this._objects[y]))this._draw(l,this._objects[y]);n&&this._draw(this.contextTop,n);this.overlayImage&&this.contextTop.drawImage(this.overlayImage,0,0);this.onFpsUpdate(~~(1E3/
|
||||
(new Date-s)));this.afterRender&&this.afterRender();return this},renderTop:function(){this.clearContext(this.contextTop);this.overlayImage&&this.contextTop.drawImage(this.overlayImage,0,0);this._groupSelector&&this._drawSelection();var f=this.getActiveGroup();f&&f.render(this.contextTop);this.afterRender&&this.afterRender();return this},containsPoint:function(f,l){var n=this.getPointer(f),s=this._normalizePointer(l,n);n=s.x;s=s.y;var y=l._getImageLines(l.oCoords);if((n=l._findCrossPoints(n,s,y))&&
|
||||
n%2===1||l._findTargetCorner(f,this._offset))return true;return false},_normalizePointer:function(f,l){var n=this.getActiveGroup(),s=l.x,y=l.y;if(n&&f.type!=="group"&&n.contains(f)){s-=n.left;y-=n.top}return{x:s,y:y}},findTarget:function(f,l){var n;this.getPointer(f);var s=this.getActiveGroup();if(s&&!l&&this.containsPoint(f,s))return n=s;for(s=this._objects.length;s--;)if(this.containsPoint(f,this._objects[s])){this.relatedTarget=n=this._objects[s];break}return n},toDataURL:function(f){var l;f||
|
||||
(f="png");if(f==="jpeg"||f==="png"){this.renderAll(true);l=this.getElement().toDataURL("image/"+f);this.renderAll()}return l},toDataURLWithMultiplier:function(f,l){var n=this.getWidth(),s=this.getHeight(),y=n*l,z=s*l,B=this.getActiveObject();this.setWidth(y).setHeight(z);this.contextTop.scale(l,l);B&&this.deactivateAll().renderAll();y=this.toDataURL(f);this.contextTop.scale(1/l,1/l);this.setWidth(n).setHeight(s);B&&this.setActiveObject(B);this.renderAll();return y},getPointer:function(f){f=b(f);return{x:f.x-
|
||||
this._offset.left,y:f.y-this._offset.top}},getCenter:function(){return{top:this.getHeight()/2,left:this.getWidth()/2}},centerObjectH:function(f){f.set("left",this.getCenter().left);this.renderAll();return this},fxCenterObjectH:function(f,l){l=l||{};var n=function(){},s=l.onComplete||n,y=l.onChange||n,z=this;fabric.util.animate({startValue:f.get("left"),endValue:this.getCenter().left,duration:this.FX_DURATION,onChange:function(B){f.set("left",B);z.renderAll();y()},onComplete:function(){f.setCoords();
|
||||
s()}});return this},centerObjectV:function(f){f.set("top",this.getCenter().top);this.renderAll();return this},fxCenterObjectV:function(f,l){l=l||{};var n=function(){},s=l.onComplete||n,y=l.onChange||n,z=this;fabric.util.animate({startValue:f.get("top"),endValue:this.getCenter().top,duration:this.FX_DURATION,onChange:function(B){f.set("top",B);z.renderAll();y()},onComplete:function(){f.setCoords();s()}});return this},straightenObject:function(f){f.straighten();this.renderAll();return this},fxStraightenObject:function(f){f.fxStraighten({onChange:this.renderAll.bind(this)});
|
||||
return this},toDatalessJSON:function(){return this.toDatalessObject()},toObject:function(){return this._toObjectMethod("toObject")},toDatalessObject:function(){return this._toObjectMethod("toDatalessObject")},_toObjectMethod:function(f){return{objects:this._objects.map(function(l){if(!this.includeDefaultValues){var n=l.includeDefaultValues;l.includeDefaultValues=false}var s=l[f]();if(!this.includeDefaultValues)l.includeDefaultValues=n;return s},this),background:this.backgroundColor}},isEmpty:function(){return this._objects.length===
|
||||
0},loadFromJSON:function(f,l){if(f){var n=JSON.parse(f);if(!(!n||n&&!n.objects)){this.clear();var s=this;this._enlivenObjects(n.objects,function(){s.backgroundColor=n.background;l&&l()});return this}}},_enlivenObjects:function(f,l){var n=0,s=f.filter(function(z){return z.type==="image"}).length,y=this;f.forEach(function(z){if(z.type)switch(z.type){case "image":case "font":fabric[m(z.type)].fromObject(z,function(C){y.add(C);++n===s&&l&&l()});break;default:var B=fabric[k(m(z.type))];B&&B.fromObject&&
|
||||
y.add(B.fromObject(z));break}});s===0&&l&&l()},loadFromDatalessJSON:function(f,l){if(f){var n=typeof f==="string"?JSON.parse(f):f;if(!(!n||n&&!n.objects)){this.clear();this.backgroundColor=n.background;this._enlivenDatalessObjects(n.objects,l)}}},_enlivenDatalessObjects:function(f,l){function n(C,G){s.insertAt(C,G);C.setCoords();++y===z&&l&&l()}var s=this,y=0,z=f.length;z===0&&l&&l();try{f.forEach(function(C,G){var I=C.paths?"paths":"path",H=C[I];delete C[I];if(typeof H!=="string")switch(C.type){case "image":case "text":fabric[m(C.type)].fromObject(C,
|
||||
function(E){n(E,G)});break;default:(I=fabric[k(m(C.type))])&&I.fromObject&&n(I.fromObject(C),G);break}else if(C.type==="image")s.loadImageFromURL(H,function(E){E.setSourcePath(H);c(E,C);E.setAngle(C.angle);n(E,G)});else if(C.type==="text"){C.path=H;var J=fabric.Text.fromObject(C);fabric.util.getScript(H,function(){Object.prototype.toString.call(g.opera)==="[object Opera]"?setTimeout(function(){n(J,G)},500):n(J,G)})}else s.loadSVGFromURL(H,function(E){E=E.length>1?new fabric.PathGroup(E,C):E[0];E.setSourcePath(H);
|
||||
if(!(E instanceof fabric.PathGroup)){c(E,C);typeof C.angle!=="undefined"&&E.setAngle(C.angle)}n(E,G)})},this)}catch(B){console.log(B.message)}},loadImageFromURL:function(){var f={};return function(l,n){function s(){var B=p.getElementById(f[l]);B.width&&B.height?n(new fabric.Image(B)):setTimeout(s,50)}var y=this;if(f[l])s();else{var z=new Image;z.onload=function(){z.onload=null;y._resizeImageToFit(z);var B=new fabric.Image(z);n(B)};z.className="canvas-img-clone";z.src=l;if(this.shouldCacheImages)f[l]=
|
||||
Element.identify(z);p.body.appendChild(z)}}}(),loadSVGFromURL:function(f,l){function n(z){if(z=z.responseXML)(z=z.documentElement)&&fabric.parseSVGDocument(z,function(B,C){y.cache.set(f,{objects:B.invoke("toObject"),options:C});l(B,C)})}function s(){console.log("ERROR!")}var y=this;f=f.replace(/^\n\s*/,"").replace(/\?.*$/,"").trim();this.cache.has(f,function(z){if(z)y.cache.get(f,function(B){B=y._enlivenCachedObject(B);l(B.objects,B.options)});else new Ajax.Request(f,{method:"get",onComplete:n,onFailure:s})})},
|
||||
_enlivenCachedObject:function(f){var l=f.objects;f=f.options;l=l.map(function(n){return fabric[m(n.type)].fromObject(n)});return{objects:l,options:f}},remove:function(f){d(this._objects,f);this.renderAll();return f},fxRemove:function(f,l){var n=this;f.fxRemove({onChange:this.renderAll.bind(this),onComplete:function(){n.remove(f);typeof l==="function"&&l()}});return this},sendToBack:function(f){d(this._objects,f);this._objects.unshift(f);return this.renderAll()},bringToFront:function(f){d(this._objects,
|
||||
f);this._objects.push(f);return this.renderAll()},sendBackwards:function(f){var l=this._objects.indexOf(f),n=l;if(l!==0){for(l=l-1;l>=0;--l)if(f.intersectsWithObject(this._objects[l])){n=l;break}d(this._objects,f);this._objects.splice(n,0,f)}return this.renderAll()},bringForward:function(f){var l=this.getObjects(),n=l.indexOf(f),s=n;if(n!==l.length-1){n=n+1;for(var y=this._objects.length;n<y;++n)if(f.intersectsWithObject(l[n])){s=n;break}d(l,f);l.splice(s,0,f)}this.renderAll()},setActiveObject:function(f){this._activeObject&&
|
||||
this._activeObject.setActive(false);this._activeObject=f;f.setActive(true);this.renderAll();e("object:selected",{target:f});return this},getActiveObject:function(){return this._activeObject},removeActiveObject:function(){this._activeObject&&this._activeObject.setActive(false);this._activeObject=null;return this},setActiveGroup:function(f){this._activeGroup=f;return this},getActiveGroup:function(){return this._activeGroup},removeActiveGroup:function(){var f=this.getActiveGroup();f&&f.destroy();return this.setActiveGroup(null)},
|
||||
item:function(f){return this.getObjects()[f]},deactivateAll:function(){for(var f=this.getObjects(),l=0,n=f.length;l<n;l++)f[l].setActive(false);this.removeActiveGroup();this.removeActiveObject();return this},complexity:function(){return this.getObjects().reduce(function(f,l){f+=l.complexity?l.complexity():0;return f},0)},dispose:function(){this.clear();o(this.getElement(),"mousedown",this._onMouseDown);o(p,"mouseup",this._onMouseUp);o(p,"mousemove",this._onMouseMove);o(g,"resize",this._onResize);
|
||||
return this},clone:function(f){var l=p.createElement("canvas");l.width=this.getWidth();l.height=this.getHeight();var n=this.__clone||(this.__clone=new fabric.Element(l));return n.loadFromJSON(JSON.stringify(this.toJSON()),function(){f&&f(n)})},_toDataURL:function(f,l){this.clone(function(n){l(n.toDataURL(f))})},_toDataURLWithMultiplier:function(f,l,n){this.clone(function(s){n(s.toDataURLWithMultiplier(f,l))})},_resizeImageToFit:function(f){var l=f.width||f.offsetWidth,n=this.getWidth()/l;if(l)f.width=
|
||||
l*n},cache:{has:function(f,l){l(false)},get:function(){},set:function(){}}});fabric.Element.prototype.toString=function(){return"#<fabric.Element ("+this.complexity()+"): { objects: "+this.getObjects().length+" }>"};c(fabric.Element,{EMPTY_JSON:'{"objects": [], "background": "white"}',toGrayscale:function(f){var l=f.getContext("2d");f=l.getImageData(0,0,f.width,f.height);var n=f.data,s=f.width,y=f.height,z,B;for(i=0;i<s;i++)for(j=0;j<y;j++){z=i*4*y+j*4;B=(n[z]+n[z+1]+n[z+2])/3;n[z]=B;n[z+1]=B;n[z+
|
||||
2]=B}l.putImageData(f,0,0)},supports:function(f){var l=p.createElement("canvas");if(!l||!l.getContext)return null;var n=l.getContext("2d");if(!n)return null;switch(f){case "getImageData":return typeof n.getImageData!=="undefined";case "toDataURL":return typeof l.toDataURL!=="undefined";default:return null}}});fabric.Element.prototype.toJSON=fabric.Element.prototype.toObject}})();
|
||||
l]));n=this.getActiveGroup()}l.setActive(true)}n&&n.saveCoords()},_prepareForDrawing:function(f){this._isCurrentlyDrawing=true;this.removeActiveObject().renderAll();f=this.getPointer(f);this._freeDrawingXPoints.length=this._freeDrawingYPoints.length=0;this._freeDrawingXPoints.push(f.x);this._freeDrawingYPoints.push(f.y);this.contextTop.beginPath();this.contextTop.moveTo(f.x,f.y);this.contextTop.strokeStyle=this.freeDrawingColor;this.contextTop.lineWidth=this.freeDrawingLineWidth},_captureDrawingPath:function(f){f=
|
||||
this.getPointer(f);this._freeDrawingXPoints.push(f.x);this._freeDrawingYPoints.push(f.y);this.contextTop.lineTo(f.x,f.y);this.contextTop.stroke()},_finalizeDrawingPath:function(){this.contextTop.closePath();this._isCurrentlyDrawing=false;var f=q(this._freeDrawingXPoints),l=q(this._freeDrawingYPoints),n=r(this._freeDrawingXPoints),s=r(this._freeDrawingYPoints),y=[],z=this._freeDrawingXPoints,B=this._freeDrawingYPoints;y.push("M ",z[0]-f," ",B[0]-l," ");for(var C=1;xPoint=z[C],yPoint=B[C];C++)y.push("L ",
|
||||
xPoint-f," ",yPoint-l," ");y=new fabric.Path(y.join(""));y.fill=null;y.stroke=this.freeDrawingColor;y.strokeWidth=this.freeDrawingLineWidth;this.add(y);y.set("left",f+(n-f)/2).set("top",l+(s-l)/2).setCoords();this.renderAll();e("path:created",{path:y})},__onMouseMove:function(f){if(this.isDrawingMode)this._isCurrentlyDrawing&&this._captureDrawingPath(f);else{var l=this._groupSelector;if(l!==null){var n=b(f);l.left=n.x-this._offset.left-l.ex;l.top=n.y-this._offset.top-l.ey;this.renderTop()}else if(this._currentTransform){n=
|
||||
b(f);l=n.x;n=n.y;this._currentTransform.target.isMoving=true;if(this._currentTransform.action==="rotate"){f.shiftKey||this._rotateObject(l,n);this._scaleObject(l,n)}else if(this._currentTransform.action==="scaleX")this._scaleObject(l,n,"x");else this._currentTransform.action==="scaleY"?this._scaleObject(l,n,"y"):this._translateObject(l,n);this.renderAll()}else{n=this._element.style;if(l=this.findTarget(f)){this._setCursorFromEvent(f,l);l.isActive()&&l.setCornersVisibility&&l.setCornersVisibility(true)}else{for(f=
|
||||
this._objects.length;f--;)this._objects[f].active||this._objects[f].setActive(false);n.cursor="default"}}}},_translateObject:function(f,l){var n=this._currentTransform.target;n.lockHorizontally||n.set("left",f-this._currentTransform.offsetX);n.lockVertically||n.set("top",l-this._currentTransform.offsetY)},_scaleObject:function(f,l,n){var s=this._currentTransform,y=this._offset,z=s.target;if(!z.lockScaling){var B=t(x(s.ey-s.top-y.top,2)+x(s.ex-s.left-y.left,2));f=t(x(l-s.top-y.top,2)+x(f-s.left-y.left,
|
||||
2));z._scaling=true;if(n)if(n==="x")z.set("scaleX",s.scaleX*f/B);else n==="y"&&z.set("scaleY",s.scaleY*f/B);else{z.set("scaleX",s.scaleX*f/B);z.set("scaleY",s.scaleY*f/B)}}},_rotateObject:function(f,l){var n=this._currentTransform,s=this._offset;if(!n.target.lockRotation){var y=u(n.ey-n.top-s.top,n.ex-n.left-s.left);s=u(l-n.top-s.top,f-n.left-s.left);n.target.set("theta",s-y+n.theta)}},_setCursor:function(f){this._element.style.cursor=f},_setCursorFromEvent:function(f,l){var n=this._element.style;
|
||||
if(l){var s=this.getActiveGroup();if(s=!!l._findTargetCorner&&(!s||!s.contains(l))&&l._findTargetCorner(f,this._offset))if(s in F)n.cursor=F[s];else{n.cursor="default";return false}else n.cursor="move"}else{n.cursor="default";return false}return true},_draw:function(f,l){l&&l.render(f)},_drawSelection:function(){var f=this._groupSelector,l=f.left,n=f.top,s=v(l),y=v(n);this.contextTop.fillStyle=this.selectionColor;this.contextTop.fillRect(f.ex-(l>0?0:-l),f.ey-(n>0?0:-n),s,y);this.contextTop.lineWidth=
|
||||
this.selectionLineWidth;this.contextTop.strokeStyle=this.selectionBorderColor;this.contextTop.strokeRect(f.ex+0.5-(l>0?0:s),f.ey+0.5-(n>0?0:y),s,y)},_findSelectedObjects:function(){var f=[],l=this._groupSelector.ex,n=this._groupSelector.ey,s=l+this._groupSelector.left,y=n+this._groupSelector.top,z=new fabric.Point(w(l,s),w(n,y));n=new fabric.Point(A(l,s),A(n,y));s=0;for(y=this._objects.length;s<y;++s){l=this._objects[s];if(l.intersectsWithRect(z,n)||l.isContainedWithinRect(z,n)){l.setActive(true);
|
||||
f.push(l)}}if(f.length===1){this.setActiveObject(f[0]);e("object:selected",{target:f[0]})}else if(f.length>1){f=new fabric.Group(f);this.setActiveGroup(f);f.saveCoords();e("group:selected",{target:f})}this.renderAll()},add:function(){this._objects.push.apply(this._objects,arguments);this.renderAll();return this},insertAt:function(f,l){this._objects.splice(l,0,f);this.renderAll();return this},getObjects:function(){return this._objects},getContext:function(){return this.contextTop},clearContext:function(f){f.clearRect(0,
|
||||
0,this._config.width,this._config.height);return this},clear:function(){this._objects.length=0;this.clearContext(this.contextTop);this.clearContext(this.contextContainer);this.renderAll();return this},renderAll:function(f){var l=this._config.width,n=this._config.height,s=f?this.contextTop:this.contextContainer;this.clearContext(this.contextTop);f||this.clearContext(s);if(!J&&this.backgroundColor==="transparent")var y=true;if(!y)s.fillStyle=this.backgroundColor;s.fillRect(0,0,l,n);f=this._objects.length;
|
||||
l=this.getActiveGroup();n=new Date;if(f)for(y=0;y<f;++y)if(!l||l&&!l.contains(this._objects[y]))this._draw(s,this._objects[y]);l&&this._draw(this.contextTop,l);this.overlayImage&&this.contextTop.drawImage(this.overlayImage,0,0);this.onFpsUpdate(~~(1E3/(new Date-n)));this.afterRender&&this.afterRender();return this},renderTop:function(){this.clearContext(this.contextTop);this.overlayImage&&this.contextTop.drawImage(this.overlayImage,0,0);this._groupSelector&&this._drawSelection();var f=this.getActiveGroup();
|
||||
f&&f.render(this.contextTop);this.afterRender&&this.afterRender();return this},containsPoint:function(f,l){var n=this.getPointer(f),s=this._normalizePointer(l,n);n=s.x;s=s.y;var y=l._getImageLines(l.oCoords);if((n=l._findCrossPoints(n,s,y))&&n%2===1||l._findTargetCorner(f,this._offset))return true;return false},_normalizePointer:function(f,l){var n=this.getActiveGroup(),s=l.x,y=l.y;if(n&&f.type!=="group"&&n.contains(f)){s-=n.left;y-=n.top}return{x:s,y:y}},findTarget:function(f,l){var n;this.getPointer(f);
|
||||
var s=this.getActiveGroup();if(s&&!l&&this.containsPoint(f,s))return n=s;for(s=this._objects.length;s--;)if(this.containsPoint(f,this._objects[s])){this.relatedTarget=n=this._objects[s];break}return n},toDataURL:function(f){var l;f||(f="png");if(f==="jpeg"||f==="png"){this.renderAll(true);l=this.getElement().toDataURL("image/"+f);this.renderAll()}return l},toDataURLWithMultiplier:function(f,l){var n=this.getWidth(),s=this.getHeight(),y=n*l,z=s*l,B=this.getActiveObject();this.setWidth(y).setHeight(z);
|
||||
this.contextTop.scale(l,l);B&&this.deactivateAll().renderAll();y=this.toDataURL(f);this.contextTop.scale(1/l,1/l);this.setWidth(n).setHeight(s);B&&this.setActiveObject(B);this.renderAll();return y},getPointer:function(f){f=b(f);return{x:f.x-this._offset.left,y:f.y-this._offset.top}},getCenter:function(){return{top:this.getHeight()/2,left:this.getWidth()/2}},centerObjectH:function(f){f.set("left",this.getCenter().left);this.renderAll();return this},fxCenterObjectH:function(f,l){l=l||{};var n=function(){},
|
||||
s=l.onComplete||n,y=l.onChange||n,z=this;fabric.util.animate({startValue:f.get("left"),endValue:this.getCenter().left,duration:this.FX_DURATION,onChange:function(B){f.set("left",B);z.renderAll();y()},onComplete:function(){f.setCoords();s()}});return this},centerObjectV:function(f){f.set("top",this.getCenter().top);this.renderAll();return this},fxCenterObjectV:function(f,l){l=l||{};var n=function(){},s=l.onComplete||n,y=l.onChange||n,z=this;fabric.util.animate({startValue:f.get("top"),endValue:this.getCenter().top,
|
||||
duration:this.FX_DURATION,onChange:function(B){f.set("top",B);z.renderAll();y()},onComplete:function(){f.setCoords();s()}});return this},straightenObject:function(f){f.straighten();this.renderAll();return this},fxStraightenObject:function(f){f.fxStraighten({onChange:this.renderAll.bind(this)});return this},toDatalessJSON:function(){return this.toDatalessObject()},toObject:function(){return this._toObjectMethod("toObject")},toDatalessObject:function(){return this._toObjectMethod("toDatalessObject")},
|
||||
_toObjectMethod:function(f){return{objects:this._objects.map(function(l){if(!this.includeDefaultValues){var n=l.includeDefaultValues;l.includeDefaultValues=false}var s=l[f]();if(!this.includeDefaultValues)l.includeDefaultValues=n;return s},this),background:this.backgroundColor}},isEmpty:function(){return this._objects.length===0},loadFromJSON:function(f,l){if(f){var n=JSON.parse(f);if(!(!n||n&&!n.objects)){this.clear();var s=this;this._enlivenObjects(n.objects,function(){s.backgroundColor=n.background;
|
||||
l&&l()});return this}}},_enlivenObjects:function(f,l){var n=0,s=f.filter(function(z){return z.type==="image"}).length,y=this;f.forEach(function(z){if(z.type)switch(z.type){case "image":case "font":fabric[m(z.type)].fromObject(z,function(C){y.add(C);++n===s&&l&&l()});break;default:var B=fabric[k(m(z.type))];B&&B.fromObject&&y.add(B.fromObject(z));break}});s===0&&l&&l()},loadFromDatalessJSON:function(f,l){if(f){var n=typeof f==="string"?JSON.parse(f):f;if(!(!n||n&&!n.objects)){this.clear();this.backgroundColor=
|
||||
n.background;this._enlivenDatalessObjects(n.objects,l)}}},_enlivenDatalessObjects:function(f,l){function n(C,G){s.insertAt(C,G);C.setCoords();++y===z&&l&&l()}var s=this,y=0,z=f.length;z===0&&l&&l();try{f.forEach(function(C,G){var I=C.paths?"paths":"path",H=C[I];delete C[I];if(typeof H!=="string")switch(C.type){case "image":case "text":fabric[m(C.type)].fromObject(C,function(E){n(E,G)});break;default:(I=fabric[k(m(C.type))])&&I.fromObject&&n(I.fromObject(C),G);break}else if(C.type==="image")s.loadImageFromURL(H,
|
||||
function(E){E.setSourcePath(H);c(E,C);E.setAngle(C.angle);n(E,G)});else if(C.type==="text"){C.path=H;var K=fabric.Text.fromObject(C);fabric.util.getScript(H,function(){Object.prototype.toString.call(g.opera)==="[object Opera]"?setTimeout(function(){n(K,G)},500):n(K,G)})}else s.loadSVGFromURL(H,function(E){E=E.length>1?new fabric.PathGroup(E,C):E[0];E.setSourcePath(H);if(!(E instanceof fabric.PathGroup)){c(E,C);typeof C.angle!=="undefined"&&E.setAngle(C.angle)}n(E,G)})},this)}catch(B){console.log(B.message)}},
|
||||
loadImageFromURL:function(){var f={};return function(l,n){function s(){var B=p.getElementById(f[l]);B.width&&B.height?n(new fabric.Image(B)):setTimeout(s,50)}var y=this;if(f[l])s();else{var z=new Image;z.onload=function(){z.onload=null;y._resizeImageToFit(z);var B=new fabric.Image(z);n(B)};z.className="canvas-img-clone";z.src=l;if(this.shouldCacheImages)f[l]=Element.identify(z);p.body.appendChild(z)}}}(),loadSVGFromURL:function(f,l){function n(z){if(z=z.responseXML)(z=z.documentElement)&&fabric.parseSVGDocument(z,
|
||||
function(B,C){y.cache.set(f,{objects:B.invoke("toObject"),options:C});l(B,C)})}function s(){console.log("ERROR!")}var y=this;f=f.replace(/^\n\s*/,"").replace(/\?.*$/,"").trim();this.cache.has(f,function(z){if(z)y.cache.get(f,function(B){B=y._enlivenCachedObject(B);l(B.objects,B.options)});else new Ajax.Request(f,{method:"get",onComplete:n,onFailure:s})})},_enlivenCachedObject:function(f){var l=f.objects;f=f.options;l=l.map(function(n){return fabric[m(n.type)].fromObject(n)});return{objects:l,options:f}},
|
||||
remove:function(f){d(this._objects,f);this.renderAll();return f},fxRemove:function(f,l){var n=this;f.fxRemove({onChange:this.renderAll.bind(this),onComplete:function(){n.remove(f);typeof l==="function"&&l()}});return this},sendToBack:function(f){d(this._objects,f);this._objects.unshift(f);return this.renderAll()},bringToFront:function(f){d(this._objects,f);this._objects.push(f);return this.renderAll()},sendBackwards:function(f){var l=this._objects.indexOf(f),n=l;if(l!==0){for(l=l-1;l>=0;--l)if(f.intersectsWithObject(this._objects[l])){n=
|
||||
l;break}d(this._objects,f);this._objects.splice(n,0,f)}return this.renderAll()},bringForward:function(f){var l=this.getObjects(),n=l.indexOf(f),s=n;if(n!==l.length-1){n=n+1;for(var y=this._objects.length;n<y;++n)if(f.intersectsWithObject(l[n])){s=n;break}d(l,f);l.splice(s,0,f)}this.renderAll()},setActiveObject:function(f){this._activeObject&&this._activeObject.setActive(false);this._activeObject=f;f.setActive(true);this.renderAll();e("object:selected",{target:f});return this},getActiveObject:function(){return this._activeObject},
|
||||
removeActiveObject:function(){this._activeObject&&this._activeObject.setActive(false);this._activeObject=null;return this},setActiveGroup:function(f){this._activeGroup=f;return this},getActiveGroup:function(){return this._activeGroup},removeActiveGroup:function(){var f=this.getActiveGroup();f&&f.destroy();return this.setActiveGroup(null)},item:function(f){return this.getObjects()[f]},deactivateAll:function(){for(var f=this.getObjects(),l=0,n=f.length;l<n;l++)f[l].setActive(false);this.removeActiveGroup();
|
||||
this.removeActiveObject();return this},complexity:function(){return this.getObjects().reduce(function(f,l){f+=l.complexity?l.complexity():0;return f},0)},dispose:function(){this.clear();o(this.getElement(),"mousedown",this._onMouseDown);o(p,"mouseup",this._onMouseUp);o(p,"mousemove",this._onMouseMove);o(g,"resize",this._onResize);return this},clone:function(f){var l=p.createElement("canvas");l.width=this.getWidth();l.height=this.getHeight();var n=this.__clone||(this.__clone=new fabric.Element(l));
|
||||
return n.loadFromJSON(JSON.stringify(this.toJSON()),function(){f&&f(n)})},_toDataURL:function(f,l){this.clone(function(n){l(n.toDataURL(f))})},_toDataURLWithMultiplier:function(f,l,n){this.clone(function(s){n(s.toDataURLWithMultiplier(f,l))})},_resizeImageToFit:function(f){var l=f.width||f.offsetWidth,n=this.getWidth()/l;if(l)f.width=l*n},cache:{has:function(f,l){l(false)},get:function(){},set:function(){}}});fabric.Element.prototype.toString=function(){return"#<fabric.Element ("+this.complexity()+
|
||||
"): { objects: "+this.getObjects().length+" }>"};c(fabric.Element,{EMPTY_JSON:'{"objects": [], "background": "white"}',toGrayscale:function(f){var l=f.getContext("2d");f=l.getImageData(0,0,f.width,f.height);var n=f.data,s=f.width,y=f.height,z,B;for(i=0;i<s;i++)for(j=0;j<y;j++){z=i*4*y+j*4;B=(n[z]+n[z+1]+n[z+2])/3;n[z]=B;n[z+1]=B;n[z+2]=B}l.putImageData(f,0,0)},supports:function(f){var l=p.createElement("canvas");if(!l||!l.getContext)return null;var n=l.getContext("2d");if(!n)return null;switch(f){case "getImageData":return typeof n.getImageData!==
|
||||
"undefined";case "toDataURL":return typeof l.toDataURL!=="undefined";default:return null}}});fabric.Element.prototype.toJSON=fabric.Element.prototype.toObject}})();
|
||||
(function(){var g=this.fabric||(this.fabric={}),p=g.util.object.extend,c=g.util.object.clone,m=g.util.toFixed,k=g.util.string.capitalize,e=g.util.getPointer,b=Array.prototype.slice;if(!g.Object){g.Object=g.util.createClass({type:"object",includeDefaultValues:true,NUM_FRACTION_DIGITS:2,FX_DURATION:500,FX_TRANSITION:"decel",MIN_SCALE_LIMIT:0.1,stateProperties:"top left width height scaleX scaleY flipX flipY theta angle opacity cornersize fill overlayFill stroke strokeWidth fillRule borderScaleFactor transformMatrix".split(" "),
|
||||
options:{top:0,left:0,width:100,height:100,scaleX:1,scaleY:1,flipX:false,flipY:false,theta:0,opacity:1,angle:0,cornersize:10,padding:0,borderColor:"rgba(102,153,255,0.75)",cornerColor:"rgba(102,153,255,0.5)",fill:"rgb(0,0,0)",overlayFill:null,stroke:null,strokeWidth:1,fillRule:"source-over",borderOpacityWhenMoving:0.4,borderScaleFactor:1,transformMatrix:null},callSuper:function(a){var d=this.constructor.superclass.prototype[a];return arguments.length>1?d.apply(this,b.call(arguments,1)):d.call(this)},
|
||||
initialize:function(a){this.setOptions(a);this._importProperties();this.originalState={};this.setCoords();this.saveState()},setOptions:function(a){this.options=p(this._getOptions(),a)},_getOptions:function(){return p(c(this._getSuperOptions()),this.options)},_getSuperOptions:function(){var a=this.constructor;if(a)if(a=a.superclass)if((a=a.prototype)&&typeof a._getOptions=="function")return a._getOptions();return{}},_importProperties:function(){this.stateProperties.forEach(function(a){a==="angle"?
|
||||
|
|
@ -133,7 +134,7 @@ g.parsePointsAttribute(k.getAttribute("points")),a=g.parseAttributes(k,g.Polygon
|
|||
this.setCoords();b.sourcePath&&this.setSourcePath(b.sourcePath)}},_initializeFromArray:function(e){var b="width"in e;e="height"in e;this.path=this._parsePath();if(!b||!e){m(this,this._parseDimensions());if(b)this.width=this.options.width;if(e)this.height=this.options.height}},_render:function(e){for(var b,a=0,d=0,h=0,o=0,q,r,t=-(this.width/2),x=-(this.height/2),u=0,v=this.path.length;u<v;++u){b=this.path[u];switch(b[0]){case "l":a+=b[1];d+=b[2];e.lineTo(a+t,d+x);break;case "L":a=b[1];d=b[2];e.lineTo(a+
|
||||
t,d+x);break;case "h":a+=b[1];e.lineTo(a+t,d+x);break;case "H":a=b[1];e.lineTo(a+t,d+x);break;case "v":d+=b[1];e.lineTo(a+t,d+x);break;case "V":d=b[1];e.lineTo(a+t,d+x);break;case "m":a+=b[1];d+=b[2];e.moveTo(a+t,d+x);break;case "M":a=b[1];d=b[2];e.moveTo(a+t,d+x);break;case "c":q=a+b[5];r=d+b[6];h=a+b[3];o=d+b[4];e.bezierCurveTo(a+b[1]+t,d+b[2]+x,h+t,o+x,q+t,r+x);a=q;d=r;break;case "C":a=b[5];d=b[6];h=b[3];o=b[4];e.bezierCurveTo(b[1]+t,b[2]+x,h+t,o+x,a+t,d+x);break;case "s":q=a+b[3];r=d+b[4];h=2*
|
||||
a-h;o=2*d-o;e.bezierCurveTo(h+t,o+x,a+b[1]+t,d+b[2]+x,q+t,r+x);a=q;d=r;break;case "S":q=b[3];r=b[4];h=2*a-h;o=2*d-o;e.bezierCurveTo(h+t,o+x,b[1]+t,b[2]+x,q+t,r+x);a=q;d=r;break;case "q":a+=b[3];d+=b[4];e.quadraticCurveTo(b[1]+t,b[2]+x,a+t,d+x);break;case "Q":a=b[3];d=b[4];h=b[1];o=b[2];e.quadraticCurveTo(h+t,o+x,a+t,d+x);break;case "T":q=a;r=d;a=b[1];d=b[2];h=-h+2*q;o=-o+2*r;e.quadraticCurveTo(h+t,o+x,a+t,d+x);break;case "a":break;case "A":break;case "z":case "Z":e.closePath();break}}},render:function(e,
|
||||
b){e.save();var a=this.transformMatrix;a&&e.transform(a[0],a[1],a[2],a[3],a[4],a[5]);b||this.transform(e);if(this.overlayFill)e.fillStyle=this.overlayFill;else if(this.fill)e.fillStyle=this.fill;if(this.stroke)e.strokeStyle=this.stroke;e.beginPath();this._render(e);this.fill&&e.fill();if(this.options.stroke){e.strokeStyle=this.options.stroke;e.lineWidth=this.options.strokeWidth;e.stroke()}if(!b&&this.active){this.drawBorders(e);this.hideCorners||this.drawCorners(e)}e.restore()},toString:function(){return"#<fabric.Path ("+
|
||||
b){e.save();var a=this.transformMatrix;a&&e.transform(a[0],a[1],a[2],a[3],a[4],a[5]);b||this.transform(e);if(this.overlayFill)e.fillStyle=this.overlayFill;else if(this.fill)e.fillStyle=this.fill;if(this.stroke)e.strokeStyle=this.stroke;e.beginPath();this._render(e);this.fill&&e.fill();if(this.stroke){e.strokeStyle=this.stroke;e.lineWidth=this.strokeWidth;e.stroke()}if(!b&&this.active){this.drawBorders(e);this.hideCorners||this.drawCorners(e)}e.restore()},toString:function(){return"#<fabric.Path ("+
|
||||
this.complexity()+"): "+JSON.stringify({top:this.top,left:this.left})+">"},toObject:function(){var e=m(this.callSuper("toObject"),{path:this.path});if(this.sourcePath)e.sourcePath=this.sourcePath;if(this.transformMatrix)e.transformMatrix=this.transformMatrix;return e},toDatalessObject:function(){var e=this.toObject();if(this.sourcePath)e.path=this.sourcePath;delete e.sourcePath;return e},complexity:function(){return this.path.length},set:function(e,b){return this.callSuper("set",e,b)},_parsePath:function(){for(var e=
|
||||
[],b,a,d=0,h=this.path.length;d<h;d++){b=this.path[d];a=b.slice(1).trim().replace(/(\d)-/g,"$1###-").split(/\s|,|###/);e.push([b.charAt(0)].concat(a.map(parseFloat)))}return e},_parseDimensions:function(){function e(w){if(w[0]==="H")return w[1];return w[w.length-2]}function b(w){if(w[0]==="V")return w[1];return w[w.length-1]}var a=[],d=[],h,o,q=false,r,t;this.path.forEach(function(w,A){if(w[0]!=="H")h=A===0?e(w):e(this.path[A-1]);if(w[0]!=="V")o=A===0?b(w):b(this.path[A-1]);if(w[0]===w[0].toLowerCase())q=
|
||||
true;r=q?h+e(w):w[0]==="V"?h:e(w);t=q?o+b(w):w[0]==="H"?o:b(w);var D=parseInt(r,10);isNaN(D)||a.push(D);D=parseInt(t,10);isNaN(D)||d.push(D)},this);var x=p(a),u=p(d),v=deltaY=0;x={top:u-deltaY,left:x-v,bottom:c(d)-deltaY,right:c(a)-v};x.width=x.right-x.left;x.height=x.bottom-x.top;return x}});g.Path.fromObject=function(e){return new g.Path(e.path,e)};var k=g.Path.ATTRIBUTE_NAMES="d fill fill-opacity fill-rule stroke stroke-width transform".split(" ");g.Path.fromElement=function(e,b){var a=g.parseAttributes(e,
|
||||
|
|
|
|||
|
|
@ -159,10 +159,13 @@
|
|||
|
||||
extend(fabric.Element.prototype, {
|
||||
|
||||
selectionColor: 'rgba(100,100,255,0.3)', // blue
|
||||
selectionBorderColor: 'rgba(255,255,255,0.3)',
|
||||
selectionLineWidth: 1,
|
||||
selectionColor: 'rgba(100, 100, 255, 0.3)', // blue
|
||||
selectionBorderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
freeDrawingColor: 'rgb(0, 0, 0)',
|
||||
backgroundColor: 'transparent',
|
||||
|
||||
freeDrawingLineWidth: 1,
|
||||
selectionLineWidth: 1,
|
||||
includeDefaultValues: true,
|
||||
|
||||
shouldCacheImages: false,
|
||||
|
|
@ -708,7 +711,8 @@
|
|||
|
||||
this.contextTop.beginPath();
|
||||
this.contextTop.moveTo(pointer.x, pointer.y);
|
||||
this.contextTop.strokeStyle = 'rgb(0,0,0)';
|
||||
this.contextTop.strokeStyle = this.freeDrawingColor;
|
||||
this.contextTop.lineWidth = this.freeDrawingLineWidth;
|
||||
},
|
||||
|
||||
_captureDrawingPath: function(e) {
|
||||
|
|
@ -736,17 +740,19 @@
|
|||
xPoints = this._freeDrawingXPoints,
|
||||
yPoints = this._freeDrawingYPoints;
|
||||
|
||||
ctx.fillStyle = 'rgb(0, 0, 0)';
|
||||
|
||||
path.push('M ', xPoints[0] - minX, ' ', yPoints[0] - minY, ' ');
|
||||
|
||||
for (var i = 1; xPoint = xPoints[i], yPoint = yPoints[i]; i++) {
|
||||
path.push('L ', xPoint - minX, ' ', yPoint - minY, ' ');
|
||||
}
|
||||
|
||||
// TODO (kangax): maybe remove Path creation from here, to decouple fabric.Element from fabric.Path,
|
||||
// and instead fire something like "drawing:completed" event with path string
|
||||
|
||||
var p = new fabric.Path(path.join(''));
|
||||
p.fill = null;
|
||||
p.options.stroke = "rgb(0,0,0)";
|
||||
p.stroke = this.freeDrawingColor;
|
||||
p.strokeWidth = this.freeDrawingLineWidth;
|
||||
this.add(p);
|
||||
p.set("left", minX + (maxX - minX) / 2).set("top", minY + (maxY - minY) / 2).setCoords();
|
||||
this.renderAll();
|
||||
|
|
@ -1121,15 +1127,13 @@
|
|||
this.clearContext(containerCanvas);
|
||||
}
|
||||
|
||||
if (allOnTop) {
|
||||
/*if (!CAN_SET_TRANSPARENT_FILL && this.backgroundColor === 'transparent') {
|
||||
var skip = true;
|
||||
}
|
||||
if (!skip) {
|
||||
containerCanvas.fillStyle = this.backgroundColor;
|
||||
}
|
||||
containerCanvas.fillRect(0, 0, w, h);*/
|
||||
if (!CAN_SET_TRANSPARENT_FILL && this.backgroundColor === 'transparent') {
|
||||
var skip = true;
|
||||
}
|
||||
if (!skip) {
|
||||
containerCanvas.fillStyle = this.backgroundColor;
|
||||
}
|
||||
containerCanvas.fillRect(0, 0, w, h);
|
||||
|
||||
var length = this._objects.length,
|
||||
activeGroup = this.getActiveGroup();
|
||||
|
|
|
|||
|
|
@ -290,9 +290,9 @@
|
|||
if (this.fill) {
|
||||
ctx.fill();
|
||||
}
|
||||
if (this.options.stroke) {
|
||||
ctx.strokeStyle = this.options.stroke;
|
||||
ctx.lineWidth = this.options.strokeWidth;
|
||||
if (this.stroke) {
|
||||
ctx.strokeStyle = this.stroke;
|
||||
ctx.lineWidth = this.strokeWidth;
|
||||
ctx.stroke();
|
||||
}
|
||||
if (!noTransform && this.active) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
#body-wrapper { width: 1200px; margin: 0 auto; overflow: hidden; position: relative; }
|
||||
#fps { position: absolute; left: 1px; top: 0; background: rgb(200,200,200); width: 70px; z-index: 1000; }
|
||||
#commands { float: left; list-style: none; }
|
||||
#commands { float: left; list-style: none; font-size: 14px; }
|
||||
#canvas-console { display: block; font-size: 11px; }
|
||||
#rasterize { margin-top: 10px; color: green; }
|
||||
#complexity { position: absolute; bottom: -20px; left: 0; }
|
||||
#controls { margin-bottom: 5px; }
|
||||
#drawing-mode-options { margin-top: 5px; background: #ffc; padding: 5px; border: 1px solid #aaa; }
|
||||
|
||||
.canvas_container { margin: 0 auto; position: relative; float: left; border: 1px solid #aaa; }
|
||||
.clear { color: red; font-weight: bold; margin-top: 1em; }
|
||||
|
|
|
|||
|
|
@ -256,16 +256,22 @@
|
|||
}
|
||||
});
|
||||
|
||||
var drawingModeEl = document.getElementById('drawing-mode');
|
||||
var drawingModeEl = document.getElementById('drawing-mode'),
|
||||
drawingOptionsEl = document.getElementById('drawing-mode-options'),
|
||||
drawingColorEl = document.getElementById('drawing-color'),
|
||||
drawingLineWidthEl = document.getElementById('drawing-line-width');
|
||||
|
||||
drawingModeEl.onclick = function() {
|
||||
canvas.isDrawingMode = !canvas.isDrawingMode;
|
||||
if (canvas.isDrawingMode) {
|
||||
drawingModeEl.innerHTML = 'Cancel drawing mode';
|
||||
drawingModeEl.className = 'is-drawing'
|
||||
drawingModeEl.className = 'is-drawing';
|
||||
drawingOptionsEl.style.display = '';
|
||||
}
|
||||
else {
|
||||
drawingModeEl.innerHTML = 'Enter drawing mode';
|
||||
drawingModeEl.className = '';
|
||||
drawingOptionsEl.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -273,4 +279,11 @@
|
|||
updateComplexity();
|
||||
});
|
||||
|
||||
drawingColorEl.onchange = function() {
|
||||
canvas.freeDrawingColor = drawingColorEl.value;
|
||||
};
|
||||
drawingLineWidthEl.onchange = function() {
|
||||
canvas.freeDrawingLineWidth = parseInt(drawingLineWidthEl.value, 10) || 1; // disallow 0, NaN, etc.
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -69,6 +69,12 @@
|
|||
|
||||
<li style="margin-top:10px;">
|
||||
<button id="drawing-mode">Enter drawing mode</button>
|
||||
<div style="display:none;" id="drawing-mode-options">
|
||||
Width:
|
||||
<input value="1" id="drawing-line-width" size="2">
|
||||
Color:
|
||||
<input value="rgb(0,0,0)" id="drawing-color" size="10">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="margin-top:10px;">
|
||||
|
|
|
|||
Loading…
Reference in a new issue