javascript - 在 HTML 中用一条线连接 2 个图像。 Django 模板

Question

我正在做这个元素，它需要 3 个主要事件的时间表。

我用复选标记图像表示每个事件。 (并且根据这些事件是否正确发生，复选标记显示为绿色黄色或红色)。所以这些图像是使用 Django 模板语言动态生成的。

现在我想用一条线或箭头连接这 3 张图片，从第一张到第二张，第二张到第三张。

它应该看起来像这样:Click here to see the image

现在，一种快速而肮脏的方法是简单地将这些灰色条添加为图像并将 5 个图像 float 在一起。但这会引发分辨率缩放问题。

有没有办法以某种方式动态绘制这条线？请帮忙!

编辑:我必须将其用于 IE 7 等，因此不能使用 HTML5。此外，我认为自定义 Python 图形插件会有些矫枉过正。

Answer 1

PIL 之一或 Pycairo可以让你画那些。只需创建一个单独的 View 以在您的 img 中使用，并让它返回 PNG 数据。