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;
  }