Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Перетаскивание, вращение и изменение размера img (https://javascript.ru/forum/dom-window/28487-peretaskivanie-vrashhenie-i-izmenenie-razmera-img.html)

mirek 21.05.2012 21:48

Перетаскивание, вращение и изменение размера img
 
Существуют ли кроссбраузерные библиотеки для реализации задачи перетаскивания, вращения и изменения размера изображения при помощи мыши на веб-странице ?

Все равно при помощи каких библиотек реализован такой функционал (jquery, ajax, javascript)

razerxxx 21.05.2012 23:50

jquery-ui: draggable, resizable
вот про вращение не знаю. В свое время сам писал необходимый функционал - но он только для новых браузеров

melky 22.05.2012 10:17

хочу сказать, что jquery не может производить трансформации (поворот, масштабирование, например) для браузеров без поддержки css3. ищите плагины сначала для этого.

розовый слоник 22.05.2012 16:35

определитесь с браузерами которые будут поддерживать ваши фишки, если вам нужны старички ei то вперед читать за VML, на нем все это моэно будет сделать. с еи9 читать за canvas

melky 22.05.2012 18:59

Цитата:

Сообщение от розовый слоник (Сообщение 176041)
определитесь с браузерами которые будут поддерживать ваши фишки, если вам нужны старички ei то вперед читать за VML, на нем все это моэно будет сделать. с еи9 читать за canvas

почему канвас,а не трансформации?

razerxxx 23.05.2012 22:53

А ну да, про canvas и svg я не подумал - вот хорошие либы:
https://github.com/kangax/fabric.js/ - ie9+
http://raphaeljs.com/ - ie6+
В fabric все из коробки для вашей задачи, в raphael придется подумать...

mirek 26.05.2012 21:22

Вложений: 1
Должна быть поддержка IE хотя бы до версии 7

Надыбал http://nulled.cc/redirect/?url=http:...css-transform/

Но в IE текст отображается с не четкими краями (как на рисунке во вложении) и вокруг изображений создается черная окантовка.
Нарыл много решений проблемы с окантовкой. И ни одно не подходит

melky 26.05.2012 22:53

1
http://demos.aimweb.name/css-transform-generator/

2
поставить Chroma фильтр (вроде бы)
или же поместить во враппер с background-color: transparent; (тоже, вроде бы)

mirek 27.05.2012 04:49

Цитата:

Сообщение от melky (Сообщение 176758)
поставить Chroma фильтр (вроде бы)

Выяснил, что к искажениям в IE приводит именно плагин rotatable
Это доморощенный плагин. Но работает как с текстом так и с картинками

И проблемы с ореолом благодаря нему именно в IE

При чем ореол пропадает при задействовании фильтра
Код:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF
Но тогда пропадают и управляющие элементы интерфейса для поворота или растягивания картинки.

Пробовал решить это с помощью паддингов

Управляющие элементы пропадают все равно вне зависимости от того на каком они расстоянии от картинки. Наверное из-за того, что фильтр применяется ко всей картинке

Как еще можно решить / ограничить действие фильтра, что-бы он не скрывал кроме ореола и управляющие элементы ?

Deff 27.05.2012 22:22

Цитата:

Сообщение от mirek (Сообщение 176797)
Но тогда пропадают и управляющие элементы интерфейса для поворота или растягивания картинки.

Пробовал решить это с помощью паддингов

Управляющие элементы пропадают все равно вне зависимости от того на каком они расстоянии от картинки. Наверное из-за того, что фильтр применяется ко всей картинке

Как еще можно решить / ограничить действие фильтра, что-бы он не скрывал кроме ореола и управляющие элементы ?

Управляющие элементы вынести в отдельный блок
Т.е
Три дива - один общего обрамления с position:relative; (обрамлящий оставшиеся два
Второй обрамляет img
Третий ваши блоки управления

- стиль применяем к блоку с IMG


Часовой пояс GMT +3, время: 18:53.