Comment rendre transparents les coins de contrôle d'un rectangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment rendre les coins de contrôle d'un rectangle transparents à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. Afin de créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter au canevas. La propriété transparentCorners nous permet de rendre transparents les coins de contrôle d'un Rectangle.

Syntaxe

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

Paramètres

• Options (facultatif) - Ce paramètre est un objet offrant une personnalisation supplémentaire à notre rectangle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés, transparentCorners est une propriété de cet objet.

ul>

Option Key

• transparentCorners - Cette propriété accepte une valeur Boolean qui nous permet de rendre les coins de contrôle de l'objet transparents. Sa valeur par défaut est vraie.

Exemple 1

Passer la propriété Corners transparente comme clé avec une valeur de "false"

Regardons un exemple de code pour créer un objet rectangulaire avec des coins de contrôle opaques. Pour ce faire, nous devons transmettre une valeur False à la propriété transparentCorners.

将透明角属性作为具有“False”值的键传递
您可以选择矩形以查看控制角是不透明的。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：155，
顶部：70，
宽度：170，
身高：70，
填写：“#f4f0ec”，
笔画：“#2a52be”，
笔划宽度：5，
透明角：假，
});

// 将其添加到画布中
canvas.add(矩形);

Exemple 2

Passer des coins transparents comme clé avec une valeur de "True"

Dans cet exemple, nous transmettons une valeur vraie à la propriété transparentCorners. Cela garantira que les coins de contrôle seront rendus transparents. Notez qu'il s'agit également du comportement par défaut.

将透明角作为具有“True”值的键传递
您可以选择矩形以查看控制角是否透明。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：155，
顶部：70，
宽度：170，
身高：70，
填写：“#f4f0ec”，
笔画：“#2a52be”，
笔划宽度：5，
透明角：真实，
});

// 将其添加到画布中
canvas.add(矩形);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!