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.
intersectsWithObject(other: Object, absolute: Boolean, calculate:Boolean ): Boolean
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.
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>
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!
