大部分的编程工作都是面向对象的、MVC的，调调方法调调接口，或者找找有没有现成的库实现了我们要做的功能，像拼积木。

真正需要拿出笔来进行计算，需要用到数学进行演算的其实很少。就一些比较冷门的、特殊一点的需求，然后还有那么点难度的，才需要自己去实现去笔画笔画思考思考。

记录下实际工作中两个用到数学知识的功能：滚动条上当前页提示 和地图旋转。

# 相似：滚动条上当前页提示

滚动条，我们天天接触的，刷微博看文章都会看到它。

但真正要在滚动条上加点东西，其实也不是一件的容易事情，也没有现成的可以照搬。下面是Google文档的，当鼠标放到滚动条上 时，显示当前视口是第几页 的效果。

滚动条是内容区域的一个缩影，用 滚动条的轨道和滑块 来类比 整个内容和视口区域，实现小小滚动条控制大大的内容的显示。

如果要在滚动条中间显示提示信息，就要找出滑块滚动了多少（thumbTop），以及滑块的长度（thumbHeight）。

转为一个数学问题，用纸笔画一下：

下面在代码中实现，初始化获取 viewportHeight, totalHeight，然后根据推算的公式计算得出滑块当前的偏移量 thumbTop 和高度 thumbHeight ：

  void updateViewport(double width, double height) {     debugPrint("viewportHeight: $height");     if (_viewportHeight == height) return;     _viewportHeight = height;     SchedulerBinding.instance.addPostFrameCallback((_) {       _updateViewportInternal();     });   } void _updateViewportInternal() {     if (!_scrollController.position.hasContentDimensions) return;     _totalHeight = _scrollController.position.maxScrollExtent + _scrollController.position.viewportDimension;     debugPrint('contentHeight: $_totalHeight');     _isShowScrollbar = _totalHeight > _viewportHeight;     _thumbHeight = (_viewportHeight / _totalHeight) * _viewportHeight;     _thumbTop = (_scrollTop / _totalHeight) * _viewportHeight;     setState(() {});   }

当页面滚动时，重新计算滑块的偏移量thumbTop，并更新提示信息。

    _scrollController.addListener(() {       setState(() {         _scrollTop = _scrollController.position.pixels;         _thumbTop = (_scrollTop / _totalHeight) * _viewportHeight;         final page = ((_scrollTop + EditorPage.A4HeightInDp / 4) / (EditorPage.gap + EditorPage.A4HeightInDp)).toInt() + 1;         if (currentPage != page) {           _isAutoShown = true;         }         currentPage = page;         _updateTooltip();         _debouncer.value++;       });     });

实现的效果如下，增加了页面跨页时和鼠标放到滚动条上时显示当前页提示信息：

# 旋转和投影：地图旋转

日常我们都使用地图进行导航，手机地图会根据我们走的路线旋转，屏幕保持我们向前走的方向。大厂提供的SDK都带了这个功能，但如果是自绘的地图引擎，那仅仅转一下角度 是不够的，旋转后四个角会出现空隙。

为了让视口填满地图瓦片，那么就需要扩大加载瓦片的边界。沿着视口的四个角，画平行于旋转后的矩形。理论上，根据扩大后的边界来加载瓦片就能完全的填满视口了。

旋转后（参见下图），需要多加载一圈的瓦片。新偏移量 也得往左上角移。新的有效范围 就变成了：新偏移量 到 中心点 的距离 加上 扩大后的新矩形一半的宽高（也可以通过 新偏移量 到 新矩形顶点 加上 新矩形的宽高）。

增加旋转逻辑，计算新的偏移量、瓦片的索引坐标 和需要加载瓦片的数量：

  List<Widget> _buildTiles() {     List<Widget> tiles = [];     int zoomInt = _zoom.floor();     double rootOffsetX = this._rootOffsetX;     double rootOffsetY = this._rootOffsetY;     int rootTileX = this._rootTileX;     int rootTileY = this._rootTileY;     double w = mapWidth;     double h = mapHeight;     int tilesXNum = ((w - rootOffsetX) / 256).ceil();     int tilesYNum = ((h - rootOffsetY) / 256).ceil();     print("original tiles: $tilesXNum * $tilesYNum, rootTile: ($rootTileX, $rootTileY), rootOffset: ($rootOffsetX, $rootOffsetY)");     if (rotationRad != 0) {       final cosAngle = math.cos(rotationRad).abs();       final sinAngle = math.sin(rotationRad).abs();       final rotatedWidth = (w * cosAngle) + (h * sinAngle);       final rotatedHeight = (h * cosAngle) + (w * sinAngle);       // 扩展的尺寸（旋转后的覆盖视口矩形变大）       finaldouble extraWidth = (rotatedWidth - w) / 2;       finaldouble extraHeight = (rotatedHeight - h) / 2;       // 扩展的瓦片数（向上取整）       finalint extraTilesX = ((extraWidth + rootOffsetX) / _tileSize).ceil();       finalint extraTilesY = ((extraHeight + rootOffsetY) / _tileSize).ceil();       rootTileX -= extraTilesX;       rootTileY -= extraTilesY;       rootOffsetX -= extraTilesX * _tileSize;       rootOffsetY -= extraTilesY * _tileSize;       // 有效宽度的瓦片数       tilesXNum = ((w / 2 - rootOffsetX + rotatedWidth / 2) / 256).ceil();       tilesYNum = ((h / 2 - rootOffsetY + rotatedHeight / 2) / 256).ceil();       print(         "rotated ${((rotationRad * 180 / math.pi) % 360).toStringAsFixed(1)} tiles: $tilesXNum * $tilesYNum, rootTile: ($rootTileX, $rootTileY), rootOffset: ($rootOffsetX, $rootOffsetY)",       );     }     for (int y = 0; y < tilesYNum; y++) {       for (int x = 0; x < tilesXNum; x++) {         double offsetX = rootOffsetX + x * _tileSize;         double offsetY = rootOffsetY + y * _tileSize;         int tileX = rootTileX + x;         int tileY = rootTileY + y;         tiles.add(_buildTile(tileX, tileY, zoomInt, offsetX, offsetY));       }     }     return tiles;   }

注释调试信息，最终效果：

知识、学识，这些在刚开始学习的时刻总觉得既没用又枯燥，但这是一颗种子，种下去了就好好的照看它，长大了会为你遮阳挡雨的。

在我们的程序之路上，除了不懈的努力，有了数学的加持（尽管大部分时间都不怎么用的到），能给我们增添额外的开心和一份持续的坚定。