패브릭 js 캔버스를 사용하여 가운데 객체 뒤 위치가 잘못됨

Question

이미지를로드 한 후 FabricJS를 사용하여 캔버스에 이미지가 있습니다. 이미지를로드 한 후 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()을 통합하기 위해 디자인을 조금 재고 할 수 있습니다. (스케일 - lens.set ('왼쪽'- :

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