Comment personnaliser la fenêtre d'affichage du canevas à l'aide de FabricJS ?-js tutoriel-php.cn

Comment personnaliser la fenêtre d'affichage du canevas à l'aide de FabricJS ?

王林

Libérer： 2023-09-03 10:13:05

avant

652 Les gens l'ont consulté

Comment personnaliser la fenêtre daffichage du canevas à laide de FabricJS ?

Dans cet article, nous apprendrons comment personnaliser la fenêtre d'affichage d'un canevas à l'aide de FabricJS. La fenêtre d'affichage est la zone du canevas visible par l'utilisateur. Nous pouvons personnaliser la fenêtre d'affichage à l'aide de la propriété viewportTransform, qui nous permet de contrôler la transformation de la fenêtre d'affichage.

Syntaxe

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

Copier après la connexion

Parameters

Element - Ce paramètre est l'élément
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur de la bordure et de nombreux autres attributs liés au canevas, parmi lesquels viewportTransform est un attribut. Il accepte un tableau de 6 valeurs permettant de déterminer la transformation sur le plan. La valeur par défaut est canvas.viewportTransform = [1, 0, 0, 1, 0, 0].

Exemple 1

Passer l'attribut viewportTransform comme clé de la classe

Regardons un exemple de code pour voir comment personnaliser la fenêtre d'affichage du canevas. Dans cet exemple, nous avons utilisé les valeurs [0.7, 0.1, 0.5, 0.9, 20, 50] pour représenter respectivement scaleX, skewY, skewX, scaleY, translation et translationY.

<!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>Customizing the viewport of the canvas using FabricJS </h2>
   <p>Select an area around the object to see the viewports.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         viewportTransform: [0.7, 0.1, 0.5, 0.9, 20, 50]
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "red",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2
Passez la propriété viewportTransform en tant que clé avec une valeur personnalisée pour réduire l'objet
Regardons un autre exemple de code montrant une transformation qui évolue à 80 % et effectue un panoramique vers le coin inférieur droit sans inclinaison.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Customizing the viewport of the canvas using FabricJS </h2> <p>Select an area around the object to see the viewports.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { viewportTransform: [0.8, 0, 0, 0.8, 50, 50] }); // Creating an instance of the fabric.Rect class var circle = new fabric.Circle({ left: 215, top: 100, radius: 50, fill: "red" }); // Adding it to the canvas canvas.add(circle); 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!