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>

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

1 个答案: