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

我想绘制使用Paper.js的波浪线。此刻画出一条波浪线，但波浪非常不规则，尤其是在角落。纸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中使用笔刷的方式？

来源

2016-09-26 sqwk

你可以做一个[片段]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）？ –

编辑添加片段。 – sqwk

有趣的工具:-)

我没有足够的时间进行一个完整的答案，但这里是我的建议：

创建轨迹路径这仅仅是一个非常平滑/简体版鼠标轨迹（平滑时给予了很高的公差）
计算解决此轨迹曲线简单波，这样的结果可以被平滑/在每一步简化（在onMouseDrag功能）

就是这样。

来源

2016-09-28 10:46:28

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

回答

相关问题