Comment verrouiller le mouvement vertical d'un Triangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment verrouiller le mouvement vertical d'un triangle à l'aide de FabricJS. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille d'un objet triangulaire dans le canevas, nous pouvons également spécifier si nous voulons qu'il se déplace uniquement sur l'axe X. Cela peut être fait en utilisant l'attribut lockMovementY.

Syntaxe

 new Fabric.Triangle({ lockMovementY: 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 les propriétés liées à l'objet pour lequel lockMovementY est un attribut, telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés.

Option key

• lockMovementY Cette propriété accepte une valeur boolean. Si on lui donne une valeur « vraie », l’objet ne pourra plus se déplacer verticalement.

Exemple 1

Comportement par défaut d'un objet triangle dans le canevas

Voyons un exemple de code pour comprendre comment déplacer librement un objet triangle sur l'axe X ou l'axe Y lorsque la propriété >lockMovementY n'est pas attribuée" true " valeur.

画布中 Triangle 对象的默认行为
您可以选择三角形并将其拖动。请注意，您可以在水平和垂直方向上移动对象。


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

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

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

Exemple 2

Passer lockMovementY comme clé avec une valeur de "true"

Dans cet exemple, nous verrons comment verrouiller le mouvement vertical d'un objet triangulaire. En attribuant la valeur « vraie » à la propriété lockMovementY, nous arrêtons essentiellement le mouvement vertical.

将 lockMovementY 作为具有“true”值的键传递
您可以选择并拖动三角形以查看不再允许在 y 方向上移动。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#ffc1cc”，
笔划：“#fbaed2”，
笔划宽度：5，
锁定运动Y：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!