Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2012, 18:45
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Может ли jQuery повернуть картинку на 10 градусов?
Можно ли средствами jQuery повернуть картинку на несколько градусов по часовой стрелке?
Или может посоветуете использовать что-то другое? (кроме Flash)

Задача:
Нарисовать подъёмный кран (на колёсах) который подъезжает к дому, поднимает стрелу, как телескопическую удочку раздвигает её, и поднимает ящик на дом...
При этом изначально клиент вводит 2 параметра:
1) Высота дома
2) Расстояние от дома до крана
тоесть от этого зависит насколько будет выдвину стрела крана и под каким углом она будет стоять (грубо говоря пользователь задаёт два катита в прямоугольном теугольнике, где гипатинуза - это стрела крана).

Наверно любая графика оптимальна на Flash, но он не подходит, так как с iPhone, iPad работать не будет, а HTML5 не идёт на IE8. В jQuery могу зделать всё, кроме поворота стрелы подъёмного крана. Подскажите как или посоветуйте что-то другое...
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2012, 19:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

zebra741258963,
http://raphaeljs.com/image-rotation.html
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2012, 20:04
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Огромное спасибо, рони!
Хотя там много чего плохо работает на IE8 (например Polar Clock работает со сбоем, поворот мухи происходит с огромным передёргиванием под конец поворота, а там где отражение мухи - отражение вообще не выводится, и в других местах по разному отображается на iPad и IE8)
Теперь уверен что сделаю то что мне надо!

Но может кто-то поделится просто своим мнением, как бы он делал раздвижение срелы или удочки под наклоном?

Я пока планирую взять неколько слоёв (в каждом будет одно колено стрелы/удочки) и придумаю формулу по которой они раздвигаются (выезжают одна из под другой) до нужной длинны.

Но может кто-то решал бы задачу по другому? Может на флеше, может на Java аплете, поделитесь как подошлибы к задаче?
Ответить с цитированием
  #4 (permalink)  
Старый 31.01.2012, 06:32
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Поработал с Рафаэлом, и честно скажу - ОЧЕНЬ ГЛЮЧНАЯ вещь...
Ну по мимо того что часть функций не идёт на IE8 (хотя они прописаны в коде, но за час поисков я так и не нашёл почему он ругается "Function expected").

Главное хотел сказать по поводу поворотов - да, поворачивает... Но:

1) При повороте верхняя часть картинки будет отдаваться в нижней. Например если у вас вверху проходит чёрная линия - после поворота внизу увидите тёмный кантик, и наоборот, если внизу картинка не прозрачная - то этот цвет после поворота вы увидите вверху.

2) При анимированном повороте забудьте про движение! Картинка будет нормально поворачиваться, но ехать будет в какую-нибудь другую сторону. Зато в последнее мгновение станет именно туда куда вы её просили. Тоесть по сути можно выполнять только без анимации.

3) И не дай бог вам попробывать сдвинуть с места картинку после того как вы её повернули - узнаете много нового... Он поставит вашу картинку на прежнее место, и срежет вашу картинку по высоте до уровня поворота (например если вы повернули на 60 градусов, то по высоте ополовинет), и после этого как бы размножит её как повторяющиеся обои, причём будет вырезать из этих обоев фрагмент изначальной высоты (и через этот двигающийся фрагмент вы будете видеть урезанную картинку растиражированную как обои).

Короче жесть! Какие-то действия выполнять можно, но вращать и после этого двигать - нельзя...
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2012, 06:37
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от zebra741258963
Короче жесть! Какие-то действия выполнять можно, но вращать и после этого двигать - нельзя...
канву на весь экран раздвинте, и двигайте как душа пожелает. Либо двигайте саму канву.
Ответить с цитированием
  #6 (permalink)  
Старый 01.02.2012, 17:12
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Могу я тогда спроисть у сообщества, что они видят при выполнении данного кода?
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script>
window.onload = function () {
var R = Raphael(0,0, 640, 640);
var el = R.rect(200, 200, 300, 300);
el.animate({transform:"r45t100,0"},1000,function(){  el.animate({transform:"t100,0"},1000);  } );
}
</script>

Библиотека подгружается прямо с сайта разработчика.
Создаю область рисования 640х640
Рисую квадрат 100х100
Поворачиваю его на 45 градусов и сдвигаю на 100 точек относительно поворота

и... вот тут что вы видите? Может это только в IE8 глюки?

Он должен подняться вверх на позицию смещённую на 100 точек от места создания...

А у меня он (почему-то вначале уменьшаясь потом увеличиваясь) крутится на месте и потом одним одним скачком перемещается в нужную позицию.
Ответить с цитированием
  #7 (permalink)  
Старый 01.02.2012, 17:33
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

не совсем понимаю что ты хочешь
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script>
window.onload = function () {
    var R = Raphael(0,0, 640, 640);
    var el = R.rect(200, 200, 300, 300);
    el.animate({
        transform: "r45",
        y: "100"
    },1000,function(){
        el.animate({
            transform: "r0"
        },1000);
    } );
}
</script>
Ответить с цитированием
  #8 (permalink)  
Старый 02.02.2012, 23:53
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Мне кажется я довольно подробно описал те движения которые я хотел получить. Ты предложил несколько другой подход...
В моём примере движение идёт относительно текущего положения объекта (тоесть будет передвигать на 100 точек относительно текущего положения объекта).
В твоём случае, движение происходит в точку с координатой 100.
Но это мелочи...
Можно попросить тебя сделать одно изменение в твоём коде?
Поменяй - var el = R.rect(200, 200, 300, 300);
на строку - var el = R.circle(200, 200, 100);
Казалось всего лишь поменял квадрат на круг. А он уже никуда не двигается!
Ответить с цитированием
  #9 (permalink)  
Старый 04.02.2012, 14:04
Интересующийся
Отправить личное сообщение для CyberMaster Посмотреть профиль Найти все сообщения от CyberMaster
 
Регистрация: 29.09.2011
Сообщений: 26

Вообще на jQuery есть специальный модуль JQuery.rotate. Поищи в google. Самое главное Raphel не нужн!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отступ слева при использовании скрипта JQuery pro_moscow jQuery 1 12.08.2011 11:41
Замена текста на картинку с помощью jQuery InCome jQuery 11 02.08.2011 14:07
jQuery расширение отправки форм feg16 jQuery 1 11.01.2011 14:25
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55