0

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

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

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

它应该看起来像这样：单击此处查看图像

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

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

编辑：我必须将它用于 IE 7 等，所以不能使用 HTML5。此外，我相信自定义 Python 图形插件会矫枉过正。

4

3 回答 3

0

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

于 2012-07-02T23:19:53.277 回答
0

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

Ignacio 是正确的，但是您会遇到浏览器问题，因为我不相信 IE < 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>
于 2012-07-02T23:47:23.493 回答
0

所以我终于以一种骇人听闻的方式完成了这件事..

我为 3 个复选标记图像中的每一个使用了 5 个表格单元格（您也可以使用 div，我的特定应用程序需要表格），并在每个复选标记之间使用 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 的固定宽度。并使用与上面类似的代码将条形连接到圆形，将其用作圆形单元格的背景。

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

所以我遵循了这个 SO 链接并设法实现了这一点。

于 2012-07-04T15:36:02.917 回答