2

私はこのコード スニペットに出くわし、独自の特定のトグル関数を開発するための参照として「使用」しました。

Raphael.js - if/else ステートメントをクリックしてもトグルしない

http://jsfiddle.net/YLrzk/1/

クリック時にストローク幅が増加したときに、ストローク幅にアニメーションを適用したいと思います。このアニメーションをトグル機能と一緒に追加する方法がわかりません。

これは変数の周りに適用されると考えたStrONので、次のStrOFFようなことを試しました：

 var strOff = function() {
            this.animate({ 'stroke-width': '1' }, 100);

        }; 

    var strOn  = function() {
            this.animate({ 'stroke-width': '5' }, 100);

        };

そしてただ：

var strOff = 
        this.animate({ 'stroke-width': '1' }, 100);



var strOn  = 
        this.animate({ 'stroke-width': '5' }, 100);

怠惰な構文について申し訳ありません。私が試した2つの例で何かを見逃した場合。助けてくれてありがとう。

4

1 に答える 1

1

strOn と strOff は適切なデータ型ではないため、これらのいずれも機能しません。これらは、特定の四角形の選択状態と選択解除状態の属性を含むオブジェクトでなければなりません。これは、 animate が何をするかについての根本的な誤解を表しています。これは本質的に の非同期バージョンですattr。

strOn と strOff を元の状態に復元し、特定の四角形のクリック ハンドラーでこれを呼び出すだけで問題を解決できます。

box1.animate( strOn, 100 );
box2.animate( strOff, 100 );
box3.animate( strOff, 100 );

これでも複雑な問題が残ります。4 番目または 5 番目の四角形を追加する場合は、条件付きロジックにすぐに溺れてしまいます。この種の状態情報は、私の意見では、このように実装されることはほとんどありません。代わりに、これを行うことをお勧めします。

単一の汎用クリック ハンドラーを使用します。

var genericClickHandler = function()
{
    //  First step: find and deselect the currently "active" rectangle
    paper.forEach( function( el )
        {
            if ( el.data('box-sel' ) == 1 )
            {
                el.animate( strOff, 100 ).data('box-sel', 0 );
                return false; // stops iteration
            }
        } );
    this.animate( strOn, 100 ).data( 'box-sel', 1 );
}

これは、ペーパー内のすべての要素を反復処理します。そのうちの 1 つが「アクティブ」としてマークされている場合、アニメーション化されて非アクティブ状態に戻ります。

data選択した長方形を追跡するために使用します。

paper.rect( x1, y1, w1, h1 ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );    // note that we're setting data to indicate that this rectangle isn't "active"
paper.rect( x2, y2, w2, h2 ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );
// ... as many rectangles as you like
paper.rect( xN, yN, wN, hN ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );

このアプローチを使用すると、個々の四角形を追跡する必要はありません。特定の四角形が選択されているかどうかに関係なく追跡するだけです。

これは、多くの長方形をサポートする例です。

于 2012-12-12T18:43:10.873 に答える