放大点（使用比例和平移）

Question

放大点（使用比例和平移）

我希望能够在HTML 5画布中放大鼠标下的点，例如放大Google地图。我怎样才能做到这一点？

Answer 1

更好的解决方案是根据缩放的变化简单地移动视口的位置。缩放点只是旧缩放中的点和要保持不变的新缩放。也就是说视口预缩放和缩放后的视口相对于视口具有相同的缩放比例。鉴于我们相对于原点进行缩放。您可以相应地调整视口位置：scalechange = newscale - oldscale;offsetX = -(zoomPointX * scalechange);offsetY = -(zoomPointY * scalechange);因此，当您放大时，相对于您缩放的点，放大了多少，您可以放大和向右平移。

Answer 2

终于解决了它：var&nbsp;zoomIntensity&nbsp;=&nbsp;0.2;var&nbsp;canvas&nbsp;=&nbsp;document.getElementById("canvas");var&nbsp;context&nbsp;=&nbsp;canvas.getContext("2d");var&nbsp;width&nbsp;=&nbsp;600;var&nbsp;height&nbsp;=&nbsp;200;var&nbsp;scale&nbsp;=&nbsp;1;var&nbsp;originx&nbsp;=&nbsp;0;var&nbsp;originy&nbsp;=&nbsp;0;var&nbsp;visibleWidth&nbsp;=&nbsp;width;var&nbsp;visibleHeight&nbsp;=&nbsp;height;function&nbsp;draw(){ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Clear&nbsp;screen&nbsp;to&nbsp;white. &nbsp;&nbsp;&nbsp;&nbsp;context.fillStyle&nbsp;=&nbsp;"white"; &nbsp;&nbsp;&nbsp;&nbsp;context.fillRect(originx,originy,800/scale,600/scale); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Draw&nbsp;the&nbsp;black&nbsp;square. &nbsp;&nbsp;&nbsp;&nbsp;context.fillStyle&nbsp;=&nbsp;"black"; &nbsp;&nbsp;&nbsp;&nbsp;context.fillRect(50,50,100,100);}//&nbsp;Draw&nbsp;loop&nbsp;at&nbsp;60FPS.setInterval(draw,&nbsp;1000/60);canvas.onwheel&nbsp;=&nbsp;function&nbsp;(event){ &nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Get&nbsp;mouse&nbsp;offset. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;mousex&nbsp;=&nbsp;event.clientX&nbsp;-&nbsp;canvas.offsetLeft; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;mousey&nbsp;=&nbsp;event.clientY&nbsp;-&nbsp;canvas.offsetTop; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Normalize&nbsp;wheel&nbsp;to&nbsp;+1&nbsp;or&nbsp;-1. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;wheel&nbsp;=&nbsp;event.deltaY&nbsp;<&nbsp;0&nbsp;?&nbsp;1&nbsp;:&nbsp;-1; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Compute&nbsp;zoom&nbsp;factor. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;zoom&nbsp;=&nbsp;Math.exp(wheel*zoomIntensity); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Translate&nbsp;so&nbsp;the&nbsp;visible&nbsp;origin&nbsp;is&nbsp;at&nbsp;the&nbsp;context's&nbsp;origin. &nbsp;&nbsp;&nbsp;&nbsp;context.translate(originx,&nbsp;originy); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Compute&nbsp;the&nbsp;new&nbsp;visible&nbsp;origin.&nbsp;Originally&nbsp;the&nbsp;mouse&nbsp;is&nbsp;at&nbsp;a &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;distance&nbsp;mouse/scale&nbsp;from&nbsp;the&nbsp;corner,&nbsp;we&nbsp;want&nbsp;the&nbsp;point&nbsp;under &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;mouse&nbsp;to&nbsp;remain&nbsp;in&nbsp;the&nbsp;same&nbsp;place&nbsp;after&nbsp;the&nbsp;zoom,&nbsp;but&nbsp;this &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;is&nbsp;at&nbsp;mouse/new_scale&nbsp;away&nbsp;from&nbsp;the&nbsp;corner.&nbsp;Therefore&nbsp;we&nbsp;need&nbsp;to &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;shift&nbsp;the&nbsp;origin&nbsp;(coordinates&nbsp;of&nbsp;the&nbsp;corner)&nbsp;to&nbsp;account&nbsp;for&nbsp;this. &nbsp;&nbsp;&nbsp;&nbsp;originx&nbsp;-=&nbsp;mousex/(scale*zoom)&nbsp;-&nbsp;mousex/scale; &nbsp;&nbsp;&nbsp;&nbsp;originy&nbsp;-=&nbsp;mousey/(scale*zoom)&nbsp;-&nbsp;mousey/scale; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Scale&nbsp;it&nbsp;(centered&nbsp;around&nbsp;the&nbsp;origin&nbsp;due&nbsp;to&nbsp;the&nbsp;trasnslate&nbsp;above). &nbsp;&nbsp;&nbsp;&nbsp;context.scale(zoom,&nbsp;zoom); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Offset&nbsp;the&nbsp;visible&nbsp;origin&nbsp;to&nbsp;it's&nbsp;proper&nbsp;position. &nbsp;&nbsp;&nbsp;&nbsp;context.translate(-originx,&nbsp;-originy); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Update&nbsp;scale&nbsp;and&nbsp;others. &nbsp;&nbsp;&nbsp;&nbsp;scale&nbsp;*=&nbsp;zoom; &nbsp;&nbsp;&nbsp;&nbsp;visibleWidth&nbsp;=&nbsp;width&nbsp;/&nbsp;scale; &nbsp;&nbsp;&nbsp;&nbsp;visibleHeight&nbsp;=&nbsp;height&nbsp;/&nbsp;scale;}<canvas&nbsp;id="canvas"&nbsp;width="600"&nbsp;height="200"></canvas>正如@Tatarize指出的那样，关键是计算轴位置，使缩放后缩放点（鼠标指针）保持在同一位置。最初鼠标距离mouse/scale角落一定距离，我们希望鼠标下方的点在缩放后保持在同一个位置，但这mouse/new_scale远离角落。因此，我们需要移动origin（角落的坐标）来解决这个问题。originx&nbsp;-=&nbsp;mousex/(scale*zoom)&nbsp;-&nbsp;mousex/scale;originy&nbsp;-=&nbsp;mousey/(scale*zoom)&nbsp;-&nbsp;mousey/scale;scale&nbsp;*=&nbsp;zomm然后剩下的代码需要应用缩放并转换为绘图上下文，因此它的原点与画布角一致。