如何使用 Raphael.js 旋转 div? [英] How do I rotate a div with Raphael.js?

问题描述

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

I am brand new to Raphael and am really stuck, I would like to rotate a div and its contents, using a button, with Raphael.

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

Ideally, I would like to have a smooth animation that goes from 0 degrees to -90 degrees when the button is clicked, then when the button is clicked again, the animation would reverse. I think I will change the id or class on mouse click so that I can use the same button for both animations. Would that be wise?

我真的很想帮忙，我的沙箱在 http://jsbin.com/isijo/ 您可以在 http://jsbin.com/isijo/edit

I really would like some help please, my Sandbox is at http://jsbin.com/isijo/ and you can edit it at http://jsbin.com/isijo/edit

非常感谢您的帮助.

推荐答案

您好，欢迎来到 Raphael！

Hello and welcome to Raphael!

我已经研究 Raphael 几个月了，虽然文档不是很全面，但软件非常棒.

I have been looking at Raphael for more than a few months and although the documentation is not very comprehensive the software is brilliant.

我一直在以多种方式将 Div 与 Raphael 对象混合在一起，并且对哪些有效哪些无效有了感觉".

I have been mixing Divs with Raphael objects in many ways and have got a "feel" for what works and what does not work.

我建议您不要尝试旋转 div，而是(而是)旋转 Raphael 对象.

I am recommending that you do not try rotating divs but (instead) Raphael objects.

首先，您可以使用下面的可调整"代码制作一组闪亮的拉斐尔按钮..

First of all you could make a shiney set of Raphael buttons using this "tweakable" code below..

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

    });
}

接下来你需要了解更多关于旋转集合的知识:

Next you need to know more about rotating 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);

这显示了最后一行集合"的旋转度数和旋转中心.

This shows the degree of rotation and the centre of rotation of the "set" on the last line.

我的其他拉斐尔资源网站，旨在补充文档(除其他外):

My additional Raphael resources website which aims to supplement documentation (Amongst other things):

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

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

Heres where you can run the above 2 code examples without alteration:

http://raphaeljs.com/playground.html

我希望这有帮助...

这篇关于如何使用 Raphael.js 旋转 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！