纸JS:波浪线，沿着路径刷

Paper JS: Wavy Line, Brush Along a Path

本文关键字：路径 JS      更新时间：2023-09-26

我正在尝试使用Paper.js绘制波浪线。此时画了一条波浪线，但波浪非常不规则，尤其是在角落里。

我还依赖于simplify()和smooth()方法，这意味着路径在完成绘图后才变得圆。

对于小波浪来说这不是问题，对于大波浪来说这就变得相当明显了。(增加minDistance和maxDistance，以及waveSideStep)

paper.setup(document.getElementById('papercanvas'));
let wavePath;
let waveEndAngle;
this.wave_ = new paper.Tool();
this.wave_.minDistance = 5;
this.wave_.maxDistance = 5;
this.wave_.onMouseDown = function(event) {
  new paper.Layer().activate();
  wavePath = new paper.Path();
  wavePath.strokeColor = '#000';
  wavePath.strokeWidth = 10;
  wavePath.strokeCap = 'square';
  wavePath.strokeJoin = 'round';
  wavePath.add(event.point);
};
this.wave_.onMouseDrag = function(event) {
  let waveSideStep = Math.sin(wavePath.length / 10) * 10;
  wavePath.add(new paper.Point(
    event.point.x + Math.cos(event.delta.angleInRadians + (Math.PI / 2)) * waveSideStep,
    event.point.y + Math.sin(event.delta.angleInRadians + (Math.PI / 2)) * waveSideStep));
  waveEndAngle = event.delta.angle - 90;
};
this.wave_.onMouseUp = function(event) {
  wavePath.smooth();
  wavePath.simplify();
  paper.view.draw();
};
canvas {
  width: 100%;
  height: 100%;
}
canvas[resize] {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-core.js"></script>
<canvas id="papercanvas" width="600" height="600"></canvas>

有更好的方法来画波浪线吗?

或者，是否有一种简单的方法来重复(和弯曲)一个值到路径上，类似于在Illustrator中使用画笔的方式?

有趣的工具:-)

我没有足够的时间给出完整的答案，但这是我的建议:

  1. 创建一个轨迹路径，这只是一个高度平滑/简化版本的鼠标轨迹(平滑时给予高容忍度)
  2. 在这个轨迹曲线周围计算一个简单的波，这个结果可以在每一步(在onMouseDrag函数中)平滑/简化

。

相关文章：