贝塞尔曲线(Bezier curve)实现节点连接

wls1036

• 工作流
• 服务编排

• 组件的绘制
• 连接线的绘制

实现

``<path class="link_line link_path" d="M 340 260 C 415 260 465 100 540 100"></path>``

M代表起点（340，260），C后面跟着两个控制点（415，260），（465，100）最后（540，100）是终点，第一个控制点和起点Y是相同的，说明在同一个水平面上，x相距415-340=75，第二个控制点和终点也是Y相同，x相距540-465=75，就算改变组件位置，这个长度依然不会变，效果和下面这个是一样的

``````<html>
<body>
<svg id="svg" width='100%' height='100%' style="background-color: #f5f5df">
</svg>
</body>
<script type="text/javascript">
var startX = 0;
var startY = 0;
var drawable = false;
document.addEventListener('mousedown', function (event) {
startX = event.clientX;
startY = event.clientY;
drawable = true;
});
document.addEventListener('mouseup', function (event) {
drawable = false;
})
document.addEventListener('mousemove', function (event) {
if (drawable) {
let x1 = startX;
let y1 = startY;
let level=75;
let c1x = x1 + level;
let c1y = y1;
let c2x = event.clientX - level;
let c2y = event.clientY;
let path = '<path d=\'M ' + x1 + ' ' + y1 + 'C ' + c1x + ' ' + c1y + ' ' + c2x + ' ' + c2y + ' ' + event.clientX + ' ' + event.clientY + '\' style="stroke-width:3;stroke: purple;fill:none"></path>'
let p1 = '<path d="M ' + x1 + ' ' + y1 + ' L' + ' ' + (c1x - 3) + ' ' + c1y + '" style="stroke-width: 3;stroke: red;stroke-dasharray: 2 1;"></path>';
let p2 = '<path d="M ' + event.clientX + ' ' + event.clientY + ' L' + ' ' + (c2x - 3) + ' ' + c2y + '" style="stroke-width: 3;stroke: red;stroke-dasharray: 2 1;"></path>';
let c1 = '<circle cx="' + c1x + '" cy="' + c1y + '" r="5" stroke="red" stroke-width="2" fill="red" stroke-dasharray: 2 1;/>';
let c2 = '<circle cx="' + c2x + '" cy="' + c2y + '" r="5" stroke="red" stroke-width="2" fill="red" stroke-dasharray: 2 1;/>';
let p3 = path + p1 + p2 + c1 + c2;
document.getElementById("svg").innerHTML = p3;
}
})
</script>
</html>``````

``````...
let off = Math.abs(event.clientX - x1);
let level = off / 2;
...``````

254 声望
72 粉丝
0 条评论