suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie aktiviere ich die Retina-Skalierung für geklonte Bilder mit FabricJS?

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

WBOY
WBOYnach vorne
2023-09-22 17:21:061543Durchsuche

如何使用 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

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

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!

Boolean 对象 fabric
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Das JavaScript-Programm prüft, ob Zeichenfolgen relativ zueinander gedreht sindNächster Artikel：Das JavaScript-Programm prüft, ob Zeichenfolgen relativ zueinander gedreht sind

In Verbindung stehende Artikel

Mehr sehen