[JavaScript]跨浏览器可8方向拖拽剪裁框
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>Untitled Document</title>
6 <style type="text/css">
7 * { padding:0; margin:0; }
8 body { overflow: hidden; height:800px; }
9 #clipArea { width :100px; height:100px; border: dashed 1px #ccc; position: absolute; cursor:move;}
10 #clipArea b { position:absolute; height:6px; width:6px; overflow:hidden; display:block; background:#FFF; border: 1px solid #000; background:#eee; }
11 #canvasContainer { height:400px; width:600px; border:solid 1px red; position:relative; overflow:hidden; right: 20px; float: right; margin-right: 20px; top: 100px; }
12 </style>
13 </head>
14
15 <body>
16 <div id="canvasWrapper">
17 <div id="canvasContainer"></div>
18 </div>
19 <script type="text/javascript">
20 void function(e,g){var f,d,c,a,h;f=document;a=f.getElementsByTagName("body")[0];h=f.getElementById("canvasContainer");d=function(){var i=arguments.callee;i.prototype={type:({}).toString,slice:([]).slice,is:function(j){return this.type.call(j).slice(8,-1)},each:function(l,o){var k,m=0,j=l.length,n=j===g&&({}).toString.call(l).slice(8,-1)==="Object";if(n){for(k in l){if(o.call(l[k],k,l[k])===false){break}}}else{for(;m<j;){if(o.call(l[m],m,l[m++])===false){break}}}},toArray:function(j){return this.slice.call(j)},getHtmlElement:function(j){!this.element&&(this.element={});!this.element[j]&&(this.element[j]=f.createElement(j));return this.element[j].cloneNode(true)},getEvent:function(j){return j||e.event},getTarget:function(j){return j.srcElement||j.target},stopEvent:function(j){j=this.getEvent(j);(j.returnValue||j.preventDefault)&&(j.returnValue=false||j.preventDefault());(j.cancelBubble||j.stopPropagation)&&(j.cancelBubble=false||j.stopPropagation())},getClinetRect:function(j){var l=j.getBoundingClientRect(),k=(k={left:l.left,right:l.right,top:l.top,bottom:l.bottom,height:(l.height?l.height:(l.bottom-l.top)),width:(l.width?l.width:(l.right-l.left))});return k},addEvent:function(n,m,l,k){var j=arguments.callee;n.attachEvent&&(j=function(q,p,o){q.attachEvent("on"+p,o)}).apply(this,arguments);n.addEventListener&&(j=function(q,p,o){q.addEventListener(p,o,k||false)}).apply(this,arguments);n["on"+m]&&(j=function(q,p,o){q["on"+p]=function(){o()}}).apply(this,arguments)},removeEvent:function(n,m,l,k){var j=arguments.callee;n.detachEvent&&(j=function(q,p,o){q.detachEvent("on"+p,o)}).apply(this,arguments);n.removeEventListener&&(j=function(q,p,o){q.removeEventListener(p,o,k||false)}).apply(this,arguments);n["on"+m]&&(j=function(q,p,o){q["on"+p]=null}).apply(this,arguments)},currentStyle:function(k,l){var j=null;return g!==k.currentStyle?k.currentStyle[l]:document.defaultView.getComputedStyle(k,null)[l]}};if(e===this||"indicator" in this){return new i}}();var b=function(){var i=arguments.callee,j=d,l=this,k=6,m=null;if(!l instanceof i){return new i()}m={TL:{css:"top:0;left:0;cursor:nw-resize",size:function(n){m.CL.size(n);m.TC.size(n)}},TC:{css:"top:0;left:48%;cursor:n-resize",size:function(n){l.correctY(l.hanlderInfo._down-n.clientY,l.hanlderInfo._mxTH);l.correctTop()}},TR:{css:"right:0;top:0;cursor:ne-resize",size:function(n){m.CR.size(n);m.TC.size(n)}},CL:{css:"top:48%;left:0;cursor:w-resize",size:function(n){l.correctX(l.hanlderInfo._right-n.clientX,l.hanlderInfo._mxLW);l.correctLeft()}},CR:{css:"top:48%;right:0px;cursor:e-resize",size:function(n){l.correctX(n.clientX-l.hanlderInfo._left,l.hanlderInfo._mxRW)}},BL:{css:"bottom:0;left:0;cursor:sw-resize",size:function(n){m.CL.size(n);m.BC.size(n)}},BC:{css:"bottom:0;left:48%;cursor:s-resize",size:function(n){l.correctY(n.clientY-l.hanlderInfo._top,l.hanlderInfo._mxDH)}},BR:{css:"bottom:0;right:0px;cursor:se-resize",size:function(n){m.CR.size(n);m.BC.size(n)}}};l.area=null;!l.activity&&(ii.prototype.constructor=i),ii.fn=i.prototype,ii.fn.constructor=i;i.fn.activity=function(){var o=null,n=[];l.data&&(l.Data=null);if(l.area===null){l.area=j.getHtmlElement("div");l.area.style.visibility="hidden";l.area.id="clipArea";h.appendChild(l.area);n=["TL","TC","TR","CL","CR","BL","BC","BR"];j.each(Array(8),function(q,p){o=j.getHtmlElement("b");o.id=n[q];o.fn=m[n[q]];j.addEvent(o,"mousedown",l.mousemoveCheckThreshold,false);l.area.appendChild(o);l.setHanldPosition(o,l.area,n[q])});j.addEvent(l.area,"mousedown",l.mousemoveCheckThreshold,false);l.area.style.visibility="visible"}};i.fn.setHanldPosition=function(u,n,t){var o=n.offsetWidth,w=n.offsetHeight,r=(o-k),q=Math.floor((o-k)/2),v=(w-k),s=Math.floor((o-k)/2);u.style.cssText=m[t].css};i.fn.mousemoveCheckThreshold=function(p){p=j.getEvent(p);var o=j.getTarget(p),q=[],n=p.type;while(o&&o.nodeType!==1){oo=o.parentNode}({mousedown:function(r){r=j.getEvent(r);j.stopEvent(r);f.currentTarget=o;l.pos=j.getClinetRect(o);l.origin=[r.clientX-l.pos.left,r.clientY-l.pos.top];o.nodeName.toLowerCase()==="b"&&l.checkHandler(r);j.addEvent(f,"mouseup",l.mousemoveCheckThreshold,false);j.addEvent(f,"mousemove",l.mousemoveCheckThreshold,false)},mousemove:function(s){s=j.getEvent(s);var r=f.currentTarget,t=j.getClinetRect(r.parentNode);r.nodeName.toLowerCase()==="b"?l.handlerMove.call(r,s,t):l.areaMove.call(r,s,t);j.stopEvent(s)},mouseup:function(s){s=j.getEvent(s);var r=j.getTarget(s);if(r.nodeName.toLowerCase()!=="b"){try{r.style.cursor="move"}catch(s){}}j.removeEvent(f,"mousemove",l.mousemoveCheckThreshold,false);j.removeEvent(f,"mouseup",l.mousemoveCheckThreshold,false);ll.pos=l.origin=null;delete l.hanlderInfo;j.stopEvent(s)}})[p.type](p)};i.fn.checkHandler=function(q){q=j.getEvent(q);var p=j.getTarget(q),n=p.parentNode,o=j.getClinetRect(n);!l.hanlderInfo&&(l.hanlderInfo={});l.hanlderInfo.mxT=0;l.hanlderInfo.mxL=0;l.hanlderInfo.mxR=n.parentNode.clientWidth;l.hanlderInfo.mxB=n.parentNode.clientHeight;l.hanlderInfo.mxR=Math.max(l.hanlderInfo.mxR,l.hanlderInfo.mxL+40);l.hanlderInfo.mxB=Math.max(l.hanlderInfo.mxB,l.hanlderInfo.mxT+40);l.hanlderInfo.width=n.clientWidth;l.hanlderInfo.height=n.clientHeight;l.hanlderInfo.left=n.offsetLeft;l.hanlderInfo.top=n.offsetTop;l.hanlderInfo._left=o.left;l.hanlderInfo._right=o.right;l.hanlderInfo._top=o.top;l.hanlderInfo._down=o.bottom;ll.hanlderInfo._fixLeft=l.hanlderInfo.width+l.hanlderInfo.left;ll.hanlderInfo._fixTop=l.hanlderInfo.height+l.hanlderInfo.top;ll.hanlderInfo._mxRW=l.hanlderInfo.mxR-l.hanlderInfo.left;ll.hanlderInfo._mxDH=l.hanlderInfo.mxB-l.hanlderInfo.top;l.hanlderInfo._mxTH=Math.max(l.hanlderInfo._fixTop-l.hanlderInfo.mxT,0);l.hanlderInfo._mxLW=Math.max(l.hanlderInfo._fixLeft-l.hanlderInfo.mxL,0)};i.fn.correctX=function(n,o){n=l.correctWidth(n,o);l.hanlderInfo.width=n};i.fn.correctY=function(n,o){n=l.correctHeight(n,o);l.hanlderInfo.height=n};i.fn.correctWidth=function(n,o){n=Math.min(o,n);n=Math.max(n,80,0);return n};i.fn.correctHeight=function(n,o){n=Math.min(o,n);n=Math.max(n,80,0);return n};i.fn.correctTop=function(){ll.hanlderInfo.top=l.hanlderInfo._fixTop-l.hanlderInfo.height};i.fn.correctLeft=function(){ll.hanlderInfo.left=l.hanlderInfo._fixLeft-l.hanlderInfo.width};i.fn.handlerMove=function(n){n=j.getEvent(n);var o=this.id;this.fn.size(n);l.resize();j.stopEvent(n)};i.fn.resize=function(n){var o=l.area;o.style.cssText="width:"+l.hanlderInfo.width+"px;height:"+l.hanlderInfo.height+"px;top:"+l.hanlderInfo.top+"px;left:"+l.hanlderInfo.left+"px"},i.fn.areaMove=function(p){var q=[p.clientX,p.clientY],n=this.parentNode,r,o=j.getClinetRect(n);r=[Math.max(p.clientX-o.left-l.origin[0],0),Math.max(p.clientY-o.top-l.origin[1],0)];r=[Math.min(n.clientWidth-this.offsetWidth,r[0]),Math.min(n.clientHeight-this.offsetHeight,r[1])];this.style.top=r[1]+"px";this.style.left=r[0]+"px"};i.fn.removeArea=function(){try{l.area.parentNode.removeChild(l.area),l.area=null}catch(n){}};i.fn.getData=function(){var n=j.getClinetRect(l.area.parentNode);return l.area?j.getClinetRect(l.area):-1}};new b().activity()}(window);
21 </script>
22 </body>
23 </html>
开发版 可以显示 宽高比例数据
1 var Clip = function(node) {
2 var indicator = arguments.callee,
3 doc = document,
5 that = this,
6 handlerSize = 6,
7 rules = null;
8 node = node || doc.getElementsByTagName('body')[0];
9
10 if (!that instanceof indicator) {
11 return new indicator(node)
12 }
13
14 rules = {
15 'TL':{
16 css:'top:0;left:0;cursor:nw-resize',
17 size:function(e) {//左上
18 rules.CL.size(e);
19 rules.TC.size(e);
20 }
21 },
22 'TC':{
23 css:'top:0;left:48%;cursor:n-resize',
24 size:function(e) {//上
25 /*that.hanlderInfo.height= Math.max(that.hanlderInfo._down - e.clientY,40);
26 that.hanlderInfo.top = that.hanlderInfo._fixTop - that.hanlderInfo.height;*/
27 that.correctY(that.hanlderInfo._down - e.clientY, that.hanlderInfo._mxTH);
28 that.correctTop();
29 }
30 },
31 'TR':{
32 css:'right:0;top:0;cursor:ne-resize',
33 size:function(e) {//右上
34 rules.CR.size(e);
35 rules.TC.size(e);
36 }
37 },
38 'CL':{
39 css:'top:48%;left:0;cursor:w-resize',
40 size:function(e) {//左
41 /*that.hanlderInfo.width = Math.max(that.hanlderInfo._right - e.clientX,40);
42 that.hanlderInfo.left = that.hanlderInfo._fixLeft - that.hanlderInfo.width;*/
43 that.correctX(that.hanlderInfo._right - e.clientX, that.hanlderInfo._mxLW);
44 that.correctLeft();
45
46 }
47 },
48 'CR':{
49 css:'top:48%;right:0px;cursor:e-resize',
50 size:function(e) {//右
51 //that.hanlderInfo.width = Math.max(e.clientX - that.hanlderInfo._left,40);
52 that.correctX(e.clientX - that.hanlderInfo._left, that.hanlderInfo._mxRW);
53 }
54 },
55 'BL':{
56 css:'bottom:0;left:0;cursor:sw-resize',
57 size:function(e) {//左下
58 rules.CL.size(e);
59 rules.BC.size(e);
60 }
61 },
62 'BC':{
63 css:'bottom:0;left:48%;cursor:s-resize',
64 size:function(e) {//下
65 //that.hanlderInfo.height = Math.max(e.clientY-that.hanlderInfo._up,40);
66 that.correctY(e.clientY - that.hanlderInfo._top, that.hanlderInfo._mxDH);
67 }
68 },
69 'BR':{
70 css:'bottom:0;right:0px;cursor:se-resize',
71 size:function(e) {//右下
72 rules.CR.size(e);
73 rules.BC.size(e);
74 }
75 }
76 };
77
78 that.area = null;
79
80 that.activity || (indicator.prototype.constructor = indicator),
81 indicator.fn = indicator.prototype,
82 indicator.fn.constructor = indicator;
83
84 indicator.fn.activity = function(config, fn) {
85 var handler = null,handleStyle = [];
86 typeof fn === 'function' && (that.fn = fn);
87 that.data && (that.Data = null);
88
89 if (null === that.area) {
90 that.info = tk.getHtmlElement('span')
91 that.area = tk.getHtmlElement('div');
92 that.area.style.visibility = 'hidden';
93 that.area.id = 'clipArea';
94
95 that.area.appendChild(that.info);
96 node.appendChild(that.area);
97
98 handleStyle = ['TL','TC','TR','CL','CR','BL','BC','BR'];
99
100 tk.each(Array(8), function(a, b) {
101 handler = tk.getHtmlElement('b');
102 handler.id = handleStyle[a];
103 handler.fn = rules[handleStyle[a]];
104 tk.addEvent(handler, 'mousedown', that.mousemoveCheckThreshold, false);
105 tk.addEvent(handler, 'touch', that.mousemoveCheckThreshold, false);
106 that.area.appendChild(handler);
107 that.setHanldPosition(handler, that.area, handleStyle[a]);
108 });
109 tk.addEvent(that.area, 'mousedown', that.mousemoveCheckThreshold, false);
110 that.area.style.visibility = 'visible';
111 }
112 ;
113
114 that.setProp(+config.width, +config.height);
115
116 var parent = that.area.parentNode;
117 that.area.style.cssText = 'width:' + config.width + 'px;height:' + config.height + 'px;top:' + parent.scrollTop + 'px;left:' + parent.scrollLeft + 'px';
118 /*that.area.style.width=config.width+'px';
119 that.area.style.height=config.height+'px';
120 that.area.style.top=that.area.parentNode.scrollTop+'px';
121 that.area.style.left=that.area.parentNode.scrollLeft+'px';*/
122 };
123
124 indicator.fn.setHanldPosition = function(c, p, d) {
125 var W = p.offsetWidth,H = p.offsetHeight,w1 = (W - handlerSize),w2 = Math.floor((W - handlerSize) / 2),h1 = (H - handlerSize),h2 = Math.floor((W - handlerSize) / 2);
126 c.style.cssText = rules[d].css;
127 };
128
129 indicator.fn.mousemoveCheckThreshold = function(e) {
130 e = tk.getEvent(e);
131 var target = tk.getTarget(e),pointer = [],eType = e.type;
132 while (target && target.nodeType !== 1) {
133 target = target.parentNode;
134 }
135 ;
136 ({
137 mousedown:function(e) {
138 e = tk.getEvent(e);
139 tk.stopEvent(e);
140
141 doc.currentTarget = target;
142 that.pos = tk.getClinetRect(target);
143 that.origin = [e.clientX - that.pos.left,e.clientY - that.pos.top];
144 target.nodeName.toLowerCase() === 'b' && that.checkHandler(e);
145 tk.addEvent(doc, 'mouseup', that.mousemoveCheckThreshold, false);
146 tk.addEvent(doc, 'mousemove', that.mousemoveCheckThreshold, false);
147
148 },
149 mousemove:function(e) {
150 e = tk.getEvent(e);
151 var target = doc.currentTarget,reffer = {
152 top:e.clientX,
153 right:e.clientY + target.offsetWidth,
154 down:e.clientX + target.offsetHeight,
155 left:e.clientY
156 };
157
158 target.nodeName.toLowerCase() === 'b' ? that.handlerMove.call(target, e, reffer) : that.areaMove.call(target, e, reffer);
159 tk.stopEvent(e);
160 },
161 mouseup:function(e) {
162 e = tk.getEvent(e);
163 var target = tk.getTarget(e);
164 if (target.nodeName.toLowerCase() !== 'b') {
165 try {
166 target.style.cursor = 'move'
167 } catch(e) {
168 }
169 }
170 ;
171 tk.removeEvent(doc, 'mousemove', that.mousemoveCheckThreshold, false);
172 tk.removeEvent(doc, 'mouseup', that.mousemoveCheckThreshold, false);
173
174 that.pos = that.origin = null;
175 delete that.hanlderInfo;
176 tk.stopEvent(e);
177 }
178 })[e.type](e)
179
180 };
181
182 indicator.fn.checkHandler = function(e) {
183
184 e = tk.getEvent(e);
185 var target = tk.getTarget(e),parent = target.parentNode,rect = tk.getClinetRect(parent);
186 that.hanlderInfo || (that.hanlderInfo = {});
187
188 that.hanlderInfo.mxT = 0;
189 that.hanlderInfo.mxL = 0;
190 that.hanlderInfo.mxR = parent.parentNode.clientWidth + parent.parentNode.scrollLeft - 2;
191 that.hanlderInfo.mxB = parent.parentNode.clientHeight + parent.parentNode.scrollTop - 2;
192
193 that.hanlderInfo.mxR = Math.max(that.hanlderInfo.mxR, that.hanlderInfo.mxL + 40);
194 that.hanlderInfo.mxB = Math.max(that.hanlderInfo.mxB, that.hanlderInfo.mxT + 40);
195
196 //起始信息
197 that.hanlderInfo.width = parent.clientWidth;
198 that.hanlderInfo.height = parent.clientHeight;
199 that.hanlderInfo.left = parent.offsetLeft;
200 that.hanlderInfo.top = parent.offsetTop;
201
202 //元素四个边的位置
203 that.hanlderInfo._left = rect.left;
204 that.hanlderInfo._right = rect.right;
205 that.hanlderInfo._top = rect.top;
206 that.hanlderInfo._down = rect.bottom;
207
208 /*that.hanlderInfo._left=e.clientX-that.hanlderInfo.width;
209 that.hanlderInfo._right=e.clientX+that.hanlderInfo.width;
210 that.hanlderInfo._top=e.clientY-that.hanlderInfo.height;
211 that.hanlderInfo._down=e.clientY+that.hanlderInfo.height;*/
212
213 that.hanlderInfo._fixLeft = that.hanlderInfo.width + that.hanlderInfo.left;
214 that.hanlderInfo._fixTop = that.hanlderInfo.height + that.hanlderInfo.top;
215
216 that.hanlderInfo._mxRW = that.hanlderInfo.mxR - that.hanlderInfo.left;
217 that.hanlderInfo._mxDH = that.hanlderInfo.mxB - that.hanlderInfo.top;
218 that.hanlderInfo._mxTH = Math.max(that.hanlderInfo._fixTop - that.hanlderInfo.mxT, 0);
219 that.hanlderInfo._mxLW = Math.max(that.hanlderInfo._fixLeft - that.hanlderInfo.mxL, 0);
220
221 };
222 indicator.fn.correctX = function(w, mxW) {
223 w = that.correctWidth(w, mxW);
224 that.hanlderInfo.width = w;
225 };
226 indicator.fn.correctY = function(h, mxH) {
227 h = that.correctHeight(h, mxH);
228 that.hanlderInfo.height = h;
229 };
230 indicator.fn.correctWidth = function(w, mxW) {
231 w = Math.min(mxW, w);
232 w = Math.max(w, 40, 0);
233 return w;
234 };
235 indicator.fn.correctHeight = function(h, mxH) {
236 h = Math.min(mxH, h);
237 h = Math.max(h, 40, 0);
238 return h;
239 };
240 indicator.fn.correctTop = function() {
241 that.hanlderInfo.top = that.hanlderInfo._fixTop - that.hanlderInfo.height;
242 };
243 indicator.fn.correctLeft = function() {
244 that.hanlderInfo.left = that.hanlderInfo._fixLeft - that.hanlderInfo.width;
245 };
246 indicator.fn.handlerMove = function(e) {
247 e = tk.getEvent(e);
248 var d = this.id;
249 this.fn.size(e);
250 that.resize();
251 tk.stopEvent(e);
252 };
253 indicator.fn.resize = function(t) {
254 var target = that.area;
255 target.style.cssText = 'width:' + that.hanlderInfo.width + 'px;height:' + that.hanlderInfo.height + 'px;top:' + (that.hanlderInfo.top + 1) + 'px;left:' + (that.hanlderInfo.left + 1) + 'px';
256 that.fn && that.fn();
257 that.setProp(that.hanlderInfo.width, that.hanlderInfo.height);
258 },
259 indicator.fn.areaMove = function(e) {
260 var pointer = [e.clientX,e.clientY],parent = this.parentNode,max = [parent.scrollWidth,parent.scrollHeight],size = tk.getClinetRect(this.parentNode),tL,tT;
261 this.style.cursor = 'crosshair';
262
263
264 tL = Math.max(pointer[0] - size.left + parent.scrollLeft - that.origin[0], 0);
265 tL = Math.min(tL, max[0] - this.offsetWidth);
266 this.style.left = tL + 'px';
267
268 tT = Math.max(pointer[1] - size.top + parent.scrollTop - that.origin[1], 0);
269 tT = Math.min(tT, max[1] - this.offsetHeight);
270 this.style.top = tT + 'px';
271
272 };
273 indicator.fn.removeArea = function(fn) {
274 try {
275 that.area.parentNode.removeChild(that.area),that.area = null;
276 } catch(e) {
277 } finally {
278 ('function' === typeof fn) && fn();
279 }
280 ;
281 };
282 indicator.fn.getData = function() {
283 try {
284 return [that.area.offsetLeft,that.area.offsetTop,that.area.offsetWidth,that.area.offsetHeight];
285 } catch(e) {
286 }
287 ;
288 };
289 indicator.fn.setProp = function(a, b) {
290 that.info.innerHTML = '宽:' + Math.ceil(a) + 'px 高:' + Math.ceil(b) + 'px 比例:' + that.proportion(a, b);
291 };
292 indicator.fn.proportion = function (x, y) {
293 x = x.toPrecision(1),y = y.toPrecision(1);
294 var z = ((x < y) ? x : y);
295 while (true) {
296 if (x % z == 0 && y % z == 0) {
297 break;
298 }
299 z--;
300 }
301 ;
302 return (Math.abs(x / z) + ":" + Math.abs(y / z));
303 };
304 };
