VPF::повернуть картинку - Форум программистов

quiz

Дата 3.6.2007, 03:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 94
Регистрация: 15.8.2005

Репутация: нет
Всего: нет

Реально ли средствами JavaScript поворачивать JPEG на определенный угол (с точностью до градуса)? smile

Wolf1994

Дата 3.6.2007, 09:27 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 4
Всего: 29

AFAIK, нет. Можно сделать массив пикселей и вертеть им в виде точек или символов. Но выглядеть это будет "грязно" - точно не подогнать координаты.

Для данной цели рекомендую использовать анимированный "gif" или, если необходимо создание интерактивного сценария поведения картинки - "Flash".

AKS

Дата 3.6.2007, 10:49 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Повернуть можно, причем с точностью до градуса.
В так называемых "современных" браузерах это можно сделать посредством Canvas (используя метод rotate). Ну а "старый добрый" IE давным-давно способен на подобные "трюки", например есть у него фильтр, называемый Matrix. С помощью этого фильтра можно "крутануть" изображение или еще чего-нибудь. Вот маленький примерчик (за основу взял пример с MSDN):

Код


<div style='width:100px;height:100px;position:absolute;background-color:red;top:200px;left:200px;
    filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand");' 
    onclick='Spin(this.filters.item(0), 0, 1)'></div>

Код


function Spin(aFilter, aDeg, aInc) {
    aDeg += aInc;
    var rad = aDeg * Math.PI * 2 / 360,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad);
    aFilter.M11 = costheta;
    aFilter.M12 = -sintheta;
    aFilter.M21 = sintheta;
    aFilter.M22 = costheta;
    if (aDeg < 90) {
        window.setTimeout(function () {
                       Spin(aFilter, aDeg, aInc);
                   }, 100);
    }
}

Данный пример позволит повернуть блок на 90 градусов (пошагово в 1 градус), если Вы рискнете кликнуть по этому блоку. ;)
А можно воспользоваться профессиональным сценарием - библиотекой ExplorerCanvas, которая позволяет делать подобные вещи кроссбраузерно...

quiz

Дата 3.6.2007, 20:34 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 94
Регистрация: 15.8.2005

Репутация: нет
Всего: нет

Спасибо!

quiz

Дата 4.6.2007, 05:04 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 94
Регистрация: 15.8.2005

Репутация: нет
Всего: нет

Помучался с фильтром матрикс, но так и не понял, как заставить его вращать картинку вокруг определенной точки. По умолчанию он вращает вокруг левого верхнего угла DIVа smile

dstorm81

Дата 4.6.2007, 07:34 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

http://dstorm.1gb.in/dsscripts/jscripts/eyemouse/
http://dstorm.1gb.in/dsscripts/jscripts/createSheet/
only MSIE

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »