Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie stelle ich die Höhe eines Dreiecks mit FabricJS ein?

WBOY
Freigeben: 2023-08-23 17:45:19
nach vorne
1502 Leute haben es durchsucht

如何使用 FabricJS 设置三角形的高度?

In diesem Tutorial lernen wir, wie man mit FabricJS die Höhe eines Dreiecks festlegt. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.

Wir können das Dreiecksobjekt manipulieren, indem wir seine Position, Deckkraft, Kontur und Größe ändern. Mit FabricJS können wir die Größe von Objekten mithilfe der Eigenschaften width und height steuern.

Syntax

new Fabric.Triangle({ height: Number }: Object)
Nach dem Login kopieren

Parameter

  • < p>Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Höhe die Eigenschaft ist.

  • < /ul>

    Optionsschlüssel

    • Height – Diese Eigenschaft akzeptiert einen Zahlenwert, mit dem wir die Höhe des Objekts angeben können. Der Standardwert ist 100.

    Beispiel 1

    heightStandardverhalten der Eigenschaft< /p>

    Sehen wir uns ein Codebeispiel an, um das Standardverhalten der Eigenschaft height zu verstehen.

    
    
    
    
    
    
    高度属性的默认行为
    请注意,默认三角形的高度为 100。
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:105,
    顶部:70,
    宽度:90,
    填写:“#746cc0”,
    笔画:“#967bb6”,
    笔划宽度:5,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    
    Nach dem Login kopieren

    Beispiel 2

    Übergabe des Attributs height als Schlüssel

    Da wir nun dem Attribut height einen Wert von 140 Pixel zugewiesen haben, können wir seine Höhenänderung sehen.

     
    
    
    
    
    
    
    将高度属性作为键传递
    您可以看到三角形的高度现在固定为 140。
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:105,
    顶部:70,
    宽度:90,
    身高:140,
    填写:“#746cc0”,
    笔画:“#967bb6”,
    笔划宽度:5,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    
    Nach dem Login kopieren

    Das obige ist der detaillierte Inhalt vonWie stelle ich die Höhe eines Dreiecks mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!