Comment verrouiller l'inclinaison verticale d'un triangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment verrouiller l'inclinaison verticale d'un triangle à l'aide de FabricJS. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille de l'objet triangulaire dans le canevas, nous pouvons également spécifier si nous voulons arrêter d'incliner l'objet verticalement. Cela peut être fait en utilisant l'attribut lockSkewingY.

Syntaxe

 new Fabric.Triangle({ lockSkewingY : Boolean }: 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 des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à l'objet dont lockSkewingY est la propriété.

Option Key

• lockSkewingY - Cette propriété accepte une valeur Boolean. Si on lui donne une valeur "vraie", l'inclinaison verticale de l'objet sera verrouillée.

Exemple 1Comportement par défaut de

un objet Triangle dans le canevas

Regardons un exemple de code pour comprendre le comportement par défaut d'un objet Triangle lorsque la propriété lockSkewingY n'est pas utilisée. Vous pouvez incliner un objet horizontalement et verticalement en appuyant sur la touche Maj puis en le faisant glisser horizontalement ou verticalement.

画布中 Triangle 对象的默认行为
您可以按 Shift 键并沿 X 轴或 Y 轴拖动边缘，以查看是否可以在两个方向上倾斜。


// 启动画布实例
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 lockSkewingY comme clé avec une valeur de "true"

Dans cet exemple, nous verrons comment utiliser la propriété lockSkewingY pour empêcher la capacité d'un objet triangulaire à s'incliner verticalement . Comme nous pouvons le voir, même si nous pouvons incliner un objet triangulaire horizontalement, nous ne sommes pas autorisés à effectuer la même opération verticalement.

 






将 lockSkewingY 作为具有“true”值的键传递
您可以看到沿 y 轴倾斜不再可行


// 启动画布实例
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，
lockSkewingY：true，
});

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