Fabric JS：如何在 html5 画布上相对于背景图像移动反向缩放组

Question

我正在做一个项目，其中一个组在缩放事件中被反向缩放。我想出了如何重新定位组以在缩放时保持它相对于背景图像的位置。我的问题是，缩放后，组的对象按预期调整了大小，但正因为如此，三角形底部顶点（看小提琴示例，它会有意义）现在从其原始位置移动。

这是一个缩放演示：https://jsfiddle.net/Xyzor/3mh6g3jg

计算组偏移量的缩放函数

function zoom(factor) {
  var beforeW = 0,
    beforeH = 0;
  factor += c.getZoom();

  c.setZoom(factor)
    .setWidth(500 * factor)
    .setHeight(500 * factor);

  c.forEachObject(function(obj) {
    beforeW = obj.getWidth();
    beforeH = obj.getHeight();

    obj.setScaleX(1 / factor)
      .setScaleY(1 / factor)
      .setLeft(obj.getLeft() + beforeW - obj.getWidth())
      .setTop(obj.getTop() + beforeH - obj.getHeight())
      .setCoords();
  });
  c.renderAll();
}

我尝试的是在缩放之前计算三角形底部顶点与组边界矩形右侧之间的距离。我在缩放后也这样做了，并用这两个值的差异移动了组。我以相同的方式计算了垂直偏移量（使用边界矩形的底部），但它不起作用（这只是偏移量的放大）。我不确定我是否使用了三角形对象的正确坐标。

预期结果： 缩放后，三角形的下顶点保持其相对于背景图像的位置（在上面的示例中，它意味着保持在原点上）。

当前结果： 缩放后，由于缩放，三角形的底部顶点指向背景图像上的不同位置。

感谢您的帮助。

Answer 1

这是最简单的解决方案：

像这样设置你的组的来源：

var group = new fabric.Group(
  [circle, triangle, text], {
    left: left,
    top: top,
    type: 'group',
    hasControls: false,
    hasBorders: true,
    borderColor: 'blue',
    originX:'center',
    originY:'bottom'
};

然后像这样在缩放功能中简单地缩放组：

var groupScale = 1/factor;
group.setScaleX(groupScale).setScaleY(groupScale);

c.renderAll();

请看这里：https://jsfiddle.net/3mh6g3jg/9/