链接元素以保持其同步的外观

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/

鉴于需要大量元素，我会毫不犹豫地一遍又一遍地克隆这些元素。但是，如果实时预览是必需的，那么这可能比使用图像文件或画布更有效。您可以在重大更改后触发画布绘制功能，但可能不希望在每帧动画结束后执行此操作。