You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@royale.apache.org by CapitanoG76 <ca...@gmail.com> on 2022/10/02 23:31:41 UTC
UIComponent and transformation matrix
Hello,
I am porting a Flex application into Royale in order to transpile to
Javascript.
The application had some graphical elements which extended UIComponent and
were added as children to an mx.containers.Canvas.
I was using UIComponent.transform.matrix to rotate the elements, however in
Royale UIComponent does not have the transform property anymore.
Is there any way I can apply rotation/translation to my elements? I'd need
to write code similar to
var m:Matrix = new Matrix();
m.rotate(angle);
this.transform.matrix = m;
Thanks,
Marco
Re: UIComponent and transformation matrix
Posted by Harbs <ha...@gmail.com>.
There’s no examples that In can see, but here’s how it’s used:
1. The component should implement ITransformHost
2. The component needs a TransformModel bead.
3. The component needs a TransformBead. Royale has two TransformBeads. One is for svg and the other is for HTML elements. Make sure you use the correct one, or create your own which does what you need.
4. The transformMatrix getters and setters in the component should proxy the transform model like this:
public function get transformMatrix():Matrix
{
return _transformModel.matrix;
}
public function set transformMatrix(value:Matrix):void
{
_transformModel.matrix = value;
}
If you have those 4 items done, setting the transformMatrix will correctly transform your view. so basically instead of
>> this.transform.matrix = m;
You’d use this.transformMatrix = m;
HTH,
Harbs
> On Oct 3, 2022, at 5:46 PM, CapitanoG76 <ca...@gmail.com> wrote:
>
> Thanks... I would be very interested in learning how to apply transformation beads. Could not find an example
>
> On Mon, 3 Oct 2022 at 13:43, Gabe Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
> We also now have transformation beads. I’m not at my computer now to find an example of how that works, but you I think there might be an example. Yishay should be able to explain as well. I think he did that implementation.
>
>> On 3 Oct 2022, at 2:32, CapitanoG76 <capitanog@gmail.com <ma...@gmail.com>> wrote:
>>
>>
>> Hello,
>>
>> I am porting a Flex application into Royale in order to transpile to Javascript.
>>
>> The application had some graphical elements which extended UIComponent and were added as children to an mx.containers.Canvas.
>> I was using UIComponent.transform.matrix to rotate the elements, however in Royale UIComponent does not have the transform property anymore.
>>
>> Is there any way I can apply rotation/translation to my elements? I'd need to write code similar to
>>
>> var m:Matrix = new Matrix();
>> m.rotate(angle);
>> this.transform.matrix = m;
>>
>> Thanks,
>> Marco
Re: UIComponent and transformation matrix
Posted by CapitanoG76 <ca...@gmail.com>.
Thanks... I would be very interested in learning how to apply
transformation beads. Could not find an example
On Mon, 3 Oct 2022 at 13:43, Gabe Harbs <ha...@gmail.com> wrote:
> We also now have transformation beads. I’m not at my computer now to find
> an example of how that works, but you I think there might be an example.
> Yishay should be able to explain as well. I think he did that
> implementation.
>
> On 3 Oct 2022, at 2:32, CapitanoG76 <ca...@gmail.com> wrote:
>
>
> Hello,
>
> I am porting a Flex application into Royale in order to transpile to
> Javascript.
>
> The application had some graphical elements which extended UIComponent and
> were added as children to an mx.containers.Canvas.
> I was using UIComponent.transform.matrix to rotate the elements, however
> in Royale UIComponent does not have the transform property anymore.
>
> Is there any way I can apply rotation/translation to my elements? I'd need
> to write code similar to
>
> var m:Matrix = new Matrix();
> m.rotate(angle);
> this.transform.matrix = m;
>
> Thanks,
> Marco
>
>
Re: UIComponent and transformation matrix
Posted by Gabe Harbs <ha...@gmail.com>.
We also now have transformation beads. I’m not at my computer now to find an example of how that works, but you I think there might be an example. Yishay should be able to explain as well. I think he did that implementation.
> On 3 Oct 2022, at 2:32, CapitanoG76 <ca...@gmail.com> wrote:
>
>
> Hello,
>
> I am porting a Flex application into Royale in order to transpile to Javascript.
>
> The application had some graphical elements which extended UIComponent and were added as children to an mx.containers.Canvas.
> I was using UIComponent.transform.matrix to rotate the elements, however in Royale UIComponent does not have the transform property anymore.
>
> Is there any way I can apply rotation/translation to my elements? I'd need to write code similar to
>
> var m:Matrix = new Matrix();
> m.rotate(angle);
> this.transform.matrix = m;
>
> Thanks,
> Marco
RE: [Non-DoD Source] UIComponent and transformation matrix
Posted by Kessler CTR Mark J via users <us...@royale.apache.org>.
That's up to how you want to implement it. Since we (our corporate team, not the Royale project) have gotten rid of our old Flex backwards compatibility, we were able to completely offloaded all styles, transitions, effects to CSS. The native ones in the web browser are much better than the ones we used in flex IMO. Royale still has to end up with the browsers features / limitations in the long run if you target web, so we shortcut the process this way.
Just my 2c
-Mark K
-----Original Message-----
From: CapitanoG76 <ca...@gmail.com>
Sent: Monday, October 3, 2022 10:45
To: users@royale.apache.org; Kessler CTR Mark J <ma...@usmc.mil>
Subject: Re: [Non-DoD Source] UIComponent and transformation matrix
The rotation is dynamically applied with different angles while the user clicks and drags the mouse button, would CSS still be suitable for that use case?
On Mon, 3 Oct 2022 at 13:36, Kessler CTR Mark J via users <users@royale.apache.org <ma...@royale.apache.org> > wrote:
One benefit of being the JS environment is the ability to assign external CSS which can also cover transforms.
-Mark K
-----Original Message-----
From: CapitanoG76 <capitanog@gmail.com <ma...@gmail.com> >
Sent: Sunday, October 2, 2022 19:32
To: users@royale.apache.org <ma...@royale.apache.org>
Subject: [Non-DoD Source] UIComponent and transformation matrix
Hello,
I am porting a Flex application into Royale in order to transpile to Javascript.
The application had some graphical elements which extended UIComponent and were added as children to an mx.containers.Canvas.
I was using UIComponent.transform.matrix to rotate the elements, however in Royale UIComponent does not have the transform property anymore.
Is there any way I can apply rotation/translation to my elements? I'd need to write code similar to
var m:Matrix = new Matrix();
m.rotate(angle);
this.transform.matrix = m;
Thanks,
Marco
Re: [Non-DoD Source] UIComponent and transformation matrix
Posted by CapitanoG76 <ca...@gmail.com>.
The rotation is dynamically applied with different angles while the user
clicks and drags the mouse button, would CSS still be suitable for that use
case?
On Mon, 3 Oct 2022 at 13:36, Kessler CTR Mark J via users <
users@royale.apache.org> wrote:
> One benefit of being the JS environment is the ability to assign external
> CSS which can also cover transforms.
>
> -Mark K
>
> -----Original Message-----
> From: CapitanoG76 <ca...@gmail.com>
> Sent: Sunday, October 2, 2022 19:32
> To: users@royale.apache.org
> Subject: [Non-DoD Source] UIComponent and transformation matrix
>
> Hello,
>
> I am porting a Flex application into Royale in order to transpile to
> Javascript.
>
> The application had some graphical elements which extended UIComponent and
> were added as children to an mx.containers.Canvas.
> I was using UIComponent.transform.matrix to rotate the elements, however
> in Royale UIComponent does not have the transform property anymore.
>
> Is there any way I can apply rotation/translation to my elements? I'd need
> to write code similar to
>
> var m:Matrix = new Matrix();
> m.rotate(angle);
> this.transform.matrix = m;
>
>
> Thanks,
> Marco
>
RE: [Non-DoD Source] UIComponent and transformation matrix
Posted by Kessler CTR Mark J via users <us...@royale.apache.org>.
One benefit of being the JS environment is the ability to assign external CSS which can also cover transforms.
-Mark K
-----Original Message-----
From: CapitanoG76 <ca...@gmail.com>
Sent: Sunday, October 2, 2022 19:32
To: users@royale.apache.org
Subject: [Non-DoD Source] UIComponent and transformation matrix
Hello,
I am porting a Flex application into Royale in order to transpile to Javascript.
The application had some graphical elements which extended UIComponent and were added as children to an mx.containers.Canvas.
I was using UIComponent.transform.matrix to rotate the elements, however in Royale UIComponent does not have the transform property anymore.
Is there any way I can apply rotation/translation to my elements? I'd need to write code similar to
var m:Matrix = new Matrix();
m.rotate(angle);
this.transform.matrix = m;
Thanks,
Marco
Re: UIComponent and transformation matrix
Posted by CapitanoG76 <ca...@gmail.com>.
Ok, "this.rotation" compiles. Since the application used the rotation
matrix to calculate the new coordinates of some intersection points,
I think I'll probably have to construct a rotation matrix from the angle.
Otherwise, I wanted to try to use AdvancedLayoutFeatures, but could not
find an example on how to integrate it with my UIComponent
On Mon, 3 Oct 2022 at 02:40, Greg Dove <gr...@gmail.com> wrote:
>
> Assuming the angle is in radians, you might be able to simply use:
>
> this.rotation = Math.round(angle * 180/Math.PI);
>
> otherwise you could try setting this.element.style.transform to a matrix
> string, something like:
>
> this.element.style.transform
> ='matrix('+m.a+','+m.b+','+m.c+','+m.d+','+m.tx+','+m.ty+')';
>
> you probably would also need to set:
> this.element.style.transformOrigin = '0 0';
> in this latter case.
>
> This might help, but probably the getter values for x,y, width and height
> could be inconsistent with the results from the original native flash api
> that flex uses.
>
>
>
>
> On Mon, Oct 3, 2022 at 12:32 PM CapitanoG76 <ca...@gmail.com> wrote:
>
>> Hello,
>>
>> I am porting a Flex application into Royale in order to transpile to
>> Javascript.
>>
>> The application had some graphical elements which extended UIComponent
>> and were added as children to an mx.containers.Canvas.
>> I was using UIComponent.transform.matrix to rotate the elements, however
>> in Royale UIComponent does not have the transform property anymore.
>>
>> Is there any way I can apply rotation/translation to my elements? I'd
>> need to write code similar to
>>
>> var m:Matrix = new Matrix();
>> m.rotate(angle);
>> this.transform.matrix = m;
>>
>> Thanks,
>> Marco
>>
>
Re: UIComponent and transformation matrix
Posted by Greg Dove <gr...@gmail.com>.
Assuming the angle is in radians, you might be able to simply use:
this.rotation = Math.round(angle * 180/Math.PI);
otherwise you could try setting this.element.style.transform to a matrix
string, something like:
this.element.style.transform
='matrix('+m.a+','+m.b+','+m.c+','+m.d+','+m.tx+','+m.ty+')';
you probably would also need to set:
this.element.style.transformOrigin = '0 0';
in this latter case.
This might help, but probably the getter values for x,y, width and height
could be inconsistent with the results from the original native flash api
that flex uses.
On Mon, Oct 3, 2022 at 12:32 PM CapitanoG76 <ca...@gmail.com> wrote:
> Hello,
>
> I am porting a Flex application into Royale in order to transpile to
> Javascript.
>
> The application had some graphical elements which extended UIComponent and
> were added as children to an mx.containers.Canvas.
> I was using UIComponent.transform.matrix to rotate the elements, however
> in Royale UIComponent does not have the transform property anymore.
>
> Is there any way I can apply rotation/translation to my elements? I'd need
> to write code similar to
>
> var m:Matrix = new Matrix();
> m.rotate(angle);
> this.transform.matrix = m;
>
> Thanks,
> Marco
>