どのように私はRaphaël.jsの持つdiv要素を回転させるのですか？

StackOverflow https://stackoverflow.com/questions/1703366

  •  19-09-2019
  •  | 
  •  

質問

私はラファエルに新しいブランドですし、本当にこだわっています、私はラファエルで、ボタンを使用して、DIV、その内容を回転したいと思います。

理想的には、私はボタンを再度クリックされたときに、アニメーションが逆になり、ボタンがクリックされたときに-90度、0度から行くスムーズなアニメーションを持っていると思います。私は、両方のアニメーションのために同じボタンを使用できるように、私はマウスクリックにIDやクラスを変更すると思います。それが賢明だろう？

私は本当に私のサンドボックスは、 http://jsbin.com/isijo/あなたは http://jsbin.com/isijo/editする

でそれを編集することができます

すべての助けを事前に感謝します。

役に立ちましたか？

解決

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

私は、ソフトウェアは素晴らしいですドキュメンテーションは非常に包括的ではありませんが、より数ヶ月のためにラファエルを見て、されています。

ラファエルは、多くの方法でオブジェクトとどのような動作し、何が機能しないため、「感じる」持っていると私はdivを混合されています。

私はあなたが（代わりに）ラファエルオブジェクトをdiv要素を回転さが、しようとしないことを推奨しています。

まず第一に、あなたは下のこの「微調整できる」コードを使用してラファエロボタンのshineyセットを作ることができます.. 

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する

相続人は、あなたが変更することなく、上記2つのコード例を実行することができますここで、

http://raphaeljs.com/playground.htmlする

私は願っています、これは助け...

他のヒント

私の知る限りでは、ラファエルオブジェクトにdiv要素を変換する方法はありません。ラファエルは、コマンドのみラファエルオブジェクトのために定義されて、あなたの最善の策ではなく、HTMLのラファエルに（画像、テキスト、ボタン、およびすべての）あなたのdivの主要な要素を作成することで、単一のセットでそれらを一緒に入れて回転させ、そして、としてので、セットは、セットを回転させ、ラファエル・オブジェクトである。

相談する CSSでとIEでdiv要素がのフィルタ回転させます。これはSVGと同じではありませんので、あなたがより多くのレイアウトの魔法が必要な場合は、ラファエルの形状はおそらく行く方法です。あなたは、ウィンドウの両方を操作することがラファエルと協調してJQueryを使用することができるはずですが、私はラファエルのブランドの新しいですし、そうしたことがありません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top