Comment définir le facteur d'échelle horizontal d'un triangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir le facteur d'échelle horizontale d'un triangle à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe fabric.Triangle et l'ajouter au canevas.

Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille de l'objet triangle dans le canevas, nous pouvons également définir l'échelle horizontale de l'objet triangle. Cela peut être fait en utilisant l'attribut scaleX.

Syntaxe

 new Fabric.Triangle({ scaleX : Number }: Object)

Paramètres

• Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées aux objets dont scaleX est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

< /ul>

Option Key

• scaleX - Cette propriété accepte une valeur numérique. La valeur attribuée détermine le facteur d'échelle horizontal de l'objet. Sa valeur par défaut est 1.

Exemple 1

Apparence par défaut lorsque scaleX n'est pas utilisé

Regardons un exemple de code qui montre à quoi ressemble un objet triangle lorsque la propriété scaleX n'est pas utilisée. Par défaut, les objets triangulaires ont un facteur d'échelle horizontale de 1. scaleX détermine la transformation qui redimensionne l'objet le long de l'axe X.

不使用scaleX时的默认外观
您可以看到沿 x 轴没有调整大小


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
});

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

Exemple 2

Passer l'attribut scaleX comme clé

Dans cet exemple, nous transmettons l'attribut scaleX comme clé avec une valeur de 2. Cela signifie que le facteur d'échelle de l'objet triangulaire dans la direction horizontale est doublé.

将scaleX属性作为键传递
请注意，对象的水平宽度现在已加倍


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
规模X：2，
});

// 将其添加到画布中
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!