Печать на холсте с 3D-просмотром в перспективе - PullRequest
Новая
       16

Печать на холсте с 3D-просмотром в перспективе

3 голосов
/ 21 февраля 2012

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

Это будет в форме предварительного просмотра обрезкииспользуя библиотеку jQuery, такую ​​как jCrop

. В настоящее время мне удалось добиться трехмерной перспективы, используя Reflex.js , но я искал и более тонкое решение с эффектом обтекания.

Любая помощь будет оценена:)

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

1 Ответ

0 голосов
/ 09 апреля 2012

Ваше требование поддержки IE9 в основном требует холст-подхода, если вы хотите сохранить его на стороне клиента.Конечно, вы можете выполнить рендеринг на стороне сервера, и AJAX загрузит отрендеренное изображение обратно, в котором оно будет работать в любом браузере.

Если вы решите, что вы можете вывести версии IE меньше 10 (или хотя бы просто показать ихобычное фото без преобразования, тогда вы можете сделать эффект обтекания с помощью комбинации CSS 3D Transforms и CSS2. Что-то вроде: 

<!DOCTYPE html>
<style>
  body { margin: 100px; position: relative; }
  .edge { width: 20px; height: 196px; background-size: auto 100%; position: absolute; left: 30px; top: 2px; transform: perspective(600px) rotateY(-45deg); transform-origin: right; }
  .panel {  position: absolute; left: 31px; top: 0; clip: rect(auto,auto,auto,20px); }
  .panel>img { width: 350px; height: 200px; transform: perspective(600px) rotateY(30deg); transform-origin: left; }
</style>
<div class="edge" style="background-image: url(my_image.jpg)"></div>
<div class="panel"><img src="my_image.jpg" /></div>

Чтобы разбить это, мы загрузили изображение пользователяи поместил его на страницу вместе с div с тем же изображением, установленным в качестве фона. Это div имеет тонкую ширину и высоту, почти такие же высокие, как у основного изображения. Мы можем использовать *Свойство 1008 * позволяет расположить фоновое изображение так, чтобы оно соответствовало div, даже если оно выше.

Затем мы расположим эти два элемента так, чтобы они были рядом друг с другом. Свойство CSS2 clip позволяет намотрежьте левые 20 пикселей изображения, чтобы в этот момент div и img выглядели как одно изображение вместе.

Наконец, мы устанавливаем perspective и transform-origin for каждый блок и поверните их друг от друга вокруг оси Y.Из-за отсечения мы должны пометить блок .edge, чтобы он был немного меньше, чем первоначально (с изображением высотой 200 пикселей мне пришлось уменьшить его до 196 пикселей, чтобы он выглядел хорошо), но для меня это очень хорошо работает.

Очевидно, вам нужно будет заполнить префиксы вендора (-moz-, -ms-, -o-, -webkit), и я оставлю тень в качестве упражнения для читателя (простой фон на контейнере, вероятно, подойдет).

...