let cv=document.querySelector('.cv'),
 
ctx=cv.getContext('2d'),
 
sv= 0,//缩放的增加值
 
speed= 0.01,//缩放增加速度
 
/** @param Number sx 物体开始绘制的x点
 
* @param Number sy 物体开始绘制的y点
 
* @param Number width 物体开始绘制的宽
 
* @param Number height 物体开始绘制的高*/getCenter=(sx, sy, width, height)=>{//返回物体的中心点
 
return{
 
x: sx+(width/ 2),
 
y: sy+(height/ 2)
 
};
 
},/** 绘制图形*/draw=()=>{
 
let arc_x= 150,//圆心x轴
 
arc_y= 150,//圆心y轴
 
arc_r= 20,//圆半径
 
rect_x= 300,//矩形x轴
 
rect_y= 100,//矩形y轴
 
rect_width= 50,//矩形的宽
 
rect_height= 50,//矩形的高
 
line_sx= 500,//直线起点x轴
 
line_sy= 100,//直线起点y轴
 
line_ex= 600,//直线终点x轴
 
line_ey= 210,//直线终点y轴
 
s={//缩放值
 
x:1 +sv,
 
y:1 +sv
 
},
 
arc_center=getCenter(arc_x-arc_r, arc_y-arc_r,2 *arc_r,2 *arc_r),//圆心
 
rect_center=getCenter(rect_x, rect_y, rect_width, rect_height),//矩形中心
 
line_center=getCenter(line_sx, line_sy, line_ex-line_sx, line_ey-line_sy);//直线中心
 
ctx.clearRect(0,0, cv.width, cv.height);//绘制圆
 
ctx.save();//保存状态，以免影响其它物体
 
ctx.scale(s.x, s.y);//执行缩放
 
ctx.translate(-(arc_center.x*(s.x- 1))/s.x,-(arc_center.y*(s.y- 1))/s.y);//缩放后的差偏移回来
 
ctx.beginPath();//开启路径
 
ctx.arc(arc_x, arc_y, arc_r,0,2 *Math.PI);//绘制圆
 
ctx.closePath();//关闭路径
 
ctx.stroke();//描边绘制
 
ctx.restore();//恢复状态
 
//绘制矩形
 
ctx.save();
 
ctx.scale(s.x, s.y);
 
ctx.translate(-(rect_center.x*(s.x- 1))/s.x,-(rect_center.y*(s.y- 1))/s.y);
 
ctx.beginPath();
 
ctx.strokeRect(rect_x, rect_y, rect_width, rect_height);
 
ctx.closePath();
 
ctx.restore();//绘制直线
 
ctx.save();
 
ctx.scale(s.x, s.y);
 
ctx.translate(-(line_center.x*(s.x- 1))/s.x,-(line_center.y*(s.y- 1))/s.y);
 
ctx.beginPath();
 
ctx.moveTo(line_sx, line_sy);
 
ctx.lineTo(line_ex, line_ey);
 
ctx.closePath();
 
ctx.stroke();//绘制线的外框，以便明显线的缩放
 
ctx.beginPath();
 
ctx.strokeStyle= '#bbb';
 
ctx.strokeRect(line_sx, line_sy, line_ex-line_sx, line_ey-line_sy);
 
ctx.closePath();
 
ctx.restore();
 
sv+=speed;if(sv<= 2) {
 
requestAnimationFrame(draw);
 
}
 
};//画布大小
 
cv.width= 800;
 
cv.height= 500;
 
window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(callback) {
 
callback&&setTimeout(callback,1000 / 60);
 
};
 
draw();//开始绘制缩放

原理
 
使用的绘制方法
 
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
 
参数说明:
 
dx
 image的左上角在目标canvas上 X 轴坐标。
 dy
 image的左上角在目标canvas上 Y 轴坐标。
 dWidth(可选)
 image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
 dHeight(可选)
 image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。
 
 其中可视窗口就是canvas元素的实际大小, 超出的部分不可见. 以canvas的左上角建立坐标系.
 
实际上的目标就是将缩放图上的先前的鼠标点, 移动到鼠标位置, 也就是求上图的dx与dy
 
最后得到公式:
 $$\begin{array}{r}dx=(1-\frac{s}{s^{\prime }})(x_o-x_l)\\ dy=(1-\frac{s}{s^{\prime }})(y_o-y_l)\end{array}$$
 $s$代表本次缩放比例, $s^{\prime }$ 代表上次缩放比例, $(x_o,y_o)$代表鼠标在可视窗口的位置, $(x_l,y_l)$ 代表图片相对可视窗口左上角的偏移量
 
