縮放畫布以及其上的元素

Question

我想了解如何實現這一點。

這裏是素描：

說明：我有一個場景（草圖畫布），並假設2個板。 Canvas放置在DIV中，具有相對位置，面板在這個DIV之外，並且在這個DIV上有絕對位置的一些元素。所有這些元素都是可拖動的。 每個元素都是帶有內部畫布的div。

問題：我需要以某種方式實現此畫布的縮放。我正在縮放畫布（其上繪製了一個網格），並且元素也在縮放。它可以縮放（我知道縮放位圖後的質量，在我的情況下是可以接受的）。我不知道如何解決的唯一問題是如何縮放畫布和其上的獨立元素，我們有一種幻覺，那就是場景正在縮放。希望你已經知道我想要做什麼。

Answer 1

如果您的目標瀏覽器支持CSS3轉換，則可以對浮動div應用轉換以匹配畫布中的轉換，例如，設置樣式爲transform: scale(1.5,1.5)。

注意：您可能希望div包裝畫布和絕對div以使其僅顯示overflow: hidden。