绘制贝塞尔线的最佳方法

时间:2012-04-12 09:04:51

标签: javascript flash html5 canvas svg

我有一个设计难题。

想象一下新Facebook时间表上附有大量按时间顺序排列的帖子。然而,我需要制作一个随机曲线,而不是直线,而是将内容放在它上面,如下所示: enter image description here

复杂性的存在是因为当用户滚动时会加载更多帖子(Facebook /谷歌图片样式),因此该行几乎可以无穷无尽。

据我所知,我的选择是:

  1. SVG - 旧浏览器支持不足
  2. 闪存层 - 嵌入将是巨大的并导致性能问题
  3. canvas - 画布将会很大并且可能会导致性能问题
  4. 问题

    是否有可以执行此操作的跨浏览器gfx库,最好是支持IE7 / 8?或者有一种更聪明的方法可以做到这一点,我可能会忽略它?

    修改:ANSWER 见下文,Raphael被证明是我发现的最佳方式。

3 个答案:

答案 0 :(得分:2)

通过Raphaël使用SVG - 它支持IE6 +。

答案 1 :(得分:1)

答案 2 :(得分:0)

如果展示位置是可预测且静态的,那么您可以将预渲染的曲线段用作常规背景。它将处理所有事情并且很容易实现。

如果您希望获得幻想,您可以存储每个曲线段所需的翻译,并随机选择一个可以让您保持在设定宽度范围内的翻译。