1. 程式人生 > >手機圖片js線上剪下

手機圖片js線上剪下

現在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!