Question

我正在研究这个需要3种重大事件的时间表的项目。

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

现在我想用第一个到第二个和第二个到第三个的线或箭头连接这三个图像。

看起来应该是这样的：Click here to see the image

现在，快速而肮脏的方法是简单地将这些灰色条添加为图像并将5个图像浮动在一起。但这会增加解决方案扩展问题。

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

编辑：我必须将此用于IE 7等，因此无法使用HTML5。另外，我相信定制的Python图形插件会有点过分。

Answer 1

PIL或Pycairo中的任何一个都可以让您绘制这些内容。只需创建一个单独的视图即可在img中使用，并让它返回PNG数据。

Answer 2

这是一个在画布元素上绘制一条线然后在其上面渲染两个图像的示例。

然而，Ignacio是正确的，你会遇到浏览器问题，因为我不相信IE＆lt; 9支持画布。

<html>
<head>
<style type="text/css">
canvas {
    width: 600;
    height: 200;
}
</style>
</head>
<body>

<canvas id="canvas">
</canvas>
<script type="text/javascript">
(function () {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var i = new Image();
    i.src = 'https://www.balancedpayments.com/images/balanced.png';
    i.onload = function () { ctx.drawImage(i, 100 - i.width / 2, 100 - i.height / 2); };

    var j = new Image();
    j.src = 'https://www.balancedpayments.com/images/balanced.png';
    j.onload = function () { ctx.drawImage(j, 300 - i.width / 2, 100 - i.height / 2); };

    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(500, 100);
    ctx.stroke();
})();
</script>
</body>
</html>

Answer 3

所以我终于以一种黑客的方式完成了这个......

我使用5个表格单元格（你也可以使用div，我的特定应用程序需要表格），每个3个复选标记图像和每个复选标记之间的2个单元格用于绘制条形图/线条。

我使用..

在2个单元格内绘制了条形图

<td style="background-position:center center !important; 
background:url('{{ MEDIA_URL }}img/bar-grey.png') ; 
background-repeat:repeat-x; width:300px !important;  
padding-left:0px !important; padding-right:0px !important; ">

现在这不会触及圆圈图像复选标记，并且栏中有中断。所以我为复选标记单元设置了100px的固定宽度。并使用与上面类似的代码将条形图连接到圆圈，将其用作圆形单元格的背景。

我遇到的一个挑战是，在某些情况下，我在中间圆圈的每一侧都有不同的颜色条。同样对于第一个和最后一个圆圈，条形图只需分别绘制右半部分和左半部分。

所以我跟着this SO link并设法实现了这一目标。

使用HTML中的一行连接2个图像。 Django模板

3 个答案: