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

Question

我想实现图形中的缩放功能，因为它在Google地图中存在，即我希望根据鼠标指针位置将图形缩放为鼠标滚轮事件的缩放比例，以便图形更清晰。

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

任何人都可以引导我一样吗？

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

Answer 1

为了做到这一点，你必须有一个偏移量和一个缩放比例。然后，每当你画画时，你都必须适当地改变你的绘画。画布使这容易：

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的存在和使用的点击，而不是滚动，但数学的相同）