javascript - Html5 Canvas + Fabric.js 独立堆肥

Question

我需要用 Canvas 做如下图所示的事情。

用户将图像拖放到黄色边框的方 block 中，然后更改图像的大小位置。图像将被剪裁在黄色边框内。我想过使用裁剪，但是当使用全局裁剪时。图像覆盖其他部分。对此我能做什么？我希望它们的行为类似于独立的剪切区域。

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/