数据表示

Question

我正在寻找一种将四面形状分割成网格的方法。例如：

最终我需要能够将生成的形状转换为SVG，但我很乐意处理到/从另一个库或坐标系的转换。我正在寻找的是如何进行计算。

假设形状是四边形的两边形状，每边可以是凹面或凸面，但没有边缘与其他边缘或自身重叠，四边的任何一边都可以弯曲。

对于四边形多边形（具有直边的形状是微不足道的）的相同方法，并且如果两个相对的边是直线，则很容易找到交叉点，因为它们将沿着在细分之间绘制的直线放置。对立面。从那里可以相对容易地计算将它们连接到沿着替代轴的前一点所需的曲线：

然而，当没有两个直的，相对的边（如上面的第三个例子中）时，我不确定如何找到这些点，因为不再有直线点的确定性。

我花了很长时间寻找有记录的方法，但无济于事。

这是一个使用SVG来描述它的起始形状的例子（它不必在SVG中处理，只要我可以输出到SVG。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 406.4 233.4" xml:space="preserve">
  <path class="st0" d="M394.3,232.7c-106-37.8-353.7,0-353.7,0s-90.4-151.2,0-207.3s353.7,0,353.7,0S420.3,154.7,394.3,232.7z"/>
</svg>

编辑：我在Stack Exchange Maths上问过类似的question，其中一个答案描述了一种方法 - 使用Coons Patch。 Quora解释here。

Answer 1

您可以在Codepen here上看到实时示例和完整代码。

数据表示

下图中最简单的数据表示使用CubicBézier曲线。我相信这也将涵盖您的所有用例。为了不使用各种特殊情况污染我们的代码，我们将要求输入始终采用四条后续CubicBézier曲线的格式，就像我们绘制它们一样。这意味着我们无法使用：

QuadracticBézier曲线（通过镜像其他控制点可转换为Cubic）
细分（通过在线上的端点之间等距离放置控制点，可转换为CubicBézier曲线）
关闭路径 [Z SVG命令]（通过计算给定的段然后从那里获取，可转换为CubicBézier曲线）

查找交叉点

显然你已经实现了它using the t approach (as opposed to true curve splice length)所以我把它放在这里仅仅是为了完整。

注意 cuts是您将获得的实际交叉点数（红点）。也就是说，起点和终点不存在（但可以对cut()进行少量编辑）

function cut (cuts, callback) {
  cuts++
  for (let j = 1; j < cuts; j++) {
    const t = j / cuts
    callback(t)
  }
}

class Curve {

// ...

  getIntersectionPoints (cuts) {
    let points = []
    cut(cuts, (t) => {
      points.push(new Point(this.x(t), this.y(t)))
    })
    return points
  }

  x (t) {
    return ((1 - t) * (1 - t) * (1 - t)) * this.start.x +
            3 * ((1 - t) * (1 - t)) * t * this.controlA.x +
            3 * (1 - t) * (t * t) * this.controlB.x +
            (t * t * t) * this.end.x
  }

  y (t) {
    return ((1 - t) * (1 - t) * (1 - t)) * this.start.y +
            3 * ((1 - t) * (1 - t)) * t * this.controlA.y +
            3 * (1 - t) * (t * t) * this.controlB.y +
            (t * t * t) * this.end.y
  }
}

查找分割曲线

function lerp (from, to, t) {
  return from * (1.0 - t) + (to * t)
}

class Curve {

// ...

  getSplitCurves (cuts, oppositeCurve, fromCurve, toCurve) {
    let curves = []
    cut(cuts, (t) => {
      let start = new Point(this.x(t), this.y(t))
      // NOTE1: We must go backwards
      let end = new Point(oppositeCurve.x(1 - t), oppositeCurve.y(1 - t))
      let controlA = new Point(
        // NOTE2: Interpolate control points
        lerp(fromCurve.controlA.x, toCurve.controlA.x, t),
        lerp(fromCurve.controlA.y, toCurve.controlA.y, t)
      )
      let controlB = new Point(
        // NOTE2: Interpolate control points
        lerp(fromCurve.controlB.x, toCurve.controlB.x, t),
        lerp(fromCurve.controlB.y, toCurve.controlB.y, t)
      )
      curves.push(new Curve(
        start.x, start.y,
        controlA.x, controlA.y,
        controlB.x, controlB.y,
        end.x, end.y
      ))
    })
    return curves
  }
}

