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

落日映苍穹つ 2022-09-22 04:00 147阅读 0赞

主要逻辑就是计算缩放前后鼠标所在位置偏差，来调整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
    }

![Center][]Y

链接: https://pan.baidu.com/s/1eRR0xUE 密码: kfis

[Center]: /images/20220721/31e84417025040c4be32466ef1530f07.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)

场景 Winforn中设置ZedGraph曲线图的属性、坐标轴属性、刻度属性： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI

墨蓝/ 2023年10月11日 13:44/ 0 赞/ 42 阅读

相关 Vue 实现鼠标滚轮缩放图片并拖动

需求：实现鼠标滚轮上滚下滚缩放图片，单击不松开拖动图片给图片添加一个盒子 // dom <div @mousewheel.prevent="rollImg

野性酷女/ 2023年09月24日 13:16/ 0 赞/ 60 阅读

相关【C#】C#实现鼠标滚轮的图像居中缩放

【fishing-pan：[https://blog.csdn.net/u013921430][https_blog.csdn.net_u013921430] 转载请注明出处

电玩女神/ 2023年05月21日 11:49/ 0 赞/ 12 阅读

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

主要逻辑就是计算缩放前后鼠标所在位置偏差，来调整view起点坐标到鼠标点。 var scale; window.onload=function(){

落日映苍穹つ/ 2022年09月22日 04:00/ 0 赞/ 148 阅读

相关 Flex使用Scroller组件实现以鼠标为中心的缩放

Flex 用Scroller组件实现鼠标为中心的缩放 Scroller在Flex中为滚动组件，通过viewport实现数据的查看。有关如何使用Scroller实现大量

小鱼儿/ 2022年08月08日 14:54/ 0 赞/ 147 阅读

相关 js图片缩放

感谢：https://zhidao.baidu.com/question/499471536.html 记录下关键代码： <html> <head

谁践踏了优雅/ 2022年07月14日 06:51/ 0 赞/ 304 阅读

相关 webstorm ctrl + 鼠标滚轮缩放字体

打开webstorm, File->setting->Editor->General,然后将Change font size (Zoom) with Ctrl+Mouse Wh

忘是亡心i/ 2022年06月04日 00:57/ 0 赞/ 224 阅读

相关 Python OpenCV：利用鼠标移动缩放图片

-------------------- 一、实现目标在OpenCV中通过鼠标左键拖拽移动图片，通过鼠标滚轮前后旋转放大缩小图片。二、实现背景在前

Myth丶恋晨/ 2022年04月23日 00:46/ 0 赞/ 408 阅读

相关 MFC OpenCV：鼠标滚轮缩放图片

MFC OpenCV：鼠标滚轮缩放图片一、背景二、实现步骤三、全部代码四、注意 -------------

电玩女神/ 2022年02月01日 12:47/ 0 赞/ 693 阅读

相关滑动鼠标图片缩放

<img id="chgImg" src="img/1.jpg" width="760"

悠悠/ 2021年11月05日 15:26/ 0 赞/ 359 阅读