Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie mache ich ein Dreieck mit FabricJS unsichtbar?

WBOY
Freigeben: 2023-09-17 23:41:10
nach vorne
728 Leute haben es durchsucht

如何使用 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)
Nach dem Login kopieren

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< /ul>

    • 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(三角形);
    
    
    
    Nach dem Login kopieren
    Beispiel 2

    Übergabe des Attributs

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

    visible< p> 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(三角形);
    
    
    
    Nach dem Login kopieren

    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!

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