gpt4 book ai didi

javascript - 尝试在 mousedown 上全选时对象自动移动位置 (Fabric.JS)

转载 作者:行者123 更新时间:2023-11-30 15:46:12 25 4
gpt4 key购买 nike

当我使用按钮选择所有对象时,我可以很好地移动所有对象,并且它们都保持在原位。但是,如果我想在单击 Canvas 上的某个对象时触发该事件,它不会按预期工作。

这是一个Plnk;

http://plnkr.co/edit/iqn5QpBRe30eftoI1z8p?p=preview

我将其用作 selectAll 的代码片段;

function selectAllCanvasObjects(){
var objs = canvas.getObjects().map(function(o) {
return o.set('active', true);
});

var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});

canvas._activeObject = null;

canvas.setActiveGroup(group.setCoords()).renderAll();

}

当我通过单击按钮激活它时,我可以在 Canvas 上移动所有对象,并且它们也不会在单击时移动位置。

如果我通过以下方式激活它;

triangle.on('mousedown', function(e){
selectAllCanvasObjects();
})

它不会立即初始化移动所有对象。

如果我使用;

canvas.on('mouse:down', function(e){
selectAllCanvasObjects();
})

它会让物体自动跳跃位置。

我想知道是否有一种方法可以使用前面的两种方法,使函数的行为与单击时一样?

最佳答案

如果我没理解错的话,我想我刚才回答了一个非常相似的问题:Fabricjs - how do I deselect an object and select a group without releasing the mouse button .

我为此修改了您的 Plunkr(下面的示例代码):http://plnkr.co/edit/5FN5HYWNjU5I3sZO9ixI?p=preview .希望这对您有所帮助。

triangle.on('mousedown', function(evt) {
canvas.deactivateAll();
var objs = canvas.getObjects();

var group = new fabric.Group(objs, {
status: 'moving'
});
// Relevant code
var originalX = triangle.left,
originalY = triangle.top,
mouseX = evt.e.pageX,
mouseY = evt.e.pageY;

triangle.on('moving', function(evt) {
triangle.left = originalX;
triangle.top = originalY;
group.left += evt.e.pageX - mouseX;
group.top += evt.e.pageY - mouseY;
originalX = triangle.left;
originalY = triangle.top;
mouseX = evt.e.pageX;
mouseY = evt.e.pageY;
});

triangle.on('mouseup', function() {
triangle.off('moving');
})

canvas.setActiveGroup(group.setCoords()).renderAll();
});

关于javascript - 尝试在 mousedown 上全选时对象自动移动位置 (Fabric.JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40041803/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com