放大点(使用比例和平移)

放大点(使用比例和平移)

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



慕村9548890
浏览 798回答 3
3回答

Helenr

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

LEATH

终于解决了它: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然后剩下的代码需要应用缩放并转换为绘图上下文,因此它的原点与画布角一致。
打开App,查看更多内容
随时随地看视频慕课网APP