Wie aktiviere ich die Retina-Skalierung für geklonte Bilder mit FabricJS?-js-Tutorial-php.cn

Wie aktiviere ich die Retina-Skalierung für geklonte Bilder mit FabricJS?

WBOY

Freigeben： 2023-09-22 17:21:06

nach vorne

1544 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie die Retina-Skalierung für geklonte Bilder aktivieren Verwenden Sie FabricJS. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos anpassen Wenden Sie Eigenschaften wie Winkel, Deckkraft usw. an. Um die Skalierung der geklonten Netzhaut zu aktivieren Für Bilder verwenden wir das Attribut enableRetinaScaling. In diesem Fall wird das geklonte Bild skaliert Erhöhen Sie das DevicePixelRatio für eine bessere Darstellung auf Retina-Bildschirmen. es wird keine geben Ändern Sie das Erscheinungsbild des Bildes.

Grammatik

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

Nach dem Login kopieren

Parameter

Callback(optional) – Dieser Parameter ist eine Funktion, die mit der geklonten Bildinstanz als erstes Argument aufgerufen wird.
Optionen (optional) – Dieser Parameter ist ein optionales Objekt, das unserem geklonten Bild zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können wir einen Multiplikator festlegen, das geklonte Bild zuschneiden, die aktuelle Objekttransformation entfernen oder viele andere Eigenschaften ändern, von denen enableRetinaScaling eine Eigenschaft ist.

Wahltaste

enableRetinaScaling – Diese Eigenschaft akzeptiert einen Boolean-Wert, der uns erlaubt Aktivieren Sie die Retina-Skalierung für geklonte Bilder.

Verwenden Sie das Attribut enableRetinaScaling und übergeben Sie ihm einen „falschen“ Wert

Beispiel

Schauen wir uns ein Codebeispiel an, um zu verstehen, wann Verwenden Sie das Attribut „enableRetinaScaling“ und übergeben Sie ihm einen „falschen“ Wert. in diesem Fall, Die Retina-Skalierung wird nicht aktiviert.

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

Nach dem Login kopieren

Verwenden Sie das Attribut

enableRetinaScaling

und übergeben Sie ihm einen „wahren“ Wert Beispiel

In diesem Beispiel haben wir das Attribut

enableRetinaScaling

verwendet und es als „true“ übergeben. Wert. Daher wird die Retina-Skalierung für unser geklontes Bild aktiviert.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie aktiviere ich die Retina-Skalierung für geklonte Bilder mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!