使用原生绘图方式实现平移缩放（二）

最新推荐文章于 2023-02-10 09:37:55 发布

原创最新推荐文章于 2023-02-10 09:37:55 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#绘图

C# 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用原生绘图方式实现地图的平移和缩放功能，包括将指定地理坐标点移动到屏幕中心、鼠标拖拽实现平移、以及以鼠标位置为中心进行放大或缩小的操作。

使用使用原生绘图方式实现平移缩放

上一章实现了绘图坐标和地理坐标的互相转换，接下来开始实现画面平移、缩放；

平移

场景1：把指定地理坐标点G移动到屏幕中心
实现思路：
关系图：
在这里插入图片描述
核心思路就是计算点G距离屏幕中心的距离，因为G可能不在屏幕显示范围，所以我们应该计算实地距离，而不是屏幕距离；

计算屏幕中心的地理坐标点CenterG：拿到绘图坐标系中的中心坐标（窗口宽高的一般+左上角坐标即可），用上一章提到的办法做转换得到地理坐标
用CenterG减去G点得到X方向和Y方向的实地距离Lx,Ly;
把我们的绘图基准点X，Y分别移动Lx,Ly距离，即相当于把G点移到地图中心；核心代码：

   public void MoveGeoPointToCenter(float[] geoPoint)
        {
       		 //获得屏幕中心的地理坐标
            var centerGeo = GetGeoCenter();
            //计算差值
            var diffX = (centerGeo[0] - geoPoint[0]);
            var diffY = (centerGeo[1] - geoPoint[1]);
            //把绘图基准点做相对移动
            baseGeoPoint[0] -= diffX;
            baseGeoPoint[1] -= diffY;
        }

重绘地图即可

鼠标拖拽画面，实现平移

场景：鼠标拖拽画面，实现画面平移
思路：和上面基本一致，只不过这里我们要多做一步转换，在屏幕拖拽，可以直接得到起始点和终点的像素距离，再把距离转换成实地距离，把绘图基准坐标平移即可；
核心代码：

     public void MovePixelToPixel(float[] sourcePixelPoint, float[] targePixelPoint)
        {
        //计算像素x和y方向像素差值
            var diff = new float[] { targePixelPoint[0] - sourcePixelPoint[0], targePixelPoint[1] - sourcePixelPoint[1] };
            //因为是像素距离，我们要转换成实地距离
            baseGeoPoint[0] += (diff[0] * xScal);
            //由于绘图坐标系y轴和屏幕坐标系相反，向上拖相当于实际y值在减少
            baseGeoPoint[1] -= (diff[1] * yScal);
        }

放大

场景：实现鼠标滚轮向后滚动一次，画面以鼠标位置为中心放大一级
思路：缩放无非是把x方向和y方向的比例变大而已，问题是如何保证以鼠标点为基础放大;因为绘图坐标在不同比例尺下会发生变化，所以我们只要记下缩放前鼠标的位置对应的地理坐标P0，和缩放后P0对应的绘图坐标，通过上面的像素平移方法MovePixelToPixel即可，关系图：
在这里插入图片描述

核心代码：


        /// <summary>
        /// 以某点为基点放大
        /// </summary>
        /// <param name="mousePoint">空则以左下角为基点</param>
        public void ZoomIn(float[] pXY)
        {
        //获得改点的地理坐标
            float[] geoPoint = PixelToGeo(pXY);
            //执行放大
            this.xScal += scaleLevel;
            this.yScal += scaleLevel;
            //做下判断，预防放太大
            if (this.xScal > maxScaleX)
            {
                this.xScal = maxScaleX;
            }

            if (this.yScal > maxScaleY)
            {
                this.yScal = maxScaleY;
            }
            //计算缩放后地理坐标对应的像素点
            float[] afterScalePixel = GeoToPixel(geoPoint);
            if (pXY != null)
            {
            //平移回原来的位置
                MovePixelToPixel(pXY, afterScalePixel);
            }
        }