1

今のところ、この奇妙なバグの原因がまったくわからないので、できるだけ詳しく説明したいと思っていますが、コードが大きくなり、すべてを投稿しても明確な質問にはなりません.

1. セットアップ:

バックグラウンドでの Box2dWeb アニメーション。ここで、メソッドのトリガーは、»That's it« セクションのゲーム ループの実装に従ってStep()行われます。»draw« メソッドが呼び出されるたびに、b2body の変換が aとa に渡されます。は目的のアニメーションを設定し、は本体のモニターとして機能し、 inline に常駐します。window.requestAnimationFrame<div><g><div><g><svg>

クリックはグローバルにキャッチされ、ユーザーが<div>または<path>ターゲットをクリックすると、b2body に力が適用されてフォーカスが得られます。

2. バグ:

全体として、すべてが期待どおりに機能し、アニメーションは<div>とそれに対応するの流動的に実行され、<g>両方をクリックすると、フォーカス状態が正しく変更されますが、クロムと Safari では、<g>ユーザーが をクリックすると、アニメーションの表示が停止します<g>。

b2Body から への変換を設定するために使用されるコードは次の<g>とおりです。

function draw(){
    var str = this._sprite.transform;
    var mtrs = this._transformItem.matrix;
    mtrs.a = str.a1;
    mtrs.c = str.a2;
    mtrs.e = str.a3;
    mtrs.b = str.b1;
    mtrs.d = str.b2;
    mtrs.f = str.b3;
    this._transformItem.setMatrix( mtrs );
}

ここで、カスタム typ の変換行列を指しthis._transformItemます。<g>.transform.baseVal.getItem( 0 )this._sprite.transform

クリックをキャッチするコードは次のとおりです。

function getClickTargets( target ){
    var targets = { 'sprite' : null, 'link' : null };
    while( target ){
    if( target.nodeName.toLowerCase() === 'a' && 
        targets.link == null ){
        targets.link = target;
    }

    if( target.hasAttribute &&
        target.hasAttribute( 'data-sprite-id' ) && 
        targets.sprite == null ){
            targets.sprite = this._stage.getSpriteById( 
                target.getAttribute( 'data-sprite-id' ) );
    }

    if( target.nodeName.toLowerCase() == 'path' ){
        var attr = target.getAttributeNS( NS, 'monitor-for-sprite' );
        if( attr != '' ){
            targets.sprite = this._stage.getSpriteById( attr );
        }
    }

    if( targets.link != null && target.sprite != null ){
        break;
    }
        target = target.parentNode;
    }
        return targets;
};

FF、IE9/10、Chrome、Opera では、すべて正常に動作しますが、誤動作を引き起こす唯一の原因は、<path>as target で »click« が発生することです。アニメーションが に対して正しく実行され続けるため、行列 は正しくなり<div>ます。

これは何が原因で、どこを検索すればよいのでしょうか?

編集：

これは、イベントがキャッチされ、実行中の全体的な「更新ティック」に対して「非同期」に処理されることが原因でしょうか?

編集2：

Web インスペクターを起動して要素を監視すると、同じ問題が発生することに気付きましたが、すべての<g>要素がフリーズします。

編集3：

少なくともクロムで実行していますが、Safariでも実行できると思います。»draw« 関数を次のように少し変更しました。

function(){
    var str = this._sprite.transform;
    var mtrs = this._transformItem.matrix;

    mtrs.a = str.a1;
    mtrs.c = str.a2;
    mtrs.e = str.a3;
    mtrs.b = str.b1;
    mtrs.d = str.b2;
    mtrs.f = str.b3;



    //this._transformItem.setMatrix( mtrs ); //old line
    this._transformList.replaceItem( 
        this._transformList.createSVGTransformFromMatrix( mtrs ), 0 ); //new working line
}

新しい »SVGTransform« でのみ機能する理由を誰かが知っている場合は、お知らせください。そうでなければ、これは一種のバグだと思います。

4

0 に答える 0