ScaleTransform

7 views
Skip to first unread message

Wjm

unread,
Jul 16, 2008, 10:08:23 AM7/16/08
to Degrafa
Hello,

Is it possible to scale a Surface or a GeometricGroup with
ScaleTransform ?

If Yes can you provide an actionscript exemple ?

Thank you in advance for your answers.

gwd

unread,
Jul 19, 2008, 6:45:11 PM7/19/08
to Degrafa
Wjm,

I just replied to a similar question related to RotateTransform.
You cannot currently do this using a Degrafa transform such as
ScaleTransform (assuming you are using the development branch 'origin'
where work on Degrafa transforms is underway). You can use scaleX and
scaleY properties directly to scale the GeometryGroup as it is a
DisplayObject.

-Greg

Wjm

unread,
Jul 23, 2008, 4:31:20 AM7/23/08
to Degrafa
Greg,

Thank you for your answer, in fact what I'm trying to do is to scal a
geometry group and the paths or polygons that it contain from the
barrycenter, like it's possible to do with a ScaleTransform. Can you
tel me how to do that with surface/GeometryGroup ?

gwd

unread,
Jul 23, 2008, 4:00:34 PM7/23/08
to Degrafa
I assume you are calculating the barycenter as the average of all your
coords? (the barycenter is not necessarily the center of the object's
bounds which is one of the registration point settings for a Degrafa
transform)
On the DisplayObject itself... eg. the GeometryGroup you could, in
actionscript grab a copy of the transform.matrix property... which is
a flash.geom.Matrix, translate it so that the barycenter is at 0,0,
scale it and then translate it back and then reassign it to the
GeometryGroup. Something like:
//assuming you have a flash.geom.Point with the barycenter coords and
you GeometryGroup is called myGeomGroup:
var transMat:Matrix = myGeomGroup.transform.matrix;
transMat.translate(-barycenter.x,-barycenter.y);
transMat.scale(xscaler,yscaler);
transMat.translate(barycenter.x,barycenter.y);
myGeomGroup.transform.matrix=transMat;

Another way to perhaps use ScaleTransform would be to wrap all your
geometry items in a single GeometryComposition and use ScaleTransform
at that level. Something like...
<GeometryGroup id="myGeomGroup" >
<GeometryComposition>
<transform>
<ScaleTransform scaleX="1.5" scaleY="2" centerX="{barycenter.x}"
centerY="{barycenter.y}" />
</transform>
<Path..../>
<Polygon.../>
...etc
</GeometryComposition>
</GeometryGroup>

Hopefully one of those approaches will help with what you are seeking
to achieve. Let us know how you get on with that and which option
works best for you.
-Greg

eswat2

unread,
Jul 23, 2008, 8:18:22 PM7/23/08
to Degrafa
I used the scaleX and scaleY properties to implement zooming for
the map component i build recently;

<degrafa:GeometryGroup
id="mapLayer"
x="0"
y="0"
scaleX="{_scale}"
scaleY="{_scale}"
mouseChildren="true"
mouseMove="onMouseMove(event)"
mouseOut="onMouseOut(event)"
mouseUp="initSelected(event)"
>

Computing the magic numbers for _scale was interesting,
but it's not rocket science. Never even considered using
"transofrmations" to solve this problem, but mine was
fairly straight forward.

--
Richard Hess
Message has been deleted

Wjm

unread,
Aug 7, 2008, 7:15:23 AM8/7/08
to Degrafa
gwd,

first of all thank you for your answer.

The second solution seem to be a good solution, as it's resizing all
the paths/polygons as a single entity, that's what I was looking for,
but unfortunately it's not ok for me because I cant setup events on
paths/polygons, and I need to have events(rollover, rollout, click) on
each path/polygon, that's why I have added each path/polygon in a
geometrygroup.

The first solution is working, each paths/polygons are resizing from
the center, but from the center of each path/polygons not from the
center of the surface. In fact my path/polygon define countries in a
map, and with this solution I get gap between the countries when I
resize, so it's not what I want to display.

I want to have the map like a single entity for the resizing from the
middle, but also have the ability to have events on each countries.

If you have another Idea...

Thank you in advance

gwd

unread,
Aug 8, 2008, 5:33:39 AM8/8/08
to Degrafa
One of the interesting things about Degrafa transforms is that you can
define a transform separately and bind to it from anywhere as well as
things working through the parent inheritance chain that you would
expect. So a transform is not tied to a specific Geometry, but is used
by any geometry that references it at the rendering stage. The
approach that I outlined using a GeometryComposition was to permit
this to happen through inheritance, but I think you could do the same
thing by having each Geometry item in its separate GeometryGroup
reference the same transform.

So although I haven't tried it specifically... I would expect that you
can reference the single Transform from each of your geometry items in
the separate GeometryGroups, and so long as you did not manipulate the
x, y, scale etc on the GeometryGroup displayobject itself, then I
think that should work ok for what you describe. Like I said I haven't
actually tried that specifically but its what I would try as an
approach for what you describe. That should allow you to use the
events from the separate GeometryGroups... something like:

<ScaleTransform id="myScaler" scaleX="1.5" scaleY="2"
centerX="{barycenter.x}"
centerY="{barycenter.y}" />

<Surface>
<GeometryGroup id='path1" >
<Path transform="{myScaler}" data="..." stroke="{stroke1}" />
</GeometryGroup>
<GeometryGroup id='path2" >
<Path transform="{myScaler}" data="..." stroke="{stroke1}" />
</GeometryGroup>
</Surface>


Give that approach a try and let us know if it does what you want.
-Greg
Reply all
Reply to author
Forward
0 new messages