Comment définir des styles qui contrôlent les coins d'un rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir des styles qui contrôlent les coins d'un rectangle à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-24 09:37:14

avant

1148 Les gens l'ont consulté

Comment définir des styles qui contrôlent les coins dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment styliser les coins de contrôle Rectangle utilisant FabricJS. Le rectangle est l'une des différentes formes proposées par TissuJS. Afin de créer un rectangle, nous devons créer une instance Fabric.Rect et ajoutez-la au canevas.

Les coins de contrôle d'un objet nous permettent de redimensionner, d'étirer ou de changer sa position. Nous pouvons personnaliser le coin de contrôle de plusieurs manières, par exemple en y ajoutant une couleur spécifique, en modifiant sa taille, etc. Nous pouvons utiliser l'attribut cornerStyle pour changer le style.

Syntaxe

new fabric.Rect({ cornerStyle: String }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet dont cornerStyle est un attribut.

Option key

cornerStyle - Cette propriété accepte une string qui nous permet de spécifier le style dans lequel nous voulons contrôler le coin.

Exemple 1

Style par défaut des coins de contrôle

Regardons un exemple de code qui montre le style par défaut des coins de contrôle.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Default style of controlling corners</h2>
   <p>Click on the rectangle to see the default style of its controlling corners.</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copier après la connexion

Exemple

Passer cornerStyle comme clé avec la valeur "circle"

Nous pouvons spécifier le coin de contrôle activement sélectionné Objet en passant la valeur sous forme de "cercle" ou de "rectangle". Passer la valeur sous forme de "cercle" fera Les coins des contrôles sont arrondis, comme nous l'avons fait dans l'exemple ci-dessous :

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Passing cornerStyle as key with the value "circle"</h2>
   <p>Click on the rectangle to see the circle style of its controlling corners.</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
         cornerStyle: "circle",
      });

      // Add it to the canvas
      canvas.add(rect);
   </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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment définir des styles qui contrôlent les coins d'un rectangle à l'aide de FabricJS ?

Syntaxe
new fabric.Rect({ cornerStyle: String }: Object)
Copier après la connexion

Paramètres

Option key

Exemple 1

Exemple

Comment définir des styles qui contrôlent les coins d'un rectangle à l'aide de FabricJS ?

Syntaxenew fabric.Rect({ cornerStyle: String }: Object)Copier après la connexion

Paramètres

Option key

Exemple 1

Exemple

Syntaxe
new fabric.Rect({ cornerStyle: String }: Object)
Copier après la connexion