Question Can I map a div according to a UI element in Unity?

@brendanduncan_u3d

In Unity, I have a canvas with a button for example. This button has a certain size and is positioned somewhere on the screen. On the javascript side, can I make a div that has the same size of the button, as is positioned at the same place?

Effectively, I want a transparent div overlay(on top of the button in Unity or the button in Unity can be on top of it, doesn't matter) that matches the size and position of the button in Unity(or any other UI element, button was just an example, but it's an UI element with a rectangular shape if it helps).

I think there's probably a trivial formula to map the position and size of a rectangular UI element to the correspondent div element . Thank you for your time!

 

It doesn't work, I can't position the div at the exact same place the UI element is. The div is also slightly bigger...

 

Yes I copied the rect transform values like this:
style="width: 369.06px; height: 128.79px; left: 328.47px; top: 203.605px; position: absolute; ">

The width and height make the div slightly bigger than the UI element, which wouldn't be so bad if the left and top positions wasn't too off. Maybe it makes a difference depending on the canvas scaler? I'm using constant pixel size.

 

@brendanduncan_u3d please help I am using the getscreencoordinates method. On the jslib, I'm using this

Code (CSharp):

1. div.style.transform = "translate(-50%, -50%)";
2.         div.style.width = width / window.devicePixelRatio + "px";
3.         div.style.height = height / window.devicePixelRatio + "px";
4.         div.style.left = (x + canvas.getBoundingClientRect().x * 2) / window.devicePixelRatio + "px";
5.         div.style.bottom = (canvas.getBoundingClientRect().y / 2 + y) / window.devicePixelRatio + "px";
6.         div.style.position = "absolute";

It's almost working. The div is always shifted in relation to the UI element though, and I am not sure what I'm missing to take into account. I checked the getBoundingClientRect of the body and the html tag as well, but there is no margin or padding or anything. The reason I multiply by 2 on left and divide by 2 on bottom is because there's the unity canvas and unity container with the same x and y values, so there's a factor of 2 there.

The width and height I got them right, just by dividing by the devicePixelRatio.

I suppose what's missing here is to take into account the canvas scaler. If I use "scale with screen size" the shift is different than when I use "constant pixel size" for example. What am I missing here? I'm almost there.

 

Solved the issue, I placed the div as a child of the unity container instead of the body, and now it's working as expected. Although I don't understand why, since based on the calculations it should be the same thing! CSS being CSS ;_;.

 

FYR
WebGLInput was calculation the world coordinates from UI element

and pass to jslib like ↓
https://github.com/kou-yeung/WebGLI...s/WebGLSupport/WebGLInput/WebGLInput.jslib#L8

and calculation the scale by container & canvas.