Wie zentriere ich ein Objekt mithilfe von FabricJS vertikal relativ zum aktuellen Ansichtsfenster der Leinwand in IText?-js-Tutorial-php.cn

Wie zentriere ich ein Objekt mithilfe von FabricJS vertikal relativ zum aktuellen Ansichtsfenster der Leinwand in IText?

王林

Freigeben： 2023-08-24 10:21:10

nach vorne

1405 Leute haben es durchsucht

如何使用 FabricJS 将对象相对于 IText 中画布的当前视口垂直居中？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS ein Objekt relativ zum aktuellen Ansichtsfenster einer Leinwand in IText vertikal zentrieren. Die IText-Klasse wurde in FabricJS Version 1.4 eingeführt, die Fabric.Text erweitert und zum Erstellen von IText-Instanzen verwendet wird. IText-Instanzen geben uns die Freiheit, ohne zusätzliche Konfiguration neuen Text auszuwählen, auszuschneiden, einzufügen oder hinzuzufügen. Es gibt auch verschiedene unterstützte Tastenkombinationen und Maus-/Touch-Kombinationen, um Text interaktiv zu gestalten, die in Text nicht verfügbar sind.

Mit der auf IText basierenden Textbox können wir jedoch die Größe des Textrechtecks ändern und es automatisch umbrechen. Dies ist bei IText nicht der Fall, da sich die Höhe nicht anhand von Zeilenumbrüchen anpasst. Wir können IText-Objekte mithilfe verschiedener Eigenschaften manipulieren. Ebenso können wir die Methode viewportCenterV verwenden, um ein Objekt relativ zum aktuellen Ansichtsfenster der Leinwand vertikal zu zentrieren.

Grammatik

viewportCenterV(): fabric.Object

Nach dem Login kopieren

Beispiel 1

Standarddarstellung von IText-Objekten

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt ohne Verwendung der viewportCenterV-Methode aussieht. In diesem Fall wird das itext-Objekt nicht vertikal auf der Leinwand zentriert.

<!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 IText object</h2>
   <p>You can see that the itext object has not been centered vertically withrespect to the current viewport of canvas</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 an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "red",
      });

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

Nach dem Login kopieren

Beispiel 2

Verwenden Sie die ViewportCenterV-Methode

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn die Methode viewportCenterV verwendet wird. In diesem Fall wird unser IText-Objekt relativ zum aktuellen Ansichtsfenster der Leinwand zentriert.

<!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 viewportCenterV method</h2>
   <p>You can see that the itext object has been centered vertically with respect to the current viewport of canvas</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 an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using the viewportCenterV method
      itext.viewportCenterV();
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Objekt mithilfe von FabricJS vertikal relativ zum aktuellen Ansichtsfenster der Leinwand in IText?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!