Fabric.js：重新縮放組時保持對象位置固定

Question

我正在嘗試創建一個組，其中某些元素應停留在相同的大小和位置（從組的edg中可以看出）。

我發現了尺寸問題。 但是，我無法獲得一個完全有效的解決方案來保持職位不變。 這是我目前的方法：

http://jsfiddle.net/on7kujhs/111/

let originalX = e.originalLeft + e.width / 2, // my true left of my center, relative to group
          percentageX = 0.5 + originalX / target.width, // how much I will change my position in percent. zero if originalX is exactly the same as half the width, one if im at right edge
          totalChangeX = (target.scaleX - 1) * target.width / 2, // how much the center shifts
          myMovX = percentageX * totalChangeX; // how much I moved to the right

        if (e.groupedScaleOriginX === 'left') {
          e.left = e.originalLeft - myMovX;
        } else if (e.groupedScaleOriginX === 'right') {
          e.left = e.originalLeft + totalChangeX * (1 - percentageX);
        }

Answer 1

我想我知道了。

http://jsfiddle.net/y3o7Lwn6/27/

關鍵是保存所有對象相對於組邊界的位置並在縮放時對其進行修改，以及保存相對於組左上邊界的真實頂部/左側位置：

  let dX = (tr.scaleX - 1) / tr.scaleX; 
  let dY = (tr.scaleY - 1) / tr.scaleY; 

  if (e.groupedScaleOriginX == 'left') {
    e.left = e.originalLeft - dX * e.trueLeft;
  } else if (e.groupedScaleOriginX == 'right') {
    e.left = e.originalLeft - dX * e.trueRight;
  }
  if (e.groupedScaleOriginY == 'top') {
    e.top = e.originalTop - dY * e.trueTop;
  } else if (e.groupedScaleOriginY == 'bottom') {
    e.top = e.originalTop - dY * e.trueBottom;
  }