0

我有一个简单的 .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 和 Firefox 15 中显示良好。

然后我创建另一个名为transformer 的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);
}

再一次，这很好用，除了一个奇怪的地方：每当我将 swf 拖到 Firefox 中的原始边界之外时，舞台就会停止重新绘制，并且颜色会停留在它当前具有的任何值上。通过在 swf 内部进行跟踪，我可以看到该函数仍在被调用，并且形状仍在被重绘 - 只是在浏览器中，整个对象没有被重绘。（这仅在 Firefox 中 - IE 和 Chrome 工作正常）但是，如果我修改我的代码，而不是使用转换移动包装器，我只需更新 top和left属性，一切都按预期工作，并且阶段不断更新。

有谁知道为什么会这样？我最好的猜测是对-moz-transform对象进行某种光栅印象，然后对其进行操作而不是对原始对象进行操作，但是我不明白为什么只有当您超出原始对象的边界时才会发生这种情况？另一个奇怪的是，如果我右键单击转换后的 swf，上下文菜单会如您所愿出现，但在 Firefox 中它位于 swf 的原始位置，这表明转换可能隐藏了原始文件并创建了一个副本：

任何人都可以散发的任何光芒都将受到欢迎。尽管解决方法（使用顶部/左侧而不是变换）非常简单，但如果可能的话，我想坚持使用变换，因为这将更清晰地与我的应用程序的其他部分交互。我还希望能够应用更复杂的转换：Firefox（或其他浏览器）会光栅化旋转的 swf 吗？

4

1 回答 1

0

我会自己回答这个问题，只是为了整理一下：是的，它似乎是。实验表明，一旦旋转的 swf 超出其原始范围，它就会停止更新舞台。更改 swf 的 x/y 坐标按预期工作。

于 2012-09-24T17:20:21.633 回答