html - 画线的更好方法？

Question

我正在寻找一种更简单、更有效的方法来从一个点到另一个点画线。现在，我正在做一个手动的 div - CSS 组合。我正在使用 CSS 将线条强制到一个有利的位置，如下图所示，但正如您所看到的，很难将这些线条一条一条地编码以将它们强制到那种位置。

这是 HTML:

                <div id="line1A"></div>
                <div id="line1B"></div>
                <div id="line1C"></div>
                <div id="line1D"></div>
                <div id="line1E"></div>

还有 CSS:

#line1A{
    position:absolute;
    border:1px #000 dotted;
    width:240px;
}

#line1B{
    position:absolute;
    border:1px #000 dotted;
    width:270px;

    left:230px;
    top:113px;

    transform:rotate(24deg);
    -ms-transform:rotate(24deg);
    -webkit-transform:rotate(24deg);
}

#line1C{
    position:absolute;
    border:1px #000 dotted;
    width:340px;

    left:187px;
    top:163px;

    transform:rotate(42deg);
    -ms-transform:rotate(42deg);
    -webkit-transform:rotate(42deg);
}

#line1D{
    position:absolute;
    border:1px #000 dotted;
    width:400px;

    left:160px;
    top:223px;

    transform:rotate(54deg);
    -ms-transform:rotate(54deg);
    -webkit-transform:rotate(54deg);
}

#line1E{
    position:absolute;
    border:1px #000 dotted;
    width:500px;

    left:107px;
    top:273px;

    transform:rotate(61deg);
    -ms-transform:rotate(61deg);
    -webkit-transform:rotate(61deg);
}

关于如何使这项工作更容易的任何建议？

Answer 1

我认为您的要求需要我们处理一些简单的数学。这个想法是你有 line 元素(在我的演示中可以是 div 或 li )通常水平显示。您只需要指定固定的 left，top 根据行开始的点进行更改。然后您需要正确计算它的 width(在垂直三 Angular 形中应用简单的 pitago 公式)，您还需要计算用于 rotate 的旋转 Angular (使用 rotate3d 进行平滑渲染)可以在 transform 属性中使用的函数。计算完所有值后，您只需仔细编写 CSS 即可。

简单数学:

我们有:

• c² = a² + b² 从这里你可以计算线的宽度 (c)，在我的演示中a 固定为 250px。
• cos(alpha) = a/c 由此可以计算出旋转 Angular alpha。
• 顶部偏移量始终为 100px(在我的演示中)，因此您可以轻松计算出一个点。
• 左边的偏移量始终为 10px(在我的演示中)。

这里是我只写了两点的代码细节(所有的线都连接到其他点):

HTML:

<ul>
  <!-- 11 to all -->
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <!-- 12 to all --> 
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS:

ul {
  width:500px;
  height:520px;
  background:radial-gradient(circle at 10px 10px, black, black 10px, transparent 10px);
  background-size:50% 100px;
  position:relative;    
  padding:0;
}
ul > li {
  display:block;
  position:absolute;
  height:0;
  border-top:2px dotted black;
  left:10px;
  -webkit-transform-origin:left 50%;
}

/* point 11 */
ul > li:nth-child(1) {
  width:50%;    
  top:10px;     
}
ul > li:nth-child(2) {
  width: 269px;
  top:10px;
  -webkit-transform:rotate3d(0,0,1, 21deg); 
}

ul > li:nth-child(3) {
  width:320px;
  top:10px;
  -webkit-transform:rotate3d(0,0,1, 38.62deg);
}
ul > li:nth-child(4) {
  width: 390px;
  top:10px;
  -webkit-transform:rotate3d(0,0,1, 50.13deg);
}
ul > li:nth-child(5) {
  width: 472px;
  top:10px;
  -webkit-transform:rotate3d(0,0,1, 58deg);
}
ul > li:nth-child(6) {
  width: 559px;
  top:10px;
  -webkit-transform:rotate3d(0,0,1, 63.43deg);
}

/* point 12 */
ul > li:nth-child(7) {
  width: 269px;
  top:110px;    
 -webkit-transform:rotate3d(0,0,1, -22deg);
}
ul > li:nth-child(8) {
  width: 320px;
  top:210px;    
  -webkit-transform:rotate3d(0,0,1, -38.62deg);
}
ul > li:nth-child(9) {
  width: 390px;
  top:310px;
  -webkit-transform:rotate3d(0,0,1, -50.13deg);
}
ul > li:nth-child(10) {
  width: 472px;
  top:410px;
  -webkit-transform:rotate3d(0,0,1, -58deg);
}
ul > li:nth-child(11) {
  width: 559px;
  top:510px;
  -webkit-transform:rotate3d(0,0,1, -63.43deg);
}

注意:我不能为您写下所有要点，因为这需要太多的工作。这个demo也不是随便复制粘贴就可以使用的。这只是一个示例，展示了如何实现您想要的。注意，我选择2条线之间的距离为100px，2个点之间的水平距离为250px(代码中可以看的很清楚)。

Demo.

更新: - 我认为这种渲染最好使用脚本，这里是 Updated DEMO使用脚本。