代码
 
scaleEvent(e) {
	// 获得滚轮偏移
	let v = e.deltaY
	// 储存先前缩放量
	let s1 = this.scale
	this.scale += v
	this.scale = this.scale < 100 ? 100 : this.scale
	// 本次缩放量
	let s = this.scale
	// 图片在缩放后移动量
	let dx = (1-s/s1)*(e.offsetX-this.x)
	let dy = (1-s/s1)*(e.offsetY-this.y)
	// 得到缩放后图片偏移点
	this.x += dx
	this.y += dy
}

前言
 
需要实现如题的一个功能，通俗的说就是鼠标滚轮缩放图片，而且是以鼠标在图片上的位置
 进行缩放，焦点固定在鼠标尖的功能。
 
效果
 
先看看效果：
 
 
思路
 
这个使用UGUI的思路就是在鼠标滚轮滚动的时候，根据鼠标位置计算图片的轴心点和对应于轴心点保持图片不移动的位置信息，让后将这些数值动态的赋值给图片，最后根据滚轮前后赋值缩放值。
 
实现
 
搭建UI
 
这里以一张地图截图为例，针对不同的位置进行缩放，方便查看。并使用了scroll view 进行了裁剪。
 
 
编码
 
滚动事件
 
鼠标的滚动事件主要通过OnScroll(PointerEventData eventData)实现，滚轮后触发缩放操作。
 
//滚轮事件
public void OnScroll(PointerEventData eventData)
{
    ZoomImgByMousePos();
}
 
计算位置偏移
 
计算鼠标位置与对象位置偏移值
 
float OffsetX = Input.mousePosition.x - ZoomObj.position.x;
float OffsetY = Input.mousePosition.y - ZoomObj.position.y;
 
计算轴心点(pivot)
 
根据偏移、边长和缩放计算轴心点
 
float PivotX = OffsetX / RectTran.rect.width / ZoomObj.localScale.x;
float PivotY = OffsetY / RectTran.rect.height / ZoomObj.localScale.y;
 
赋值
 
设置轴心和位置
 
RectTran.pivot += new Vector2(PivotX, PivotY);
ZoomObj.position += new Vector3(OffsetX, OffsetY, 0);
 
缩放实现
 
根据滚轮缩放，同时进行缩放范围限制
 
if (Input.GetAxis("Mouse ScrollWheel") > 0)
    ZoomObj.localScale += (ZoomObj.localScale.x >= MaxScale ? Vector3.zero : Vector3.one * 0.1f);
else if (Input.GetAxis("Mouse ScrollWheel") < 0)
    ZoomObj.localScale += (ZoomObj.localScale.x < MinScale ? Vector3.zero : Vector3.one * -0.1f); 
 
项目源码
 
https://download.csdn.net/download/qq_33789001/19517049

1重写 QAbstractScrollArea 类的wheelEvent函数，让它什么都不要做
 
void QAbstractScrollArea::wheelEvent(QWheelEvent *event)
{
	return;
}
 
2 实现QScrollArea里面的Qlabel放大缩小
 
void OpenAndSplicingWindow::wheelEvent(QWheelEvent *event)
{
	ui->label->setMinimumSize(0, 0);
	ui->label->setMaximumSize(2048, 2048);
	QRect tmp = ui->label->geometry();

	int adjustSize = 20;//改变的尺寸

	//如果滚轮向上滑动，且鼠标位置在scrollArea里面
	if (event->delta() > 0 && tmp.contains(event->pos()))
	{
		tmp.setWidth(tmp.width() + adjustSize);
		tmp.setHeight(tmp.height() + adjustSize);
		ui->lb_Screen->setFixedSize(tmp.width(), tmp.height());
	}
	if (event->delta() < 0 && tmp.contains(event->pos()))
	{
		tmp.setWidth(tmp.width() - adjustSize);
		tmp.setHeight(tmp.height() - adjustSize);
		ui->lb_Screen->setFixedSize(tmp.width(), tmp.height());
	}

	//重新定位滚动条为鼠标位置
	QScrollBar *tmph = ui->scrollArea->horizontalScrollBar();
	QScrollBar *tmpv = ui->scrollArea->verticalScrollBar();
	QPoint pos = event->pos();
	tmph->setValue(pos.x());
	tmpv->setValue(pos.y());
}