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

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

WBOY

Freigeben： 2023-09-17 16:25:02

nach vorne

878 Leute haben es durchsucht

如何使用 FabricJS 设置三角形从顶部的位置？

In diesem Tutorial legen wir die Position des Dreiecks mit FabricJS fest. Mit der Eigenschaft top können wir die Position eines Objekts manipulieren. Standardmäßig ist die obere Position relativ zur Oberseite des Objekts.

Syntax

 new Fabric.Triangle({ top: Number }: Object)< /pre><h2>Parameter</h2><ul class="list"><li><p><strong> ;/strong><strong> (Optional)</strongphpcngtphp cn – Dieser Parameter ist ein <em>Objekt</em>, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften im Zusammenhang mit dem Objekt mit <em>top</em> ändern. </p></li></ul><h2>Optionstasten</h2phpcngt phpcn<ul Class= list"><li><p><strong>top</strong> – Diese Eigenschaft akzeptiert eine <strong>Zahl</strong>, mit der wir den Abstand des Dreiecks vom oberen Rand der Leinwand festlegen können </p></li> </ul><h2>Beispiel 1</h2> <p><strong>Standarddarstellung von Dreiecksobjekten</strong></p><p>Sehen wir uns ein Codebeispiel an, um zu sehen, wie unsere Dreiecksobjekte aussehen, wenn die Top-Eigenschaft nicht vorhanden ist verwendet. </ p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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> Standarddarstellung von Dreiecksobjekten</h2>
<p> Die Standarddarstellung des Dreiecks ist sichtbar, wenn das Attribut <b>top</b> nicht verwendet wird. </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: 105,
Breite: 90,
Höhe: 80,
Ausfüllen: „#ffc1cc“,
Strich: „#fbaed2“,
Strichbreite: 5,
});

//Füge es der Leinwand hinzu
canvas.add(dreieck);
</script>
</body>
</html>

Beispiel 2

Übergabe des top-Attributs als Schlüssel unter Verwendung eines benutzerdefinierten Werts

In diesem Beispiel übergeben wir das Attribut top Das bedeutet, dass unser Dreiecksobjekt 70 Pixel von oben platziert wird.

<!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 das Top-Attribut als Schlüssel mit einem benutzerdefinierten Wert</h2>
<p>Sie können sehen, dass das Dreiecksobjekt 70 Pixel von oben 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: 105,
Oben: 70,
Breite: 90,
Höhe: 80,
Ausfüllen: „#ffc1cc“,
Strich: „#fbaed2“,
Strichbreite: 5,
});

//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 oben ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!