使用Flutter从0开始撸一个地图组件(二)

80 阅读2分钟

最终实现的效果和使用的组件可以查看上一篇文章

今天介绍的是坐标转换的相关内容,也是地图组件实现的关键点

平移的过程

diagrams.net - 未命名绘图 - diagrams.net 2022-06-28 10-23-11 00_00_00-00_00_30.gif

平移相对而言比较简单,其实就是保持组件的宽和高不变,左上角的坐标进行变化,同时判断上下左右的边界限制就可以了。

实现过程:

偏移量 dx,dy

1、记录左上角坐标Offset(x0,y0)

2、坐标添加偏移量Offset(x0+dx,y0+dy),就是最新的左上角坐标

缩放的过程

diagrams.net - 未命名绘图 - diagrams.net 2022-06-28 10-29-15 00_00_00-00_00_30.gif

我使用的是实时变化组件的宽高来显示。

缩放涉及到组件宽高的变化和组件左上角坐标的变化。整体的变化如上图所示。

如果缩放过程中左上角坐标固定会产生以下几个问题

1、缩小过程中,组件会消失在屏幕之中。

2、选中的坐标会一直变化,不能保持在想显示在屏幕中的位置。

我们希望的缩放:

以双指或者鼠标的触摸中心点位中心进行放缩,依旧是双指或者鼠标的中心点一直在屏幕的固定位置。

实现方式(以手势为例):

当前组件宽度:width,高度:height 左上角坐标Offset(xL,yL) 缩放参数:scale

1、获取双指在屏幕中的坐标Offset(x0,y0) Offset1(x1,y1),计算中心坐标Offset(x2=(x0+x1)/2, y2=(y0+y1)/2)

2、获取中线点坐标在当前地图的坐标及其比例OffsetC(xW=x2-xL,yH=y2-yL),OffsetScale(xS=xW/width,yS=yH/height)

3、获取缩放后的组件宽高 cWidth = wisthscale, cHeigth=heigthscale

4、中心点缩放后的坐标Offset(xWscale,yHscale)

5、计算左上角坐标Offset(xWscale-x2,yHscale-y2),因为这一点在屏幕中的位置不变而屏幕是固定的不会随着地图变化而变化,是绝对坐标。

以上就是缩放的过程。

如果需要代码请留下邮箱,我会单独发给你的。