1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-28 10:40:52 +02:00
Files
BezierInfo-2/components/sections/flattening/content.zh-CN.md
2017-08-15 21:33:56 +09:00

2.0 KiB
Raw Permalink Blame History

简化绘图

我们可以简化绘制的过程,先在具体的位置“采样”曲线,然后用线段把这些点连接起来。由于我们是将曲线转换成一系列“平整的”直线,故将这个过程称之为“拉平(flattening)”。

我们可以先确定“想要X个分段”然后在间隔的地方采样曲线得到一定数量的分段。这种方法的优点是速度很快比起遍历100甚至1000个曲线坐标我们可以采样比较少的点仍然得到看起来足够好的曲线。这么做的缺点是我们失去了“真正的曲线”的精度因此不能用此方法来做真实的相交检测或曲率对齐。

试着点击图形,并用上下键来降低二次曲线和三次曲线的分段数量。你会发现对某些曲率来说,数量少的分段也能做的很好,但对于复杂的曲率(在三次曲线上试试),足够多的分段才能很好地满足曲率的变化。

如何实现曲线的拉平

让我们来实现刚才简述过的算法:

function flattenCurve(curve, segmentCount):
  step = 1/segmentCount;
  coordinates = [curve.getXValue(0), curve.getYValue(0)]
  for(i=1; i <= segmentCount; i++):
    t = i*step;
    coordinates.push[curve.getXValue(t), curve.getYValue(t)]
  return coordinates;

好了,这就是算法的实现。它基本上是画出一系列的线段来模拟“曲线”。

function drawFlattenedCurve(curve, segmentCount):
  coordinates = flattenCurve(curve, segmentCount)
  coord = coordinates[0], _coord;
  for(i=1; i < coordinates.length; i++):
    _coord = coordinates[i]
    line(coord, _coord)
    coord = _coord

我们将第一个坐标作为参考点,然后在相邻两个点之间画线。