Question

我正在寻找一种方法来空间（并且一般地移动）组内的对象而不管它们的变换。在下面我做的小例子中，你会看到2个圆圈，我试图将它们按一定的因子分隔。没关系，直到我旋转或调整组的大小，并且在转换后第一次更改坐标时仍然可以，但是在间距仍然正确的情况下调用相同的函数两次，组开始跳到整个地方.. < / p>

我正在使用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（确定）：点击＆＃34; Move Circles＆＃34;按钮可以多次（圆圈坐标重新计算，组不是＆＃34;行为不端＆＃34;。测试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）然后点击＆＃34; Move Circles＆＃34;您的组将按照您在测试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设置比例，即使是原生HTML5画布在所有操作之后也需要缩放。

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

1 个答案: