Wie begradige ich ein Bildobjekt mit FabricJS?-js-Tutorial-php.cn

Wie begradige ich ein Bildobjekt mit FabricJS?

WBOY

Freigeben： 2023-09-14 16:53:02

nach vorne

1406 Leute haben es durchsucht

如何使用 FabricJS 拉直 Image 对象？

In diesem Tutorial erfahren Sie, wie Sie Bildobjekte mit FabricJS „begradigen“ können. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eins ist Grundelemente von FabricJS, wir können es auch einfach über die Anwendung anpassen Eigenschaften wie Winkel, Opazität usw. Zum Begradigen Bildobjekte verwenden wir BegradigungMethode. Grammatik

straighten(): fabric.Object

Nach dem Login kopieren

Übergeben Sie den Wert an die Winkeleigenschaft, ohne

Begradigen

zu verwenden Methode Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie unser Image-Objekt beim

Begradigen

aussieht Methode wird nicht verwendet. Die straighten-Methode straighten funktioniert, indem ein Objekt aus seiner Position gedreht wird Der aktuelle Winkel beträgt 0, 90, 180 oder 270 usw., je nachdem, welcher Winkel näher liegt. Winkel Die Eigenschaft legt den Drehwinkel des Objekts in Grad fest. Hier spezifizieren wir Der Winkel beträgt 45. Aber da wir das Attribut straighten nicht angewendet haben, ist der Drehwinkel Es bleiben 45 Grad.

<!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 angle property a value without using the straighten method
   </h2>
   <p>You can see that the Image object has an angle of 45 degrees</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,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Nach dem Login kopieren

Mit der

Begradigungsmethode

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Bildobjekt aussieht, wenn es

geradegerichtet

wird Methode, die in Verbindung mit der Winkeleigenschaft verwendet wird. Obwohl wir den Winkel festgelegt haben Um 45 Grad gedreht, wird unser Bildobjekt durch Zurückdrehen auf 0

begradigt Grad, da wir die Richtungsmethodeverwendet haben.

<!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 straighten method</h2>
   <p>
      You can see that the angle of rotation is 0 degree for the image object
   </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,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the straighten method
      image.straighten();
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie begradige ich ein Bildobjekt mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!