Open jimmyfo opened 8 years ago
I believe the signature pad figures out what kind of device you're on and either adds touch events or mouse event to prevent doubling up. I'm not sure how to get around the mouse/touch switching.
The zooming, I don't know. Zooming works well on other tablets that I've tested.
We have a signature block that was setup by someone else and I have been tasked to look into an issue with zooming in on an Android phone. Zooming seems to be causing the draw area to move away from the 'signature box'. If there are other elements right below, then the seem to 'cover up' portions of the drawing area,
Ran into the same problem(bullet 2) as jimmyfo on a tablet using our implementation and the demo for requiring a drawn signature on a HP Tablet with IE 11. What I noticed is it only occurs if you zoom(using touch screen) and then scroll the window down. If you scroll back to the top again drawing a signature works again. Have you encountered this yet. I am guessing the drawLine method does not have the updated X, Y coordinates and is drawing the sig higher up.
Check out the following issue. It shows what we did to fix our problem with zooming on Chrome for Android. Our signature block would then end up off the bottom of the screen and you would have to scroll to see it.
Thanks Chris. I tried your solution but it did not work. My issue on the HP Tablet with ie11 seems to be that the offset value grows in size when you pinch zoom. So when the newX and newY are calculated the numbers are negative as the pageX and pageY are smaller than the offset values. The ipad solution seems to work perfectly as the signature pad draws perfectly when the canvas is zoomed in/out. Will keep digging and post my findings.
I have found a solution that works for me and have tested it on a HP tablet with ie11, Ipad and windows desktop ie11 and all seem to work with this change. I altered the drawLine method as follows: // newX = Math.floor(e.pageX - offset.left) // newY = Math.floor(e.pageY - offset.top) newX = Math.floor(e.offsetX) newY = Math.floor(e.offsetY)
Now when I zoom after scrolling the signature is not off the canvas and the coordinates are correct.
Do you do any type of browser sniffing or do you use this method for everything? Have you been able to do any testing on Android devices with this method?
This is on an ASUS Windows 8.1. tablet with touch. Two issues noted:
These issues are Chrome 49.0.2623.87 m and IE 11.0.9600.17905.