Jump to content

Canvas2D Questions


Recommended Posts

@Nockawa Hey, I have a few questions regarding Canvas2D:


1) I'd like to have callbacks for mouse over and mouse out of shape in a WorldSpaceCanvas2D.

Why are these events not triggered in this PG, yet trigger for PointerUp?


PointerEnter didn't work for me as well, PointerMove works but it's not what I want, it dispatches events while moving over the shape, I'd like an event to be dispatched only once on mouse over.


2) In this PG, is there a way to improve the quality of the text?



3) Is there a way to disable the interaction for the text in the latter PG so that it won't intercept events for the square below it?


4) In my project I have a ScreenSpaceCanvas2D for my 2D UI which needs to have interaction enabled. It blocks interaction for any WorldSpaceCanvas2D.

Is there away to make the invisible (0 transparency) area in the ScreenSpaceCanvas2D not intercept events without changing its size?

For instance, this image depicts my 2D UI. I need a ScreenSpaceCanvas2D the size of the whole screen, yet the elements can be positioned anywhere in that area, leaving a "blank" area where there're no elements. That "blank" area intercepts events.

The only solution I can think of is to create a ScreenSpaceCanvas2D per element, at the size of that element. Is there a better way?



5) Is there a plan to create a Circle2D class?

Link to comment
Share on other sites

1) this should work, maybe there was a regression lately, I'll check more in depth, but this PG:http://babylonjs-playground.com/#1BKDEO#22 is working and looks like I can get the over/out events, anyway, check this PG it may help you in the meantime.

2) the result can't be good if you're using a 4pt font. I've used a 12pt (the minimum acceptable I think) so I've set the unitScaleFactor to 45: http://www.babylonjs-playground.com/#1JIN1S#7

3) event are bubbling, you have to always check for the relatedTarget property to know where it comes from, that way you can ignore the text. otherwise you can set "isPickable: false" at text creation time it will disable interaction if I remember well.

4) really!? I thought the default behavior when the event would go through and also in 3D world and you had to set "skipNextObservable = true" in the event handler of the 2D Canvas to be sure it won't fallback in the 3D Scene, please make a quick PG that demonstrate the issue so I can debug it.

5) There's already an Ellipse2D prim, I think you can made circles with that! ;)

Link to comment
Share on other sites

1) That PG works for me to, I'm not sure what sets it apart from my PG.

2) I understand, thanks. Is there a way to center the objects more accurately? I made the background red in this PG so that it's easier to see:


3) isPickable: false does the job.

4) You're right, wrong analysis on my side. Clicking on an object works from most angles, but for some reason from some angles it doesn't (when there's nothing visually blocking the clicked object). Reproducing the whole thing in a PG would take ages, I need to isolate the issue.

Is there any way to set a global listener in bjs/canvas 2D so that I can see what's intercepting the click event?

5) Right :) I'll use it

Link to comment
Share on other sites

I suggest you to spend some time here: http://doc.babylonjs.com/overviews/Canvas2D_Home:) There's a lot of content.

1) try to understand what's different from yours

2) see the doc about positioning and some PG in the bottom of the overview home page also demonstrate it

4) it should be the way I told, if you set skipNextObservable, the 3D Scene shouldn't receive the pointer event, it was specifically designed for this purpose

you may want to take a look at attachControl's implementation to see how onPrePointerObservable and onPointerObservable are triggered. Canvas2D's architecture uses onPrePointerObservable, to get a change to cancel onPointerObservable if the user wants to.

Link to comment
Share on other sites

1) I'll check it more thoroughly, tomorrow hopefully

2) discussed on skype

4) It is as you said, though not perfect - with the issue I mentioned. I'll take a look at that as soon as I can (hopefully tomorrow as well).

6) *New* seldom there are thin lines around the borders of the  WorldSpaceCanvas2D as can be seen in the screenshot below. I don't see them most of the time, but from certain camera angles I do. Any idea what might cause this?


Link to comment
Share on other sites

1) I isolated the issue a little:


I commented the trackNode params for the sake of testing, though they don't seem to affect the result.

Change config to 1 and 2 to toggle between different configs, each dictates a different rectangle size. (camera is zoomed according to that size)

In config 1 (smaller version) PointerOver and PointerOut are never dispatched.

In config 2 (bigger version) PointerOver and PointerOut are dispatched when entering/leaving incorrect boundaries.

PointerUp is dispatched in both configs.

Link to comment
Share on other sites

ok, the bug is fixed, well, many bugs are:

  • sideOrientation setting is finally working, Mesh.DOUBLESIDE has now the expected behavior
  • pointerObservable is now working with unitScaleFactor
  • pointer enter/over is working for WorldSpaceCanvas

I've updated the preview build, PG will be update when @Deltakosh will be able to!

Link to comment
Share on other sites

I didn't reproduce yet in a PG (PG isn't updated yet anyway so it wouldn't matter), but I tested locally and it still has many problems:

It seldom works how it's supposed to, there are mostly bugs (probably all are symptoms of the same bug):

-Nothing is dispatched

-Out is dispatched before over

-wsc disappears after an event is dispatched


Locally I have columns of wscs (with trackNode in case that matters) and I mouse over/out those instance many times quickly, it helps reproduce bugs. Bugs seem to happen only in some of the wscs, from my experimenting so far it seems it has something to do with the distance of the wsc from the camera, but I may be wrong.

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.

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.


  • Recently Browsing   0 members

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