Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie mache ich die Kontrollecken eines Rechtecks ​​​​mit FabricJS transparent?

王林
Freigeben: 2023-08-24 15:53:02
nach vorne
1367 Leute haben es durchsucht

如何使用 FabricJS 使矩形的控制角透明?

In diesem Tutorial lernen wir, wie man mit FabricJS die Kontrollecken eines Rechtecks ​​transparent macht. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft „transparentCorners“ können wir die Kontrollecken eines Rechtecks ​​transparent machen. Syntax

new Fabric.Rect( {TransparentCorners: Boolean }: 对象)
Nach dem Login kopieren

Parameter

  • Optionen (optional)

    – Dieser Parameter ist ein -Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie objektbezogene Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern. transparentCorners ist eine Eigenschaft dieses Objekts.

  • ul>Option Key

    • transparentCorners

      – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, die Kontrollecken des Objekts transparent darzustellen. Der Standardwert ist true.

    • Beispiel 1

    Übergabe der transparenten Corners-Eigenschaft als Schlüssel mit dem Wert „false“

    Sehen wir uns ein Codebeispiel zum Erstellen eines Rechteckobjekts mit undurchsichtigen Kontrollecken an. Dazu müssen wir einen False-Wert an die Eigenschaft t

    ransparentCorners übergeben.

    
    
    
    
    
    
    将透明角属性作为具有“False”值的键传递
    您可以选择矩形以查看控制角是不透明的。
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个矩形对象
    var 矩形 = 新的布料. 矩形({
    左:155,
    顶部:70,
    宽度:170,
    身高:70,
    填写:“#f4f0ec”,
    笔画:“#2a52be”,
    笔划宽度:5,
    透明角:假,
    });
    
    // 将其添加到画布中
    canvas.add(矩形);
    
    
    
    Nach dem Login kopieren
    Beispiel 2

    Transparente Ecken als Schlüssel mit dem Wert „True“ übergeben

    In diesem Beispiel übergeben wir einen wahren Wert an die Eigenschaft

    transparentCorners

    . Dadurch wird sichergestellt, dass die Kontrollecken transparent gemacht werden. Beachten Sie, dass dies auch das Standardverhalten ist.

    
    
    
    
    
    
    将透明角作为具有“True”值的键传递
    您可以选择矩形以查看控制角是否透明。
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个矩形对象
    var 矩形 = 新的布料. 矩形({
    左:155,
    顶部:70,
    宽度:170,
    身高:70,
    填写:“#f4f0ec”,
    笔画:“#2a52be”,
    笔划宽度:5,
    透明角:真实,
    });
    
    // 将其添加到画布中
    canvas.add(矩形);
    
    
    
    Nach dem Login kopieren

    Das obige ist der detaillierte Inhalt vonWie mache ich die Kontrollecken eines Rechtecks ​​​​mit FabricJS transparent?. 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!