Как сделать «переворачивание страницы» изображения JavaScript HTML 5 Canvas, как вы обычно видите во Flash?
https://stackoverflow.com/questions/1835321
-
11-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Кто-нибудь пробовал воссоздать эффект переворота страницы с изображениями, которые вы обычно видите в Adobe Flash, с помощью JavaScript и тега Canvas HTML 5?
Существуют ли какие-либо фреймворки или плагины JQuery, которые дают такой эффект?
Переворот страницы во Flash позволяет вам захватить угол моделируемой страницы книги и перевернуть ее, как если бы вы переворачивали страницу настоящей книги.
Я действительно хочу узнать, как это сделать с помощью JavaScript и тега Canvas HTML 5, но не знаю, с чего начать и какие формулы потребуются.
Решение
Вы можете взглянуть на другую (хорошую) реализацию флиппера страниц на основе HTML5: http://jpageflipper.codeplex.com/
Это действительно здорово и реализовано как плагин jQuery.
Другие советы
Можешь попробовать jFlip, это плагин jQuery. Он не совместим с IE, но я думаю, для вас это не проблема, поскольку вы запрашиваете HTML5.
Это плагин jquery, и он довольно изящный.
видеть это http://www.20thingsilearned.com/home
Вот приложение HTML5 Page Flip, которое я создал с использованием HTML5 Canvas Element и jQuery.Это называется РектоВерсо.
Я также наткнулся на это: http://romancortes.com/ficheros/page-flip.html
Это делается только с помощью CSS3.
Есть четкое и информативное тематическое исследование о создании собственного эффекта перелистывания страниц на основе эффекта, приведенного в 20 вещей, которые я узнал о браузерах и Интернете книга, на которую ссылается Нарендракумар.Это отличная реализация для подражания, тематическое исследование понятно с соответствующими примерами кода, и оно было написано старшим интерактивным разработчиком Fi, компании, которая разработала книгу.
http://js1k.com/2010-first/demo/441
Максимально компактно :D
Это лучше сделать с помощью SVG. <foreignObject> элемент и преобразования SVG. Эта запись в блоге Марка Финкла содержит некоторую информацию о вращении объектов, как это нужно сделать в эффекте «переворот/переворот страницы».Насколько я знаю, это поддерживают только Gecko 1.9+ и WebKit.
