fabric.js 获取Group中的某个元素中的子元素,给该元素绑定点击事件
时间: 2023-02-14 18:31:56 浏览: 77
可以使用 fabric.Group.getObjects() 方法来获取 Group 中的所有元素。然后遍历这些元素,找到你想要绑定点击事件的元素,调用它的 on() 方法来绑定事件。
例如:
```
var group = new fabric.Group([circle, rectangle]);
group.getObjects().forEach(function(obj) {
if (obj.type === 'circle') {
obj.on('mousedown', function() {
console.log('Circle clicked');
});
}
});
```
在这个例子中,我们遍历了 Group 中的所有元素,找到了类型为 'circle' 的元素,然后给它绑定了 'mousedown' 事件。你也可以使用其他的事件类型,例如 'click' 或者 'tap'。
相关问题
fabric.js 获取Group中的某个元素中的子元素,给该元素绑定点击事件无效
你好! 在 Fabric.js 中,你可以使用 `getObjects()` 方法来获取 Group 中的所有元素。例如:
```
var group = new fabric.Group([circle, rectangle, triangle]);
var objectsInGroup = group.getObjects();
```
然后你可以使用下标访问 Group 中的单个元素,例如:
```
var firstObjectInGroup = objectsInGroup[0];
```
要给 Group 中的某个元素绑定点击事件,你可以使用 `on()` 方法。例如:
```
firstObjectInGroup.on('mousedown', function() {
console.log('clicked on first object in group');
});
```
如果你正在尝试绑定点击事件,但是它无效,可能是因为 Group 中的元素不是真正的可点击对象。在这种情况下,你可以尝试将 Group 中的元素包装在一个可点击的容器元素中,然后绑定事件到容器元素上。
I hope this helps! 如果你有其他问题,请随时问我。
fabric.js 怎么给 Group 中的子元素的子元素绑定事件
你可以使用 `fabric.Group#on` 或者 `fabric.Group#_group events` 在 Group 中的子元素的子元素上绑定事件。
举个例子:
```javascript
const group = new fabric.Group();
const rect = new fabric.Rect();
const circle = new fabric.Circle();
group.add(rect);
group.add(circle);
// 使用 fabric.Group#on 绑定事件
group.on('click', function() {
console.log('Group was clicked');
});
// 使用 fabric.Group#_group events 绑定事件
group._group events.push({
eventName: 'click',
handler: function() {
console.log('Group was clicked');
}
});
```
你也可以在 Group 中的子元素上绑定事件,例如:
```javascript
rect.on('click', function() {
console.log('Rect was clicked');
});
circle.on('click', function() {
console.log('Circle was clicked');
});
```
注意,这些事件只有在 Group 对象可点击时才会触发,即当 Group 对象的 `selectable` 属性设置为 `true` 时。
希望这能帮到你。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)