вырезать треугольник из изображения с помощью canvas (например, фон iOS с открытой папкой) - PullRequest
0 голосов
/ 01 декабря 2011

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

Вот изображение, чтобы показать, что я имею в виду

enter image description here

В настоящее время я использую стрелки .png, которые накладывают изображение, но я действительно хочу, чтобы оно было на 100% реалистичным.

Здесь вы можете увидеть эффект от папки, который я сейчас использую: http://webkit -os.pixelass.com / IFRAME

(только браузеры webkit ... лучшие в Safari Mac OS X или Safari для мобильных устройств)

Я нашел эту страницу: Резка неправильной формы на изображении

И поиграл с этой скрипкой http://jsfiddle.net/CH6qB/6/

Но все, что мне удалось достичь, это это. http://jsfiddle.net/pixelass/rWbNu/

Полагаю, я действительно не понимаю, как работает рисование холста, и я не смог найти ничего, что описывает его так, как мне нужно. Так что, если кто-нибудь сможет мне помочь, было бы здорово. Я также в порядке со ссылкой на хороший учебник или страницу объяснения холста. Ох .. и я действительно не знаю о javascript. Тем не менее, в jQuery я могу делать довольно злобные вещи, так что я был бы признателен за такой способ jQuery.

Я был бы рад любой помощи. Идеально было бы создать простую скрипку, как это будет работать. Спасибо заранее

Ответы [ 2 ]

0 голосов
/ 07 января 2012

РЕШЕНИЕ:

Для всех, кто заинтересован в этом.Я добавил пример с динамическими позициями.это также показывает, как этот подход учитывает изменение обоев (поддержка куки в этом примере).Папка для газетных киосков имеет другой фон, чем папки для приложений.Все происходит автоматически.

все делается с помощью CSS-перехода и анимации.jQuery используется только для изменения свойств и классов.Я все еще не совсем доволен, но остальное - только тонкая настройка.

Вот демоверсия для браузеров Webkit: http://webkit -os.pixelass.com / foldertest /

Если кого-то волнует это, пожалуйста, сообщите мне, и я загрузлю демо в виде .ZIP.

0 голосов
/ 01 декабря 2011

Я не уверен, что действительно понял вопрос, но стрелки, которые вы ссылаетесь на маленькие указатели псевдоэлементов, когда вы открываете что-то на iPhone?

Если это так, я быстро рассказал о том, как они сделаны: http://jsfiddle.net/JXgk9/1/

Если нет, попробуйте немного лучше объяснить, что именно вы ищете?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...