Question

我正在使用世界地图的渲染成功缩放HTML5画布。我已经在地图上找到了某些城市，并用在2d上下文中使用drawImage方法放置的标记来指示它们。当我缩放地图时，标记也会缩放，并且它们被正确放置。如果我尝试不缩放标记图像，则它们不会遵循地图其余部分已应用的位置缩放。

我希望图像标记保持相同的大小，无论缩放系数如何，也可以正确放置。有没有办法计算转换点，然后将该点用于drawImage，这样我才能正确放置标记？

Answer 1

首先猜测我认为你的svg中至少有两个g。第一个将被缩放为地图的东西。第二个是你的标记。您可以将标记的地图坐标转换为后者的比例，然后将标记放在那里。基本的交易是你可以不仅将变换应用于整个svg，而且应用于它的各个部分，以处理这样的问题。

Answer 2

没有提供代码的通用答案 -

手动执行此操作的原因是您可以控制所绘制元素的每个部分。使用转换后的画布意味着您无论如何都会手动缩小点数。

但是，既然您首先将所有内容都缩放，然后以不同的大小绘制点，则图形的放大版本将成为更改大小的基础，从而产生最差的结果质量。

由于你依赖于内部比例因子，你需要提供跟踪比例和变化的机制，并确保它们全部同步。

更好的方式，IMO，是手动完成所有步骤 - 而且很简单 -

这是你可以做到的一种方式（简化）：

将点存储在数组中，例如对象：

var points = [{x:10, y:10}, {x: 100, y:100}, ...]; /// etc.

然后保留您想要使用的比例因子（要求是比例为> 0）：

var scale = 1.5; /// scale (up or down 1 = 1:1, 0.5 = 50%, 2 = 200% etc.

如果您希望能够翻译地图，也可以添加变量：

var dx = 0;      /// delta X (translation)
var dy = 0;      /// delta Y

然后绘制缩放的地图（包括翻译）：

ctx.drawImage(map, dx, dy, width * scale, height * scale);

然后要点：

for(var i = 0, p = points; p = points[i++];)
    ctx.fillRect(dx + p.x * scale, dy + p.y * scale, 10, 10);

对于鼠标点击，您也会这样做，只需“反转”数学：

var pos = getMousePosition();  /// pseudo method, get mouse pos somehow
var x = (pos.x - dx) / scale;
var y = (pos.y - dx) / scale;

希望这有帮助！