Actionscript 中矩阵缩放/旋转的奇怪稳定性问题

Question

我有一个 Flash 应用程序，我在其中执行关于 _background:MovieClip（代表一本书的页面）中心的缩放和旋转操作。我在这个 MC 的 GESTURE_ROTATE 和 GESTURE_SCALE 事件上有简单的事件监听器，它们更新了一些变量 currentRotation 和 currentScaleX，currentScaleY。然后，我在应用程序的 ENTER_FRAME 事件上触发了以下代码。

我遇到的问题是在将 MC 旋转到大约 60 或 -60 度的限制之外，或者稍微缩放和旋转时，MC 开始振荡并最终疯狂地旋转失控并离开屏幕。我已经尝试了几件事来调试它，甚至尝试了 Math.flooring currentRotationValue 并将 currentScaleX/Y 的值四舍五入到十分位 (Math.floor(currentScale * 10) / 10)，但这些似乎都没有补救它。我在这一点上有点卡住，并尝试尽可能多地进行研究，但找不到任何东西。有什么建议？可能在每一帧上执行此操作有问题吗？

private function renderPage(e:Event) {
    var matrix:Matrix = new Matrix();

    // Get dimension of current rectangle.
    var rect:Rectangle = _background.getBounds(_background.parent); 

    // Calculate the center.
    var centerX = rect.left + (rect.width/2);
    var centerY = rect.top + (rect.height/2);

    // Translating to the desired reference point.
    matrix.translate(-centerX, -centerY); 

    matrix.rotate(currentRotation / 180) * Math.PI);
    matrix.scale(currentScaleX, currentScaleY);
    matrix.translate(centerX, centerY); 

    _background.transform.matrix = matrix;
}

Answer 1

我不确定您要产生什么行为，但我认为问题在于 centerX 和 centerY 在 _background.parent 中定义了 _background 的中间 坐标空间。然后，您将平移 matrix，以便 _background 围绕值 centerX, centerY 旋转，但在 _background 的坐标空间中。

假设您希望_background 围绕一个在屏幕上保持静止的点旋转，您实际需要做的是使用两个不同的Points：

matrix.translate(-_rotateAroundPoint.x, -_rotateAroundPoint.y); 

matrix.rotate(currentRotation / 180) * Math.PI);
matrix.scale(currentScaleX, currentScaleY);

matrix.translate(_centerOnPoint.x, _centerOnPoint.y); 

_rotateAroundPoint 是 _background 在其自己的坐标空间中应围绕的点，_centerOnPoint 是在其父级中应围绕的点em> 坐标空间。

这两个值仅在您想要平移_background 时才需要重新计算，而不是每帧都需要重新计算。例如：

private var _rotateAroundPoint:Point = new Point(_background.width * 0.5, _background.height * 0.5);
private var _centerOnPoint:Point = new Point(50, 50);

private function renderPage(e:Event) {
    var matrix:Matrix = new Matrix();

    matrix.translate(-_rotateAroundPoint.x, -_rotateAroundPoint.y); 

    matrix.rotate((currentRotation / 180) * Math.PI);
    matrix.scale(currentScaleX, currentScaleY);
    matrix.translate(_centerOnPoint.x, _centerOnPoint.y); 

    _background.transform.matrix = matrix;
}