使用fabric js画布中心对象后的错误位置

Question

我在使用 FabricJS 的画布上有一个图像，加载图像后我调用 canvas.centerObject(img)。我有相同的图像缩放 2X，我正在尝试实现放大镜功能，一切正常，无需居中图像，但是一旦我调用 canvas.centerObject(img)，更大的图像就不会显示在正确的位置。

    fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
        img1 = img;
    img.set({
        width: originalWidth,
        height: originalHeight,
        evented: true,
        selectable: false
    });

    lens = fabric.util.object.clone(img);
    lens.set({
        width: scale * originalWidth,
        height: scale * originalHeight,
        clipTo: function (ctx) {
            ctx.arc(-this.left + x - this.width / 2, -this.top + y - this.height / 2, radius, 0, Math.PI * 2, true);
        }
    });

    canvas.add(img, lens);
    canvas.centerObject(img);//*******issue here****
});

canvas.on('mouse:move', function (e) {
    x = e.e.layerX;
    y = e.e.layerY;
    lens.set('left', -(scale - 1) * x);
    lens.set('top', -(scale - 1) * y);
    canvas.renderAll();
});

Please check on this fiddle

谢谢。

Answer 1

我重新对齐了较大的图像，以便在您调用 canvas.centerObject(img) 时正确显示。但是，您可能想重新考虑一下您的设计，以结合对象缩放，scale() - 当然，这取决于您的实现需求。

这是一个更新的 JSFiddle 和调整后的代码：

https://jsfiddle.net/rekrah/rfdxff5h/

  fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
    img1 = img;
    img.set({
      width: originalWidth,
      height: originalHeight,
      evented: true,
      selectable: false
    });

    lens = fabric.util.object.clone(img);
    lens.set({
      top: -225,
      left: 150,
      width: scale * originalWidth,
      height: scale * originalHeight,
      clipTo: function(ctx) {
        ctx.arc(-this.left + x - this.width / 2, -this.top + y - this.height / 2, radius, 0, Math.PI * 2, true);
      }
    });

    canvas.add(img, lens);
    canvas.centerObject(img);//******* issue no longer here****
  });

  canvas.on('mouse:move', function(e) {
    x = e.e.layerX;
    y = e.e.layerY;
    if (x > 150 && x < 750) {
      lens.set('left', -(scale - 1) * x + 300);
      lens.set('top', -(scale - 1) * y);
    }
    canvas.renderAll();
  });