将箭头头放在与圆相交的路径上

Question

我的路径在圆的中心结束。我想将箭头放在指向圆圈的路径上。我希望箭头的点位于路径和圆之间的交点点。我该如何实现？

我知道圆的半径。该路径是从此接受的答案中的两个点之间的二次曲线：在两个点之间创建SVG ARC

Answer 1

您只需要计算圆的圆周上合适点的坐标。

我在这里简化了，只是将圆形半径移动(在x轴上(中的起点和终点。如果您希望它从圆圈上的另一点开始和结束，则需要调用一些简单的几何形状。但是这个示例至少应该为您提供一个启动。

我使用的箭头标记物配置为指向线的末端(而不是在其末尾开始(。

function arc_links(dwg,x1,y1,x2,y2,k) {
  var cx = (x1+x2)/2;
  var cy = (y1+y2)/2;
  var dx = (x2-x1)/2;
  var dy = (y2-y1)/2;
  dd = Math.sqrt(dx*dx+dy*dy);
  ex = cx + dy/dd * k;
  ey = cy - dx/dd * k;
  var path = dwg.path("M"+x1+" "+y1+"Q"+ex+" "+ey+" "+x2+" "+y2).stroke({width:1}).fill('none')
                .marker('end', SVG.select('#arrowhead').first());
}
function create_svg() {
  var draw = SVG.select('#drawing').first();
  draw.circle(50).move(25,25).fill('#fff').stroke({width:1});
  draw.circle(50).move(225,25).fill('#fff').stroke({width:1});
  arc_links(draw,75,50,225,50,40);
}
create_svg();

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.2/svg.min.js"></script>
<svg id="drawing" width="300" height="300">
  <defs>
    <marker id="arrowhead" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10"
            refX="10" refY="0" viewBox="0 -5 10 10" orient="auto">
      <path d="M0 -5L10 0L0 5 Z"></path>
    </marker>
  </defs>
</svg>