FabricJS – Wie lege ich die Position eines Linienobjekts relativ zum Ursprung fest?-js-Tutorial-php.cn

FabricJS – Wie lege ich die Position eines Linienobjekts relativ zum Ursprung fest?

王林

Freigeben： 2023-08-25 12:13:08

nach vorne

1444 Leute haben es durchsucht

FabricJS – 如何设置 Line 对象相对于原点的位置？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die Position eines Linienobjekts relativ zum Ursprung festlegen. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um die Position eines Linienobjekts relativ zum Ursprung festzulegen, verwenden wir die Methode setPositionByOrigin.

Grammatik

setPositionByOrigin(pos: fabric.Point, originX: String, originY: String): void

Nach dem Login kopieren

Parameter

pos – Diese Eigenschaft akzeptiert einen fabric.Point-Wert, der es uns ermöglicht, die neue Position des Objekts festzulegen. < /p>
originX – Diese Eigenschaft akzeptiert einen String-Wert, der es uns ermöglicht, den horizontalen Ursprung festzulegen. Mögliche Werte sind „links“, „Mitte“ oder „rechts“.
originY – Diese Eigenschaft akzeptiert einen String-Wert, der es uns ermöglicht, den vertikalen Ursprung festzulegen. Mögliche Werte sind „Top“, „Center“ oder „Bottom“.

Verwenden Sie nicht die Standardposition der Methode setPositionByOrigin

Beispiel

Sehen wir uns ein Codebeispiel an, um die Standardposition eines Linienobjekts zu sehen, ohne die Methode setPositionByOrigin zu verwenden.

<!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 position without using the setPositionByOrigin method </h2>
   <p>You can see the default position of the line object</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Methode setPositionByOrigin

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Line-Objekt aussieht, wenn die Methode

setPositionByOrigin verwendet wird. In diesem Beispiel geben wir die neue Position des Objekts an, indem wir ein Point-Objekt mit den X- und Y-Koordinaten 500 bzw. 100 initialisieren. Wir legen die neue Position des Linienobjekts fest und denken dabei an seinen horizontalen Ursprung als „Mitte“ und seinen vertikalen Ursprung als „oben“.

<!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 setPositionByOrigin method</h2>
   <p>You can see the new position of the line object</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Initiate a Point object
      var pos = new fabric.Point(500, 100);

      // Using setPositionByOrigin method
      line.setPositionByOrigin(pos, "center", "top");

      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie lege ich die Position eines Linienobjekts relativ zum Ursprung fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!