Независимое наложение на Html5 Canvas + fabric.js - PullRequest
Новая
       40

Независимое наложение на Html5 Canvas + fabric.js

1 голос
/ 05 сентября 2011

Мне нужно сделать что-то вроде изображения ниже с холстом.

Click here to see

Пользователи собираются перетаскивать изображения в квадраты с желтой рамкой, а не изменять их размер. Изображения будут обрезаны внутри желтых рамок. Я думал, используя отсечение, но, когда использовать глобальное отсечение. Изображения бегут по другим разделам. Что я могу сделать по этому поводу? Я хочу, чтобы они вели себя как независимые области отсечения.

1 Ответ

0 голосов
/ 05 сентября 2011

Может быть, вам поможет следующий пример кода:

HTML: 

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

SCRIPT: 

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/

...