在D3.js中绘制一条直到圆圈边界的弯曲路径

Question

我想绘制从点到圆的弯曲路径（弧形或立方贝塞尔曲线）。以下参数是已知的：pX（点的x位置），pY（点的y位置），cX（圆的中心的x位置），cY（圆的中心的y位置）和cR（圆的半径）。

该图说明了这个问题。

圆不是不透明的，当从点到圆的中心绘制路径时，通过圆可以看到它（参见链接图中的＃1）。它不应该发生，因为存在一些必须通过圆圈可见的背景内容。因此，我想到的解决方案是绘制到圆圈边界的路径。

绘制一条直线直到圆的边界很容易（参见链接图中的＃2）：

var theta = Math.atan2(cY - pY, cX - pX);
var startX = pX;
var startY = pY;
var endX = cX - cR * Math.cos(theta);
var endY = cY - cR * Math.sin(theta);
line.attr('x1', startX).attr('y1', startY).attr('x2', endX).attr('y2', endY);

如果我将相同的原理应用于弯曲路径，则将被错误地绘制（参见链接图中的＃3）。它必须保持形状，就好像它指向圆的中心，但最终没有重叠圆（见链接图中的＃4）。

补充意见：

• 曲线可以像圆一样粗
• 在可视化中可以同时存在数百个圆弧对，因此也可以考虑性能

关于如何解决这个问题的任何建议？提前致谢！

Answer 1

看这张图片：

红点是你的点（pX，pY），黑点是圆的中心。您可以在平面中的某个位置选择绿点（您可以尝试其位置以找到您喜欢的曲线），并将蓝点构造为您的圆与连接黑点和绿点的直线的交点。

现在，您使用红点，绿点和蓝点作为控制多边形来构造二次Bézier曲线。它将从红点开始，以圆圈上的蓝点结束，其切线将朝向圆心。

如果你的曲线非常厚，这个简单的解决方案可能就不够了。在这种情况下，我建议按@ rioV8推荐。