上面的代码中有一些 fishy 的东西。

NOTE1：由于曲线以您绘制它们的顺序表示，因此相对的两侧面向不同的方向。例如，顶部从左到右绘制，而底部从右到左绘制。也许图像会有所帮助：

NOTE2：这就是我们如何获得Béziers分割形状的控制点。 t插入连接对侧控制点的段。

以下是这些细分。它们的终点是各曲线的控制点。

这是渲染曲线时的最终结果：

您可以在Codepen here上看到实时示例和完整代码。

从这里去哪里

拆分曲线

找到交叉点后，您会想要找到code。为什么要t？所以你可以at which t they occur。

实际的最终结果

最后，您需要选择曲线的这些部分，并将它们排列成代表网格的各个字段。

正如你所看到的，你还有很长的路要走，我只去了一小部分（并且还设法写了一个冗长的答案：D）。

Answer 2

如果你的四边是立方贝塞尔曲线，那么相对简单的事情怎么样：

要制作水平分隔线（从上到下），通过插入顶部和底部的控制点来制作新的三次贝塞尔曲线：

然后，将左侧和右侧分成相同数量的点。

..并拉伸分隔线，以便它们连接到这些点：

然后，从左到右执行相同操作以创建垂直分隔线。

这是一支用于测试不同形状的笔：https://codepen.io/Sphinxxxx/pen/pKddee

重要部分位于BezierWrapper.lerpCurve()和BezierWrapper.fitCurve()，以及取自https://gamedev.stackexchange.com/a/5427的Bezier类，以沿曲线获得均匀分布的点（.samples ）：

class BezierWrapper {
    constructor(controls, sampleCount, classname) {
        this.controls = controls;
        this.classname = classname;

        if(sampleCount) {
            function point2obj(p) {
                return { x: p[0], y: p[1] };
            }
            //https://gamedev.stackexchange.com/a/5427
            const interpolator = new Bezier(point2obj(controls[0]),
                                            point2obj(controls[1]),
                                            point2obj(controls[2]),
                                            point2obj(controls[3]));
            const samples = this.samples = [];
            for(let i = 1; i <= sampleCount; i++) {
                const t = i / (sampleCount+1);
                samples.push([interpolator.mx(t), interpolator.my(t)]);
            }
        }
    }

    static lerpCurve(source, target, t) {

        function lerpCoord(from, to, t) {
            const diffX = to[0] - from[0],
                  diffY = to[1] - from[1],
                  lerpX = from[0] + (diffX * t),
                  lerpY = from[1] + (diffY * t);
            return [lerpX, lerpY];
        }

        const middle = source.map((c, i) => lerpCoord(c, target[i], t));
        return middle;
    }

    static fitCurve(source, start, end) {

        function distance(p1, p2) {
            const dx = p2[0] - p1[0],
                  dy = p2[1] - p1[1];
            return Math.sqrt(dx*dx + dy*dy);
        }

        //https://gist.github.com/conorbuck/2606166
        function angle(p1, p2) {
            const dx = p2[0] - p1[0],
                  dy = p2[1] - p1[1],
                  radians = Math.atan2(dy, dx);
            return radians;
        }

        //https://stackoverflow.com/questions/2259476/rotating-a-point-about-another-point-2d
        function rotate(p, radians) {
            const x = p[0],
                  y = p[1],
                  cos = Math.cos(radians),
                  sin = Math.sin(radians);

            return [cos*x - sin*y, sin*x + cos*y];
        }

        const sourceStart = source[0],
              sourceEnd = source[3],
              scale = distance(start, end)/distance(sourceStart, sourceEnd),
              rot = angle(start, end) - angle(sourceStart, sourceEnd);

        //Translate, scale and rotate the source control points to make them fit the start and end points:
        const sourceNorm = source.map(c => [c[0] - sourceStart[0], c[1] - sourceStart[1]]),
              fittedNorm = sourceNorm.map(c => rotate([c[0]*scale, c[1]*scale], rot)),
              fitted = fittedNorm.map(c => [c[0] + start[0], c[1] + start[1]]);

        return fitted;
    }
}

四边形2D细分的细分

2 个答案:

数据表示

查找交叉点

查找分割曲线

从这里去哪里

更多交叉点

拆分曲线

实际的最终结果