Comment définir l'angle d'inclinaison de l'axe x d'un rectangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir l'angle d'inclinaison de l'axe x d'un rectangle à 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.

Notre objet rectangulaire peut être personnalisé de nombreuses manières, comme en changeant ses dimensions, en ajoutant une couleur de fond ou en modifiant l'angle d'inclinaison sur l'axe des x. Nous pouvons le faire en utilisant l'attribut skewX.

Syntaxe

new Fabric.Rect({ skewX : Number }: Object )

Paramètres

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

ul>

Option Key

• skewX - Cette propriété accepte un number qui détermine l'angle d'inclinaison sur l'axe X de l'objet.

Exemple 1

Appliqué lorsque la propriété skewX n'est pas définie

Regardons un exemple de code pour voir comment un objet rectangulaire s'affiche lorsque la propriété skewX n'est pas appliquée. Dans ce cas, notre objet rectangulaire n’apparaîtra incliné sous aucun angle.

未应用 skewX 属性时
可以看到默认情况下矩形上任何角度都没有倾斜


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
});

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

Exemple 2

Passez skewX comme clé et attribuez-lui une valeur personnalisée.

Dans cet exemple, nous verrons comment attribuer une valeur numérique à skewX propriété. La valeur transmise déterminera l'inclinaison le long de l'axe X.

将 skewX 作为键传递并为其分配自定义值
您可以看到矩形在 X 轴上倾斜了 50 度角


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
偏斜X：50，
});

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