1 line
10 KiB
JavaScript
1 line
10 KiB
JavaScript
|
import dataUtil from"../core/utils/data-util";import eventUtil from"../core/utils/event-util";import{determineDirection,calcImageOffset,calcImageScale,calcImageSize,calcPythagoreanTheorem,clipTouchMoveOfCalculate,imageTouchMoveOfCalcOffset}from"./calculate";const detail=!0,IMAGE_TYPE={base64:"base64",url:"url"};Component({externalClasses:["l-class"],relations:{"../image-clipper-tools/index":{type:"child"}},options:{pureDataPattern:/^_/},properties:{show:{type:Boolean,value:!1},zIndex:{type:Number,value:99},imageUrl:{type:String},type:{type:String,options:["url","base64"],value:"url"},quality:{type:Number,value:1},width:{type:Number,value:400},height:{type:Number,value:400},minWidth:{type:Number,value:200},maxWidth:{type:Number,value:600},minHeight:{type:Number,value:200},maxHeight:{type:Number,value:600},lockWidth:{type:Boolean,value:!1},lockHeight:{type:Boolean,value:!1},lockRatio:{type:Boolean,value:!0},scaleRatio:{type:Number,value:1},minRatio:{type:Number,value:.5},maxRatio:{type:Number,value:2},disableScale:{type:Number,value:!1},disableRotate:{type:Number,value:!1},limitMove:{type:Boolean,value:!1},checkImage:{type:Boolean,value:!0},checkImageIcon:{type:String,value:"./images/photo.png"},rotateAlong:{type:Boolean,value:!0},rotateAlongIcon:{type:String,value:"./images/rotate-along.png"},rotateInverse:{type:Boolean,value:!0},rotateInverseIcon:{type:String,value:"./images/rotate-inverse.png"},sure:{type:Boolean,value:!0},sureIcon:{type:String,value:"./images/sure.png"},close:{type:Boolean,value:!0},closeIcon:{type:String,value:"./images/close.png"},rotateAngle:{type:Number,value:90}},data:{CANVAS_WIDTH:0,CANVAS_HEIGHT:0,cutX:0,cutY:0,clipWidth:0,clipHeight:0,cutAnimation:!1,imageWidth:0,imageHeight:0,imageTop:0,imageLeft:0,scale:1,angle:0,_SYS_INFO:{},_MOVE_THROTTLE:null,_MOVE_THROTTLE_FLAG:!0,_TIME_CUT_CENTER:null,_flagCutTouch:!1,_flagEndTouch:!1,_CUT_START:{},_cutAnimationTime:null,_touchRelative:[{x:0,y:0}],_hypotenuseLength:0,_ctx:null},observers:{imageUrl(t){t&&(this.imageReset(),wx.showLoading({title:"请稍候...",mask:!0}),wx.getImageInfo({src:t,success:t=>{this.imgComputeSize(t.width,t.height),this.properties.limitMove&&(this.imgMarginDetectionScale(),eventUtil.emit(this,"linimageready",t))},fail:()=>{this.imgComputeSize(),this.properties.limitMove&&this.imgMarginDetectionScale()}}))},"clipWidth, clipHeight"(t,e){let{minWidth:i,minHeight:a}=this.data;i/=2,a/=2,t<i&&dataUtil.setDiffData(this,{clipWidth:i}),e<a&&dataUtil.setDiffData(this,{clipHeight:a}),this.computeCutSize()},rotateAngle(t){dataUtil.setDiffData(this,{cutAnimation:!0,angle:t})},angle(t){this.moveStop();const{limitMove:e}=this.properties;e&&t%90&&dataUtil.setDiffData(this,{angle:90*Math.round(t/90)}),this.imgMarginDetectionScale()},cutAnimation(t){if(clearTimeout(this.data._cutAnimationTime),t){let t=setTimeout(()=>{dataUtil.setDiffData(this,{cutAnimation:!1})},260);dataUtil.setDiffData(this,{_cutAnimationTime:t})}},limitMove(t){t&&(this.data.angle%90&&dataUtil.setDiffData(this,{angle:90*Math.round(this.data.angle/90)}),this.imgMarginDetectionScale())},"cutY, cutX"(){this.cutDetectionPosition()},"width, height"(t,e){t!==this.width&&dataUtil.setDiffData(this,{clipWidth:t/2}),e!==this.height&&dataUtil.setDiffData(this,{clipHeight:e/2})}},methods:{setCutInfo(){const{width:t,height:e}=this.properties,{_SYS_INFO:i}=this.data,a=t/2,s=e/2,o=(i.windowHeight-s)/2,h=(i.windowWidth-a)/2,l=i.windowWidth/2,n=i.windowHeight/2,c=wx.createCanvasContext("image-clipper",this);this.setData({clipWidth:a,clipHeight:s,cutX:h,cutY:o,CANVAS_HEIGHT:s,CANVAS_WIDTH:a,_ctx:c,imageLeft:l,imageTop:n})},setCutCenter(){const{sysInfo:t,clipHeight:e,clipWidth:i,imageTop:a,imageLeft:s}=this.data;let o=t||wx.getSystemInfoSync(),h=.5*(o.windowHeight-e),l=.5*(o.windowWidth-i);this.setData({imageTop:a-this.data.cutY+h,imageLeft:s-this.data.cutX+l,cutY:h,cutX:l})},clipTouchStart(t){if(!this.properties.imageUrl)return void wx.showToast({title:"请选择图片",icon:"none"});const e=t.touches[0].clientX,i=t.touches[0].clientY,{cutX:a,cutY:s,clipWidth:o,clipHeight:h}=this.data,l=determi
|