Question

我想要绘制两个字段并在两个字段之间绘制线条，如果我在其中找到匹配项。以下是代码。

<html>
    <head>
        <style type="text/css">
            .container {
                width: 600px;
                margin: 100px auto;
            }
            .block {
                padding: 20px;
                width: 100px;
                color: #FFFFFF;
                font-weight: bold;
                font-size: 18px;
                text-align: center;
                margin-bottom: 20px;
            }
            .left-side {
                float: left;
            }
            .right-side {
                float: right;
            }
            .pink {
                background: pink;
            }
            .red {
                background: red;
            }
            .green {
                background: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left-side">
                <div class="block pink" id="a">A</div>
                <div class="block red" id="b">B</div>
                <div class="block green" id="c">C</div>
            </div>
            <div class="right-side">
                <div class="block green" id="cc">C</div>
                <div class="block pink" id="aa">A</div>
                <div class="block red" id="bb">B</div>
            </div>
        <div>
    </body>
</html>

我希望结果如下图所示： -

我想通过观察颜色自己画线。它不应该是已绘制的线条。这有可能吗？

Answer 1

创建一条线和一条箭头（使用边框可以创建它）。

var disX = leftA.right - rightA.left;
var disY = leftA.top - rightA.top;
var dis = Math.sqrt( disX * disX + disY * disY );
line.style.width = dis;
line.style.transform = `rotate(${Math.atan(disY/disX)}deg)`;

代码看起来像这样。

使用canvas，SVG和js在两个div之间绘制一条箭头或一条线

1 个答案: