繪圖應用縮放概念

Question

我正在canvas上創建一個應用，它由一個簡單的DOM組成，在每次鼠標移動時重繪（是的，這是必要的），對於性能問題，並非每個零件都只能重繪是必要的。

的應用程序運作良好，但我想補充的縮放功能，我看到它的方式，可以以三種不同的方式進行：

1 - 每個DOM元素被重新計算（位置和大小）每當用戶放大或縮小 - 它可能有精度問題，而且它不是一個很好的抽象

2 - 畫布具有分辨率屬性（即當用戶縮小分辨率可能會從1改變到.75 ） - 將需要對每次重繪進行計算

3 - 使用內置的translate（）和scale（）方法ds - 可能是最優雅和最快的解決方案，但它不直觀，可能很難理解我或其他人如何完成後者（這些方法在整個畫布上工作，首先要翻譯並在畫布上縮放，然後你畫的所有東西都會被「神奇地」翻譯和縮放）

哪一個是最好的或者我還沒有想到其他的可能性？

Answer 1

我會使用內置的translate（）/ scale（）方法。如果您擔心任何這些方法的性能和質量，那麼您應該儘量做到這一點，如果結果最終會給您帶來任何問題，您可以將它換出來作爲另一個比較選項。