0

数フレームごとに2つの色の間で前後に点滅する単純な.swfがあります。swfはSwfObjectを使用して埋め込まれ、次のようにクロスブラウザー変換を使用して画面上に配置されたラッパーdiv内に配置されます。

// HTML:
<div id="wrapper">
 <div id="swf" /> // Replaced with swf by SwfObject
</div>

// CSS:
#wrapper
{
    width: 210pt;
    height: 120pt;
    -moz-transform: matrix(1,0,0,1,36,36);
    -ms-transform: matrix(1,0,0,1,36,36);
    -webkit-transform: matrix(1,0,0,1,36,36);
    transform: matrix(1,0,0,1,36,36);
}

ここまでは順調ですね。これは、IE9、Chrome 21、およびFirefox15で正常に表示されます。

次に、この上に配置されるトランスフォーマーと呼ばれる別のDIVを作成し、それを使用jQuery-ui draggable()してインタラクティブにします。トランスフォーマーdivをドラッグするときは、ドラッグイベントをトラップし、delta_xとdelta_yを把握し、jquery css()関数を使用してこれらを既存のトランスフォームに追加します。したがって、トランスフォーマーを10px右にドラッグすると、トランスフォーマーのtxプロパティが更新されます。 +10で、ラッパーとそのswfコンテンツを移動します。

変換コードの簡略化された編集は次のとおりです。

var dx = currentBounds.x - lastBounds.x; // delta x
var dy = currentBounds.y - lastBounds.y; // delta y
for (var i = 0; i < selectedItems.length; i++) {
    var selectedItem = selectedItems[i];
    var matrix = parseMatrix(selectedItem.css("transform")); // utility to read a matrix into an object
    matrix.tx += dx;
    matrix.ty += dy;
    var newMatrix = unparseMatrix(matrix); // reverse utility
    selectedItem.css("transform", newMatrix);
    selectedItem.css("-moz-transform", newMatrix);
    selectedItem.css("-ms-transform", newMatrix);
    selectedItem.css("-webkit-transform", newMatrix);
}

繰り返しになりますが、これは1つの奇妙な点を除けば、正常に機能します。Firefoxでswfを元の境界の外にドラッグすると、ステージの再描画が停止し、現在の値に色が固定されます。swfの内部をトレースすると、関数がまだ呼び出されており、形状が再描画されていることがわかります。ブラウザーでは、オブジェクト全体が再描画されていないだけです。（これはFirefoxのみです-IEとChromeは正常に機能します）ただし、変換でラッパーを移動する代わりに、 topプロパティを更新するだけleftですべてが期待どおりに機能し、ステージが更新され続けるようにコードを変更した場合。

なぜこれが起こるのか誰かが知っていますか？私の推測では-moz-transform、オブジェクトのある種のラスターインプレッションを取得し、元のオブジェクトではなくそれを操作しますが、元のオブジェクトの境界を超えて移動した場合にのみ発生する理由がわかりません。もう1つの奇妙な点は、変換されたswfを右クリックすると、期待どおりにコンテキストメニューが表示されることですが、Firefoxではswfの元の位置にあり、変換によって元のメニューが非表示になり、コピーが作成された可能性があります。

誰もが当てることができるどんな光でも大歓迎です。回避策（変換の代わりに上/左を使用）は非常に簡単ですが、アプリケーションの他の部分とよりクリーンに相互作用するため、可能であれば変換を使用したいと思います。また、より複雑な変換を適用できるようにしたいのですが、Firefox（または他のブラウザー）は回転したswfをラスタライズしますか？

4

1 に答える 1

0

片付けるために、私はこれに自分で答えます：はい、そうです。実験によると、回転したswfは、元の境界の外側に変換されると、ステージの更新を停止します。swfのx/y座標を変更すると、期待どおりに機能します。

于 2012-09-24T17:20:21.633 に答える