css 定位连线_前端css实现两点连线

// dots是点的集合 : Array

dots.map((dot, index) => {

// 最后一个点没有连线

if (!dot[index + 1]) return;

const AB = {

x: dots[index + 1].x - dot.x,

y: dots[index + 1].y - dot.y,

}

const BC = {

x: 0,

y: 1,

}

// 向量的模

const a = Math.sqrt(Math.pow(AB.x, 2) + Math.pow(AB.y, 2));

const b = Math.sqrt(Math.pow(BC.x, 2) + Math.pow(BC.y, 2));

const aXb = (AB.x * BC.x) + (AB.y * BC.y);

const cos_ab = aXb/(a*b);

// 求出偏转角度

const angle_1 = Math.acos(cos_ab)*(180/Math.PI);

// 10 是点的半径, 根据点的大小修改

lines.push({

x: dot.x + 10 ,

y: dot.y + 10 ,

width: a ,

AB.x > 0 ? Math.sqrt(Math.pow(angle_1, 2)) : -Math.sqrt(Math.pow(angle_1, 2))

})

})

css样式, 看样式