Wie deaktiviere ich die zentrierte Skalierung von Textbox mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die zentrierte Skalierung von Textbox mit FabricJS?

PHPz

Freigeben： 2023-08-23 18:01:02

nach vorne

1245 Leute haben es durchsucht

如何使用 FabricJS 禁用 Textbox 的居中缩放？

In diesem Tutorial erfahren Sie, wie Sie die zentrierte Skalierung einer Textbox mithilfe von FabricJS deaktivieren. Wir können den in das Textfeld geschriebenen Text anpassen, strecken oder verschieben. Um ein Textfeld zu erstellen, müssen wir eine Instanz der Fabric.Textbox-Klasse erstellen und sie der Leinwand hinzufügen. Wenn Sie durch ein Steuerelement skalieren, weisen Sie der Eigenschaft „centeredScaling“ einen wahren Wert zu und verwenden Sie dabei die Mitte als Transformationsursprung des Objekts. Syntax

new fabric.Textbox(text: String, { centeredScaling: Boolean }: Object)

Nach dem Login kopieren

Parameter

Text
− Dieser Parameter akzeptiert einen String, der die Textzeichenfolge ist, die wir verwenden möchten. Möchten Sie in unserem Textfeld anzeigen.
Optionen
(optional) – Dieser Parameter ist ein Objekt , das eine zusätzliche Anpassung unseres Textfelds ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften des Objekts im Zusammenhang mit dem Attribut centeredScaling ändern.

centeredScaling
– Diese Eigenschaft akzeptiert einen booleschen Wert und ermöglicht uns zu steuern, ob das Objekt seinen Mittelpunkt als Transformationsursprung verwenden soll.

centeredScaling als Schlüssel und Zuweisen des Werts „true“ Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich ein Textfeldobjekt verhält, wenn die Eigenschaft

aktiviert ist. Wenn wir ein Objekt vergrößern, liegt der Ursprung der Transformation in der Mitte des Textfelds.

<!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 centeredScaling as key and assigning a "true" value to it</h2>
   <p>Try scaling the textbox to see that centered scaling has been enabled</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 textbox object
      var textbox = new fabric.Textbox("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: true,
      });

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

Nach dem Login kopieren

Wir können das Attribut

deaktivieren, indem wir ihm den Wert „false“ zuweisen. Dadurch wird die Mitte des Textfelds nicht mehr als Mittelpunkt der Transformation verwendet. Hier ist ein Codebeispiel zur Demonstration -

<!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>Disabling centeredScaling property</h2>
   <p>Try scaling the textbox to see that centered scaling has been disabled</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 textbox object
      var textbox = new fabric.Textbox("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: false,
      });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die zentrierte Skalierung von Textbox mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!