flex 3 component using x y as center, not topleft

Question

Hi,

How can I extend components like buttons to use x and y value as the center of the component, not the top left?

Thanks,

Jean

Answer 1

Well, you could write a translator function that takes a control, x, and y, and gives back the center Point:

Xc = (Control.x + (Control.width / 2))
Yc = (Control.y + (Control.height / 2))
return new Point(Xc,Yc)

Then just use your translator to set the position anytime you would otherwise use x and y.

Answer 2

It's pretty easy in Flex 4 :). They have a transformAround method in the UIComponent, that allows you to transform the position/scale/rotation of a component around any arbitrary pivot. So you could do this:

override public function set x(value:Number):void
{
    var pivot:Vector3D = new Vector3D(this.width/2, this.height/2, 0);
    var translation:Vector3D = new Vector3D(value, this.y, this.z);
    transformAround(pivot, null /* scale vector */, null /* rotation vector */, translation);
}

You could customize/optimize that, but that's the jist :).

If you're using Flex 3, then I'd look into how they did that. It's pretty hardcore, lots of Matrix/Matrix3D stuff.