如何使用fabric.js庫減少畫布以僅顯示圖像的中心部分？

Question

我有500x500的大畫布，圖片（最初500x500）縮小到300x200。它工作正常，但我想減少畫布，以便只顯示原始圖像的中心部分。這可能嗎？

當前的代碼。

var canvas = new fabric.Canvas("myCanvas"); 
var img = new Image(); 
img.onload=function(){ 
    var image = new fabric.Image(img,{name:"mainImage"}); 
    image.set({ 
     left:100, 
     top: 100, 
     angle: 0, 
     padding:10, 
     height:200, 
     width:300, 
     cornersize:10 
    }); 
} 
img.src = imageUrl; 
canvas.add(image); 
canvas.renderAll(); 

在此先感謝。

Answer 1

是的，你可以用canvas.centerObject()函數居中你的圖像。

例子：

var canvas = new fabric.Canvas('myCanvas'); 

var src = "http://fabricjs.com/lib/pug.jpg"; 

fabric.Image.fromURL(src, function(oImg) { 
    oImg.set({ 
     width: 300, 
     height: 200, 
    }); 
    canvas.add(oImg); 
    canvas.centerObject(oImg); 
    canvas.renderAll(); 
}); 

檢查此琴：http://jsfiddle.net/ckqk2Lzs/8/

我希望這幫助。