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

Question

我想画一个从点到圆的弯曲路径（圆弧或三次贝塞尔曲线）。已知以下参数： pX （点的x位置）， pY （点的y位置）， cX （x圆的中心位置）， cY （圆的中心位置）和 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），黑点是圆的中心。您可以在平面中的某个位置选择绿点（可以尝试在其位置上找到所需的曲线），然后将蓝点构造为圆与连接黑点和绿点的直线的交点。

现在，您将红点，绿点和蓝点用作控制多边形，以构造二次贝塞尔曲线。它将从圆上的红色点开始，到圆上的蓝色点结束，并且其切线将朝向圆心。

如果曲线真的很粗，那么这种简单的解决方案可能不够用。在这种情况下，我建议按照@ rioV8的建议进行操作。