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

Question

我想在图形中实现缩放功能，因为它在谷歌地图中存在，即我希望图形在鼠标滚轮事件上根据鼠标指针位置进行缩放，以便图形更加清晰。

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

任何人都可以指导我吗？

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

Answer 1

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

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

然后为适当的鼠标事件添加处理程序。对于鼠标滚轮，这将是wheel事件。每当您收到这样的事件时，您都会想要计算一个新的比例。例如，这可以使用：

// 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;

试试看。（在那里用 CoffeeScript 编写，使用点击而不是滚动，但数学是一样的）