suchen

Heim  >  Artikel  >  Web-Frontend  >  FabricJS – Wie skaliert man ein Bildobjekt auf eine bestimmte Breite?

FabricJS – Wie skaliert man ein Bildobjekt auf eine bestimmte Breite?

WBOY
WBOYnach vorne
2023-09-15 21:13:061025Durchsuche

FabricJS – 如何将图像对象缩放到给定宽度？

在本教程中，我们将学习如何使用 FabricJS 将 Image 对象缩放到给定宽度。我们可以通过创建fabric.Image的实例来创建一个Image对象。由于它是 FabricJS 的基本元素之一，我们还可以通过应用角度、不透明度等属性轻松自定义它。为了将 Image 对象缩放到给定宽度，我们使用 scaleToWidth 方法.

语法

scaleToWidth(value: Number, absolute: Boolean): fabric.Object

参数

  • value - 此参数接受一个Number，它确定 Image 对象的新宽度值。

  • absolute - 此参数接受一个布尔值，该值确定是否忽略视口。

Image 对象的默认外观

示例

让我们看一个代码示例，看看不使用 scaleToWidth 方法时图像对象的外观。在这种情况下，我们的图像对象将不会在水平或垂直方向上缩放。

<!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>Default appearance of the Image object</h2>
   <p>
      You can see that the object has not been scaled in horizontal or vertical direction
   </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 an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

使用自定义值传递 scaleToWidth 方法

示例

在此示例中，我们将看到如何为 scaleToWidth 方法分配值将图像对象缩放到给定宽度。由于我们已将值传递为 200，因此这将是图像对象的新宽度。

<!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>Passing the scaleToWidth method with a custom value</h2>
   <p>You can see that the new width of our image object is 200</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 an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Using the scaleToWidth method
      image.scaleToWidth(200, false);
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonFabricJS – Wie skaliert man ein Bildobjekt auf eine bestimmte Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

值传递 number 对象 fabric
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：JavaScript-Programm zur Berechnung der Anzahl der Umdrehungen, die erforderlich sind, um ein bestimmtes Array in nicht aufsteigender Reihenfolge zu sortierenNächster Artikel：JavaScript-Programm zur Berechnung der Anzahl der Umdrehungen, die erforderlich sind, um ein bestimmtes Array in nicht aufsteigender Reihenfolge zu sortieren

In Verbindung stehende Artikel

Mehr sehen