Maison >interface Web >js tutoriel >Comment activer la mise à l'échelle de la rétine pour les images clonées à l'aide de FabricJS ?

Comment activer la mise à l'échelle de la rétine pour les images clonées à l'aide de FabricJS ?

WBOYavant: 2023-09-22 17:21:061557parcourir

如何使用 FabricJS 为克隆图像启用视网膜缩放？

Dans ce tutoriel, nous apprendrons comment activer la mise à l'échelle de la rétine pour les images clonées Utilisez FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement. Appliquez des propriétés telles que l'angle, l'opacité, etc. Pour activer la mise à l'échelle de la rétine clonée Pour les images, nous utilisons l'attribut enableRetinaScaling. Dans ce cas, l'image clonée est mise à l'échelle Augmentez devicePixelRatio pour un meilleur rendu sur les écrans Retina. il n'y aura pas Changez l'apparence de l'image.

Grammaire

cloneAsImage( callback: function, { enableRetinaScaling : Boolean }: Object): fabric.Object

Paramètres

Callback(facultatif) - Ce paramètre est une fonction qui sera appelée avec l'instance d'image clonée comme premier argument.
Options (facultatif) - Ce paramètre est un objet facultatif qui fournit une personnalisation supplémentaire à notre image clonée. En utilisant ce paramètre, nous pouvons définir un multiplicateur, recadrer l'image clonée, supprimer la transformation de l'objet actuel ou modifier de nombreuses autres propriétés, dont enableRetinaScaling est une propriété.

Touche d'option

enableRetinaScaling - Cette propriété accepte une valeur Boolean qui nous permet Activez la mise à l'échelle de la rétine pour les images clonées.

Utilisez l'attribut enableRetinaScaling et transmettez-lui une "fausse" valeur

Exemple

Regardons un exemple de code pour comprendre quand Utilisez l'attribut enableRetinaScaling et transmettez-lui une valeur "fausse". dans ce cas, La mise à l'échelle de la rétine ne sera pas activé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>
      Using the enableRetinaScaling property and passing it a ‘false’ value
   </h2>
   <p>You can see the cloned image with retina scaling disabled</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         color: "black",
         blur: 12,
      });
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function(Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         }, {
            enableRetinaScaling: false,
         }
      );
   </script>
</body>
</html>

Utilisez l'attribut enableRetinaScaling et transmettez-lui une "vraie" valeur

Exemple

Dans cet exemple, nous avons utilisé l'attribut enableRetinaScaling et lui avons transmis "true". valeur. Par conséquent, la mise à l'échelle de la rétine sera activée pour notre image cloné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>
      Using the enableRetinaScaling property and passing it a ‘true’ value
   </h2>
   <p>You can see cloned image with retina scaling enabled</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         color: "black",
         blur: 12,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function(Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         }, {
            enableRetinaScaling: true,
         }
      );
   </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!

Boolean 对象 fabric

Déclaration：

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

Article précédent：Le programme JavaScript vérifie si les chaînes pivotent les unes par rapport aux autresArticle suivant：Le programme JavaScript vérifie si les chaînes pivotent les unes par rapport aux autres

Articles Liés

Voir plus