Wie stelle ich mit FabricJS die Position eines Dreiecks von links ein?-js-Tutorial-php.cn

Wie stelle ich mit FabricJS die Position eines Dreiecks von links ein?

WBOY

Freigeben： 2023-09-11 17:05:09

nach vorne

1188 Leute haben es durchsucht

如何使用 FabricJS 设置三角形从左开始的位置？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Position eines Dreiecks von links festlegen. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Klasse fabric.Triangle erstellen und sie der Leinwand hinzufügen.

Deckkraft: Verwenden Sie den Strich und seine Abmessungen, um dreieckige Objekte zu manipulieren. Mit der Eigenschaft left können Sie die Position der linken Seite ändern.

Syntax

new Fabric.Triangle( { left: Number }: Object )

Parameter

Optionen (optional)phpcnltphp cn /strong> – Dieser Parameter ist Object und ermöglicht eine zusätzliche Anpassung unseres Dreiecks. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften im Zusammenhang mit dem Objekt mit left ändern.

Optionstasten
left – Diese Eigenschaft akzeptiert einen Number-Wert, der die linke Position des Objekts festlegt.
Beispiel 1
Standardplatzierung von Dreiecksobjekten
Sehen wir uns einen Code an Beispiel zum Verständnis der Standardplatzierung von Dreiecksobjekten auf der Leinwand, wenn die Position unverändert bleibt.
<!DOCTYPE html&gt ; <html> <Kopf>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <Körper> <h2>Standardplatzierung von Dreiecksobjekten</h2> <p>Sie können die Standardposition des Dreiecks sehen</p> <canvas id="canvas"></canvas> <script> //Starten Sie die Canvas-Instanz var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); //Initialisiere ein Dreiecksobjekt var Triangle = new Fabric.Triangle({ Oben: 50, Ausfüllen: „#b0e0e6“, Höhe: 90, Breite: 100, }); //Füge es der Leinwand hinzu canvas.add(dreieck); </script> </body> </html>
Beispiel 2
Übergabe des linken Attributs als Schlüssel
Beispiel: Wir weisen dem Attribut left einen benutzerdefinierten Wert zu. Da es eine Nummer akzeptiert, müssen Sie ihm einen numerischen Wert zuweisen, der seine Position von links darstellt.
<!DOCTYPE html> <html> <Kopf>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <Körper> <h2>Übergeben Sie die left-Eigenschaft als Schlüssel</h2> <p>Sie können sehen, dass das Dreieck 80 Pixel von links entfernt platziert ist. </p> <canvas id="canvas"></canvas> <script> //Starten Sie die Canvas-Instanz var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); //Initialisiere ein Dreiecksobjekt var Triangle = new Fabric.Triangle({ Links: 80, Oben: 50, Ausfüllen: „#b0e0e6“, Höhe: 90, Breite: 100, }); //Füge es der Leinwand hinzu canvas.add(dreieck); </script> </body> </html>
Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS die Position eines Dreiecks von links ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!