查找SVG路径的最右/最左点 [英] Find rightmost/leftmost point of SVG path

问题描述

如何找到SVG C(贝塞尔曲线)路径段的最左/最右点?我知道有getBoundingClientRect()和getBBox()，但是它们都不适用，因为它们仅返回该点的单个坐标.

How to find leftmost/rightmost point of SVG C (bezier curve) path segment? I know there is getBoundingClientRect() and getBBox() but none of them apply since they return only single coordinate of the point.

只是为了避免XY问题-我想将由贝塞尔曲线组成的单个路径拆分为多个路径，每个路径从左到右(或从右到左)单调移动.这意味着在任何一条路径上都不应有2个点具有相等的X坐标.我了解到，所需的分割点可能位于线段的边界框内，因此不是最左/最右，但是我几乎可以确定，找到此类分割点的方法应使用与查找水平极限值相同的技术点.

Just to avoid XY problem - I want to split single path composed of bezier curves into several paths each monotonously going from left to right (or right to left). It means that on any single path should be no 2 points having equal X coordinate. I understand that required split point may potentially be inside the bounding box of a segment thus not being leftmost/rightmost, but I'm almost sure that way of finding such point should use same techniques as finding horizontally extreme point.

推荐答案

Paul LeBeau在 Wiki 启发了我寻求解决方案.它主要基于以下术语:

Paul LeBeau's comment and fancy animation on the wiki inspired me for the solution. It is based mostly on following terms:

• [0, 1]中的参数t的值可以与曲线匹配 点.

• Values of parameter t from [0, 1] can be matched to the curve points.

对于曲线上的任何参数值点都可以构造 通过线性组合成对的相邻控制点逐步进行 进入更高深度"的中间控制点.这项作业 可以重复直到仅剩一个点-曲线上的点 本身.

For any parameter value point on the curve can be constructed step-by-step by linearly combining pairs of adjacent control points into intermediate control points of higher "depth". This operation can be repeated until only single point left - point on the curve itself.

可以通过以下方式定义中间点的坐标 t-程度等于点深度"的多项式.和系数 这些多项式最终仅取决于初始坐标 控制点.

Coordinates of the intermediate points can be defined by t-polynoms of degree equal to point "depth". And coefficients of those polynoms ultimately depend only on coordinates of initial control points.

倒数第二步给出定义切线的2个点 到终点的曲线，这些点的坐标是 由二次多项式控制.

Penultimate step of construction gives 2 points that define tangent to the curve at the final point, and coordinates of those points are controlled by quadratic polynom.

正切的切线方向为 vector 根据需要曲线的t构造二次方程 切线.

Having direction of tangent in question as vector allows to construct quadratic equation against t where curve has required tangent.

因此，实际上，可以在恒定的O(1)时间内执行查找所需点的操作:

So, in fact, finding required points can be performed in constant O(1) time:

  tangentPoints: function(tx, ty){
    var ends = this.getPolynoms(2);
    var tangent = [ends[1][0].subtractPoly(ends[0][0]),
                   ends[1][1].subtractPoly(ends[0][1])];
    var eq = tangent[0].multiplyScalar(ty).subtractPoly(tangent[1].multiplyScalar(tx));
    return solveQuadratic(...eq.values).filter(t => t >= 0 && t <= 1);
  }

我在此存储库中放置了完整的代码，并辅助了Polynom类和可视演示. 小提琴

Full code with assisting Polynom class and visual demo I placed into this repo and fiddle

这篇关于查找SVG路径的最右/最左点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！