鏈接元素保持其外觀同步

Question

我正在開發一個使用PhoneGap和jQuery Mobile的iPad應用程序，並且我想在旋轉木馬中創建一個預覽窗格。預覽窗格將包含每個其他窗格的較小版本，並縮放以適合單個窗格。這些窗格不是靜態的，可以隨時使用WebSockets進行更新，並且預覽應該同時更新。也可以有任意數量的窗格（儘管保持簡單，假定上限爲9）。出於性能考慮，假設每個窗格可以有200個以上的DOM對象附加到它。爲了使它稍微複雜一些，旋轉木馬可以存在於多個不同的頁面上。

我一直在考慮最好的方式去實現這個預覽窗格，並且在發明一對Complicator的手套之前，希望聽到來自社區的關於任何可能更好的策略。

我一直在考慮一些方法，包括：

1. 克隆每個窗格，然後使用一個CSS的變換，縮放到合適的尺寸，基於有多少窗格有，然後安裝克隆到預覽窗格。

2. 將每個窗格作爲jQuery對象存儲在變量中，並使用該對象繪製每個窗格和預覽窗格（可能需要在每次更新時重新繪製整個輪播展示式，具體取決於我想要識別多少努力和更新增量）。

3. 重新定位所有窗格，使其在預覽窗格處於活動狀態時存在於預覽窗格內（這可能會破壞旋轉木馬，或者至少會讓用戶在窗格上滑動時看起來有些離奇，但實際上沒有移動到那個窗格）。

有什麼我失蹤了嗎？如果有一種簡單的方法可以將兩個元素「鏈接」在一起，使一個鏡像成爲另一個鏡像，但將不同的CSS應用於其中一個（用於縮放），那將會很不錯。我想這可能是通過創建一個事件來觸發，然後向它的克隆添加一個監聽器，然後將更新後的元素的html複製到自身（可能不會太難以寫入jquery插件來管理這個）。

有什麼更好的建議嗎？

Answer 1

我不確定什麼phonegap允許儘可能渲染選項，但我的第一本能是採取相關窗格的屏幕截圖。也許phonegap有這個內置？

另一種選擇是一個JavaScript庫，它將克隆DOM並創建一個HTML5 canvas元素。您可以自然地顯示畫布，或將畫布數據轉換爲圖像數據。

這裏就是這樣的一個庫：http://html2canvas.hertzen.com/

鑑於所需的大量元素，我會毫不猶豫地一遍又一遍克隆那些。但是，如果實時預覽是必要的，那可能比使用圖像文件或畫布更有效。重大更改後，您可以觸發畫布繪製功能，但可能不希望在每幀動畫結束後執行此操作。