Heim  >  Artikel  >  Web-Frontend  >  Wie mache ich ein Dreieck mit FabricJS unsichtbar?

Wie mache ich ein Dreieck mit FabricJS unsichtbar?

WBOY
WBOYnach vorne
2023-09-17 23:41:10669Durchsuche

如何使用 FabricJS 使三角形不可见?

In diesem Tutorial lernen wir, wie man mit FabricJS ein Dreieck unsichtbar macht. 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.

Unser Dreiecksobjekt kann auf viele Arten angepasst werden, z. B. indem es seine Abmessungen ändert, eine Hintergrundfarbe hinzufügt oder es sichtbar oder unsichtbar macht. Wir können dies tun, indem wir das Attribut visible verwenden.

Syntax

 new Fabric.Triangle( {visible: Boolean }: Object)

Parameter

  • Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Eigenschaften des Objekts im Zusammenhang mit dem Attribut „sichtbar“ ändern, z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

  • Optionsschlüssel

    • visible

      – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, ein Objekt auf der Leinwand darzustellen. Der Standardwert ist true.

    • Beispiel 1

    Übergabe des Attributs

    visible als Wert mit Schlüssel mit „true“ Sehen wir uns ein Codebeispiel an, um zu verstehen, was passiert, wenn wir den wahren Wert an das Attribut

    visible

    übergeben. Durch die Angabe des Werts „true“ stellen wir sicher, dass das Dreiecksobjekt auf der Leinwand gerendert wird. Dies ist auch das Standardverhalten in FabricJS.

    
    
    
    
    
    
    将可见属性作为具有“true”值的键传递
    您可以看到三角形对象已渲染到画布上
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:60,
    顶部:80,
    填写:“#b0e0e6”,
    身高:90,
    宽度:100,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    
    Beispiel 2

    Übergabe des Attributs

    visible als Schlüssel mit dem Wert „false“ In diesem Beispiel übergeben wir das Attribut

    visible als Schlüssel mit dem Wert „false“. Durch die Zuweisung eines falschen Werts wird sichergestellt, dass unser Dreiecksobjekt nicht auf der Leinwand gerendert wird. Es macht das Objekt einfach nicht „unsichtbar“, sondern entfernt es vollständig. Es kann verwendet werden, um ein Objekt von der Leinwand zu entfernen, ohne seinen Code zu entfernen.
    
    
    
    
    
    
    将可见属性作为带有“false”值的键传递
    您可以看到三角形对象尚未渲染到画布上。
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:60,
    顶部:80,
    填写:“#b0e0e6”,
    身高:90,
    宽度:100,
    可见:假,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    

Das obige ist der detaillierte Inhalt vonWie mache ich ein Dreieck mit FabricJS unsichtbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen