数据结构
网络
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 次浏览
广告