actionscript - Scaling Flex object causes rotation to act strangely -

actionscript - Scaling Flex object causes rotation to act strangely -

when have object in flex container (absolute positioning) , set scale value low, rotate it, rotation gets 'choppier' scale decreases. i'm including code reproduces problem. can nail 'up arrow' scale downwards object ('down' scale up) , 'page up' increment size of object can still see it. after scaling down, can utilize 'left' , 'right' rotate it. notice when object not scaled downwards rotates cleanly, if scale object way downwards (while increasing size of object can still see it), rotation gets choppy. ideas?

<?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>

code 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); } } }

thanks! derek

i think can officially called bug. if calculate matrix transformation rather setting component.scale() , component.rotation() results correct. best guess there rounding errors somewhere in code underneath flex setters (i stepped through flex code , nil weird going on). short answer:

instead of:

component.scalex = component.scaley = _scale; component.rotation = _rotation;

use

var matrix:matrix = new matrix(); matrix.scale(_scale, _scale); matrix.rotate(_rotation * math.pi / 180); component.transform.matrix = matrix;

hope helps! derek

flex actionscript rotation scale