您可以在 Codepen here 上查看实时示例和完整代码。
数据表示
下图最简单的数据表示使用三次贝塞尔曲线。我相信这也将涵盖您的所有用例。为了不让各种特殊情况污染我们的代码，我们将要求输入始终采用四个后续三次 Bézier 曲线的格式，就像我们绘制它们一样。这意味着我们不能使用：
-
二次贝塞尔曲线（通过镜像另一个控制点转换为三次）
-
段（通过将控制点等距放置在线上的端点之间转换为三次贝塞尔曲线）
-
关闭路径 [
Z SVG 命令]（通过计算给定的段然后从那里取出来转换为三次贝塞尔曲线）
More on the subject of paths in SVG
它的 SVG 表示
<path d=" M50 50
C 100 100 400 100 450 50
C 475 250 475 250 450 450
C 250 300 250 300 50 450
C 150 100 150 250 50 50"
fill="transparent"
stroke="black"
/>
不过，为方便起见，我们将定义自己的数据结构。
Point 只是一个普通的旧 Vector2D 类。
class Point {
constructor (x, y) {
this.x = x
this.y = y
}
}
Curve 是三次贝塞尔曲线。
class Curve {
constructor (
startPointX, startPointY,
controlPointAX, controlPointAY,
controlPointBX, controlPointBY,
endPointX, endPointY) {
this.start = new Point(startPointX, startPointY)
this.controlA = new Point(controlPointAX, controlPointAY)
this.controlB = new Point(controlPointBX, controlPointBY)
this.end = new Point(endPointX, endPointY)
}
}
Grid 只是曲线的容器。
class Grid {
constructor (topSide, rightSide, bottomSide, leftSide, horizontalCuts, verticalCuts) {
this.topSide = topSide
this.rightSide = rightSide
this.bottomSide = bottomSide
this.leftSide = leftSide
// These define how we want to slice our shape. Just ignore them for now
this.verticalCuts = verticalCuts
this.horizontalCuts = horizontalCuts
}
}
让我们用相同的形状填充它。
let grid = new Grid(
new Curve(50, 50, 100, 100, 400, 100, 450, 50),
new Curve(450, 50, 475, 250, 475, 250, 450, 450),
new Curve(450, 450, 250, 300, 250, 300, 50, 450),
new Curve(50, 450, 150, 100, 150, 250, 50, 50),
8,
6
)
寻找交点
显然你已经实现了它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
}
}
上面的代码有一些可疑的地方。
NOTE1: 因为曲线是按照你绘制它们的顺序来表示的，所以相对的边朝向不同的方向。例如，顶部是从左到右绘制的，而底部是从右到左绘制的。也许一张图片会有所帮助：
NOTE2：这就是我们如何获得用于分割形状的贝塞尔曲线的控制点。 t在连接对边控制点的段上插值。
这里是那些片段。它们的端点是各自曲线的控制点。
这是我们渲染曲线时的最终结果：
您可以在 Codepen here 上查看实时示例和完整代码。
从这里去哪里
更多路口
这显然不是最终结果。我们仍然需要找到生成曲线的交点。然而，找到两条贝塞尔曲线的交点并非易事。
这是一个关于该主题的nice StackOverflow answer，它将引导你到这个neat library，它将为你完成繁重的工作（看看bezier3bezier3() 的code，你就会明白）
分割曲线
一旦找到交点，您就会想找到at which t they occur。你问为什么t？所以你可以split the curve。
实际最终结果
最后，您需要选择曲线的这些部分并排列它们以表示网格的各个字段。
如您所见，您还有很长的路要走，我只走了一小部分（但仍然设法写了一个冗长的答案：D）。