動態調整大小的畫布及其內容

Question

我是一名Javascript初學者，請耐心等待。

基本上我正在爲使用Javascript的網站製作一個沙盒繪圖工具。這是使用畫布完成的。我需要做的是能夠動態調整畫布的大小，但同時要保留畫布上的所有內容。

我不認爲這個問題已經被問過。它看起來很平凡，但我目前在絕對座標中定義了畫布上的所有對象。我也有鼠標事件來繪製事物。當我想放大畫布時（通過加倍大小說）。裏面的所有對象都不會被正確放大，並且鼠標座標系也會混亂。

我唯一能想到的解決方案是在我的所有繪圖部件中添加一個比例因子，但這對於很多代碼來說非常棘手。有沒有更好的辦法？

Answer 1

如果您不介意雙面大小的畫布圖紙上的鋸齒，那麼您可以簡單地使用CSS來放大您的畫布。然後除以每個傳入的MouseEvent由2

協調如果你不想讓你的雙倍大小的帆布然後在鋸齒：

• 雙尺寸畫布元素：canvas.width*=2和canvas.height*=2這種自動刪除所有畫布內容。
• 放大畫布：context.scale(2,2)
• 使用未更改的原始座標重新繪製所有繪圖部件。 一個快樂的筆記：您不必縮放任何繪圖座標 - context.scale會自動爲您繪製。
• 將每個進入的mouseEvent座標除以2.