Comment verrouiller la mise à l'échelle verticale de Triangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment verrouiller la mise à l'échelle 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 de redimensionner l'objet verticalement. Cela peut être fait en utilisant l'attribut lockScalingY.

Syntaxe

 new Fabric.Triangle({ lockScalingY : 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 lockScalingY est un attribut, telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés.

Option Key

• lockScalingY− Cette propriété accepte une valeur booléenne. Si nous lui donnons une valeur « vraie », la mise à l'échelle verticale de l'objet sera verrouillée.

Exemple 1

Comportement par défaut d'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é lockScalingY n'est pas utilisée. La mise à l'échelle des objets horizontalement et verticalement est possible.

画布中 Triangle 对象的默认行为
您可以在水平和垂直方向上缩放三角形，以验证是否可以在两个方向上缩放。


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

Dans cet exemple, nous verrons comment utiliser la propriété lockScalingY pour arrêter la capacité d'un objet Triangle à évoluer verticalement. Comme nous pouvons le voir, même si nous pouvons redimensionner un objet triangulaire horizontalement, nous ne sommes pas autorisés à effectuer la même opération verticalement.

 






将 lockScalingY 作为具有“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，
lockScalingY：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!