Maison > Article > interface Web > Comment créer un canevas avec des classes en utilisant FabricJS ?

Comment créer un canevas avec des classes en utilisant FabricJS ?

WBOYavant: 2023-08-23 21:05:04964parcourir

Dans cet article, nous verrons comment créer un canevas avec une classe en utilisant l'attribut containerClass. Afin d'accéder à l'élément de canevas HTML natif, nous pouvons y ajouter une classe wrapper. Cette classe nous permet de contrôler les éléments pour ajouter de l'interactivité ou du style selon les besoins. Re grammaire

new fabric.Canvas(element: HTMLElement|String, { containerClass: String}: Object)

Paramètres

Élément -C'est l'élément lui-même, vous pouvez utiliser l'élément
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. Utilisez ce paramètre pour modifier la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés liées au canevas. containerClass en fait partie, qui nous aidera à ajouter des classes wrapper au canevas.

L'exemple de contenu suivant montre comment créer un canevas à l'aide de l'attribut

containerClass

, puis inspecter le DOM HTML pour voir si la classe a été ajoutée.

<!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>How to create a canvas with a class using FabricJS?</h2>
   <p>Here we have used the containerClass property.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // Name of the wrapper class to be used on the canvas
         containerClass: "className",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Ouvrez maintenant les

Outils de développement

→ Onglet Éléments. Ici, vous remarquerez que le nom de classe que nous avons fourni est utilisé comme nom de classe.

如何使用 FabricJS 创建带有类的画布？ Exemple 2

Regardons un exemple de code qui utilise l'attribut

containerClass

pour créer un canevas, puis utilisons cette classe pour ajouter des styles CSS au canevas.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   <style>
      .demo {
         background-color: #ffe4e1;
      }
   </style>
</head>
<body>
   <h2> Creating a canvas with a class using FabricJS </h2>
   <p> Here we have set a wrapper class and then used it to style our canvas. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // Name of the wrapper class to be used on the canvas
         containerClass: "demo",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

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!

css html 对象 dom canvas

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir l'angle de rotation d'un triangle à l'aide de FabricJS ?Article suivant：Comment définir l'angle de rotation d'un triangle à l'aide de FabricJS ?

Articles Liés

Voir plus