我以前使用getActiveGroup
来管理FabricJS上的对象对齐选择,如下所示:
canvas.on("selection:created", function(e) {
var activeObj = canvas.getActiveObject();
console.log('e.target.type', e.target.type);
if(activeObj.type === "group") {
console.log("Group created");
var groupWidth = e.target.getWidth();
var groupHeight = e.target.getHeight();
e.target.forEachObject(function(obj) {
var itemWidth = obj.getBoundingRect().width;
var itemHeight = obj.getBoundingRect().height;
$('#objAlignLeft').click(function() {
obj.set({
left: -(groupWidth / 2),
originX: 'left'
});
obj.setCoords();
canvas.renderAll();
});
...
}
});
但是现在我使用了FabricJS 2,并且getActiveObject()
已被删除,我不知道该怎么办。我在doc上读到可以使用getActiveObjects()
,但它什么也没做。
请问我如何用FabricJS 2(不再支持getActiveGroup
)重现this code的动作?
答案 0 :(得分:1)
对多个对象的选择具有类型activeSelection
。仅当您使用group
new fabric.Group([ obj1, obj2]
类型
使用Shift键而不是绘制选择框来创建多选时,只会在所选的第一个对象上触发selection:created
事件,而添加到选择中的对象将触发selection:updated
个事件。通过从selection:created
和selection:updated
事件中调用对齐代码,可以确保每次创建多选时都执行代码。
此外,您可以使用getScaledWidth()
和getScaledHeight()
来获取缩放的尺寸,如果只想使用未缩放的宽度/高度值,则可以使用.width
和.height
。祝你好运!
canvas.on({
'selection:updated': function() {
manageSelection();
},
'selection:created': function() {
manageSelection();
}
});
function manageSelection() {
var activeObj = canvas.getActiveObject();
console.log('activeObj.type', activeObj.type);
if (activeObj.type === "activeSelection") {
console.log("Group created");
var groupWidth = activeObj.getScaledWidth();
var groupHeight = activeObj.getScaledHeight();
activeObj.forEachObject(function(obj) {
var itemWidth = obj.getBoundingRect().width;
var itemHeight = obj.getBoundingRect().height;
console.log(itemWidth);
$('#objAlignLeft').click(function() {
obj.set({
left: -(groupWidth / 2),
originX: 'left'
});
obj.setCoords();
canvas.renderAll();
});
});
}
}