Maison > Article > interface Web > Comment définir la largeur d'un triangle à l'aide de FabricJS ?
Dans ce tutoriel, nous apprendrons comment définir la largeur 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.
Nous pouvons manipuler l'objet triangle en changeant sa position, son opacité, son trait et ses dimensions. FabricJS nous permet de contrôler la taille des objets en utilisant les propriétés width et height.
new Fabric.Triangle({ width: Number }: Object)
Width - Cette propriété accepte une valeur number qui nous permet de spécifier la largeur de l'objet. Sa valeur par défaut est 100.
widthComportement par défaut de la propriété width
Regardons un exemple de code pour comprendre le comportement par défaut de la propriété width.
宽度属性的默认行为 可以看到三角形的宽度默认为100 // 启动画布实例 var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); 画布.setHeight(250); // 初始化一个三角形对象 var triangle = new Fabric.Triangle({ 左:60, 顶部:50, 填写:“#b0e0e6”, 身高:90, }); // 将其添加到画布中 canvas.add(三角形);
Passage de l'attribut width comme clé
Maintenant que nous avons attribué à l'attribut width une valeur de 180px, nous pouvons voir sa largeur changer.
将宽度属性作为键传递 您可以看到三角形的宽度现在固定为 180。 // 启动画布实例 var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); 画布.setHeight(250); // 初始化一个三角形对象 var triangle = new Fabric.Triangle({ 左:60, 顶部:50, 填写:“#b0e0e6”, 身高:90, 宽度:180, }); // 将其添加到画布中 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!