Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > повернуть картинку


Автор: quiz 3.6.2007, 03:31
Реально ли средствами JavaScript поворачивать JPEG на определенный угол (с точностью до градуса)? smile 

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

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

Автор: AKS 3.6.2007, 10:49
Повернуть можно, причем с точностью до градуса. 
В так называемых "современных" браузерах это можно сделать посредством http://developer.mozilla.org/en/docs/HTML:Canvas (используя метод rotate). Ну а "старый добрый" IE давным-давно способен на подобные "трюки", например есть у него фильтр, называемый http://msdn2.microsoft.com/en-us/library/ms533014.aspx. С помощью этого фильтра можно "крутануть" изображение или еще чего-нибудь. Вот маленький примерчик (за основу взял пример с 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 градус), если Вы рискнете кликнуть по этому блоку. ;)
А можно воспользоваться профессиональным сценарием - библиотекой https://sourceforge.net/projects/excanvas, которая позволяет делать подобные вещи кроссбраузерно...

Автор: quiz 3.6.2007, 20:34
Спасибо!

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

Автор: dstorm81 4.6.2007, 07:34
http://dstorm.1gb.in/dsscripts/jscripts/eyemouse/
http://dstorm.1gb.in/dsscripts/jscripts/createSheet/
only  MSIE

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)