資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 檢查 Polyline 物件是否與其他物件相交？
我們可以透過建立 fabric.Polyline 的例項來建立一個 Polyline 物件。Polyline 物件可以由一組連線的直線段來表示。由於它是 FabricJS 的基本元素之一，因此我們也可以透過應用角度、不透明度等屬性輕鬆自定義它。
為了檢查 Polyline 物件是否與另一個物件相交，我們使用 intersectsWithObject 方法。此方法檢查傳遞給它的物件是否與 Polyline 物件相交。
語法
intersectsWithObject(other: Object, absolute: Boolean, calculate: Boolean ): Boolean
引數
other − 此引數接受一個物件，該物件指定我們要測試的物件。
absolute(可選) − 此引數接受一個字串值，該值指定是否使用不帶 viewportTransform 的座標。此引數是可選的。
calculate(可選) − 此引數接受一個布林值，該值指定是否使用當前位置的座標。此引數是可選的。
示例 1：使用 intersectsWithObject 方法
讓我們看一個程式碼示例，以檢視使用 intersectsWithObject 方法時記錄的輸出。intersectsWithObject 方法在檢查 Polyline 物件是否與另一個物件相交時返回 true 或 false。
這裡，我們初始化了兩個矩形物件，分別為 rectangleRed 和 rectangleBlue。由於我們的 Polyline 物件與 rectangleRed 相交，因此返回 true 值。
<!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>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polyline object
var polyline = new fabric.Polyline(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
stroke: "red",
left: 100,
top: 10,
fill: "white",
strokeWidth: 2,
strokeLineJoin: "bevil",
}
);
// 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: 200,
fill: "blue",
});
// Add them to the canvas
canvas.add(polyline);
canvas.add(rectangleRed);
canvas.add(rectangleBlue);
// Using intersectsWithObject method
console.log(
"Does the polyline object intersect with rectangleRed?: ",
polyline.intersectsWithObject(rectangleRed)
);
console.log(
"Does the polyline object intersect with rectangleBlue?: ",
polyline.intersectsWithObject(rectangleBlue)
);
</script>
</body>
</html>
示例 2：使用 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>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polyline object
var polyline = new fabric.Polyline(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
stroke: "red",
left: 100,
top: 10,
fill: "white",
strokeWidth: 2,
strokeLineJoin: "bevil",
}
);
// 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: 200,
fill: "blue",
});
// Add them to the canvas
canvas.add(polyline);
canvas.add(triangle);
canvas.add(circle);
// Using intersectsWithObject method
console.log(
"Does the polyline object intersect with triangle?: ",
polyline.intersectsWithObject(triangle)
);
console.log(
"Does the polyline object intersect with circle?: ",
polyline.intersectsWithObject(circle)
);
</script>
</body>
</html>
更新於： 2023年2月16日
147 次瀏覽
廣告