找到SVG路径的最右侧/最左侧点

Question

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

为了避免XY问题 - 我想将由贝塞尔曲线组成的单个路径分成几个路径，每个路径从左到右（或从右到左）单调地进行。这意味着在任何单个路径上都不应该有2个具有相等X坐标的点。我明白所需的分裂点可能是在区段的边界框内，因此不是最左边/最右边的，但我几乎可以肯定找到这样的点的方法应该使用与找到水平极端相同的技术点。

Answer 1

您需要使用.getPointAtLength(i)方法遍历路径长度，然后找到限制。看起来像一个有趣的事情，我做了一个快速和肮脏的实现，这是重要的部分：

function findLimits(path) {

  var boundingPoints = {
    minX: {x: dimensions.width, y: dimensions.height},
    minY: {x: dimensions.width, y: dimensions.height},
    maxX: {x: 0, y: 0},
    maxY: {x: 0, y: 0}
  }
  var l = path.getTotalLength();
  for (var p = 0; p < l; p++) {
    var coords = path.getPointAtLength(p);
    if (coords.x < boundingPoints.minX.x) boundingPoints.minX = coords;
    if (coords.y < boundingPoints.minY.y) boundingPoints.minY = coords;
    if (coords.x > boundingPoints.maxX.x) boundingPoints.maxX = coords;
    if (coords.y > boundingPoints.maxY.y) boundingPoints.maxY = coords;
  }
  return boundingPoints
}

您可以在此处找到实施：https://jsfiddle.net/4gus3hks/1/