Maison >interface Web >js tutoriel >Comment personnaliser la fenêtre d'affichage du canevas à l'aide de FabricJS ?

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

王林avant: 2023-09-03 10:13:05702parcourir

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)

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>

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>
   <!-- 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.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>

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!

对象 canvas

Déclaration：

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

Article précédent：Comment vérifier le type d'une variable ou d'un objet en JavaScript ?Article suivant：Comment vérifier le type d'une variable ou d'un objet en JavaScript ?

Articles Liés

Voir plus