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

Fabric JS: How to shift inverse scaled group relative to background image on html5 canvas

本文关键字：图像 背景 缩放 相对于 移动 html5      更新时间：2023-09-26

我正在研究一个项目，其中一个组在缩放事件上被反向缩放。我想出了如何重新定位组，以保持其相对于背景图像的位置，同时缩放。我的问题是，缩放后，组的对象按预期调整大小，但由于这一点，三角形的底部顶点(看看小提琴的例子，它将是有意义的)现在从原来的位置移动。

下面是缩放的演示: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();
}

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

预期结果:缩放后，三角形的底部顶点保持其相对于背景图像的位置(在上面的例子中，它的意思是，保持在原点上)。

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

谢谢你的帮助。

这是最简单的解决方案:

像这样设置你的组的起源:

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/

相关文章：