From: leon Date: Wed, 6 Jul 2022 03:45:17 +0000 (+0800) Subject: roojs-core.js X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=5276c40ba05270ec08ce55d2b45fbb49d8575c07 roojs-core.js roojs-core-debug.js roojs-ui.js roojs-ui-debug.js roojs-all.js roojs-debug.js --- diff --git a/roojs-all.js b/roojs-all.js index 5f4dc0e792..ef31a22642 100644 --- a/roojs-all.js +++ b/roojs-all.js @@ -2898,9 +2898,9 @@ break;case 'rotate-right':this.onRotateRight(e);break;case 'picture':this.before }var A=this.selectorEl.dom.files[0];if(this.fireEvent('inspect',this,A)!=false){this.prepare(A);}},trash:function(e){this.fireEvent('trash',this);},download:function(e){this.fireEvent('download',this);},loadCanvas:function(A){console.log("LOAD CANVAS");console.log(A); if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){console.log("ON LOAD CANVAS"); this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;this.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;if(this.fireEvent('loadcanvas',this,this.imageEl)!=false){this.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide(); -this.thumbEl.show();this.footerEl.show();this.baseRotateLevel();if(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;}if(this.loadMask){this.maskEl.unmask();}},setCanvasPosition:function(){if(!this.canvasEl){return; -}var pw=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);var ph=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);this.previewEl.setLeft(pw);this.previewEl.setTop(ph);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false; -if(this.isDocument&&(this.canvasEl.widthE)?C:E); F=(BF)?D:F);this.previewEl.setLeft(E);this.previewEl.setTop(F);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false; @@ -2916,7 +2916,7 @@ var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this }this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate>180)?0:this.rotate+90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition(); }this.draw();this.fireEvent('rotate',this,'right');},onRotateFail:function(){this.errorEl.show(true);var A=this;(function(){A.errorEl.hide(true);}).defer(this.errorTimeout);},draw:function(){console.log("DRAW");this.previewEl.dom.innerHTML='';var A=document.createElement("canvas"); var B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidththis.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height); break;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel(); diff --git a/roojs-debug.js b/roojs-debug.js index 7bfc1ad273..0ee121e70c 100644 --- a/roojs-debug.js +++ b/roojs-debug.js @@ -68529,6 +68529,7 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { setCanvasPosition : function() { + console.log("SET CANVAS POSITION"); if(!this.canvasEl){ return; } @@ -68823,10 +68824,10 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { contextEl.scale(this.getScaleLevel(), this.getScaleLevel()); - contextEl.translate(1, 1); + contextEl.translate(center, center); contextEl.rotate(this.rotate * Math.PI / 180); - contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight); + contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight); this.canvasEl = document.createElement("canvas"); diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index 1f548d8c34..8b85ef3d04 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -44037,6 +44037,7 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { setCanvasPosition : function() { + console.log("SET CANVAS POSITION"); if(!this.canvasEl){ return; } @@ -44331,10 +44332,10 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { contextEl.scale(this.getScaleLevel(), this.getScaleLevel()); - contextEl.translate(1, 1); + contextEl.translate(center, center); contextEl.rotate(this.rotate * Math.PI / 180); - contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight); + contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight); this.canvasEl = document.createElement("canvas"); diff --git a/roojs-ui.js b/roojs-ui.js index bc7548c50c..1ba54baab6 100644 --- a/roojs-ui.js +++ b/roojs-ui.js @@ -1952,9 +1952,9 @@ break;case 'rotate-right':this.onRotateRight(e);break;case 'picture':this.before }var A=this.selectorEl.dom.files[0];if(this.fireEvent('inspect',this,A)!=false){this.prepare(A);}},trash:function(e){this.fireEvent('trash',this);},download:function(e){this.fireEvent('download',this);},loadCanvas:function(A){console.log("LOAD CANVAS");console.log(A); if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){console.log("ON LOAD CANVAS"); this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;this.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;if(this.fireEvent('loadcanvas',this,this.imageEl)!=false){this.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide(); -this.thumbEl.show();this.footerEl.show();this.baseRotateLevel();if(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;}if(this.loadMask){this.maskEl.unmask();}},setCanvasPosition:function(){if(!this.canvasEl){return; -}var pw=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);var ph=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);this.previewEl.setLeft(pw);this.previewEl.setTop(ph);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false; -if(this.isDocument&&(this.canvasEl.widthE)?C:E); F=(BF)?D:F);this.previewEl.setLeft(E);this.previewEl.setTop(F);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false; @@ -1970,7 +1970,7 @@ var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this }this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate>180)?0:this.rotate+90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition(); }this.draw();this.fireEvent('rotate',this,'right');},onRotateFail:function(){this.errorEl.show(true);var A=this;(function(){A.errorEl.hide(true);}).defer(this.errorTimeout);},draw:function(){console.log("DRAW");this.previewEl.dom.innerHTML='';var A=document.createElement("canvas"); var B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidththis.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height); break;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();