我們如何放大和縮小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的存在和使用的點擊，而不是滾動，但數學的相同）