Wie stelle ich einen Multiplikator ein, um ein geklontes Bild mit FabricJS zu skalieren?-js-Tutorial-php.cn

Wie stelle ich einen Multiplikator ein, um ein geklontes Bild mit FabricJS zu skalieren?

王林

Freigeben： 2023-08-27 19:21:10

nach vorne

665 Leute haben es durchsucht

如何使用 FabricJS 设置倍数来缩放克隆图像？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS einen Multiplikator festlegen, um ein geklontes Bild zu skalieren. 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 einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um den Multiplikator zum Skalieren des geklonten Bildes festzulegen, verwenden wir das Attribut multiplier.

Grammatik

cloneAsImage( callback: function, { multiplier: Number}: Object): fabric.Object

Nach dem Login kopieren

Parameter

Callback (optional) – Dieser Parameter ist eine Funktion, die die geklonte Image-Instanz als erstes Aufrufargument verwendet.
Optionen (optional) – Dieser Parameter ist ein optionales Objekt, das unserem geklonten Bild zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können wir den Multiplikator festlegen, das geklonte Bild zuschneiden, die aktuelle Objekttransformation entfernen oder viele Eigenschaften ändern, von denen Multiplier eine Eigenschaft ist.

Wahltaste

multiplier – Diese Eigenschaft akzeptiert einen Number-Wert, der den Multiplikator darstellt, mit dem das endgültige Ausgabebild skaliert wird. Der Standardwert ist 1.

Verwenden Sie nicht das Attribut Multiplikator

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein geklontes Image-Objekt angezeigt wird, wenn die Eigenschaft

multiplier nicht verwendet wird. In diesem Fall wird der Standardmultiplikatorwert 1 verwendet.

<!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>Without using the multiplier property</h2> 
   <p>You can see that the clone image uses the default multiplier</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: "#308080",
         blur: 3,
      });
      
      // 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) {
         canvas.add(Img);
      });
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie das Attribut

Multiplikator Beispiel

In diesem Beispiel haben wir das Attribut

multiplier

verwendet und ihm den Wert 2 übergeben, um zu zeigen, dass das endgültige geklonte Bild zweimal in x- und y-Richtung skaliert wird.

<!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 multiplier property</h2>
   <p>You can see that the clone image has been scaled</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: "#308080",
         blur: 3,
      });
      // 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", 90);
            canvas.add(Img);
         },
         {
            multiplier: 2,
         }
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie stelle ich einen Multiplikator ein, um ein geklontes Bild mit FabricJS zu skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!