SVG：贝塞尔曲线的起点与用于计算路径的原点不同

如何解决SVG：贝塞尔曲线的起点与用于计算路径的原点不同

我正在尝试绘制从一个 foreignObject 到另一个的路径。

我希望路径根据每个对象的中心进行定向/设置，但只从离对象一定距离开始。例如，这里是从一个物体到两个不同物体的直线路径：注意路径的起点不同；相反，它已被调整为位于连接两个对象的线上。

如果路径是直线，这很容易实现：只需开始和结束 沿由物体中心点定义的直线位移 Δr 处的路径。

但是，在贝塞尔曲线（二次或三次）的情况下，我不确定如何实现这一点。

如果可以使路径的一部分透明（ie为路径的不同部分设置笔触颜色），那么可以只使用中心点并将第一个 Δs px 设置为 transparent；但是，我不知道有什么方法可以做到这一点。

或者，如果可以独立于用于计算路径的点来设置路径的起点和终点，这将解决所有情况（线性、贝塞尔二次方或三次方）。

另一种选择可能是使用 dash-array 属性，但这需要知道路径的长度。 例如如果路径长度为S，那么将dash-array设置为x-calc(S-2x)-x也可以达到预期的效果。

有没有办法以编程方式实现这一目标？

我不介意跑腿，所以即使只是指向正确方向的指针也会很感激。

解决方法

这里有一个想法：使用 de Casteljau algorithm 两次来修剪曲线的开头和结尾部分。

假设您被要求评估由控制点 C_{0,0}、C_{1,0}、C_{2,0} 和 C_{3,0} 在特定参数 t 处定义的三次贝塞尔曲线在 0 和 1 之间。（我假设曲线的参数区间是 [0,1] 并且我给控制点这样奇怪的名字以期待以下内容。如果您使用曲线，请查看维基百科文章度与 3 不同。）

您将按照以下步骤进行：

for j = 1,...,3
  for i = 0,3 - j
    C_{i,j} = (1 - t) * C_{i,j-1} + t * C_{i+1,j-1}

点 C_{0,3} 是您的曲线在参数值 t 处的值。整个事情通过图片更容易理解（我拍了 t=0.5）：

但是，该算法为您提供了更多信息。例如，控制点 C_{0,0}、C_{0,1}、C_{0,2} 和 C_{0,3} 是控制多边形一条曲线，它等于您的曲线 restricted 到区间 [0,t];类似地，C_{0,3}、C_{1,2}、C_{2,1} 和 C_{3,0} 给你一个贝塞尔曲线，等于你的曲线限制为 [t,1]。这意味着您可以使用 de Casteljau 算法以指定的间隔将曲线一分为二。

在你的情况下，你会：

1. 从您在底部图片中显示的曲线开始。
2. 使用 de Casteljau 算法以接近 0 的参数 t_0 分割曲线（我会从 t_0 = 0.1 开始，看看会发生什么）。
3. 丢弃在 [0,t_0] 上定义的部分，只保留在 [t_0,1] 上定义的部分。
4. 取一个接近 1 的参数 t_1 并将剩余部分与 3 分开。
5. 保留开头，舍弃（短）结尾。

请注意，通过这种方式，您将根据参数值而不是根据其长度分割曲线。如果您的曲线形状相似，这不是问题，但如果它们有显着差异，您可能需要投入一些精力以编程方式找到合适的 t_0 和 t_1 值。

另一个问题是 t_1 的选择。我想由于对称性，您可能希望将曲线分成 [0,t_0]、[t_0,1 - t_0]、[1 - t_0,1]。取 t_2 = 1 - t_1 不行，因为 t_2 指的是第 3 步结果的参数区间，也就是 [0,1]！相反，你需要像 t_2 = (1 - t_1)^2 之类的东西。

,

使用层的基本解决方案：

• 第 1 层：路径；
• 第 2 层：与背景颜色相同的元素，比层叠在它们上面的元素稍大（对于表情符号，我使用圆圈，对于文本，我使用了具有更大 pt 大小的相同文本）；
• 第 3 层：元素本身。

优点和缺点

优点：

• 快速；
• 容易；

缺点：

• 不能使用 std::function<int()> &（因为它们被背景色物体遮蔽了）；
• 可能需要一些修补才能找到最合适的背景元素类型；

---

这是示例输出的屏幕截图：