fabric.js 判断是否点击的是canvas中某个元素的子元素
时间: 2023-11-28 07:51:11 浏览: 45
可以使用 `fabric.util.getPointer(event.e)` 获取鼠标点击的坐标,然后使用 `canvas.getActiveObject()` 获取当前选中的对象。如果选中的对象是一个 Group,则可以使用 `group.containsPoint(pointer)` 判断鼠标点击的坐标是否在 Group 内部。如果选中的对象不是 Group,则可以使用 `object.containsPoint(pointer)` 判断鼠标点击的坐标是否在该对象内部。注意,需要在 `mouse:down` 事件中进行判断。示例代码如下:
```javascript
canvas.on('mouse:down', function(event) {
var pointer = fabric.util.getPointer(event.e);
var object = canvas.getActiveObject();
if (object) {
if (object instanceof fabric.Group && !object.containsPoint(pointer)) {
// 点击的不是 Group 内部的元素
} else if (object instanceof fabric.Object && !object.containsPoint(pointer)) {
// 点击的不是该对象内部的元素
} else {
// 点击的是该对象或 Group 内部的元素
}
}
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)