Холст с JQuery

Question

Я ищу что-то вроде

http://www.art.com/products/p10300303-sa-i809278/joan-miro-bleu-ii.htm?sorig=cat&sorigid=0&dimvals=24099&ui=a06af6d911c64e728faeee7c8a861b2e

На странице, пожалуйста, нажмите кнопку просмотра в комнате (в правом нижнем углу картинки). Он покажет, как будет выглядеть изображение применительно к комнате (в основном супер накладывает изображение на стену в комнате). art.com сделал это со вспышкой. Я ищу, как это сделать в HTML5 / JavaScript. Любые указатели приветствуются !!

Заранее спасибо.

Answer 1

Это должно быть довольно просто.

Вы бы добавили фоновое или "комнатное" изображение в качестве статического изображения на заднем плане и добавили изображение в качестве еще одного элемента, который можно перетаскивать.Наконец, вы бы добавили еще один элемент в качестве контейнера для перетаскиваемого объекта, который будет областью на фоновой фотографии, которую вы хотите, чтобы пользователь мог перетаскивать вокруг.

См. http://jqueryui.com/demos/draggable/

<img id="background" src="backgroundImage.png" />
<div id="bounds"></div>
<div id="draggableImage">
  <img id="picture" src="picture.png" />
</div>

, а затем

$('#draggableImage').draggable({
  'containment' : $('#bounds').eq();
});

Используйте CSS, чтобы придать элементу «границ» форму, в которую вы хотите перетащить изображение (например, вы не хотите перетаскиватькартина на пол).