Web-Frontend
js-Tutorial
Wie kann ich mithilfe von FabricJS überprüfen, ob ein Bildobjekt ein anderes Objekt schneidet?
Wie kann ich mithilfe von FabricJS überprüfen, ob ein Bildobjekt ein anderes Objekt schneidet?
Sep 17, 2023 pm 12:53 PM
In diesem Tutorial erfahren Sie, wie Sie prüfen, ob ein Bildobjekt übereinstimmt Ein weiteres Objekt, das FabricJS verwendet. Wir können ein Bildobjekt erstellen, indem wir eine Instanz erstellen Stoff.Bild. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos Passen Sie es an, indem Sie Eigenschaften wie Winkel, Deckkraft und mehr anwenden. Um zu überprüfen, ob das Bild Um ein Objekt mit einem anderen Objekt zu schneiden, verwenden wir die Methode intersectsWithObject.
Grammatik
intersectsWithObject(other: Object, absolute: Boolean, calculate:Boolean ): Boolean
Parameter
other – Dieser Parameter akzeptiert ein Objekt, das das Objekt angibt, das wir testen möchten.
absolute(optional) – Dieser Parameter akzeptiert einen String -Wert, der angibt, ob Koordinaten ohne viewportTransform verwendet werden sollen. Dieser Parameter ist optional.
Calculate (optional) – Dieser Parameter akzeptiert einen booleschen-Wert, der angibt, ob die Koordinaten des aktuellen Standorts verwendet werden sollen. Dieser Parameter ist optional.
Verwenden Sie die Methode intersectsWithObject
BeispielSehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn
intersectsWithObject Wie zu verwenden. Die Methode intersectsWithObject prüft, ob sie true oder false zurückgibt Ein Bildobjekt schneidet ein anderes Objekt. Hier initialisieren wir zwei Rechtecke Die Objekte sind Rechteck 1 und Rechteck 2. Da unser Bildobjekt verwandt ist mit Rechteck 1 gibt true zurück.
<!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>Using intersectsWithObject method</h2>
<p>You can open console from dev tools and see the logged output</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Initiate a rectangle object
var rectangleRed = new fabric.Rect({
width: 60,
height: 20,
top: 40,
left: 80,
fill: "red",
strokeWidth: 6,
});
// Initiate another rectangle object
var rectangleBlue = new fabric.Rect({
width: 20,
height: 40,
top: 70,
left: 520,
fill: "blue",
});
// Add them to the canvas
canvas.add(image);
canvas.add(rectangleRed);
canvas.add(rectangleBlue);
// Using intersectsWithObject method
console.log(
"Does the image object intersect with rectangleRed?: ",
image.intersectsWithObject(rectangleRed)
);
console.log(
"Does the image object intersect with rectangleBlue?: ",
image.intersectsWithObject(rectangleBlue)
);
</script>
</body>
</html>
intersectsWithObject für verschiedene Objekte Beispiel
In diesem Beispiel haben wir die Methode
intersectsWithObject zusammen mit anderen verwendet
Objekt, um zu zeigen, dass diese Methode für jedes Objekt verwendet werden kann.
<!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>Using intersectsWithObject method with different objects</h2>
<p>You can open console from dev tools and see the logged output</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Initiate a triangle object
var triangle = new fabric.Triangle({
width: 90,
height: 70,
top: 40,
left: 80,
fill: "red",
strokeWidth: 6,
});
// Initiate a circle object
var circle = new fabric.Circle({
radius: 40,
top: 70,
left: 520,
fill: "blue",
});
// Add them to the canvas
canvas.add(image);
canvas.add(triangle);
canvas.add(circle);
// Using intersectsWithObject method
console.log(
"Does the image object intersect with triangle?: ",
image.intersectsWithObject(triangle)
);
console.log(
"Does the image object intersect with circle?: ",
image.intersectsWithObject(circle)
);
</script>
</body>
</html>
In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie man prüft, ob ein Bildobjekt vorhanden ist
Schneiden Sie ein anderes Objekt mit FabricJS.
Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von FabricJS überprüfen, ob ein Bildobjekt ein anderes Objekt schneidet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Ersetzen Sie Stringzeichen in JavaScript
JQuery überprüfen, ob das Datum gültig ist
Mar 01, 2025 am 08:51 AM
JQuery überprüfen, ob das Datum gültig ist
HTTP-Debugging mit Knoten und HTTP-Konsole
Mar 01, 2025 am 01:37 AM
HTTP-Debugging mit Knoten und HTTP-Konsole
Benutzerdefinierte Google -Search -API -Setup -Tutorial
Mar 04, 2025 am 01:06 AM
Benutzerdefinierte Google -Search -API -Setup -Tutorial
JQuery fügen Sie Scrollbar zu Div hinzu
Mar 01, 2025 am 01:30 AM
JQuery fügen Sie Scrollbar zu Div hinzu
