1.线的构成

基于svg的矢量特性，构建不同的线条

1-1.线条样式

线条按照线条样式，可以分为实线和虚线；
按照线条弧度，可以分为直线、折线和弧线

1-1-1.实线

1-1-2.虚线

1-1-3.折线

1-1-4.弧线

1-2.线条两端样式

线条两端样式可以多种多样，如正方形、圆形（实心圆、空心圆）、三角箭头

1-2-1.正方形

1-2-2.实心圆

1-2-3.空心圆

1-2-4.三角箭头

2.两点之间连线

点虽然是圆形，但如果放大，就会变成圆形，因此我们将圆点连线的出发点或者结束点分为四个（上、下、左、右）。换句话说其实还是两点之间的连线，我们将线的出发点和结束点设定为圆点的中心。

首先，我们设定两个略大于或者略小于线宽的点，进行两点之间的连线。

2-1.获取两点的位置

出发点为from，结束点为to

点的数据结构为

1
2
3
4
5
6
{
  "top": 0,
  "left": 0,
  "width": 0,
  "height": 0,
}

2-2.计算连线的位置、宽高

计算两点的相对位置，获得[最顶部、最右侧、最底部、最左侧]

连线并不设定宽高，根据设定上下左右的距离来实现
top：最顶部元素的top - ( height / 2 )
right：最右侧元素的left + ( width / 2 )
bottom：最底部的元素的top + ( height / 2 )
left：最左侧元素的left + ( width / 2 )

3.N边形之间连线

因为N边形存在N条边，因此连线存在N+N（边数+角数）个出发点或者结束点（这里边上的出发点默认是在边的中心），所以和上面一样，实际上只是点与点之间的连线。
对于多边形，则主要是各个

最后更新： 2025年01月03日 16:59