5

我是 Raphael 的新手，我真的被卡住了，我想用 Raphael 使用按钮旋转 div 及其内容。

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

我真的需要一些帮助，我的沙箱位于http://jsbin.com/isijo/，您可以在http://jsbin.com/isijo/edit进行编辑

非常感谢您的帮助。

4

3 回答 3

7

您好，欢迎来到拉斐尔！

几个月以来，我一直在研究 Raphael，虽然文档不是很全面，但软件非常出色。

我一直在以多种方式将 Divs 与 Raphael 对象混合在一起，并且对哪些有效，哪些无效有一个“感觉”。

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

首先，您可以使用下面的“可调整”代码制作一组闪亮的 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);

    });
}

接下来你需要了解更多关于旋转 Sets 的知识：

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”的旋转度数和旋转中心。

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

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

您可以在此处运行上述 2 个代码示例而无需更改：

http://raphaeljs.com/playground.html

我希望这会有所帮助...

于 2009-11-10T18:23:02.907 回答
2

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

于 2009-12-24T08:06:12.450 回答
2

请参阅在 CSS 和 IE 过滤器中旋转 div。这与 不同SVG，因此如果您需要更多的布局魔法，Raphael 形状可能是您的最佳选择。您应该能够JQuery与 Raphael 一起在您的窗口中操作两者，但我对 Raphael 是全新的并且从未这样做过。

于 2011-10-25T23:59:34.397 回答