Fabric.js：剪輯除重疊圖像外的所有內容

Question

我在JS小提琴上的代碼： http : //jsfiddle.net/tbqrn/170/

var img02URL = 'http://fabricjs.com/lib/pug.jpg';

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

//frame image, should be displayed fully.
canvas.setOverlayImage('http://cdn.1001freedownloads.com/vector/thumb/107559/Pink_Hearts_Frame.png',           canvas.renderAll.bind(canvas), {
        width: canvas.width,
        height: canvas.height 
    });
canvas.selection = false;

//rectangle that hides everithing around it.
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(50,50,300,300);
ctx.closePath();
ctx.stroke();
ctx.clip();

//the image that should stay inside the frame
fabric.Image.fromURL(img02URL, function(oImg) {
    oImg.scale(.25);
    oImg.left = 140;
    oImg.top = 140;
    canvas.add(oImg);
    canvas.renderAll();
});

在我目前的方法中，矩形周圍的所有東西都被隱藏，甚至覆蓋了圖像。 我想隱藏除重疊圖像以外的所有內容，因此框架完全顯示。 我怎樣才能做到這一點？

Answer 1

只需讓fabricJs為您管理裁剪即可。 重疊圖片位於fabricjs渲染堆棧中的裁剪上方。

使用fabricjs時，不直接訪問上下文，而是使用fabricjs方法訪問上下文。 使用canvas.clipTo = function(_2dContext){}來管理剪輯。

 var img02URL = 'http://fabricjs.com/lib/pug.jpg'; var canvas = new fabric.Canvas('canvas'); //frame image, should be displayed fully. canvas.setOverlayImage('http://cdn.1001freedownloads.com/vector/thumb/107559/Pink_Hearts_Frame.png', canvas.renderAll.bind(canvas), { width: canvas.width, height: canvas.height }); canvas.selection = false; //rectangle that hides everithing around it. canvas.clipTo = function(ctx) { ctx.rect(50,50,300,300); ctx.closePath(); }; //the image that should stay inside the frame fabric.Image.fromURL(img02URL, function(oImg) { oImg.scale(.25); oImg.left = 140; oImg.top = 140; canvas.add(oImg); canvas.renderAll(); }); 

 <script src="http://www.deltalink.it/andreab/fabric/fabric.js" ></script> <canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>