javascript - Html5 Canvas + fabric.js 的独立合成

Question

我需要用画布做类似下图的事情。

用户将图像拖放到黄色边框的正方形上，而不是更改图像的大小位置。图像将被剪裁在黄色边框内。我想使用剪裁但是，当使用全局剪裁时。图像在其他部分运行。我该怎么办？我希望它们表现得像独立的剪辑区域。

Answer 1

也许下一个代码示例可以帮助您：

HTML：

<canvas id='test' width='400px' height='400px' style='background-color:orange;'>
</canvas>

脚本：

var imgRes=
    ['http://www.planethopia.info/wp-content/uploads/2010/02/space3.jpg',
     'http://www.star.ac.za/graphics/n11lmc_noao.jpg',
     'http://images.wikia.com/memoryalpha/en/images/5/54/Deep_space_9.jpg'];

var images=[new Image(),new Image(),new Image()];
for(var i=0;i<3;i++) {
    images[i].src=imgRes[i];
}

var ctx=document.getElementById("test").getContext("2d");

// image[0]
ctx.save();
ctx.beginPath();
ctx.rect(5,5,190,190);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[0],0,0);
ctx.restore();

// image[1]
ctx.save();
ctx.beginPath();
ctx.rect(5,205,190,190);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[1],0,0);
ctx.restore();

// image[2]
ctx.save();
ctx.beginPath();
ctx.rect(205,5,190,390);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[2],0,0);
ctx.restore();

http://jsfiddle.net/MsSzz/

更新：http: //jsfiddle.net/MsSzz/1/