ファブリックjsキャンバスを使用して中央オブジェクトの後に位置が正しくない

Question

イメージをロードした後、canvas.centerObject（img）を呼び出した後、ファブリック上にイメージがあります。私は同じ画像を2倍に拡大していますが、Magnify Glassの機能を有効にしようとしていますが、画像を中心にせずにすべて正常に動作しますが、canvas.centerObject（img）を呼び出すと大きな画像がrigth位置に表示されません。

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