5

私は Raphael を初めて使用し、本当に行き詰まっています。ボタンを使用して、Raphael で div とその内容を回転させたいと思います。

理想的には、ボタンがクリックされたときに 0 度から -90 度に移動し、ボタンが再度クリックされるとアニメーションが反転する滑らかなアニメーションが必要です。両方のアニメーションで同じボタンを使用できるように、マウス クリックで ID またはクラスを変更すると思います。それは賢明でしょうか？

私のサンドボックスはhttp://jsbin.com/isijo/にあり、http: //jsbin.com/isijo/editで編集できます。

助けてくれてありがとう。

4

3 に答える 3

7

こんにちは、ラファエルへようこそ！

私は Raphael を数か月以上見ており、ドキュメントはあまり包括的ではありませんが、ソフトウェアは素晴らしいものです。

私はさまざまな方法で Div と 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);

    });
}

次に、セットの回転について詳しく知る必要があります。

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 リソース Web サイト (とりわけ):

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

上記の 2 つのコード例を変更せずに実行できる場所は次のとおりです。

http://raphaeljs.com/playground.html

これがお役に立てば幸いです...

于 2009-11-10T18:23:02.907 に答える
2

私の知る限り、div を Raphael オブジェクトに変換する方法はありません。Raphael 回転コマンドは Raphael オブジェクトに対してのみ定義されているため、div の主要な要素 (画像、テキスト、ボタンなど) を HTML ではなく Raphael で作成し、それらを 1 つのセットにまとめて、セットが Raphael オブジェクトの場合、セットを回転させます。

于 2009-12-24T08:06:12.450 に答える