在本教程中，我們將學習如何檢查 Image 對象是否與
使用 FabricJS 的另一個對象。我們可以通過創(chuàng)建實例來創(chuàng)建一個Image對象
fabric.Image。由于它是FabricJS的基本元素之一，我們也可以輕松地
通過應用角度、不透明度等屬性來自定義它。為了檢查圖像是否
對象與另一個對象相交，我們使用 intersectsWithObject 方法。
語法
intersectsWithObject(other: Object, absolute: Boolean, calculate:Boolean ): Boolean
登錄后復制
參數(shù)
other – 此參數(shù)接受一個對象，它指定我們要測試的對象。
absolute(可選) – 此參數(shù)接受一個 String 值，該值指定是否使用不帶 viewportTransform 的坐標。該參數(shù)是可選的。
計算（可選） – 此參數(shù)接受一個布爾值，該值指定是否使用當前位置的坐標。該參數(shù)是可選的。
使用intersectsWithObject方法
示例
讓我們看一個代碼示例，看看 intersectsWithObject 時記錄的輸出
使用方法。 intersectsWithObject 方法在檢查是否返回 true 或 false
圖像對象與另一個對象相交。在這里，我們初始化了兩個矩形
對象即矩形1和矩形2。由于我們的圖像對象與
矩形1，返回真值。
<!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 方法
示例
在此示例中，我們使用了 intersectsWithObject 方法以及不同的
對象來證明此方法可以用于任何對象。
<!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>
登錄后復制
結(jié)論
在本教程中，我們使用兩個示例來演示如何檢查 Image 對象是否
使用 FabricJS 與另一個對象相交。
以上就是如何使用 FabricJS 檢查一個 Image 對象是否與另一個對象相交？的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
