Canvas——实现地图缩放功能(鼠标焦点不变)

    技术2022-07-15  57

    将鼠标放置于地图上某一点,滚动滚轮对地图进行放大缩小的操作,地图基于鼠标焦点处进行放大缩小,即需保证该点放大或缩小后位置保持不变。

                                    

    如图所示,M(mouseX, mouseY)为鼠标焦点位置,A(x0, y0)点为地图缩放前的绘图起始点,A1(x1, y1)点为地图缩放后的绘图起始点,因缩放前后M点需保持不变,故根据M点对地图起始点的坐标进行换算,设地图缩放前的比例为scale,缩放后的比例为scale’,则有

                                                             

                                                             

    清除画布后重新于点A1(x1, y1)处重绘地图即可实现地图基于鼠标焦点的缩放功能。

     

    Processed: 0.011, SQL: 9