縮放Flex對象會導致旋轉奇怪

當我在Flex容器（絕對定位）中有一個對象並將其縮放比例設置得非常低時，旋轉它，旋轉會隨着縮放比例的減小而變得更「分散」。我包含重現問題的代碼。您可以點擊'向上箭頭'來縮小對象（向下縮放）和'向上翻頁'以增加對象的大小，以便您仍然可以看到它。縮小後，您可以使用'左'和'右'來旋轉它。請注意，當對象未縮小時，它會乾淨地旋轉，但如果縮小對象的方向（同時增加對象的大小以便仍然可以看到它），則旋轉會變得不連貫。有任何想法嗎？縮放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); 
    } 
} 
}

謝謝！ Derek

來源

2013-02-21 Derek Adams

+1用於提供可運行樣本。雖然你描述的行爲是我所期望的。我認爲位圖創建並在引擎蓋下用於旋轉;所以位圖越小，我認爲處理結果就越「清晰」。 [但是，ActionScript圖像處理不是我的專業領域，所以我可能會錯] – JeffryHouser 2013-02-21 19:09:39

謝謝！對我來說，這看起來更像是一個封面下的圓形問題，因爲組件在更高的範圍內旋轉幹淨。真正奇怪的部分是（至少在我的真實應用中），當縮放變得非常小時，每次旋轉改變時，底層矩陣都不會改變。當矩陣確實被更新時，屏幕上的對象最終顯示旋轉，從而導致「ra齒」旋轉。 – 2013-02-21 19:49:53

具體而言，當您將縮放比例降至.0003或更低時，行爲開始發生。旋轉是生澀的，似乎也間歇性地影響縮放比例。 – 2013-02-21 19:56:56

我認爲這可以正式稱爲一個錯誤。如果我計算轉換的矩陣而不是設置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;

希望幫助！ Derek

來源

2013-02-22 15:04:10

縮放Flex對象會導致旋轉奇怪

回答

相關問題