0

私は、Raphael とのかなり単純なインターフェイスを作成しようとしています。これにより、特定のパスをクリックすると、対応する div が表示されます。不規則な形状を使用する可能性が高いので、Illustrator で形状を作成し、readysetraphael.com を使用してパスに変換しますが、それを行うためのより良い方法があれば、それも受け入れます.

私は基本的に、ここに表示されている機能をキャプチャしようとしていますが、ラファエル オブジェクトをボタンとして使用しています。

http://jsfiddle.net/4xV7b/

ここに私の現在のフィドルがあります-私が理解していないのは、対応するdivを表示/非表示にするためにマウスクリックイベント中に何が起こる必要があるかです。

el.click(function() {
   //mysterious voodoo magic goes here

});
4

2 に答える 2

0

純粋な JavaScript を使用して div を表示できます。

document.getElementById("redthing").style.display = "block";

アニメーションが必要な場合は、jQuery を使用するか、css を使用して手動で作成することもできます

于 2012-11-30T15:41:49.757 に答える
0

Raphael 2 を使用していた場合は、この方法を使用して、この例dataのように要素に任意の情報を格納できます。

基本的に、各パスを作成するときは、単に呼び出します

el.data( 'div_id', 'greenthing' );

次に、その要素がクリックされると、指定された div を要素から取得できます。

el.click( function()
    {
        var div_id = this.data( 'div_id' );
        // Display the div here.  Josemando's approach is perfectly cool and will work universally.
    } );

一度に 1 つの div のみが表示されるようにしたい場合は、これを行うことができます (原始的ですが効果的です)。

el.click( function()
    {
        rsr.forEach( function( subEl )
            {
                var divId = subEl.data('div_id' );
                if ( divId && document.getElementById( divId ) )
                    document.getElementById( divId ).style.display = 'none';
            } );
    } );

もちろん、その猫の皮をむく方法は他にもあります。

また、形状固有のデータをすべて構造化オブジェクトに入れ、各パスをループでレンダリングすると、パス構築コードがより管理しやすくなることがあります。上記で提供したフィドルは、そのような手法を示しています。これは、一握り以上の形状があればすぐに効果があります。

于 2012-11-30T18:59:22.820 に答える