Falsche Position nach dem Center-Objekt mit Stoff js Canvas

Question

Ich habe ein Bild auf einer Leinwand mit FabricJS, nachdem ich das Bild laden ich canvas.centerObject (img). Ich habe das gleiche Bild skaliert 2X, ich versuche, eine Magnify Glass-Funktionalität zu implementieren, funktioniert alles gut, ohne das Bild zu zentrieren, aber sobald ich canvas.centerObject (img) aufrufen, wird das größere Bild nicht in der rechten Position angezeigt.

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

Dank.

Answer 1

Ich habe das größere Bild so ausgerichtet, dass es korrekt angezeigt wird, wenn Sie canvas.centerObject(img) anrufen. Vielleicht möchten Sie jedoch Ihr Design etwas überdenken, um vielleicht die Objektskalierung einzubeziehen, scale() - natürlich abhängig von Ihren Implementierungsbedürfnissen.

Hier ist eine aktualisierte JSFiddle und der gezwickt Code:

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