Question

我是拉斐尔的新手，我真的被卡住了，我想用拉斐尔旋转一个div及其内容，按钮。

理想情况下，我希望在单击按钮时有一个从0度到-90度的平滑动画，然后再次单击该按钮时，动画将反转。我想我会在鼠标单击时更改id或类，以便我可以对两个动画使用相同的按钮。这会是明智的吗？

我真的希望得到一些帮助，我的沙盒位于http://jsbin.com/isijo/，您可以在http://jsbin.com/isijo/edit

进行编辑

非常感谢您的任何帮助。

Answer 1

您好，欢迎来到Raphael！

我一直在关注拉斐尔超过几个月，虽然文档不是很全面，但软件很棒。

我一直在以多种方式将Divs与Raphael对象混合在一起，并且对于什么起作用和什么不起作用有一种“感觉”。

我建议您不要尝试旋转div，而是（而不是）Raphael对象。

首先，您可以使用下面的“可调整”代码制作一套闪亮的拉斐尔按钮。

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);

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

我的其他拉斐尔资源网站旨在补充文档（除其他外）：

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

继承人可以在不改变的情况下运行上述2个代码示例：

http://raphaeljs.com/playground.html

我希望这有帮助...

Answer 2

据我所知，没有办法将div转换为Raphael对象。由于Raphael旋转命令仅为Raphael对象定义，因此最好的办法是在Raphael而不是HTML中创建div（图像，文本，按钮和所有）的主要元素，将它们组合在一起，并且，该集合是Raphael对象，旋转集合。

Answer 3

咨询Rotate a div in CSS and in IE filters。这与SVG不同，所以如果你需要更多的布局魔法，拉斐尔的形状很可能就要走了。你应该能够与拉斐尔一起使用JQuery来操纵你的窗户，但我对拉斐尔来说是全新的，而且从未这样做过。

如何用Raphael.js旋转div？

3 个答案: