Wie deaktiviere ich die IText-Selektivität mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die IText-Selektivität mit FabricJS?

王林

Freigeben： 2023-08-24 20:13:02

nach vorne

1309 Leute haben es durchsucht

如何使用 FabricJS 禁用 IText 的选择性？

In diesem Tutorial erfahren Sie, wie Sie die IText-Selektivität mithilfe von FabricJS deaktivieren. 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. Um ein Objekt zu ändern, müssen wir es in FabricJS auswählen. Wir können dieses Verhalten jedoch ändern, indem wir das Attribut selectable verwenden.

Grammatik

new fabric.IText(text: String, { selectable: Boolean }: Object)

Nach dem Login kopieren

Parameter

text – Dieser Parameter akzeptiert String, die Textzeichenfolge, die wir im IText-Objekt anzeigen möchten.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften eines Objekts ändern, dessen Eigenschaften ausgewählt werden können.

Wahltaste

selectable – Diese Eigenschaft akzeptiert boolesche Werte. Wenn ihm der Wert „falsch“ zugewiesen wird, kann das Objekt nicht zur Änderung ausgewählt werden. Der Standardwert ist true.

Beispiel 1

Wenn das Standardverhalten oder das optionale Attribut auf „true“ gesetzt ist

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich ein Objekt verhält, wenn die auswählbare Eigenschaft standardmäßig auf „true“ gesetzt ist. Wenn die selectable-Eigenschaft auf true gesetzt ist, können wir ein Objekt auswählen, es auf der Leinwand verschieben und ändern.

<!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 behaviour or when selectable property is set to ‘true’</h2>
   <p>You can try moving the itext object around the canvas or scaling it to prove that it's selectable</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.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#6ae18b",
         }
      );

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

Nach dem Login kopieren

Beispiel 2

Übergeben Sie optionale Attribute als Schlüssel mit dem Wert „falsch“

In diesem Beispiel haben wir dem optionalen Attribut einen falschen Wert zugewiesen. Das bedeutet, dass wir keine IText-Objekte mehr zur Änderung auswählen können.

<!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 selectable property as key with “false” value</h2>
   <p>You can see that the itext object is no longer selectable</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.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#6ae18b",
            selectable: false,
         }
      );

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die IText-Selektivität mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!