Html使用纯css画线

有时候需要在页面里绘画线条,复杂点的可以使用canvas去画,简单点的可以直接使用css搞定,通过:before和:after伪类实现。

效果如图:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 body {
 background-color: black;
 }
 .tree {
 display: flex;
 }
 .line {
 background-color: white;
 position: relative;
 }
 .content {
 background-color: aqua;
 }
 .content .box {
 text-align: center;
 }
 </style>
</head>
<body>
 <div class="tree">
 <div class="line" id="tree-line">
 </div>
 <div class="content" id="tree-content">
 </div>
 </div>
 <script>
 //元素信息
 let elementInfo = {
 total: 12,//元素总量
 perHeight: 30,//每个元素高度
 perWidth: 120,//每个元素宽度
 maxLevel: 5,//最大层级
 }
 //连接线信息
 let lineInfo = {
 perLevelWidth: 30,//每一层宽度
 size: 2,//线宽 or 高
 color: "black",//线颜色
 styleSheet: "",//样式,根据drawLine动态变化
 }
 let lineElement = document.getElementById("tree-line");//线区
 let contentElement = document.getElementById("tree-content");//内容区
 lineElement.style.width = `${elementInfo.maxLevel * lineInfo.perLevelWidth}px`;//根据层级确定线条区域的宽度
 //初始化内容区数据
 function drawData() {
 for (let i = 1; i <= elementInfo.total; i++) {
 let divEle = document.createElement("div");
 divEle.className = "box";
 divEle.innerText = `test-${i}`;
 divEle.style.height = `${elementInfo.perHeight}px`;
 divEle.style.lineHeight = `${elementInfo.perHeight}px`;
 divEle.style.width = `${elementInfo.perWidth}px`;
 contentElement.appendChild(divEle);
 }
 }
 //根据给定参数绘出连接线
 function drawLine(rowStart, rowEnd, level) {
 if (rowStart < 1) return;
 if (rowEnd > elementInfo.total) return;
 if(level < 1 || level > elementInfo.maxLevel) return;
 
 let lineVerticalEle = document.createElement("div");
 let lineHorizontalEle = document.createElement("div");
 let lineVerticalClassName = `line${rowStart}-${rowEnd}-vertical`;
 let lineHorizontalClassName = `line${rowStart}-${rowEnd}-horizontal`;
 lineVerticalEle.className = lineVerticalClassName;
 lineHorizontalEle.className = lineHorizontalClassName;
 let tempStyle = `
 .${lineVerticalClassName}::after {
 display: block;
 content: "";
 position: absolute;
 background-color: ${lineInfo.color};
 width: ${lineInfo.size}px;
 height: ${(rowEnd - rowStart) * elementInfo.perHeight}px;
 top: ${(rowStart - 1) * elementInfo.perHeight + elementInfo.perHeight / 2}px;
 left: ${(level - 1) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px;
 }
 .${lineHorizontalClassName}::before {
 display: block;
 content: "";
 position: absolute;
 background-color:${lineInfo.color};
 height: ${lineInfo.size}px;
 width: ${(elementInfo.maxLevel - level) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px;
 top: ${(rowStart - 1) * elementInfo.perHeight + elementInfo.perHeight / 2}px;
 left: ${(level - 1) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px;
 }
 .${lineHorizontalClassName}::after {
 display: block;
 content: "";
 position: absolute;
 background-color: ${lineInfo.color};
 height:${lineInfo.size}px;
 width: ${(elementInfo.maxLevel - level) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px;
 top: ${(rowEnd - 1) * elementInfo.perHeight + elementInfo.perHeight / 2}px;
 left:${(level - 1) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px;
 }
 `
 lineInfo.styleSheet += tempStyle + "\n";
 lineElement.appendChild(lineVerticalEle);
 lineElement.appendChild(lineHorizontalEle);
 }
 drawData();
 drawLine(1, 12, 1);
 drawLine(6, 9, 2);
 drawLine(10, 11, 2);
 let head = document.head || document.getElementsByTagName('head')[0];
 let lineStyle = document.createElement('style');
 lineStyle.type = 'text/css';
 lineStyle.innerHTML = lineInfo.styleSheet;
 head.appendChild(lineStyle);//添加线条样式
 </script>
</body>
</html>
作者:点墨原文地址:https://segmentfault.com/a/1190000042542116

%s 个评论

要回复文章请先登录注册