Неверное положение после объекта центра с использованием ткани js canvas

Question

У меня есть изображение на холсте с помощью FabricJS, после загрузки изображения, которое я вызываю canvas.centerObject (img). У меня одинаковое изображение размером 2X, я пытаюсь внедрить функцию Magnify Glass, все работает отлично, не центрируя изображение, но как только я вызываю 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(); 
    });