平滑,简化和展平

Paper.js提供了两种不同的平滑路径的方法。

path.smooth()通过更改其段柄来平滑路径,不添加或删除段点。

path.simplify()通过分析 path.segments 数组并用更优化的段集替换它来平滑路径,从而减少内存使用并加快绘图速度。

平滑路径

Paper.js 中你可以使用path.smooth()函数自动平滑路径。 这个函数可以计算出路径分段点的柄的最佳值,从而生成平滑经过的曲线。 段不会移动,路径段当前的柄设置会被忽略。

在下面的示例中,我们创建一个矩形路径,创建它的副本对象并平滑副本对象。 如你所见,只有柄的位置发生了变化。 段点保持不变。

  1. var path = new Path({
  2. segments: [[30, 75], [30, 25], [80, 25], [80, 75]],
  3. strokeColor: 'black',
  4. closed: true
  5. });
  6. // 选中路径,从而观察它的柄
  7. path.fullySelected = true;
  8. // 创建一份路径的拷贝,并向右移动100像素
  9. var copy = path.clone();
  10. copy.fullySelected = true;
  11. copy.position.x += 100;
  12. // 平滑路径的段
  13. copy.smooth();

平滑,简化和展平 - 图1

在下面的视图中单击并拖动以绘制线条,当你释放鼠标时,会使用path.smooth()平滑路径:

例子

简化路径

path.simplify()通过简化路径来平滑路径。 函数通过分析 path.segments 数组并用更优化的段集替换它来平滑路径,从而减少内存使用并加快绘图速度。

例子

path.simplify()函数有一个可选的容差参数,它指定允许简化算法偏离原始路径的最大值。 默认情况下,这个值设置为2.5。 把它设置得更低,可以生成更准确的路径,但会有更多的分段点。 把它设置得更高,可以获得更平滑的曲线和更少的分段点,但路径的形状将与原始形状会有些不同。

展平路径

path.flatten(error)将路径中的曲线转换为具有最大指定偏差数量的直线。 保证结果直线数量不会比 error 参数指定的数量更多。

在下面的示例中,我们创建一个圆形路径并使用path.flatten(4)将其拉直:

  1. // 在 { x: 80, y: 50 } 创建一个半径为 35 的圆形路径
  2. var path = new Path.Circle({
  3. center: [80, 50],
  4. radius: 35
  5. });
  6. // 选中路径,从而观察它的柄
  7. path.selected = true;
  8. // 创建一份路径的拷贝,并向右移动150像素
  9. var copy = path.clone();
  10. copy.position.x += 150;
  11. // 展平拷贝的路径,最多有4个偏差点:
  12. copy.flatten(4);