logo标签列表

使用Canvas、SVG和JavaScript在两个div之间绘制箭头或线。

javascriptjquerycsshtmlhtml5-canvas
4
我想将两个字段进行映射，如果它们匹配，就在它们之间画一条线。以下是代码。

<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>

我希望结果像下面的图片一样：- enter image description here 我想通过观察颜色自己画线。这不应该是已经画好的线。这种做法可行吗？
可以使用画布（canvas）或可缩放矢量图形（SVG）来实现。将现有的DIV与SVG和Canvas混合使用是可能的，但如果你也在SVG/Canvas中绘制A、B、C矩形，那么会更容易些。 - sabithpocker
你能分享一些参考示例吗？ - Yogesh
可能是如何用线连接HTML Divs？的重复问题。 - Theodore K.
在这个答案中提到了jsPlumb可以帮助您实现动态连线。 - sabithpocker
可能是在两个div之间绘制一条线的重复内容。 - balupton
1个回答
0
创建一条线和一个箭头（可以使用边框来创建它）。
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)`;

代码看起来像这样。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接