缩放 Flex 对象会导致旋转动作异常答案

【问题标题】：Scaling Flex object causes rotation to act strangely缩放 Flex 对象会导致旋转动作异常
【发布时间】：2013-02-07 05:16:09
【问题描述】：

当我在 Flex 容器中有一个对象（绝对定位）并将其缩放值设置得非常低，然后旋转它，随着缩放的减小，旋转变得“更不稳定”。我包括重现问题的代码。您可以点击“向上箭头”以缩小对象（“向下”以放大）和“向上”以增加对象的大小，以便您仍然可以看到它。缩小后，您可以使用“左”和“右”来旋转它。请注意，当对象未按比例缩小时，它会干净地旋转，但是如果您将对象按比例缩小（同时增加对象的大小以便您仍然可以看到它），则旋转会变得不稳定。有什么想法吗？

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:test="com.test.*"
                   resize="onResize()" addedToStage="onStart()" removedFromStage="onEnd()">
<fx:Script>
    <![CDATA[
        [Bindable]
        private var _rotation:Number = 0;

        [Bindable]
        private var _scale:Number = 1;

        [Bindable]
        private var _blockSize:Number = 100;

        protected function onStart():void {
            stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
        }

        protected function onEnd():void {
            stage.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
        }

        protected function onResize():void {
            if (Layer) {
                Layer.x = width/2
                Layer.y = height/2;
            }
        }

        protected function onKeyDown(event:KeyboardEvent):void {
            if (event.keyCode == Keyboard.LEFT) {
                Layer.rotation += -1;
            }
            if (event.keyCode == Keyboard.RIGHT) {
                Layer.rotation += 1;
            }
            if (event.keyCode == Keyboard.UP) {
                Layer.scaleX = Layer.scaleY = (Layer.scaleX / 2);
            }
            if (event.keyCode == Keyboard.DOWN) {
                Layer.scaleX = Layer.scaleY = (Layer.scaleX * 2);
            }
            if (event.keyCode == Keyboard.PAGE_UP) {
                _blockSize *=2;
            }
            if (event.keyCode == Keyboard.PAGE_DOWN) {
                _blockSize /=2;
            }
            this._rotation = Layer.rotation;
            this._scale = Layer.scaleX;
        }
    ]]>
</fx:Script>
<s:SkinnableContainer id="Layer">
    <test:RotatedComponent width="{_blockSize}" height="{_blockSize}"/>
</s:SkinnableContainer>
<s:Label x="10" y="10" text="Rotation: {_rotation}"/>
<s:Label x="10" y="30" text="Scale: {_scale}"/>
<s:Label x="10" y="50" text="Block: {_blockSize}"/>
</s:WindowedApplication>

RotatedComponent.mxml 的代码

package com.test {

import mx.core.UIComponent;

public class RotatedComponent extends UIComponent {

    public function RotatedComponent() {
        super();
    }

    override public function set width(value:Number):void {
        super.width = value;
        this.x = - (width/2);
    }

    override public function set height(value:Number):void {
        super.height = value;
        this.y = - (height/2);
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        graphics.lineStyle(2, 0x333333);
        graphics.beginFill(0x660000);
        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
        graphics.endFill();
        graphics.lineStyle(2, 0xffffff);
        graphics.drawCircle(unscaledWidth/2, unscaledHeight/2, 5);
    }
}
}

谢谢！德里克

【问题讨论】：

+1 用于提供可运行的样本。尽管您描述的行为是我所期望的。我认为位图是在引擎盖下创建并用于旋转的；所以位图越小，我希望处理的结果就越“清晰”。 [但是，ActionScript 图像处理不是我的专业领域，所以我可能是错的]
谢谢！对我来说，这似乎更像是一个隐蔽的舍入问题，因为组件在更高的比例下会干净地旋转。真正奇怪的部分是（至少在我的实际应用程序中）当比例变得非常小时时，每次更改旋转时，底层矩阵都不会改变。当矩阵确实得到更新时，屏幕上的对象最终会显示旋转，这会导致旋转的“棘轮”外观。
具体来说，当您将比例缩小到大约 0.0003 或更低时，该行为开始发生。旋转是不平稳的，并且似乎也会间歇性地影响缩放。

标签： apache-flex actionscript rotation scale

【解决方案1】：

我认为这可以正式称为错误。如果我计算转换的矩阵而不是设置 component.scale() 和 component.rotation() 结果是正确的。我最好的猜测是 Flex 设置器下面的代码中的某处存在舍入错误（我单步执行了所有 Flex 代码，没有发生任何奇怪的事情）。所以简短的回答：

代替：

component.scaleX = component.scaleY = _scale;
component.rotation = _rotation;

使用

var matrix:Matrix = new Matrix();
matrix.scale(_scale, _scale);
matrix.rotate(_rotation * Math.PI / 180);
component.transform.matrix = matrix;

希望对您有所帮助！德里克

【讨论】：