Javascript Fabricjs：在组中编辑文本

Fabric.js不支持在组中编辑文本对象。如何实现此功能？

解决方案基于在保持对象状态的同时取消对象组的分组，将

子目标检查：true

选项作为

true

添加到

fabric.group

中，对包含要编辑的文本的对象进行分组

使用顶级对象组上的

mousedown

侦听器在模拟双击事件上实现解组。组中的文本对象中还添加了一个

mousedown

侦听器

编辑文本后，通过删除原始对象并在

fabric.js

返回的“editing:exited”事件中将其替换为具有相同属性的新组来重新组合对象

const canvas=newfabric.canvas（“canvas”）；
画布设置宽度（350）；
画布设置高度（350）；
//双击事件处理程序
const fabricDblClick=函数（对象，处理程序）{
返回函数（）{
if（obj.clicked）处理程序（obj）；
否则{
obj.clicked=true；
setTimeout（函数（）{
obj.clicked=false；
}, 500);
}
};
};
//在组中解组对象
让groupItems=[]；
让解组=函数（组）{
groupItems=组。\u对象；
组。_restoreObjectsState（）；
画布。移除（组）；
对于（var i=0；i{
var项目=[]；
groupItems.forEach（函数（obj）{
项目推送（obj）；
canvas.remove（obj）；
});
const newTextGroup=new fabric.Group（items.reverse（）{
副目标：对
});
canvas.add（newTextGroup）；
newTextGroup.on(
“鼠标镇”，
fabricDblClick（newTextGroup，obj=>{
解组（newTextGroup）；
})
);
});
让addGroup=（）=>{
const textGroup=new fabric.Group（[secondText，firstText]{
左:50,，
前50名，
副目标：对
});
canvas.add（textGroup）；
textGroup.on(
“鼠标镇”，
fabricDblClick（textGroup，obj=>{
if（isTextGroup（obj））{
obj.getObjects（）.forEach（项=>{
item.on（“鼠标向下”，e=>{
如果（e.target.type==“i-text”）{
e、 target.enterEditing（）；
e、 target.hiddenTextarea.focus（）；
}
});
});
}
解组（textGroup）；
})
);
};
addGroup（）；
让isTextGroup=object=>{
返回object.getObjects（）.every（el=>{
返回el.type==“i-text”；
});
};
.canvas{
宽度：350px；
高度：350px；
边框：1px纯黑；
}
解决方案基于在保持对象状态的同时取消对象组的分组，将
子目标检查：true
选项作为
true
添加到
fabric.group
对象中，其中包含要编辑的文本

使用顶级对象组上的
mousedown
侦听器在模拟双击事件上实现解组。组中的文本对象中还添加了一个
mousedown
侦听器

编辑文本后，通过删除原始对象并在
fabric.js
返回的“editing:exited”事件中将其替换为具有相同属性的新组来重新组合对象


const canvas=newfabric.canvas（“canvas”）；
画布设置宽度（350）；
画布设置高度（350）；
//双击事件处理程序
const fabricDblClick=函数（对象，处理程序）{
返回函数（）{
if（obj.clicked）处理程序（obj）；
否则{
obj.clicked=true；
setTimeout（函数（）{
obj.clicked=false；
}, 500);
}
};
};
//在组中解组对象
让groupItems=[]；
让解组=函数（组）{
groupItems=组。\u对象；
组。_restoreObjectsState（）；
画布。移除（组）；
对于（var i=0；i{
var项目=[]；
groupItems.forEach（函数（obj）{
项目推送（obj）；
canvas.remove（obj）；
});
const newTextGroup=new fabric.Group（items.reverse（）{
副目标：对
});
canvas.add（newTextGroup）；
newTextGroup.on(
“鼠标镇”，
fabricDblClick（newTextGroup，obj=>{
解组（newTextGroup）；
})
);
});
让addGroup=（）=>{
const textGroup=new fabric.Group（[secondText，firstText]{
左:50,，
前50名，
副目标：对
});
canvas.add（textGroup）；
textGroup.on(
“鼠标镇”，
fabricDblClick（textGroup，obj=>{
if（isTextGroup（obj））{
obj.getObjects（）.forEach（项=>{
item.on（“鼠标向下”，e=>{
如果（e.target.type==“i-text”）{
e、 target.enterEditing（）；
e、 target.hiddenTextarea.focus（）；
}
});
});
}
解组（textGroup）；
})
);
};
addGroup（）；
让isTextGroup=object=>{
返回object.getObjects（）.every（el=>{
返回el.type==“i-text”；
});
};
.canvas{
宽度：350px；
高度：350px；
边框：1px纯黑；
}

如果第一个元素c上的文本