Raphael Js实现以鼠标中心缩放paper
2016-06-27 20:52
288 查看
主要逻辑就是计算缩放前后鼠标所在位置偏差,来调整view起点坐标到鼠标点。
Y
链接: https://pan.baidu.com/s/1eRR0xUE 密码: kfis
var scale; window.onload=function(){ ............... ............... addWinWheelListener(winWheel); scale={vari:.02,zoom:1,w:_pgsz[2],h:_pgsz[3],x:0,y:0};//_pgsz[2],_pgsz[3];容器宽高 } /** *鼠标滚轮缩放 * */ function winWheel(e){ var cw=_pgsz[2],ch=_pgsz[3];//容器宽高 var w=scale.w,h=scale.h,x=scale.x,y=scale.y; var vari=scale.vari-0; e=e || window.event; var cx=e.clientX; var cy=e.clientY; var dtl; if(e.wheelDelta){ dtl=e.wheelDelta; }else if(e.detail){ dtl=e.detail; } var px,py,nx,ny; var posv=1/scale.zoom; px=cx*posv;//原鼠标位置 py=cy*posv; if(dtl<0){ if(scale.zoom<0.1) return; scale.zoom-=vari; }else{ if(scale.zoom>4.9) return; scale.zoom+=vari; } posv=1/scale.zoom; w=cw*posv; h=ch*posv; nx=cx*posv;//新鼠标位置 ny=cy*posv; var dx=px-nx;//偏移量 var dy=py-ny; x+=dx; y+=dy; scale.w=w; scale.h=h; scale.x=x; scale.y=y; _r.setViewBox(scale.x,scale.y,scale.w,scale.h,false); } function addWinWheelListener(sfun){ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',sfun,false); }//W3C window.onmousewheel=document.onmousewheel=sfun;//IE/Opera/Chrome/Safari }
Y
链接: https://pan.baidu.com/s/1eRR0xUE 密码: kfis
相关文章推荐
- url 编码 js url传参中文乱码解决方案
- Javascript是单线程的深入分析
- JS根据userAgent值来判断浏览器的类型及版本
- jsp遍历list
- js中return,this,arguments,currentStyle和getComputedStyle小析
- 解决跨域问题的利器——JSONP
- ExtJS相关链接
- post请求中参数为json格式
- Ember.js 的视图层
- FastJson返回值为空时key丢失
- js实现千分符和保留几位小数
- director.js:客户端的路由---简明中文教程
- .NET下解析Json的方法
- 关于Ajax load页面中js部分$(function(){})的执行顺序
- javaScript学习基础篇(4)-(window,正则,eventListener)
- 不一样的用法
- Javascript中call的使用
- web前端面试,包括javascript,css
- [转]JavaScript 节流函数 Throttle 详解
- JSON.parse()与JSON.stringify()