Paper.js fügen zwei Ecken mehr Punkte für mehr Höhe hinzu

Question

Ich beginne mit paper.js und habe einige Probleme beim Hinzufügen und Positionieren neuer Punkte. Ich möchte 2 neue Punkte auf die untere linke und untere rechte Ecke setzen, um mehr Höhe zu machen. Im Moment habe ich mit dem Demo-Code gespielt und ich habe folgendes: (siehe Bild unten) Ich möchte es als Hintergrund verwenden, der sich bewegt.

1. Wie füge ich 2 weitere Punkte hinzu, um mehr Platz und Höhe zu schaffen?
2. Wenn ich das erreiche, wie kontrolliere ich es, um es reaktionsfähig zu machen (Tablet, Handy etc.)?

Hier ist die example code working.

<script type="text/paperscript" canvas="myCanvas"> 

    var width, height, center; 
    var points = 4; 
    var smooth = true; 
    var path = new Path(); 
    var mousePos = view.center/2; 
    var pathHeight = mousePos.y; 
    var topLeft = view.center - [80, 80]; 
    var bottomRight = view.center + [80, 80]; 
    path.fillColor = { 
    gradient: { 
      stops: ['#532e8e', '#662e8f'] 
     }, 
     origin: topLeft, 
     destination: bottomRight 
    } 
    initializePath(); 

    function initializePath() { 
    center = view.center; 
    width = view.size.width; 
    height = view.size.height/4; 
    path.segments = []; 
    path.add(view.bounds.bottomLeft); 
    for (var i = 1; i < points; i++) { 
    var point = new Point(width/points * i, center.y); 
    path.add(point); 
    } 
    path.add(view.bounds.bottomRight); 
// path.fullySelected = true; 
    console.log(path.segments); 
    } 

    function onFrame(event) { 
    pathHeight += (center.y - mousePos.y - pathHeight)/2; 
    for (var i = 1; i < points; i++) { 
    var sinSeed = event.count + (i + i % 10) * 100 /2; 
    var sinHeight = Math.sin(sinSeed/200) * pathHeight /2; 
    var yPos = Math.sin(sinSeed/100) * sinHeight + height/1; 
    path.segments[i].point.y = yPos; 
    } 
    if (smooth) 
    path.smooth({ type: 'continuous' }); 
    } 

    // Reposition the path whenever the window is resized: 
    function onResize(event) { 
    initializePath(); 
    } 

    </script> 

Answer 1

um mehr Höhe zu machen, wenn ich richtig verstehe, Sie zwei weitere Punkte am Anfang/Ende des Pfads hinzufügen können (Zeilen 26 und 32), und durchlaufen zwei weitere Punkte (Zeile 40): working example:

var width, height, center; 
    var points = 12; 
    var smooth = true; 
    var path = new Path(); 
    var mousePos = view.center/2; 
    var pathHeight = mousePos.y; 
    var topLeft = view.center - [80, 80]; 
    var bottomRight = view.center + [80, 80]; 
    path.fillColor = { 
    gradient: { 
      stops: ['#532e8e', '#662e8f'] 
     }, 
     origin: topLeft, 
     destination: bottomRight 
    } 
    initializePath(); 

    function initializePath() { 
    center = view.center; 
    width = view.size.width; 
    height = view.size.height/4; 
    path.segments = []; 
    path.add(view.bounds.bottomLeft); 
    path.add(view.bounds.topLeft); 
    for (var i = 1; i < points; i++) { 
    var point = new Point(width/points * i, center.y); 
    path.add(point); 
    } 
    path.add(view.bounds.topRight); 
    path.add(view.bounds.bottomRight); 
    path.fullySelected = true; 
console.log(path.segments); 
    } 

    function onFrame(event) { 
    pathHeight += (center.y - mousePos.y - pathHeight)/2; 
    for (var i = 1; i < points+2; i++) { 
    var sinSeed = event.count + (i + i % 10) * 100 /2; 
    var sinHeight = Math.sin(sinSeed/200) * pathHeight /2; 
    var yPos = Math.sin(sinSeed/100) * sinHeight + height/1; 
    path.segments[i].point.y = yPos; 
    } 
    if (smooth) 
    path.smooth({ type: 'continuous' }); 
    } 

    // Reposition the path whenever the window is resized: 
    function onResize(event) { 
    initializePath(); 
    } 

um es ansprechbar machen Sie das onResize Ereignis verwenden können, um das Verhalten zu ändern auf Leinwandgröße abhängig.