Как сделать изображение подходящим по краю? html5 canvas javascript

Question

http://i.stack.imgur.com/4oAYt.png

Это оригинал, когда вы не вставляете изображение. она имеет пустое изображение

http://i.stack.imgur.com/aupwr.png

Я хочу знать, как сделать кривое изображение подходят к краю (в красном круге изображение помещается в крае).

какой механизм может это сделать?

• raphaeljs
• fabricjs
• kineticjs

Спасибо всем за помощь мне. Извините за плохой английский. Best Regard.

Answer 1

Вокруг квадратного угла

Вы можете использовать стрижку превращается в иллюзию, что прямоугольное изображение формируется вокруг углов. Преобразования сдвига - это то, как вы разместите прямоугольное изображение логотипа на прямоугольном поле «3d». Для эффектов «сдвига» вы можете использовать любую из хороших библиотек, которые вы упомянули ... или даже просто использовать холст. Однако эффект сдвига дает вам резкие скрещенные ребра, а не изогнутые трансформации. Вот пример: http://www.createjs.com/#!/EaselJS/demos/transform

Вокруг криволинейной угловой

Но по-настоящему изогнутыми преобразований, вам нужно WebGL или библиотеку обработки изображений, что делает перспективным трансформирует.

Заканчивать сервера на основе инструмента ImageMagick и, в частности, взгляд на 3d коробки, перспективы Расслоение раздел на этой странице: http://www.imagemagick.org/Usage/distorts/#methods

Цитирование страницу imagemagick.org:

Это изображение было создано, взяв [прямоугольное] изображение аниме крышка видеоокна, разделив ту крышку на 3 сегмента ('cover', «спинной хребет» и «спина»), искажая каждый отдельно, в слоистые изображения. Изображение было закончено добавлением бликов и затенения эффектов (с использованием композиции изображения HardLight) и добавлением граничных и полупрозрачных теневых эффектов (с использованием CopyOpacity).

Вы также можете сделать это в Photoshop - вероятно, гораздо проще;)

• Принесите свой логотип изображение и ваш случай телефона в Photoshop на отдельных слоях.
• Используйте «Free Transform» для поворота изображения под тем же углом, что и телефон.
• Используйте «Warp» в режиме «Custom», чтобы обернуть изображение вокруг корпуса телефона (сетка поможет вам).
• В корпусе телефона мало света, но используйте режим «Смешивание» в режиме наложения, чтобы преобразованное изображение получило основные моменты корпуса телефона.