Heim > Artikel > Web-Frontend > Wie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?

Wie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?

王林nach vorne: 2023-08-23 08:01:041518Durchsuche

In diesem Tutorial lernen wir, wie man die Eigenschaften eines Bildobjekts über die Optionen festlegt

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 leicht ändern, indem wir es anpassen Wenden Sie Eigenschaften wie Winkel, Deckkraft usw. an. um die Eigenschaften des Bildobjekts festzulegen Optionen verwenden wir die Methode setOptions.

Grammatik

setOptions(options: Object)

Parameter

options (optional) − Dieser Parameter ist ein Objekt, das zusätzliche bereitstellt Passen Sie unser Objekt an. Verwenden Sie diesen Parameterursprung, die Strichstärke und viele andere Dinge Andere Eigenschaften, die sich auf das Bildobjekt beziehen, können geändert werden.

Standarddarstellung von Bildobjekten

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Image-Objekt angezeigt wird, wenn setOptions vorhanden ist.

Methode nicht 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>Default appearance of image object</h2>
   <p>You can see the default appearance of Image object</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?" >
   <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);
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Verwenden Sie die setOptionsMethode

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

In diesem Beispiel verwenden wir die Methode setOptions, um die Eigenschaften des Bildes festzulegen

Hier haben wir einen 4-Pixel-Farbstrich „Grün“ angewendet und neu angepasst Optionen. Hier haben wir einen 4-Pixel-Strich mit der Farbe „Grün“ angewendet und dessen Größe geändert Legen Sie die Position des Bildobjekts auf einen oberen Wert von 30 und einen linken Wert von 100 fest

<!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 setOptions method</h2>
   <p>
      You can see that the object's properties have been set using setOptions method
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?" >
   <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);
      
      // Using setOptions method
      image.setOptions({
         left: 100,
         top: 30,
         stroke: "green",
         strokeWidth: 4,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Object 对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie konvertiere ich NaN mit JavaScript in 0?Nächster Artikel：Wie konvertiere ich NaN mit JavaScript in 0?

In Verbindung stehende Artikel

Mehr sehen