+ 10

JavaScript event touch coordinates weird when zooming in

I have found that when someone zooms in on a web page*, and then touches an element, the touch x and y positions are rather strange. Because I’m drawing the buttons on a canvas, I need to know exactly where the x and y are so I can detect if a button has been pressed. I want to find the coordinates, relative to the top-left of the screen, and multiplied by how much the user is zoomed in. (Basically, I want the x and y so if I put a red dot on the canvas at that position, the red dot would be exactly where I pressed.) Thanks for your help in advance. * Tested on iOS 12.2

21st Apr 2019, 11:33 PM
Rowsej
Rowsej - avatar
14 Answers
+ 8
[user id=10057565]Juan David Padilla Diaz[/user] How much do you zoom in?
22nd Apr 2019, 12:27 AM
Rowsej
Rowsej - avatar
+ 7
[user id=10057565]Juan David Padilla Diaz[/user] Ok! Thanks!
23rd Apr 2019, 5:41 AM
Rowsej
Rowsej - avatar
+ 6
[user id=10057565]Juan David Padilla Diaz[/user] I’m drawing the buttons on a canvas, and I need the touch position to determine whether or not the client pressed in the area for the button. I have a touch event, but when I zoom in on the web page, the event x and y are beyond my understanding. You can see it happening at https://walkworld.glitch.me, by zooming in using two fingers, then trying to press the buttons.
22nd Apr 2019, 12:06 AM
Rowsej
Rowsej - avatar
+ 6
[user id=10057565]Juan David Padilla Diaz[/user] Are you using iOS or Android?
22nd Apr 2019, 12:12 AM
Rowsej
Rowsej - avatar
+ 6
[user id=10057565]Juan David Padilla Diaz[/user] I’m using iOS, so Android must not have this issue. I’m afraid that because you have not encounted this issue yourself, you cannot help me solve this problem.
22nd Apr 2019, 12:49 AM
Rowsej
Rowsej - avatar
+ 6
[user id=10057565]Juan David Padilla Diaz[/user] Here is the link to the screen recording: https://cdn.glitch.com/d1dd1efd-a32e-4ce6-b747-b2ed5d10914e%2F591F0A5B-4C9B-49D7-AF74-2FE8A52CEB7D.MP4?1555899052940 Note that you can’t see where I’m pressing, both times I’m pressing the Info button.
22nd Apr 2019, 2:12 AM
Rowsej
Rowsej - avatar
+ 2
Rowsej actually when I zoom in the button works, I think this is a problem in design because js is doing its job very well, you can try positioning the buttons. Other options is to disable the zoom in your game
22nd Apr 2019, 12:11 AM
Juan David Padilla Diaz
Juan David Padilla Diaz - avatar
+ 1
Correct me if I'm wrong. I understood that you want to know if a button was pressed? To do that you can use an event to detect it, but, if you want to know where did the user click on etc you should use touch events, I have a code that does that actually
22nd Apr 2019, 12:01 AM
Juan David Padilla Diaz
Juan David Padilla Diaz - avatar
+ 1
Rowsej give me few mins to search the code that does what you want
22nd Apr 2019, 12:02 AM
Juan David Padilla Diaz
Juan David Padilla Diaz - avatar
+ 1
Android
22nd Apr 2019, 12:12 AM
Juan David Padilla Diaz
Juan David Padilla Diaz - avatar
+ 1
All what I could
22nd Apr 2019, 12:29 AM
Juan David Padilla Diaz
Juan David Padilla Diaz - avatar
+ 1
Rowsej you can try to record what your problem is about you I can see and maybe help you to solve it
22nd Apr 2019, 1:10 AM
Juan David Padilla Diaz
Juan David Padilla Diaz - avatar
+ 1
Rowsej hey I already saw the video and now I understand what's happening, I'll think on a solution for this, but I'll be tomorrow, it's late for me right now
23rd Apr 2019, 1:34 AM
Juan David Padilla Diaz
Juan David Padilla Diaz - avatar
+ 1
I love how no one has really answered
21st Sep 2022, 3:32 PM
Raheray
Raheray - avatar