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() 
} 

步驟攝製duce：

測試1（ok）： 單擊「移動圓圈」按鈕多次（圓圈座標重新計算，並且該組不是「行爲不端」）。 測試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畫布外的所有操作後，需要縮放。