Paper JS: Wellenlinie, Pinsel entlang eines Pfades

Question

Ich versuche eine wellige Linie mit Paper.js zu zeichnen. Im Moment ist eine Wellenlinie gezeichnet, aber die Wellen sind sehr unregelmäßig, besonders in den Ecken.

Auch ich verlasse mich auf die Methoden simplify() und smooth(), was bedeutet, dass der Pfad erst nach Beendigung der Zeichnung rund wird.

Für kleine Wellen ist dies kein Problem, bei großen Wellen wird es ziemlich offensichtlich. (Erhöhen die minDistance und maxDistance sowie 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>

Gibt es einen besseren Weg, um eine Wellenlinie zu ziehen?

Alternativ gibt es eine einfache Möglichkeit, einen Wert auf einem Pfad zu wiederholen (und zu biegen), ähnlich der Art, wie Pinsel in Illustrator verwendet werden.

Answer 1

Interessante Werkzeug :-)

ich, nicht genug Zeit für eine vollständige Antwort haben, aber hier ist mein Rat:

1. einen Trajektorieweg erstellen, die nur eine sehr geglättet/vereinfachte Version ist die Maus Trajektorie (eine hohe Toleranz geben, wenn Glättung)
2. Compute eine einfache Welle bei dieser Bahnkurve, kann dieses Ergebnis bei jedem Schritt geglättet/vereinfacht werden (in der Funktion onmousedrag)

Das ist es.