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

Question

我有一条在圆心处结束的路径。我想在指向圆圈的路径上放置一个箭头。我希望箭头的点位于路径和圆之间的交点。我怎样才能做到这一点？

我知道圆的半径。路径是来自这个公认答案的两点之间的二次曲线：Create svg arcs between two points

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>