Jump to content

Question about scaling and rotating at the same time


PizzaLYJ
 Share

Recommended Posts

Hi everyone,

When I let a Canvas2D primitive to scaling and rotating at the same time, the result of primitive performing is unexpected for me.

Like the below code (http://babylonjs-playground.com/#OWCCR#27):

    let rectGreen = new BABYLON.Rectangle2D({ 
        parent: canvas2d, 
        id: "rectGreen", 
        width: 100, 
        height: 100,
        rotation: Math.PI * 1 / 4,
        marginAlignment: "h: center, v: center",
        fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(0, 1, 0, 1))
    });

    let rectRed = new BABYLON.Rectangle2D({ 
        parent: canvas2d, 
        id: "rectRed", 
        width: 200, 
        height: 200,
        scale: 0.5,
        rotation: Math.PI * 1 / 4,
        marginAlignment: "h: center, v: center",
        fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(1, 0, 0, 1))
    });

I want rectRed to perform like rectGreen.

What concept of computer graphics I am miss?

Thanks.

 

Link to comment
Share on other sites

On 12/17/2016 at 6:45 AM, PizzaLYJ said:

What concept of computer graphics I am miss?

Thanks.

 

Hmmm, I think the concept you miss is: there's a bug! :D

I'm quite surprise, because this is a very popular concept, at least for me!

Joking aside, I've made few tests and the only explanation I can think of is there's a bug because I apply scaling after rotation while computing the matrix. Because your red red is rotated like PI/8 with a 1/2 Scale instead of PI/4. I've tried with a scale of 1/10 and looks like the same pattern is reproduced...

I will fix the bug tomorrow and will let you know about it when it's done.

Link to comment
Share on other sites

Ok, the bug is fixed.

But please not that positioning/alignment doesn't take into consideration the scale when the computing is done, so your 0.5 scaled rect won't be perfectly centered.

I wait of DeltaKosh's point of view on something and I release a new preview version, I will let you know.

Link to comment
Share on other sites

23 hours ago, Wingnut said:

@Nockawa - Shouldn't rectRed and rectGreen be same size? 

200x200 scaled 0.5  == 100x100 scaled 1.0, yes?  *shrug* 

Damn....I was so focused on the rotation I didn't even noticed...scaling is applied twice for a reason I already know and I now understand better why the code were the way it was... :'(
I've just fixed it, you will notice (when the PG will be updated, for now only the preview build is updated) that the red rect's position is not the same as the green's one, it's because Positioning/Alignment is not considering scale when the computation is made, so the red rectangle is considered to be 200 wide when centered, that's why it's 100px translated to the left & bottom.

I don't know if considering scaling on positioning/alignement would be a good thing, I couldn't make a clear decision so I used the easiest way for me to code, which is the behavior you have right now.

@Wingnut thank you for noticing and reporting!

Link to comment
Share on other sites

@Nockawa i don't look at github how you do it, but in css always the last transformation is valid.

@PizzaLYJ
make a group https://doc.babylonjs.com/overviews/Canvas2D_Overview_Architecture#group2d

will make you life easier

native (pseudo) code
<canvas><div id="one"><div id="two>content</div></div> </canvas> document.getElementById('one').children[0] will give you div two

transformation vec2(1,1) div one
transfromation vec2(0,1) div two

the vec2(0,1) is valid for both elements.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...