javascript - 如何旋转基于矢量的地图？

Question

我需要使用 CANVAS 旋转基于矢量地图绘制的地图。我将在浏览器中运行的导航系统中使用此地图。有什么简单的方法可以遵循吗？

Answer 1

您可以使用该context.rotate(angle)方法执行此操作。此方法不会影响当前在画布上绘制的内容，而是会影响设置旋转后将绘制到它的所有内容。角度以弧度为单位，所以一个完整的圆是 pi * 2 = 6.28318530718。

旋转将围绕画布当前内部坐标系的 0:0 点进行。我建议您将context.translate(x, y)其放置在画布的中心而不是左上角。

1. 在不可见的背景画布上绘制地图
2. 将可见画布上的转换设置为旋转中心
3. 在可见画布上设置旋转
4. 用于drawImage将不可见的画布绘制到可见的画布上（使用drawImage时，源也可以是另一个画布）。此 drawImage 调用将受到您设置的旋转和平移的影响。

当您可以控制绘制原始地图的时间和方式时，您也可以在绘制原始画布之前对其应用变换和旋转。