用 HTML 中的一行连接 2 张图像.姜戈模板

Connect 2 images with a line in HTML. Django template

本文关键字：张图像 图像 姜戈 一行 HTML 连接      更新时间：2023-09-26

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

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

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

它应该看起来像这样：点击这里查看图像

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

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

编辑：我必须将其用于IE 7等，因此无法使用HTML5。此外，我相信自定义 Python 图形插件会矫枉过正。

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

下面是在画布元素上绘制一条线，然后在其上呈现两个图像的示例。

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>

所以我终于以一种笨拙的方式完成了这项工作。

我使用了 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 的固定宽度。并使用与上面类似的代码，通过将栏作为圆圈单元格的背景来将条

形连接到圆圈。

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

所以我按照这个SO链接并设法实现了它。

相关文章：