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/