Question

我正在寻找一种更简单，更有效的方式从一个点到另一个点绘制线条。现在，我正在做一个手动div - CSS类型的组合。我正在使用CSS强制线条进入一个有利的位置，如下图所示，但正如你所看到的，很难逐行编码线条以迫使它们进入这种位置

Picture http://i57.tinypic.com/kd1sf6.png

这是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

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

简单数学：

enter image description here

我们有：

c ² = a ² + b ²从这里你可以计算出该行的宽度（c），在我的演示中a已修复为250px。
cos（alpha）= a / c由此可以计算出旋转角度α。
偏移顶部始终为100px（在我的演示中），因此您可以轻松计算出一个点。
左边的偏移总是10px（在我的演示中）。

以下是我只为2分写的代码详细信息（其中所有线都连接到其他点）：

<强> 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);
}

注意：我无法为您写下所有积分，因为它需要太多工作。此演示也不是您可以复制和粘贴使用的权利。这只是一个展示如何实现您想要的东西的例子。请注意，我选择2行之间的距离为100px，2点之间的水平距离为250px（您可以在代码中清楚地看到它）。

Demo.

<强>更新： - 我认为最好使用脚本进行这种渲染，这里是Updated DEMO使用脚本。

Answer 2

使用JavaScript和HTML5画布基于XY坐标对创建线条。 http://www.w3schools.com/html/html5_canvas.asp

Answer 3

我为你写了简单的js函数：

function drawLine(el, x, y, x1, y1) {
  var line = document.createElement('div');
  line.className = 'line';
  var dX = x1 - x;
  var dY = y1 - y;
  var l  = Math.sqrt(dX*dX+dY*dY)
  line.style.width = l.toFixed(2)+'px';
    var rad = dX ? Math.atan(dY/dX): Math.PI/2;
    var deg = 2*rad*90/Math.PI;
  line.style.left = (Math.abs(dX)/2-l/2+Math.min(x, x1))+'px';
  line.style.top  = (dY/2+Math.min(y, y1))+'px';

  cssExpand(line, 'transform', 'rotate('+deg.toFixed(4)+'deg)');

  el.appendChild(line);
}

用法：drawLine(container, 0, 0, 400, 100);

Fiddle

你也可以把它包起来得到你想要的东西类似的东西：

function connect(right, left) {
  var y1 = getY(right);
  var y2 = getY(left);
  drawLine(document.body, firstColX, y1, secondColX, y2);
}

绘制线条的更好方法？

3 个答案:

Demo.