FabricJS:在某些转换后更改组内的对象坐标时出现问题

Question

我正在寻找一种方法来在组内空间(并移动)对象，无论它们的转换如何。 在我下面所做的小例子中，您将看到 2 个圆圈，我试图按某个因素将它们隔开。 在我旋转或调整组大小之前还可以，并且在转换后第一次更改坐标时仍然可以，但是在间距仍然正确的情况下调用相同的函数两次，组开始跳到各个地方。

我正在使用结构JS版本：1.7.7

下面是一个示例：

https://jsfiddle.net/u0patgck/

console.clear();
var canvas = new fabric.Canvas('root');
var circles = [];
circles.push(new fabric.Circle({id: "circle1", radius: 20, fill: 'green', left: 150, top: 100}));
circles.push(new fabric.Circle({id: "circle2", radius: 20, fill: 'green', left: 200, top: 100}));
g = new fabric.Group(circles);
//once circles are added to group their coordinates change so I store their new original base coordinates in custom variables
g.forEachObject(function(obj){ 
obj.originalLeft = obj.getLeft();
obj.originalTop = obj.getTop();
}, g);
canvas.add(g);
canvas.renderAll();
function moveCircles(){
var space = parseFloat(document.getElementById("spacingPixels").value);
g.forEachObject(function(obj){ 
switch (obj.id){
case "circle1":
obj.setLeft(obj.originalLeft - space)
break;
case "circle2":
obj.setLeft(obj.originalLeft + space)
break;
default:      
}        
})
g.addWithUpdate();
canvas.renderAll()
}

重现步骤：

测试 1(正常)： 根据需要多次单击"移动圆圈"按钮(重新计算圆圈坐标，并且组没有"行为不端"。 测试 2(第一次正常，但第二次不行)： 首先轮换组。 单击移动圆圈按钮一次(一切仍然很好) 再次单击移动圆圈按钮(您将看到该组开始在画布上自行移动)。

预期行为：

该组不应四处移动或更改内部对象的顺序。

小组移动不规律。

目前，我正在手动缓存转换并在更改坐标后恢复它们(如下所示)

https://jsfiddle.net/0tdg1dof/

var a = {scaleX: g.getScaleX(), scaleY: g.getScaleY(), skewX: g.getSkewX(), skewY: g.getSkewY(), flipX: g.getFlipX(), flipY:g.getFlipX(), angle: g.getAngle()};
fabric.util.resetObjectTransform(g);      
g.addWithUpdate();
g.setScaleX(a.scaleX);
g.setScaleY(a.scaleY);
g.setSkewX(a.skewX);
g.setSkewY(a.skewY);
g.setFlipX(a.flipX);
g.setFlipY(a.flipY);
g.setAngle(a.angle);

有没有更好的方法可以做到这一点？

谢谢。

Answer 1

AlessandroDM，我相信你做了正确的解决方案，因为你只在操作组对象。如果您不操作(恢复)组对象(父对象)，则需要对组中的每个子对象进行操作，例如角度，比例等。此外，您有一个小错误，如果您要旋转组，然后调整其大小(不是对角线控件，scaleX 不应等于 scaleY)，然后单击"移动圆圈"，您的组将按照您在测试 2 中描述的行为。为了解决这个问题，您需要在要设置的所有值之后设置 scaleX 和 scaleY 值：

var a = {scaleX: g.getScaleX(), scaleY: g.getScaleY(), skewX: g.getSkewX(), skewY: g.getSkewY(), flipX: g.getFlipX(), flipY:g.getFlipX(), angle: g.getAngle()};
fabric.util.resetObjectTransform(g);      
g.addWithUpdate();
g.setSkewX(a.skewX);
g.setSkewY(a.skewY);
g.setFlipX(a.flipX);
g.setFlipY(a.flipY);
g.setAngle(a.angle);
g.setScaleX(a.scaleX);
g.setScaleY(a.scaleY);

在所有操作之后，它不是 fabricjs 错误设置缩放，即使是本机 HTML5 画布也需要在所有操作后缩放。