Heim > Artikel > Web-Frontend > Wie aktiviere ich die Objektauswahl nur, wenn das Objekt vollständig im Auswahlbereich in FabricJS enthalten ist?

Wie aktiviere ich die Objektauswahl nur, wenn das Objekt vollständig im Auswahlbereich in FabricJS enthalten ist?

WBOYnach vorne: 2023-08-27 11:25:071359Durchsuche

如何仅当对象完全包含在 FabricJS 中的选择区域中时才启用对象选择？

In diesem Artikel erfahren Sie, wie Sie mit FabricJS die Auswahl eines Objekts nur dann ermöglichen, wenn es vollständig im Auswahlbereich enthalten ist. Um dies zu erreichen, können wir die SelectionFullyContained-Eigenschaft verwenden.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)

Parameter

Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften im Zusammenhang mit der Leinwand ändern, von denen „selectionFullyContained“ eine Eigenschaft ist. Es akzeptiert einen booleschen Wert, der bestimmt, ob das Objekt nur dann ausgewählt werden soll, wenn es vollständig im Auswahlbereich enthalten ist. Der Standardwert ist False.

Beispiel 1

Übergabe des SelectionFullyContained-Schlüssels mit dem Wert „False“

Sehen wir uns ein Codebeispiel des Standardverhaltens in FabricJS an, d. h. das Objekt ist immer noch ausgewählt, obwohl es nicht vollständig im Auswahlbereich enthalten ist. In diesem Beispiel übergeben wir den Wert von SelectionFullyContained als False.

<!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>Enabling selection of an object only when it is fully contained in a selection area</h2>
   <p>Select a partial area around the object. The entire object would be selected even if you select a partial area containing the object.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionFullyContained: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Beispiel 2

Übergabe des Schlüssels „selectionFullyContained“ an die Klasse mit dem Wert „True“

Sehen wir uns ein Codebeispiel an, in dem der Wert der Eigenschaft „selectionFullyContained“ auf „True“ gesetzt wurde. Wie wir sehen, wird ein Objekt nur dann ausgewählt, wenn es vollständig im Auswahlbereich enthalten ist.

<!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>Enabling selection of an object only when it is fully contained in a selection area</h2>
   <p>Here you cannot select the object by selecting a partial area around the object. The object must be fully contained inside the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionFullyContained: true
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange"
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie aktiviere ich die Objektauswahl nur, wenn das Objekt vollständig im Auswahlbereich in FabricJS enthalten ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

值传递对象

Stellungnahme：

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

Vorheriger Artikel：Wie rufe ich mit JavaScript eine Funktion aus einem in einer Zeichenfolge gespeicherten Funktionsnamen auf?Nächster Artikel：Wie rufe ich mit JavaScript eine Funktion aus einem in einer Zeichenfolge gespeicherten Funktionsnamen auf?

In Verbindung stehende Artikel

Mehr sehen