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

Question

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

Answer 1

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

旋转将围绕画布当前内部坐标系的0：0点。我建议你使用context.translate(x, y)将它放在画布的中心而不是左上角。

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

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