Comment définir l'angle de rotation d'un triangle à l'aide de FabricJS ?

Dans ce tutoriel, nous définirons l'angle de rotation 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. La propriété

angle définit l'angle de rotation 2D de l'objet dans FabricJS. Nous avons également la propriété centeredRotation, qui nous permet d'utiliser le point central du triangle comme origine de la transformation.

Syntaxe

new Fabric.Triangle({ angle: Number, centeredRotation: 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 la couleur, le curseur, la largeur du trait et d'autres propriétés du triangle liées aux propriétés angle et centeredRotation.

Option Key

• Angle - Cette propriété accepte un Number, spécifiant l'angle de rotation du triangle en degrés.

• centeredRotation - Cette propriété accepte une valeur booléenne qui détermine si le centre du triangle est l'origine de la transformation. 确定三角形中心是否为变换原点的值。

Exemple 1

Passer l'angle comme clé Utiliser une valeur personnalisée et désactiver la rotation centrée du triangle

Regardons un exemple de code pour définir l'angle de rotation du triangle dans FabricJS. Les angles négatifs spécifient une direction dans le sens inverse des aiguilles d'une montre, tandis que les angles positifs spécifient une direction dans le sens des aiguilles d'une montre. Puisque nous avons attribué à centeredRotation une fausse valeur, le triangle pivotera en utilisant ses coins comme centre de rotation.

将角度作为带有自定义值的键并禁用三角形的居中旋转
旋转三角形可以看到居中旋转已被禁用。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
填写：“#deb887”，
居中旋转：假，
角度：15，
});

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

Exemple 2

Activer la rotation centrée du triangle

À partir de cet exemple, nous pouvons voir qu'en définissant la propriété centeredRotation sur true, notre triangle utilise désormais son centre comme centre de rotation. Avant la version 1.3.4, centeredScaling et centeredRotation étaient contenues dans une propriété appelée centerTransform.

启用三角形的居中旋转
旋转三角形即可看到居中旋转已启用


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
填写：“#deb887”，
居中旋转：true，
角度：15，
});

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