手機圖片js線上剪下
阿新 • • 發佈:2018-12-04
現在js線上剪下的方案很多,但是基本都是電腦的,在手機上就不適用了;所有,我就找了一個方案,然後修改其中的事件處理。把電腦點選事件改成手機觸屏事件。
方案:
html程式碼:
<div id="cutArea" hidden> <table width="320" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="300"> <div id="bgDiv"> </div> </td> </tr> </table> <br /> <input id="cutImg" type="button" class="button" value="完成剪下" onclick="cutImg();" /> <br/> <div id="viewDiv"> </div><br /> <input id="idPicUrl" type="hidden" value="" /> <img src="" hidden id="createImg"> <img src="" id="can_img" alt="" style="height:0"> </div>
js:順序不要打亂。
var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); var $no = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); } } var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } }; //圖片切割 var ImgCropper = Class.create(); ImgCropper.prototype = { //容器物件,控制層,圖片地址 initialize: function(container, handle, url, options) { this._Container = $no(container);//容器物件 this._layHandle = $no(handle);//控制層 this.Url = url;//圖片地址 this._layBase = this._Container.appendChild(document.createElement("img"));//底層 this._layCropper = this._Container.appendChild(document.createElement("img"));//切割層 this._layCropper.onload = Bind(this, this.SetPos); //用來設定大小 this._tempImg = document.createElement("img"); this._tempImg.onload = Bind(this, this.SetSize); this.SetOptions(options); this.Opacity = Math.round(this.options.Opacity); this.Color = this.options.Color; this.Scale = !!this.options.Scale; this.Ratio = Math.max(this.options.Ratio, 0); this.Width = Math.round(this.options.Width); this.Height = Math.round(this.options.Height); //設定預覽物件 var oPreview = $no(this.options.Preview);//預覽物件 if(oPreview){ oPreview.style.position = "relative"; oPreview.style.overflow = "hidden"; this.viewWidth = Math.round(this.options.viewWidth); this.viewHeight = Math.round(this.options.viewHeight); //預覽圖片物件 this._view = oPreview.appendChild(document.createElement("img")); this._view.style.position = "absolute"; this._view.onload = Bind(this, this.SetPreview); } //設定拖放 this._drag = new Drag(this._layHandle, { Limit: true, onMove: Bind(this, this.SetPos), Transparent: true }); //設定縮放 this.Resize = !!this.options.Resize; if(this.Resize){ var op = this.options, _resize = new Resize(this._layHandle, { Max: true, onResize: Bind(this, this.SetPos) }); //設定縮放觸發物件 op.RightDown && (_resize.Set(op.RightDown, "right-down")); op.LeftDown && (_resize.Set(op.LeftDown, "left-down")); op.RightUp && (_resize.Set(op.RightUp, "right-up")); op.LeftUp && (_resize.Set(op.LeftUp, "left-up")); op.Right && (_resize.Set(op.Right, "right")); op.Left && (_resize.Set(op.Left, "left")); op.Down && (_resize.Set(op.Down, "down")); op.Up && (_resize.Set(op.Up, "up")); //最小範圍限制 this.Min = !!this.options.Min; this.minWidth = Math.round(this.options.minWidth); this.minHeight = Math.round(this.options.minHeight); //設定縮放物件 this._resize = _resize; } //設定樣式 this._Container.style.position = "relative"; this._Container.style.overflow = "hidden"; this._layHandle.style.zIndex = 200; this._layCropper.style.zIndex = 100; this._layBase.style.position = this._layCropper.style.position = "absolute"; this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;//對齊 //初始化設定 this.Init(); }, //設定預設屬性 SetOptions: function(options) { this.options = {//預設值 Opacity: 50,//透明度(0到100) Color: "",//背景色 Width: 0,//圖片高度 Height: 0,//圖片高度 //縮放觸發物件 Resize: false,//是否設定縮放 Right: "",//右邊縮放物件 Left: "",//左邊縮放物件 Up: "",//上邊縮放物件 Down: "",//下邊縮放物件 RightDown: "",//右下縮放物件 LeftDown: "",//左下縮放物件 RightUp: "",//右上縮放物件 LeftUp: "",//左上縮放物件 Min: false,//是否最小寬高限制(為true時下面min引數有用) minWidth: 50,//最小寬度 minHeight: 50,//最小高度 Scale: false,//是否按比例縮放 Ratio: 0,//縮放比例(寬/高) //預覽物件設定 Preview: "",//預覽物件 viewWidth: 0,//預覽寬度 viewHeight: 0//預覽高度 }; Extend(this.options, options || {}); }, //初始化物件 Init: function() { //設定背景色 this.Color && (this._Container.style.backgroundColor = this.Color); //設定圖片 this._tempImg.src = this._layBase.src = this._layCropper.src = this.Url; //設定透明 if(isIE){ this._layBase.style.filter = "alpha(opacity:" + this.Opacity + ")"; } else { this._layBase.style.opacity = this.Opacity / 100; } //設定預覽物件 this._view && (this._view.src = this.Url); //設定縮放 if(this.Resize){ with(this._resize){ Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight; } } }, //設定切割樣式 SetPos: function() { //ie6渲染bug if(isIE6){ with(this._layHandle.style){ zoom = .9; zoom = 1; }; }; //獲取位置引數 var p = this.GetPos(); //按拖放物件的引數進行切割 this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)"; //設定預覽 this.SetPreview(); }, //設定預覽效果 SetPreview: function() { if(this._view){ //預覽顯示的寬和高 var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; //按比例設定引數 var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale; //設定預覽物件 with(this._view.style){ //設定樣式 width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px"; //切割預覽圖 clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)"; } } }, //設定圖片大小 SetSize: function() { var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height); //設定底圖和切割圖 this._layBase.style.width = this._layCropper.style.width = s.Width + "px"; this._layBase.style.height = this._layCropper.style.height = s.Height + "px"; //設定拖放範圍 this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height; //設定縮放範圍 if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; } }, //獲取當前樣式 GetPos: function() { with(this._layHandle){ return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight } } }, //獲取尺寸 GetSize: function(nowWidth, nowHeight, fixWidth, fixHeight) { var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; //按比例設定 if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; } if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } //返回尺寸物件 return { Width: iWidth, Height: iHeight } } } //拖放程式 var Drag = Class.create(); Drag.prototype = { //拖放物件 initialize: function(drag, options) { this.Drag = $no(drag);//拖放物件 this._x = this._y = 0;//記錄滑鼠相對拖放物件的位置 this._marginLeft = this._marginTop = 0;//記錄margin //事件物件(用於繫結移除事件) this._fM = BindAsEventListener(this, this.Move); this._fS = Bind(this, this.Stop); this.SetOptions(options); this.Limit = !!this.options.Limit; this.mxLeft = parseInt(this.options.mxLeft); this.mxRight = parseInt(this.options.mxRight); this.mxTop = parseInt(this.options.mxTop); this.mxBottom = parseInt(this.options.mxBottom); this.LockX = !!this.options.LockX; this.LockY = !!this.options.LockY; this.Lock = !!this.options.Lock; this.onStart = this.options.onStart; this.onMove = this.options.onMove; this.onStop = this.options.onStop; this._Handle = $no(this.options.Handle) || this.Drag; this._mxContainer = $no(this.options.mxContainer) || null; this.Drag.style.position = "absolute"; //透明 if(isIE && !!this.options.Transparent){ //填充拖放物件 with(this._Handle.appendChild(document.createElement("div")).style){ width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0; } } //修正範圍 this.Repair(); addEventHandler(this._Handle, "touchstart", BindAsEventListener(this, this.Start)); }, //設定預設屬性 SetOptions: function(options) { this.options = {//預設值 Handle: "",//設定觸發物件(不設定則使用拖放物件) Limit: false,//是否設定範圍限制(為true時下面引數有用,可以是負數) mxLeft: 0,//左邊限制 mxRight: 9999,//右邊限制 mxTop: 0,//上邊限制 mxBottom: 9999,//下邊限制 mxContainer: "",//指定限制在容器內 LockX: false,//是否鎖定水平方向拖放 LockY: false,//是否鎖定垂直方向拖放 Lock: false,//是否鎖定 Transparent: false,//是否透明 onStart: function(){},//開始移動時執行 onMove: function(){},//移動時執行 onStop: function(){}//結束移動時執行 }; Extend(this.options, options || {}); }, //準備拖動 Start: function(oEvent) { if(this.Lock){ return; } this.Repair(); //記錄滑鼠相對拖放物件的位置 this._x = oEvent.touches[0].clientX - this.Drag.offsetLeft; this._y = oEvent.touches[0].clientY - this.Drag.offsetTop; //記錄margin this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0; this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0; //mousemove時移動 mouseup時停止 addEventHandler(document, "touchmove", this._fM); addEventHandler(document, "touchend", this._fS); if(isIE){ //焦點丟失 addEventHandler(this._Handle, "losecapture", this._fS); //設定滑鼠捕獲 this._Handle.setCapture(); }else{ //焦點丟失 addEventHandler(window, "blur", this._fS); //阻止預設動作 oEvent.preventDefault(); }; //附加程式 this.onStart(); }, //修正範圍 Repair: function() { if(this.Limit){ //修正錯誤範圍引數 this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth); this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight); //如果有容器必須設定position為relative或absolute來相對或絕對定位,並在獲取offset之前設定 !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative"); } }, //拖動 Move: function(oEvent) { console.log('move'); //判斷是否鎖定 if(this.Lock){ this.Stop(); return; }; //清除選擇 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //設定移動引數 var iLeft = oEvent.touches[0].clientX - this._x, iTop = oEvent.touches[0].clientY - this._y; //設定範圍限制 if(this.Limit){ //設定範圍引數 var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; //如果設定了容器,再修正範圍引數 if(!!this._mxContainer){ mxLeft = Math.max(mxLeft, 0); mxTop = Math.max(mxTop, 0); mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); }; //修正移動引數 iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft); iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop); } //設定位置,並修正margin if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; } if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; } //附加程式 this.onMove(); }, //停止拖動 Stop: function() { console.log('unlock'); //移除事件 removeEventHandler(document, "touchmove", this._fM); removeEventHandler(document, "touchend", this._fS); if(isIE){ removeEventHandler(this._Handle, "losecapture", this._fS); this._Handle.releaseCapture(); }else{ removeEventHandler(window, "blur", this._fS); }; //附加程式 this.onStop(); } }; //縮放程式 var Resize = Class.create(); Resize.prototype = { //縮放物件 initialize: function(obj, options) { this._obj = $no(obj);//縮放物件 this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0;//樣式引數 this._sideRight = this._sideDown = this._sideLeft = this._sideUp = 0;//座標引數 this._fixLeft = this._fixTop = 0;//定位引數 this._scaleLeft = this._scaleTop = 0;//定位座標 this._mxSet = function(){};//範圍設定程式 this._mxRightWidth = this._mxDownHeight = this._mxUpHeight = this._mxLeftWidth = 0;//範圍引數 this._mxScaleWidth = this._mxScaleHeight = 0;//比例範圍引數 this._fun = function(){};//縮放執行程式 //獲取邊框寬度 var _style = CurrentStyle(this._obj); this._borderX = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0); this._borderY = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0); //事件物件(用於繫結移除事件) this._fR = BindAsEventListener(this, this.Resize); this._fS = Bind(this, this.Stop); this.SetOptions(options); //範圍限制 this.Max = !!this.options.Max; this._mxContainer = $no(this.options.mxContainer) || null; this.mxLeft = Math.round(this.options.mxLeft); this.mxRight = Math.round(this.options.mxRight); this.mxTop = Math.round(this.options.mxTop); this.mxBottom = Math.round(this.options.mxBottom); //寬高限制 this.Min = !!this.options.Min; this.minWidth = Math.round(this.options.minWidth); this.minHeight = Math.round(this.options.minHeight); //按比例縮放 this.Scale = !!this.options.Scale; this.Ratio = Math.max(this.options.Ratio, 0); this.onResize = this.options.onResize; this._obj.style.position = "absolute"; !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative"); }, //設定預設屬性 SetOptions: function(options) { this.options = {//預設值 Max: false,//是否設定範圍限制(為true時下面mx引數有用) mxContainer:"",//指定限制在容器內 mxLeft: 0,//左邊限制 mxRight: 9999,//右邊限制 mxTop: 0,//上邊限制 mxBottom: 9999,//下邊限制 Min: false,//是否最小寬高限制(為true時下面min引數有用) minWidth: 50,//最小寬度 minHeight: 50,//最小高度 Scale: false,//是否按比例縮放 Ratio: 0,//縮放比例(寬/高) onResize: function(){}//縮放時執行 }; Extend(this.options, options || {}); }, //設定觸發物件 Set: function(resize, side) { var resize = $no(resize), fun; if(!resize) return; //根據方向設定 switch (side.toLowerCase()) { case "up" : fun = this.Up; break; case "down" : fun = this.Down; break; case "left" : fun = this.Left; break; case "right" : fun = this.Right; break; case "left-up" : fun = this.LeftUp; break; case "right-up" : fun = this.RightUp; break; case "left-down" : fun = this.LeftDown; break; case "right-down" : default : fun = this.RightDown; }; //設定觸發物件 addEventHandler(resize, "touchstart", BindAsEventListener(this, this.Start, fun)); }, //準備縮放 Start: function(e, fun, touch) { //防止冒泡(跟拖放配合時設定) e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true); console.log(1); //設定執行程式 this._fun = fun; //樣式引數值 this._styleWidth = this._obj.clientWidth; this._styleHeight = this._obj.clientHeight; this._styleLeft = this._obj.offsetLeft; this._styleTop = this._obj.offsetTop; //四條邊定位座標 this._sideLeft = e.touches[0].clientX - this._styleWidth; this._sideRight = e.touches[0].clientX + this._styleWidth; this._sideUp = e.touches[0].clientY - this._styleHeight; this._sideDown = e.touches[0].clientY + this._styleHeight; // this._sideLeft = e.clientX - this._styleWidth; // this._sideRight = e.clientX + this._styleWidth; // this._sideUp = e.clientY - this._styleHeight; // this._sideDown = e.clientY + this._styleHeight; //top和left定位引數 this._fixLeft = this._styleLeft + this._styleWidth; this._fixTop = this._styleTop + this._styleHeight; //縮放比例 if(this.Scale){ //設定比例 this.Ratio = Math.max(this.Ratio, 0) || this._styleWidth / this._styleHeight; //left和top的定位座標 this._scaleLeft = this._styleLeft + this._styleWidth / 2; this._scaleTop = this._styleTop + this._styleHeight / 2; }; //範圍限制 if(this.Max){ //設定範圍引數 var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; //如果設定了容器,再修正範圍引數 if(!!this._mxContainer){ mxLeft = Math.max(mxLeft, 0); mxTop = Math.max(mxTop, 0); mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); }; //根據最小值再修正 mxRight = Math.max(mxRight, mxLeft + (this.Min ? this.minWidth : 0) + this._borderX); mxBottom = Math.max(mxBottom, mxTop + (this.Min ? this.minHeight : 0) + this._borderY); //由於轉向時要重新設定所以寫成function形式 this._mxSet = function(){ this._mxRightWidth = mxRight - this._styleLeft - this._borderX; this._mxDownHeight = mxBottom - this._styleTop - this._borderY; this._mxUpHeight = Math.max(this._fixTop - mxTop, this.Min ? this.minHeight : 0); this._mxLeftWidth = Math.max(this._fixLeft - mxLeft, this.Min ? this.minWidth : 0); }; this._mxSet(); //有縮放比例下的範圍限制 if(this.Scale){ this._mxScaleWidth = Math.min(this._scaleLeft - mxLeft, mxRight - this._scaleLeft - this._borderX) * 2; this._mxScaleHeight = Math.min(this._scaleTop - mxTop, mxBottom - this._scaleTop - this._borderY) * 2; }; }; //mousemove時縮放 mouseup時停止 addEventHandler(document, "touchmove", this._fR); addEventHandler(document, "touchend", this._fS); if(isIE){ addEventHandler(this._obj, "losecapture", this._fS); this._obj.setCapture(); }else{ addEventHandler(window, "blur", this._fS); e.preventDefault(); }; }, //縮放 Resize: function(e) { console.log(2); //清除選擇 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //執行縮放程式 this._fun(e); //設定樣式,變數必須大於等於0否則ie出錯 with(this._obj.style){ width = this._styleWidth + "px"; height = this._styleHeight + "px"; top = this._styleTop + "px"; left = this._styleLeft + "px"; } //附加程式 this.onResize(); }, //縮放程式 //上 Up: function(e) { this.RepairY(this._sideDown - e.touches[0].clientY, this._mxUpHeight); this.RepairTop(); this.TurnDown(this.Down); }, //下 Down: function(e) { this.RepairY(e.touches[0].clientY - this._sideUp, this._mxDownHeight); this.TurnUp(this.Up); }, //右 Right: function(e) { console.log(3); console.log(e.touches[0].clientX - this._sideLeft); this.RepairX(e.touches[0].clientX - this._sideLeft, this._mxRightWidth); this.TurnLeft(this.Left); }, //左 Left: function(e) { this.RepairX(this._sideRight - e.touches[0].clientX, this._mxLeftWidth); this.RepairLeft(); this.TurnRight(this.Right); }, //右下 RightDown: function(e) { this.RepairAngle( e.touches[0].clientX - this._sideLeft, this._mxRightWidth, e.touches[0].clientY - this._sideUp, this._mxDownHeight ); this.TurnLeft(this.LeftDown) || this.Scale || this.TurnUp(this.RightUp); }, //右上 RightUp: function(e) { this.RepairAngle( e.touches[0].clientX - this._sideLeft, this._mxRightWidth, this._sideDown - e.touches[0].clientY, this._mxUpHeight ); this.RepairTop(); this.TurnLeft(this.LeftUp) || this.Scale || this.TurnDown(this.RightDown); }, //左下 LeftDown: function(e) { this.RepairAngle( this._sideRight - e.touches[0].clientX, this._mxLeftWidth, e.touches[0].clientY - this._sideUp, this._mxDownHeight ); this.RepairLeft(); this.TurnRight(this.RightDown) || this.Scale || this.TurnUp(this.LeftUp); }, //左上 LeftUp: function(e) { this.RepairAngle( this._sideRight - e.touches[0].clientX, this._mxLeftWidth, this._sideDown - e.touches[0].clientY, this._mxUpHeight ); this.RepairTop(); this.RepairLeft(); this.TurnRight(this.RightUp) || this.Scale || this.TurnDown(this.LeftDown); }, //修正程式 //水平方向 RepairX: function(iWidth, mxWidth) { console.log(iWidth, mxWidth); iWidth = this.RepairWidth(iWidth, mxWidth); if(this.Scale){ var iHeight = this.RepairScaleHeight(iWidth); if(this.Max && iHeight > this._mxScaleHeight){ iHeight = this._mxScaleHeight; iWidth = this.RepairScaleWidth(iHeight); }else if(this.Min && iHeight < this.minHeight){ var tWidth = this.RepairScaleWidth(this.minHeight); if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; } } this._styleHeight = iHeight; this._styleTop = this._scaleTop - iHeight / 2; } this._styleWidth = iWidth; }, //垂直方向 RepairY: function(iHeight, mxHeight) { iHeight = this.RepairHeight(iHeight, mxHeight); if(this.Scale){ var iWidth = this.RepairScaleWidth(iHeight); if(this.Max && iWidth > this._mxScaleWidth){ iWidth = this._mxScaleWidth; iHeight = this.RepairScaleHeight(iWidth); }else if(this.Min && iWidth < this.minWidth){ var tHeight = this.RepairScaleHeight(this.minWidth); if(tHeight < mxHeight){ iWidth = this.minWidth; iHeight = tHeight; } } this._styleWidth = iWidth; this._styleLeft = this._scaleLeft - iWidth / 2; } this._styleHeight = iHeight; }, //對角方向 RepairAngle: function(iWidth, mxWidth, iHeight, mxHeight) { iWidth = this.RepairWidth(iWidth, mxWidth); if(this.Scale){ iHeight = this.RepairScaleHeight(iWidth); if(this.Max && iHeight > mxHeight){ iHeight = mxHeight; iWidth = this.RepairScaleWidth(iHeight); }else if(this.Min && iHeight < this.minHeight){ var tWidth = this.RepairScaleWidth(this.minHeight); if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; } } }else{ iHeight = this.RepairHeight(iHeight, mxHeight); } this._styleWidth = iWidth; this._styleHeight = iHeight; }, //top RepairTop: function() { this._styleTop = this._fixTop - this._styleHeight; }, //left RepairLeft: function() { this._styleLeft = this._fixLeft - this._styleWidth; }, //height RepairHeight: function(iHeight, mxHeight) { iHeight = Math.min(this.Max ? mxHeight : iHeight, iHeight); iHeight = Math.max(this.Min ? this.minHeight : iHeight, iHeight, 0); return iHeight; }, //width RepairWidth: function(iWidth, mxWidth) { iWidth = Math.min(this.Max ? mxWidth : iWidth, iWidth); iWidth = Math.max(this.Min ? this.minWidth : iWidth, iWidth, 0); return iWidth; }, //比例高度 RepairScaleHeight: function(iWidth) { return Math.max(Math.round((iWidth + this._borderX) / this.Ratio - this._borderY), 0); }, //比例寬度 RepairScaleWidth: function(iHeight) { return Math.max(Math.round((iHeight + this._borderY) * this.Ratio - this._borderX), 0); }, //轉向程式 //轉右 TurnRight: function(fun) { if(!(this.Min || this._styleWidth)){ this._fun = fun; this._sideLeft = this._sideRight; this.Max && this._mxSet(); return true; } }, //轉左 TurnLeft: function(fun) { if(!(this.Min || this._styleWidth)){ this._fun = fun; this._sideRight = this._sideLeft; this._fixLeft = this._styleLeft; this.Max && this._mxSet(); return true; } }, //轉上 TurnUp: function(fun) { if(!(this.Min || this._styleHeight)){ this._fun = fun; this._sideDown = this._sideUp; this._fixTop = this._styleTop; this.Max && this._mxSet(); return true; } }, //轉下 TurnDown: function(fun) { if(!(this.Min || this._styleHeight)){ this._fun = fun; this._sideUp = this._sideDown; this.Max && this._mxSet(); return true; } }, //停止縮放 Stop: function() { removeEventHandler(document, "touchmove", this._fR); removeEventHandler(document, "touchend", this._fS); if(isIE){ removeEventHandler(this._obj, "losecapture", this._fS); this._obj.releaseCapture(); }else{ removeEventHandler(window, "blur", this._fS); } } };
ok!