在两个圆圈之间画一个箭头？ [英] Draw an arrow between two circles?

问题描述

如何在两个圆圈之间绘制一条带箭头的线：

How can I draw an arrowed line between two circles, given:

1. cirlces中心的位置


2. 圈子的半径

我使用行 / strong> svg对象。

I am using line and marker svg objects.

如果我将箭头绘制到圆的中心，则箭头是不可见的。
如果我将箭头移动太远 - 然后该行显示通过和隐藏箭头的尖端（这里夸张为更好的可见性）：

If I draw the arrows to the "center" of the circle - then the arrow is invisible. If I move the arrow too far back - then the line shows through and hides the pointy end of the arrow (here exaggerated for better visibility):

根据请求，这里是我的代码的相关位（在脚本中）：

As per request, here is the relevant bits of my code (in livescript):

# Draw an arrow to use for lines
svg.append("svg:defs")
 .append("svg:marker")
  .attr("id", "arrow")
  .attr("viewBox", "0 0 10 10")
  .attr("refX", 27)
  .attr("refY", 5)
  .attr("markerUnits", "strokeWidth")
  .attr("markerWidth", 8)
  .attr("markerHeight", 6)
  .attr("orient", "auto")
  .append("svg:path")
  .attr("d", "M 0 0 L 10 5 L 0 10 z")

svg.append("line")
 .attr "x1" 5 
 .attr "x2" 50 
 .attr "y1" 5 
 .attr "y2" 50
 .style "stroke" "black"
 .attr "stroke-width" 2
 .attr "marker-end" "url(\#arrow)"

或者，这里是JSFiddle的工作示例请注意，箭头是固定的看起来正确）： http://jsfiddle.net/yeQS2/

Alternatively, here is JSFiddle of the working example (note that the arrows are "fidgeted" to look just right): http://jsfiddle.net/yeQS2/

推荐答案

如果我理解正确，你需要找到需要添加到源的2D向量， 。

If I understood correctly, you need to find the 2D vector that you need to add to the source to get to the border of the target circle.

伪代码：

d = distance between A and B; // (sqrt((xB-xA)² + (yB-yA)²)).
d2 = d - radius;

ratio = d2 / d;

dx = (xB - xA) * ratio;
dy = (yB - yA) * ratio;

x = xA + dx;
y = yA + dy;

这篇关于在两个圆圈之间画一个箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！