Transparency problem with Canvas2D

[MasterK]

@Nabroski

create new canvas for canvas animation??

I think... it's.. devil...

[Nockawa]

The dispose issue and the pointerEvent for hidden canvas is supposed to be fixed in the latest version I just merged.

[MasterK]

1 hour ago, Nockawa said:

The dispose issue and the pointerEvent for hidden canvas is supposed to be fixed in the latest version I just merged.

I try new code. 

The dispose problem is solved.

But one canvas levelVisble = false, then other show canvas point event Invalid still not solved.

[Nockawa]

On 11/08/2016 at 7:26 AM, Nabroski said:

@MasterK

Hello here is an other approch to animate Canvas2D Element, i did it 3Weeks ago, on a other topic,
i have to think over it, and then dicede if its useful, for me it's never fail, on any browser.
 

minimal version:
http://www.babylonjs-playground.com/#23N1H9#10

redraw, hole thing at 60fps requestAnimationFrame/per Frame and it will drop performance to around to 25pfs so use it wisely 
http://www.babylonjs-playground.com/#23N1H9#9

I know its Nockawas baby, and he like to play with, i don't share this for any reason in the past.
When he is back, he will add all the babylonjs.GivemesoMeGold(true) functions.

Best
 

@Nabroski have you tried to use the animations property of a primitive to animate its properties? If yes, what are you lacking right now to achieve what you want? Thanks

PS: I wish that  the Canvas2d would be not only my baby but also the one of others, contributions will be more than welcome! And by the way I truly appreciate your contribution in this forum, thanks!

[Nockawa]

On 11/08/2016 at 11:32 AM, MasterK said:

I try new code. 

The dispose problem is solved.

But one canvas levelVisble = false, then other show canvas point event Invalid still not solved.

@MasterK

ScreenSpace Canvas were not designed to be overlapped so you will have these kind of behaviors concerning PointerEvent and you won't be able to change the rendering order. I don't plan to change it because as I told you I initially designed things to address needs like yours with a Canvas spanning the whole viewport (which you have when setting no position and no size) and using children Group2D the way you are using Canvas instances right now. You can reorder the Groups using the moveChild method (in your case called using the instance of the global Canvas) and I believe the PointerEvent will be more accurate to what you need.

This playground (be sure to hard refresh your web browser with CTRL-F5) http://babylonjs-playground.com/#Q8GEN will demonstrate a basic use of the TOPLEVELGROUP caching mode where four Group2d are acting like "four separates canvas" following your mindset. If you encounter issue with reorder or PointerEvent in this mode I will fix them right away.

[MasterK]

@Nockawa

one case:

if this menu is a group, when it's expended, it's ok. when it was folded. Does this red blank area under the group can be click?

Some times I want the under group also can receive click. 

[Nockawa]

1 hour ago, MasterK said:

@Nockawa

one case:

if this menu is a group, when it's expended, it's ok. when it was folded. Does this red blank area under the group can be click?

Some times I want the under group also can receive click. 

The expected behavior is the PointerEvent should be raised if you set it in the Group either with a relatedTarget property set to:

- the group itself if it's inside the red area you gave

- the button if it's inside it.

The most of the PointerEvent types are bubbling, so even if they are originated from a primitive deep down the hierarchy you should get them at a point in time.

Always make sure to check for relatedTarget to know when it's coming from.

[MasterK]

6 hours ago, Nockawa said:

The expected behavior is the PointerEvent should be raised if you set it in the Group either with a relatedTarget property set to:

- the group itself if it's inside the red area you gave

- the button if it's inside it.

The most of the PointerEvent types are bubbling, so even if they are originated from a primitive deep down the hierarchy you should get them at a point in time.

Always make sure to check for relatedTarget to know when it's coming from.

Actually, i dont understand clearly...

let's speak like code..

there are two group A, B.   A covers B.   A and B both add event listener.

I click cover area on A.  A receive the event. But B didn't.

And I want B can receive too. What should I do?

http://www.babylonjs-playground.com/#1CCIMC#7   click the cover area. the only r2 receive point event.

 

 

[Nockawa]

Actually you can't it was not designed to do that, imagine the number of event handlers that could be executed if I was supporting things like this. Like most of the GUI based lib, the event is only routed on the primitive on the top and then bubbled in all its parents.

Can you give me a Use Case which explains why you need that?

[MasterK]

@Nockawa

yes, that's a right theory.

But, the group maybe is not a visible primitive. I think it should be bubble~~~~~~~~um, now i think it's the perfect way~ you think about it~~~~.

Only things on group bubble to the top parent group. But if i directly click on the group but not any item of group. I think there should be at least an option for group to ignore receiving event ~~~~

i'm right. yeah.