Comment désactiver la mise à l'échelle centrale des triangles à l'aide de FabricJS ?-js tutoriel-php.cn

Comment désactiver la mise à l'échelle centrale des triangles à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-15 15:33:08

avant

1104 Les gens l'ont consulté

如何使用 FabricJS 禁用三角形的中心缩放？

Dans ce tutoriel, nous apprendrons comment désactiver la mise à l'échelle centrée 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.

Lors de la mise à l'échelle d'un objet via un contrôle, attribuez une vraie valeur à la propriété centeredScaling, et l'origine de la transformation est son centre.

Syntaxe

new fabric.Triangle({ centeredScaling: Boolean }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> 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 de l'objet liées à l'attribut centeredScaling.

< /ul>
Option Key
centeredScaling - Cette propriété accepte une valeur boolean et nous permet de contrôler si l'objet doit utiliser son centre comme origine de transformation.
Exemple 1
Passez centeredScaling comme clé et attribuez-lui une "vraie" valeur
Regardons un exemple de code pour comprendre comment un objet triangle se comporte lorsque la propriété centeredScaling est activée. Lorsque l'on zoome sur un objet, l'origine de la transformation est le centre du triangle.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing centeredScaling as key and assigning it a "true" value</h2> <p>Try scaling the triangle to see that it is using its center as the center of transformation.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#5f9ea0", centeredScaling: true, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Copier après la connexion
Exemple 2
Désactivation de l'attribut centeredScaling
Nous pouvons désactiver l'attribut centeredScaling en lui attribuant une valeur False. Cela n'utilisera plus le centre du triangle comme centre de la transformation. Voici un exemple de code pour démontrer
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Disabling the centeredScaling property</h2> <p>Try scaling the triangle to see that it is using one of its corners as the center of transformation.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#5f9ea0", centeredScaling: false, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Copier après la connexion
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!