fabric.js 多选中后取消多选框的控制点
时间: 2023-09-11 10:05:49 浏览: 33
要实现多选中后取消多选框的控制点,可以通过以下步骤来实现:
1. 在多选时,记录下当前选中的所有对象,并将它们的控制点显示出来。
2. 当点击一个已经选中的对象时,取消该对象的选中状态,并隐藏它的控制点。
3. 如果取消选中状态后,还有其他对象被选中,则继续显示它们的控制点。
代码示例:
```javascript
// 记录选中的对象
var selectedObjects = [];
// 在多选时,显示所有选中对象的控制点
canvas.on('selection:created', function(e) {
selectedObjects = e.selected;
for (var i = 0; i < selectedObjects.length; i++) {
selectedObjects[i].setControlsVisibility({
mt: true,
mb: true,
ml: true,
mr: true
});
}
});
// 当点击已经选中的对象时,取消选中状态并隐藏控制点
canvas.on('mouse:down', function(e) {
if (e.target && selectedObjects.indexOf(e.target) !== -1) {
var index = selectedObjects.indexOf(e.target);
selectedObjects.splice(index, 1);
e.target.setControlsVisibility({
mt: false,
mb: false,
ml: false,
mr: false
});
if (selectedObjects.length > 0) {
canvas.setActiveObject(selectedObjects[0]);
}
}
});
// 当取消选中对象时,隐藏其控制点
canvas.on('selection:cleared', function() {
for (var i = 0; i < selectedObjects.length; i++) {
selectedObjects[i].setControlsVisibility({
mt: false,
mb: false,
ml: false,
mr: false
});
}
selectedObjects = [];
});
```
在上述示例中,我们通过监听 `selection:created` 事件来记录选中的对象,并显示它们的控制点。当鼠标点击已经选中的对象时,我们通过监听 `mouse:down` 事件来取消该对象的选中状态,并隐藏它的控制点。如果取消选中状态后,还有其他对象被选中,则继续显示它们的控制点。
最后,在 `selection:cleared` 事件中,我们隐藏所有选中对象的控制点,并清空记录的选中对象数组。
相关推荐
![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)
![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)
![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)