ホームページ  >  記事  >  ウェブフロントエンド  >  FabricJS を使用して長方形のコントロールの角を透明にする方法は?

FabricJS を使用して長方形のコントロールの角を透明にする方法は?

王林
王林転載
2023-08-24 15:53:021381ブラウズ

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

このチュートリアルでは、FabricJS を使用して Rectangle のコントロールの角を透明にする方法を学びます。 Rectangle は、FabricJS が提供するさまざまな形状の 1 つです。長方形を作成するには、Fabric.Rect クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。 transparentCorners プロパティを使用すると、Rectangle のコントロールの角を透明にすることができます。

構文

new Fabric.Rect( {TransparentCorners: Boolean }: 对象)

パラメータ

  • オプション (オプション) - このパラメータは、Rectangles オファーの オブジェクトです。追加のカスタマイズ。このパラメータを使用すると、色、カーソル、ストローク幅、その他多くのプロパティなどのオブジェクト関連のプロパティを変更できます。transparentCorners はオブジェクトのプロパティです。

  • ul>

    オプション キー

    • ##transparentCorners - このプロパティは ブール値 # を受け入れます## オブジェクトのコントロールの角を透明にレンダリングできるようにする値。デフォルト値は true です。

    • 例 1

    透明な Corners プロパティを値「false」のキーとして渡す

    見てみましょう不透明なコントロールコーナーを持つ長方形オブジェクトを作成するコード例。これを行うには、 p>t

    ransparentCorners プロパティに False 値を渡す必要があります。

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

    透明なコーナーを値「True」のキーとして渡す

    この例では、透明なコーナーを渡します。 to

    transparentCorners

    プロパティは true 値を渡します。これにより、コントロールの角が確実に透明になります。これはデフォルトの動作でもあることに注意してください。 えええええ

以上がFabricJS を使用して長方形のコントロールの角を透明にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。