Heim  >  Artikel  >  Web-Frontend  >  Wie mache ich die Kontrollecken eines Rechtecks ​​​​mit FabricJS transparent?

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

王林
王林nach vorne
2023-08-24 15:53:021381Durchsuche

如何使用 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 }: 对象)

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 p>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(矩形);
    
    
    
    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(矩形);
    
    
    

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!

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