Größe ändern Rechteck "onResize" in paper.js

Question

Ok, ich fühle mich unglaublich dumm, aber nach dem Versuch für eine halbe Stunde oder so, gebe ich auf.

Wie ändere ich ein Rechteck über das Ereignis onResize() in paper.js? Ich versuche mit this example, die mit einer onResize() Funktion bereits kommt, aber ich habe keinen Erfolg (Sie können das Beispiel bearbeiten, indem Sie auf die Schaltfläche Source oben rechts klicken).

function onResize() { 
    text.position = view.center + [0, 200]; 
    square.position = view.center; 
} 

Jetzt habe ich versucht, den Platz 80% des Darstellungshöhe durch Hinzufügen Resize zu machen:

Die aktuelle Resize-Funktion wie folgt aussieht

square.size = [view.size.height/100 * 80, view.size.height/100 * 80];

(Ich habe versucht, das gleiche mit statischen Zahlen, um sicher zu sein).

Ich versuchte

square.size = new Size(width, height);

square.set(new Point(view.center), new Size(width, height)

square.height = height; 
square.width = width; 

und wahrscheinlich 20 weitere Version, die ich jetzt nicht mehr erinnern kann. Wenn ich console.logged die square.size zeigte es mir die neu zugewiesenen Werte (manchmal?), Aber es blieb immer noch die Größe des Rechtecks ​​unverändert.

Was kann ich tun, um die Größe des Rechtecks ​​tatsächlich zu ändern?

Answer 1

Nur um sicherzustellen, dass die onResize() Funktion aufgerufen wird, wenn sich die Abmessungen des Fensters ändern. Das ist nicht die einzige Stelle, an der Sie die Größe des Rechtecks ​​ändern können/es hat nichts mit dem Rechteck an sich zu tun.

Um die Größe des Rechtecks ​​zu ändern, müssen Sie die Dokumentation überprüfen. Es gibt eine scale(amount) und eine expand(amount) Methode, die an das Objekt Rectangle angehängt ist. size ist nur eine Eigenschaft, und es scheint nicht mit einem Setter zu kommen.

Wenn Sie also ein Verhältnis zwischen dem Quadrat und der Ansicht beibehalten möchten, könnten Sie die vorherige Ansichtsbreite speichern, sehen, was der Unterschied ist und das Rechteck entsprechend skalieren - sehen Sie, wie Sie in dieser this Antwort auf a Vorherige Frage.

Alternativ können Sie nur den Platz neu initialisieren und die Größe Eigenschaft auf 80% der Breite der Ansicht festgelegt auf jede Ansicht Resize:

square = new Path.Rectangle({ 
    position: view.center, 
    size: view.bounds.width * 0.8, 
    parent: originals, 
    fillColor: 'white' 
});