js实现鼠标滚轮滚动以当前鼠标焦点为中心缩放

最新推荐文章于 2024-10-01 08:42:33 发布

崔耀强

最新推荐文章于 2024-10-01 08:42:33 发布

阅读量1.2w

点赞数 2

分类专栏： js 文章标签： js canvas 鼠标缩放焦点

本文链接：https://blog.csdn.net/cuiyaoqiang/article/details/54863345

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


var posMoniCtx;//画笔
var posMoniCanvas;//画布

var imgX=0,imgY=0,imgScale=1,minScale=1,maxScale=8,
	destWidth,destHeight;
var bgImg;

	//chrome firefox浏览器兼容  滚轮事件
	posMoniCanvas.onmousewheel=posMoniCanvas.onwheel=function(e){

			e.wheelDelta=e.wheelDelta?e.wheelDelta:(e.deltaY*(-40));
			
			if(e.wheelDelta>0&&imgScale<maxScale){//放大				
				imgScale*=2;
				imgX=imgX*2-mousePos.x;
				imgY=imgY*2-mousePos.y;
				drawAllComponent();
			}
			
			if(e.wheelDelta<0&&imgScale>minScale){//缩小				
				imgScale*=0.5;
				imgX=imgX*0.5+mousePos.x*0.5;
				imgY=imgY*0.5+mousePos.y*0.5;
				drawAllComponent();
			}
		}
	
	

function drawAllComponent() {

//清空面板
posMoniCtx.clearRect(0,0,posMoniCanvas.width,posMoniCanvas.height);
//重绘背景图	
destWidth=posMoniCanvas.width*imgScale;
destHeight=posMoniCanvas.height*imgScale;
posMoniCtx.drawImage(bgImg,0,0,bgImg.width,bgImg.height,imgX,imgY,destWidth,destHeight);
}

无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。