传入两坐标点,利用div+css画线
上样式生成函数代码
lineStyle (x1, y1, x2, y2, lineWidth = 4, color = 'black') { let rectX = x1 < x2 ? x1 : x2; let rectY = y1 < y2 ? y1 : y2; let rectWidth = Math.abs(x1 - x2); let rectHeight = Math.abs(y1 - y2); //弦长 let stringWidth = Math.ceil(Math.sqrt((rectWidth * rectWidth) + (rectHeight * rectHeight))); let xPad = (rectWidth - stringWidth) / 2; let yPad = (rectHeight - lineWidth) / 2; let radNum = Math.atan2((y1 - y2), (x1 - x2)); return ` position: absolute; width: ${ stringWidth }px; height: ${ lineWidth }px; background-color: ${ color }; transform: translate(${ rectX + xPad }px, ${ rectY + yPad }px) rotate(${ radNum }rad); `; },