在两点之间创建svg弧 [英] Create svg arcs between two points

问题描述

我想使用弧连接两个SVG点（例如两个圆的中心）。如果只有一个连接，则该行（< path> ）将是直的。如果有两个连接，则两者都将是四舍五入的并且是对称的，这样：

所以，实际上，规则很少：

1. 所有东西都应该与连接两者的假想线对称点数。



2. 从1开始，很明显，如果连接数是：

   
   
   
   
   
   • 奇数：我们不显示直线
   
   
   • 甚至：我们显示直线
   
   



3. 应该有一个值 k ，它定义了相同点之间两个连接之间的距离。




4. 穿过椭圆弧中间的切线应该与连接两个点的直线平行。显然，线的中间将垂直于切线。

   
   
   

我很难得到一个公式来计算中的 A 参数<路径> 元素。

我到目前为止所做的是：

 < path d =M100 100，A50,20 0 1,0 300,100stroke =blackfill =transparent/> 
  

• M100 100 很清楚：那是起点（移动到100,100 ）


• 最后两个数字也很清楚。路径以 300,100


• 结束我还看到如果我把 0 而不是 20 ，我获得一条直线。


• 如果我替换 1,0 1,1 ，路径被翻转。

什么我不知道是如何计算A参数的。我阅读了文档，但想象仍然不清楚。如何计算这些值？

  svg {width：100％;身高：100％; position：absolute;}  

 <！DOCTYPE html>< ; HTML>< HEAD> < meta charset =utf-8> < title> JS Bin< / title>< / head>< body> <？xml version =1.0standalone =no？> < svg version =1.1xmlns =http://www.w3.org/2000/svg> <！ - 将A（100,100）与B（300,100）连接 - > < path d =M100 100，A50,0 0 1,0 300,100stroke =blackfill =transparent/> < path d =M100 100，A50,20 0 1,0 300,100stroke =blackfill =transparent/> < path d =M100 100，A50,20 0 1,1 300,100stroke =blackfill =transparent/> < path d =M100 100，A50,30 0 1,0 300,100stroke =blackfill =transparent/> < path d =M100 100，A50,30 0 1,1 300,100stroke =blackfill =transparent/> <！ -  A（100,100）B（300,400） - > < path d =M100 100，A50,0 57 1,0 300,400stroke =blackfill =transparent/> < path d =M100 100，A50,20 57 1,0 300,400stroke =blackfill =transparent/> < path d =M100 100，A50,20 57 1,1300,400stroke =blackfill =transparent/> < / svg>< / body>< / html>  

我正在使用SVG.js来创建路径。

解决方案

你要求自己的生活非常困难圆弧。

