Wie deaktiviere ich die Auswahlmöglichkeit eines Rechtecks mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die Auswahlmöglichkeit eines Rechtecks mit FabricJS?

PHPz

Freigeben： 2023-08-25 09:25:04

nach vorne

970 Leute haben es durchsucht

Wie deaktiviere ich die Auswahlmöglichkeit eines Rechtecks mit FabricJS?

In diesem Artikel erfahren Sie, wie Sie die Selektivität eines Rechtecks mithilfe von FabricJS deaktivieren. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Klasse fabric.Rect 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 ändern, indem wir optionale Attribute verwenden.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zur zusätzlichen Anpassung des Rechtecks verwendet wird. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit der auswählbaren Natur ändern.

Optionsschlüssel

Optional – Diese Eigenschaft akzeptiert einen Booleschen Wert. Wenn ihm „false“ zugewiesen wird, kann das Objekt nicht zur Änderung ausgewählt werden. Der Standardwert ist true.

Beispiel 1

Standardverhalten oder wenn die optionale Eigenschaft auf „True“ gesetzt ist

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich ein Objekt verhält, wenn die optionale Eigenschaft standardmäßig auf „True“ gesetzt ist. Wenn die Eigenschaft „Selective“ 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; selectable property is set to True</h2>
   <p>You can try moving the rectangle 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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

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

Nach dem Login kopieren

Beispiel 2

Übergabe eines auswählbaren Attributs als Schlüssel

In diesem Beispiel setzen wir den Wert des auswählbaren Attributs auf False. Das bedeutet, dass wir das rechteckige Objekt 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 try clicking on the rectangle to see that it 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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
         selectable: false,
      });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Auswahlmöglichkeit eines Rechtecks mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!