您的位置:首页 > Web前端 > JavaScript

Raphael Js实现以鼠标中心缩放paper

2016-06-27 20:52 288 查看
主要逻辑就是计算缩放前后鼠标所在位置偏差,来调整view起点坐标到鼠标点。

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: