Как повернуть div с помощью Raphael.js? - PullRequest
Новая
       13

Как повернуть div с помощью Raphael.js?

5 голосов
/ 09 ноября 2009

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

В идеале, я хотел бы, чтобы при нажатии кнопки плавная анимация изменялась от 0 градусов до -90 градусов, а затем при повторном нажатии кнопки анимация развернется. Я думаю, что я изменю идентификатор или класс по щелчку мыши, чтобы я мог использовать одну и ту же кнопку для обеих анимаций. Будет ли это мудрым?

Мне действительно нужна помощь, моя песочница находится на http://jsbin.com/isijo/, и вы можете редактировать ее на http://jsbin.com/isijo/edit

Заранее большое спасибо за любую помощь.

Ответы [ 3 ]

7 голосов
/ 10 ноября 2009

Привет и добро пожаловать в Рафаэля!

Я смотрю на Рафаэля уже несколько месяцев, и хотя документация не является исчерпывающей, программное обеспечение просто великолепно.

Я смешивал Divs с объектами Рафаэля во многих отношениях и у меня появилось чувство, что работает, а что нет.

Я рекомендую вам не пытаться вращать div, а (вместо этого) объекты Рафаэля.

Прежде всего, вы можете создать блестящий набор кнопок Рафаэля, используя этот «настраиваемый» код ниже .. 

var bcontrols = new Array();
var yheight = 300;

for (var i = 0; i < 3; i++) {
    bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({
        fill: "r(.5,.9)#39c-#036",
        stroke: "none"
    });

    bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({
        fill: "r(.5,.1)#ccc-#ccc",
        stroke: "none",
        opacity: 0
    });

    bcontrols[i].index = i;
    bcontrols[i].shine.index = i;

    bcontrols[i].shine.mouseover(function (e) {
        this.insertBefore(bcontrols[this.index]);
    });

    bcontrols[i].mouseout(function () {
        this.insertBefore(bcontrols[this.index].shine);
    });

    /* Called from Raphael buttons */
    bcontrols[i].click(function () {
        alert("Hello you just clicked " + this.index);

    });
}

Далее вам нужно больше узнать о вращающихся наборах: 

var s = paper.set();

s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'}));

s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'}));

s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'}));

s.animate({rotation: "360 65 25"}, 2000);

Показывает степень вращения и центр поворота "набора" в последней строке.

Мой дополнительный веб-сайт ресурсов Raphael, целью которого является дополнение документации (помимо прочего):

http://www.irunmywebsite.com/raphael/raphaelsource.html

Здесь вы можете запустить приведенные выше 2 примера кода без изменений:

http://raphaeljs.com/playground.html

Надеюсь, это помогло ...

2 голосов
/ 26 октября 2011

Обратитесь Поверните div в CSS и в фильтрах IE . Это не то же самое, что SVG, поэтому, если вам нужно больше магии макета, скорее всего, вам подойдут фигуры Рафаэля. Вы должны быть в состоянии использовать JQuery совместно с Рафаэлем для манипулирования обоими в вашем окне, но я новичок в Рафаэле и никогда не делал этого.

2 голосов
/ 24 декабря 2009

Насколько мне известно, нет способа преобразовать div в объект Raphael. Так как команда вращения Raphael определена только для объектов Raphael, лучше всего создать основные элементы вашего div (изображения, текст, кнопки и все) в Raphael вместо HTML, собрать их в один набор и, как набор является объектом Рафаэля, вращайте набор.

...