HTML5大畫布 - 移動和縮放整個內容，包括背景

我的最終目標是使用html5實現像http://www.crystal.ch/abb/power_systems_landscape/這樣的應用程序。如你所見，我們可能需要一個大的（2000 * 600）的畫布，但我不確定。HTML5大畫布 - 移動和縮放整個內容，包括背景

任何人都可以給我的想法只是爲了以上鍊接的行爲？

整個畫布的內容，包括背景可以移動左右順利使用鼠標移動和鼠標按下操作
整個畫布的內容，包括後臺移動左右順利地根據動力系統選擇
放大縮小
淡出效果像加標誌性的圓圈

任何一種想法，將不勝感激。

來源

2012-02-25 Shahdat

基本上你想是這樣的

<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;> 
    <canvas id='canvas' width='2000' height='600'></canvas> 
<div>

然後當你要滾動，你會做這樣的事情

document.getElementById('wrapper').scrollTo(x, y);

和縮放將

document.getElementById('canvas').style.width = 2000 * zoom; 
document.getElementById('canvas').style.height = 600 * zoom;

你可以玩與setInterval和什麼不讓滾動和縮放很好和平滑，但是這是絕對的因爲不需要重新繪製，因此可以在大型畫布上獲得最佳效果。

來源

2012-02-25 15:32:18 hobberwickey

嗨，謝謝你的回答。根據我的測試，滾動概念可以實現。但仍然與變焦混淆。改變畫布的寬度和高度不影響畫布內的繪製內容。可能我們需要根據寬度和高度改變來重繪所有內容。無論如何，仍然在尋找想法behide「4.淡出效果像加標誌性的圓圈」 – Shahdat 2012-02-25 18:37:02

通過改變畫布的CSS寬度/高度，你放大它在不重繪它。對於小插件來說，最好的辦法就是將絕大部分div或小畫布放在較大的畫布上，並且只需使用標準的JavaScript/CSS屬性補間即可實現淡入/淡出或展開/摺疊效果。那裏有很多資源。 – hobberwickey 2012-02-26 00:17:48

通過更改畫布的CSS寬度/高度，會限制溢出並且其餘內容不可見。我的意思是不放大它。問候褪色我想通過大帆布方式小帆布測試。謝謝 – Shahdat 2012-02-26 04:55:26

我推薦如果你在2D canvas js中工作，不使用縮放或移動canvas元素或任何其他html元素，你最好在draw函數中寫一個算法。縮放是質量和速度的終結，從縮放到縮小可能會非常複雜（不要忘記畫布上的所有可見數據都只是一個圖像）。我設法上傳13000像素和多人頭像的圖片，以顯示繪圖/更新功能中的所有算法。

如果您使用2畫布，您可以從代碼大圖像裁剪，然後複合到視覺地圖。

如果你的圖像寬度太大> 3000 ps必須除以較低的級別（在iOS設備上用於圖像〜> 3000像素將成爲負像 - 圖像變小）。

來源

2013-04-17 09:28:08

HTML5大畫布 - 移動和縮放整個內容，包括背景

回答

相關問題