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

Question

我正在使用 PhoneGap 和 jQuery Mobile 开发一个 iPad 应用程序，我想在轮播中创建一个预览 Pane 。预览 Pane 将包括每个其他 Pane 的较小版本，缩放后它们适合单个 Pane 。 Pane 不是静态的，可以使用 WebSockets 随时更新，预览应该同步更新。也可以有任意数量的 Pane (尽管为简单起见，假设上限为 9)。出于性能目的，假设每个 Pane 可以附加 200 个以上的 DOM 对象。为了让它稍微复杂一点，轮播可以存在于多个不同的页面上。

我一直在考虑实现此预览面板的最佳方式，并且在发明一副 Complicator's Gloves 之前，想听听社区对任何可能的更好策略的反馈。

我一直在考虑的几种方法包括:

1. 克隆每个 Pane ，然后根据 Pane 的数量使用 CSS 转换将其缩放到适当的大小，然后将克隆附加到预览 Pane 。

2. 将每个 Pane 作为 jQuery 对象存储在一个变量中，并使用该对象绘制每个 Pane 和预览 Pane (每次更新时可能需要重新绘制整个旋转木马，具体取决于我想付出多少努力识别和更新增量)。

3. 重新定位所有 Pane ，以便在预览 Pane 处于事件状态时它们位于预览 Pane 内(这可能会破坏轮播，或者至少使它看起来有点奇怪，因为用户将 Pane 滑过但没有实际上已经转到那个 Pane 了)。

有什么我想念的吗？如果有一种简单的方法可以将两个元素“链接”在一起，使一个元素相互镜像，但对其中一个元素应用不同的 CSS(用于缩放)，那就太好了。我想可以通过创建一个会触发的事件然后向其克隆添加一个监听器来做到这一点，然后将更新元素的 html 复制到自身(可能不会太难写一个jquery 插件来管理它)。

有更好的建议吗？

Answer 1

就渲染选项而言，我不确定 phonegap 允许什么，但我的第一直觉是截取相关 Pane 的屏幕截图。也许 phonegap 内置了这个？

另一个选项是一个 javascript 库，它将克隆 DOM 并创建一个 HTML5 canvas 元素。然后，您可以在本地显示 Canvas ，或将 Canvas 数据转换为图像数据。

这是一个这样的库:http://html2canvas.hertzen.com/

鉴于需要大量的元素，我会犹豫一遍又一遍地克隆这些元素。但是，如果需要实时预览，这可能比使用图像文件或 Canvas 更有效。您可以在重大更改后触发 Canvas 绘制功能，但可能不想在每一帧动画结束后都这样做。