Question

我希望在谷歌地图中实现图形中的缩放功能，即我希望根据鼠标指针位置将图形与鼠标滚轮事件的比例一起缩放，以使图形更清晰。 / p>

我必须使用HTML5和JavaScript来实现它。

任何人都可以指导我吗？

我问了一些人，他们说我必须使用矢量图来实现它。是这样吗？

Answer 1

为了做到这一点，你必须有一个偏移和缩放比例。然后，无论何时绘制，您都必须适当地转换绘图。 Canvas让这很容易：

ctx.save();
ctx.translate(offset.x, offset.y);
ctx.scale(scale, scale);
// do your drawing
ctx.restore();

然后为适当的鼠标事件添加处理程序。对于鼠标滚轮，这将是the wheel event。每当您收到此类事件时，您都需要计算新的比例。这可以通过以下方式完成：

// Assuming 'ticks' is some standardized unit of measurement.
// You'll probably want to scale it differently based on event.deltaMode.
var newScale = scale * Math.pow(1.5, ticks);

然后你要想出未转换的位置。

// Assuming mousePos.x and mousePos.y are the position, relative to the canvas,
// of the mouse event. To untransform, first undo the offset and then undo the
// scale.
var untransformed = {
    x: (mousePos.x - offset.x) / scale,
    y: (mousePos.y - offset.y) / scale
};

然后，通过实验确定一些魔法：

offset.x += transformed.x * (scale - newScale);
offset.y += transformed.y * (scale - newScale);

然后应用比例更改：

scale = newScale;

Try it. （用CoffeeScript编写并使用点击而非滚动，但数学相同）

我们如何在html5和javascript中放大和缩小图形？

1 个答案: