简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Wie stelle ich mit FabricJS die Position eines Dreiecks von links ein?

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

WBOY
WBOYnach vorne
2023-09-11 17:05:091168Durchsuche

如何使用 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>
<!--Fabric JS-Bibliothek hinzufügen-->
<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>
<!--Fabric JS-Bibliothek hinzufügen-->
<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!

    • JavaScript ajax html Object class var JS number 对象 canvas ul li https fabric
    Stellungnahme：
    Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
    Vorheriger Artikel：Wie erstelle ich in JavaScript ein Array aus der Schnittmenge zweier Arrays?Nächster Artikel：Wie erstelle ich in JavaScript ein Array aus der Schnittmenge zweier Arrays?

    In Verbindung stehende Artikel

    Mehr sehen