Heim > Artikel > Web-Frontend > Wie deaktiviere ich die Dreiecksselektivität mit FabricJS?

Wie deaktiviere ich die Dreiecksselektivität mit FabricJS?

王林nach vorne: 2023-09-08 17:13:021150Durchsuche

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

In diesem Tutorial erfahren Sie, wie Sie die Selektivität von Dreiecken mithilfe von FabricJS deaktivieren. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.

Um ein Objekt zu ändern, müssen wir es in FabricJS auswählen. Wir können dieses Verhalten jedoch deaktivieren, indem wir das Attribut selectable verwenden.

Syntax

new fabric.Triangle{ selectable: Boolean }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Eigenschaften des Objekts im Zusammenhang mit dem Attribut „selectable“ ändern, z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

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

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich ein Objekt standardmäßig verhält, wenn die Eigenschaft „selectable“ 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 &#39;true&#39;</h2>
   <p>You can try moving the triangle around the canvas or scaling it to prove that it&#39;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 a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
      });

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

Beispiel 2

In diesem Beispiel weisen wir dem optionalen Attribut einen False-Wert zu. Das bedeutet, dass wir das Dreiecksobjekt nicht 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</h2>
   <p>You can see that the triangle 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 a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
         selectable: false,
      });

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

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

对象 ul fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie zählt man mithilfe von JavaScript Wörter in einem Textbereich?Nächster Artikel：Wie zählt man mithilfe von JavaScript Wörter in einem Textbereich?

In Verbindung stehende Artikel

Mehr sehen