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.
new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)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.
Ü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>Ü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!
