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

Question

我正在寻找一种方法来 space（并通常移动）组内的对象，而不管它们的转换如何。在我下面做的小例子中，你会看到 2 个圆圈，我试图通过某个因素 space 它们。没关系，直到我旋转或调整组的大小，并且在转换后第一次更改坐标时仍然可以，但是在间距仍然正确的情况下调用相同的函数两次，组开始到处跳跃..

我正在使用 Fabric 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（正常）：多次点击 "Move Circles" 按钮（圆圈坐标重新计算，组不是 "misbehaving"。测试 2（第一次可以，但第二次不行）：先轮组。单击移动圆圈按钮一次（一切都还好）再次单击移动圆圈按钮（您将看到该组开始围绕 canvas 自行移动）。

预期行为：

小组不应四处走动或改变里面物品的顺序。

队伍移动不规律。

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

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）然后单击 "Move Circles" 您的组将按照测试 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 bug setting scale after all manipulations, even native HTML5 canvas required scaling after all manipulations.

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

FabricJS: Issue when changing objects coordinates inside a Group after some Transformations

fabricjs