Comment créer un canevas avec des classes en utilisant FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-23 21:05:04

avant

964 Les gens l'ont consulté

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)

Copier après la connexion

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.

Exemple 1

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>  <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>
Copier après la connexion
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.
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>  <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>
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!