javascript - 如何使用 fabric.js lib 缩小 Canvas 以仅显示图像的中心部分？

Question

我有一个 500x500 的大 Canvas ，图像(最初为 500x500)缩小到 300x200。它工作正常，但我想缩小 Canvas ，以便只显示原始图像的中心部分。这可能吗？

当前代码。

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

检查这个 fiddle :http://jsfiddle.net/ckqk2Lzs/8/

希望对您有所帮助。