如何用raphael.js旋转一个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);

这显示最后一行“集合”的旋转度和旋转中心。

我的附加拉斐尔资源网站,旨在补充文件(除其他事项外):

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

在这里,您可以运行上述两个代码示例而不进行修改:

http://raphaeljs.com/playground.html

我希望这有助于…

据我所知,没有办法将DIV转换成拉斐尔对象。因为raphael rotate命令只为raphael对象定义,所以最好是在raphael中创建DIV的主要元素(图像、文本、按钮和所有元素),而不是HTML,将它们放在一个集合中,并且当集合是raphael对象时,旋转集合。

咨询 Rotate a div in CSS and in IE filters . 这和 SVG 因此,如果你需要更多的布局魔术,拉斐尔的形状很可能是去的方式。你应该能用 JQuery 和拉斐尔一起操纵你的窗户,但我对拉斐尔是全新的,从来没有这样做过。