如果使用二次曲线，则几何变得非常简单 - 只需将中心X坐标偏移Y坐标差异的一半，反之亦然。

  function arc_links（dwg，x1，y1，x2，y2，n， k）{var cx =（x1 + x2）/ 2; var cy =（y1 + y2）/ 2; var dx =（x2-x1）/ 2; var dy =（y2-y1）/ 2; var i; for（i = 0; i< n; i ++）{if（i ==（n-1）/ 2）{dwg.line（x1，y1，x2，y2）.stroke（{width：1}）。fill （'没有'）; } else {dd = Math.sqrt（dx * dx + dy * dy）; ex = cx + dy / dd * k *（i-（n-1）/ 2）; ey = cy  -  dx / dd * k *（i-（n-1）/ 2）; dwg.path（M+ x1 ++ y1 +Q+ ex ++ ey ++ x2 ++ y2）.stroke（{width：1}）。fill（'none'）; function create_svg（）{var draw = SVG（'drawing'）。size（300,300）; arc_links（拉伸，50,50,250,50,2,40）; arc_links（拉伸，250,50,250,250,3,40）; arc_links（拉伸，250,250,50,250,4,40）; arc_links（拉伸，50,250,50,50,5,40）; draw.circle（50）.move（25,25）.fill伪（＃FFF）中风（{宽度：1}）; draw.circle（50）.move（225,25）.fill伪（＃FFF）中风（{宽度：1}）; draw.circle（50）.move（225225）.fill伪（＃FFF）中风（{宽度：1}）; draw.circle（50）.move（25225）.fill伪（ '＃FFF'）中风（{宽度：1}）;} create_svg（）;  

<预class =snippet-code-html lang-html prettyprint-override> < script src =https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.2/ svg.min.js>< / script>< div id =drawing>< / div>

I want to connect two SVG points (e.g. the centers of two circles) using arcs. If there is only one connection, the line (<path>) will be straight. If there are two connections, both will be rounded and will be symmetrical, this way:

So, in fact, there are few rules:

1. Everything should be symmetrical to to the imaginary line that connects the two points.

2. From 1, it's obvious that if the number of connections is:

   • odd: we do not display the straight line
   • even: we display the straight line

3. There should be a value k which defines the distance between two connections between same points.

4. The tangent that goes through the middle of the elliptical arc should be parallel with the straight line that connects the two points. And obviously, the middle of the line will be perpendicular to the tangent.

I'm struggling to get a formula to calculate the A parameters in the <path> element.

What I did until now is:

<path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent"/>

• M100 100 is clear: that's the starting point (move to 100,100)
• Last two numbers are also clear. The path ends in 300,100
• I also saw that if I put 0 instead of 20, I obtain a straight line.
• If I replace 1,0 with 1,1, the path is flipped.

What I don't know is how to calculate the A parameters. I read the docs, but the imagine is still unclear to me. How to calculate these values?

svg {
  width: 100%;
  height: 100%;
  position: absolute;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <?xml version="1.0" standalone="no" ?>

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <!-- Connect A(100,100) with B(300, 100) -->
      <path d="M100 100, A50,0 0 1,0 300,100" stroke="black" fill="transparent" />
      <path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent" />
      <path d="M100 100, A50,20 0 1,1 300,100" stroke="black" fill="transparent" />
      <path d="M100 100, A50,30 0 1,0 300,100" stroke="black" fill="transparent" />
      <path d="M100 100, A50,30 0 1,1 300,100" stroke="black" fill="transparent" />
      
      <!-- A(100, 100) B(300, 400) -->
      <path d="M100 100, A50,0 57 1,0 300,400" stroke="black" fill="transparent" />
      <path d="M100 100, A50,20 57 1,0 300,400" stroke="black" fill="transparent" />
      <path d="M100 100, A50,20 57 1,1 300,400" stroke="black" fill="transparent" />
  </svg>
</body>

</html>

I'm using SVG.js to create the paths.

解决方案

You're making life very difficult for yourself by requiring circular arcs.

If you use quadratic curves instead, then the geometry becomes very simple — just offset the central X coordinate by half the difference in Y coordinates, and vice versa.

function arc_links(dwg,x1,y1,x2,y2,n,k) {
  var cx = (x1+x2)/2;
  var cy = (y1+y2)/2;
  var dx = (x2-x1)/2;
  var dy = (y2-y1)/2;
  var i;
  for (i=0; i<n; i++) {
    if (i==(n-1)/2) {
      dwg.line(x1,y1,x2,y2).stroke({width:1}).fill('none');
    }
    else {
      dd = Math.sqrt(dx*dx+dy*dy);
      ex = cx + dy/dd * k * (i-(n-1)/2);
      ey = cy - dx/dd * k * (i-(n-1)/2);
      dwg.path("M"+x1+" "+y1+"Q"+ex+" "+ey+" "+x2+" "+y2).stroke({width:1}).fill('none');
    }
  }
}

function create_svg() {
  var draw = SVG('drawing').size(300, 300);
  arc_links(draw,50,50,250,50,2,40);
  arc_links(draw,250,50,250,250,3,40);
  arc_links(draw,250,250,50,250,4,40);
  arc_links(draw,50,250,50,50,5,40);
  draw.circle(50).move(25,25).fill('#fff').stroke({width:1});
  draw.circle(50).move(225,25).fill('#fff').stroke({width:1});
  draw.circle(50).move(225,225).fill('#fff').stroke({width:1});
  draw.circle(50).move(25,225).fill('#fff').stroke({width:1});
}

create_svg();

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.2/svg.min.js"></script>
<div id="drawing"></div>

这篇关于在两点之间创建svg弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！