当前位置：首页 → 问答吧 → 【原创】我也发一个图片选取的模块

【原创】我也发一个图片选取的模块

时间：2007-02-27

来源：互联网

其实作用不只是图片选取了，只不过目前我就主要用于图片处理，改改应该用处挺大的。
fix-bug:
2007-2-28:
mouseMove中的鼠标坐标计算方法不对.
原来只取了窗口坐标，还应该取页面坐标.
也就是

复制内容到剪贴板

代码:

var px=Event.pointerX(event);
var py=Event.pointerY(event);
var cx=event.clientX;
var cy=event.clientY;

这几句和，px,py这正确使用的地方了.
2007-2-27:
initpos中的

复制内容到剪贴板

代码:

t=rt-Math.round((rh-h)/2);

应该改为

复制内容到剪贴板

代码:

t=rt+Math.round((rh-h)/2);

复制内容到剪贴板

代码:

/*

*element's drag size 的封装

*by:achun

*email:[email protected]

*需要 prototype.js

*2007-2-12

*/

var DDS={

  Obj:null,//绑定的obj

  Range:null,//drag 范围参照对象

  W:null,//锁定宽高比例

  H:null,//锁定宽高比例

  WH:null,//预先计算的W/H

  X:0,//临时变量

  Y:0,//临时变量

  S:'',//临时变量

  PosStr:'',//字符串形式的选定范围参数

  /*

*绑定图片对象和选取范围对象

*el:选取范围对象就是选择框了

*range:一般就是图片了

*w,h:如果要锁定比例的话就要给出这个了

*/

  bind:function(el,range,w,h){

DDS.unbind();

DDS.Obj=$(el);

if(null==DDS.Obj) return;

DDS.Range=$(range);

if(w && h){

   DDS.W=w;

   DDS.H=h;

   DDS.WH=w/h;

}else{

   DDS.W=null;

   DDS.H=null;

}

DDS.initpos();

Event.observe(DDS.Obj,'mousedown',DDS.mouseDown,false);

Event.observe(document,'mouseup',DDS.mouseUp,false);

Event.observe(document,'mousemove',DDS.mouseMove,false);

  },

  /*

*初始化选取框的位置

*/

  initpos:function(){

var t=10,l=10,w=40,h=40,rt,rl,rw,rh;

if(DDS.Range){

   rt=DDS.Range.offsetTop;

   rl=DDS.Range.offsetLeft;

   rw=DDS.Range.offsetWidth;

   rh=DDS.Range.offsetHeight;

   if(DDS.WH){

      w=Math.min(rw,Math.round(rh*DDS.WH));

      h=Math.min(rh,Math.round(w/DDS.WH));

      t=rt+Math.round((rh-h)/2);

      l=rl+Math.round((rw-w)/2);

   }else{

      t = rt;

      l = rl;

      w = rw;

      h = rh;

   }

}else{

   if(DDS.WH){

      w=DDS.W;

      h=DDS.H;

   }

}

DDS.Obj.style.top=t+'px';

DDS.Obj.style.left=l+'px';

DDS.Obj.style.width =(w-2) + 'px';//减2是因为有border,没有border就没有那个虚线框了

DDS.Obj.style.height=(h-2) + 'px';

if(DDS.Range){

   window.status='t:'+(t-rt)+' l:'+(l-rl)+' w:'+w+' h:'+h;

   DDS.PosStr='t='+(t-rt)+'&l='+(l-rl)+'&w='+w+'&h='+h;//保存PosStr下面的一样

}

else{

   window.status='t:'+t+' l:'+l+' w:'+w+' h:'+h;

   DDS.PosStr='t='+t+'&l='+l+'&w='+w+'&h='+h;

}

  },

  /*

*选取框的算法

*t,l,w,h:Top,Left,Width,Height

*四个由鼠标传过来的预期参数

*/

  pos:function(t,l,w,h){

var ct = DDS.Obj.offsetTop;

var cl = DDS.Obj.offsetLeft;

var cw = DDS.Obj.offsetWidth;

var ch = DDS.Obj.offsetHeight;

if(DDS.Range){

   var rt,rl,rw,rh;

   var ot=t,ol=l,ow=w,oh=h;

   rt=DDS.Range.offsetTop;

   rl=DDS.Range.offsetLeft;

   rw=DDS.Range.offsetWidth;

   rh=DDS.Range.offsetHeight;

   if(DDS.WH){

      if(ow==cw && oh!=ch){

      ow=Math.round(oh*DDS.WH);

      }

      if(oh==ch && ow!=cw){

      oh=Math.round(ow/DDS.WH);

      }

   }

   t=Math.max(ot,rt);

   l=Math.max(ol,rl);

   w=Math.min(ow,rl+rw-l);

   h=Math.min(oh,rt+rh-t);

   if(w<10 || h<10) return ;

   var s=DDS.WH/w*h;

   if(DDS.WH)

   if(Math.abs(s-1)>0.001){

      if(w!=cw && h==ch) return;

      if(w==cw && h!=ch) return;

   }

}

if(DDS.Obj.style.cursor=="move" && (w!=cw || h!=ch)) return;

if(w<10 || h<10) return ;

if(DDS.Range){

   window.status='t:'+(t-rt)+' l:'+(l-rl)+' w:'+w+' h:'+h;

   DDS.PosStr='t='+(t-rt)+'&l='+(l-rl)+'&w='+w+'&h='+h;

}

else{

   window.status='t:'+t+' l:'+l+' w:'+w+' h:'+h;

   DDS.PosStr='t='+t+'&l='+l+'&w='+w+'&h='+h;

}

DDS.Obj.style.top=t+'px';

DDS.Obj.style.left=l+'px';

DDS.Obj.style.width =(w-2)+'px';

DDS.Obj.style.height=(h-2)+'px';

return;

  },

  //返回PosStr===呵呵可有可无了

  getpos:function(){

return DDS.PosStr;

  },

  //可以单独设定w,h来确定是否锁定比例

  scale:function(w,h){

DDS.W=w;

DDS.H=h;

if (w && h)

   DDS.WH=w/h;

else{

   DDS.WH=false;

   DDS.W=false;

   DDS.H=false;

}

this.initpos();

  },

  //就是解除bind了

  unbind:function(){

if(null==DDS.Obj) return;

Event.stopObserving(DDS.Obj,'mousedown',DDS.mouseDown,false);

Event.stopObserving(document,'mouseup',DDS.mouseMove,false);

Event.stopObserving(document,'mousemove',DDS.mouseMove,false);

  },

  //以下是鼠标触发的行为，具体就不解释了

  mouseDown:function(event){

DDS.S=true;

DDS.X=event.clientX;

DDS.Y=event.clientY;

document.body.onselectstart=document.body.ondrag=function(){return false};

  },

  mouseUp:function(event){

DDS.S=false;

document.body.onselectstart=document.body.ondrag=function(){return true};

  },

  mouseMove:function(event){
if (false==DDS.OBJ)
   if(DDS.Obj != Event.element(event)) return;
var cur='';
var px=Event.pointerX(event);
var py=Event.pointerY(event);
var cx=event.clientX;
var cy=event.clientY;

var xPos = px - DDS.Obj.offsetLeft;//event.offsetX;
var yPos = py - DDS.Obj.offsetTop;//event.offsetY;

var offset = 8;

if (yPos<offset) cur += "n";
else if (yPos > (DDS.Obj.offsetHeight-offset)) cur += "s";
if (xPos<offset) cur += "w";
else if (xPos > (DDS.Obj.offsetWidth-offset)) cur += "e";
if (2==cur.length) cur = "";
if (cur == "") cur = "move";
else cur += "-resize";
if(false==DDS.S){
   DDS.Obj.style.cursor = cur;
   return;
}
cur=DDS.Obj.style.cursor;
xPos =cx - DDS.X;
yPos =cy - DDS.Y;

DDS.X=cx;
DDS.Y=cy;
var min=10;
var t=DDS.Obj.offsetTop;
var l=DDS.Obj.offsetLeft;
var w = DDS.Obj.offsetWidth;
var h = DDS.Obj.offsetHeight;
if('move'==cur){
   t=t + yPos;
   l=l + xPos;
}else
if('e-resize'==cur){
   w=w + xPos;
   if (w<10) return;
}else
if('s-resize'==cur){
   h=h + yPos;
   if (h<10) return;
}else
if('w-resize'==cur){
   w=w - xPos;
   l=l + xPos;
   if (w<10) return;
}else
if('n-resize'==cur){
   h=h - yPos;
   t=t + yPos;
   if (h<10) return;
}else
   return;
DDS.pos(t,l,w,h);
return;
  }

};

[ 本帖最后由 achun.shx 于 2007-2-28 17:14 编辑 ]

作者: achun.shx 发布时间: 2007-02-26

使用的简单例子的主要部分

复制内容到剪贴板