Hi! I've come across an old post regarding a scratch card simulation. I downloaded and played around with the file and wanted to ask a question about scaling my document with this feature.
I want to scale my layout within Hype proportionally to the page width and heigh, meaning constrain the layout size and fit it to the browser window width or heigh regardless of the device you're previewing on. The issue I'm having is when the document scales down, the canvas area that allows you to scratch gets reduced in size.
I assume the canvas is not scaling within Hypes scale properties reducing the scratch area, however I'm not proficient in JavaScript to claim that this is the issue. What I don't understand is why the cursor is then scratching in an off-centre manner preventing me from scratching on the edges of the canvas ('container layer') or towards the bottom of the layout. Note that this only occur on smaller screen sizes.
How can I fix this without changing my scaling options on the 'Wrapper' group layer?
My reason for these scaling properties is to display the layout on any screen size and still fill the entire layout with the scratch surface dynamically.
Any advice would be helpful please. I've attached the Hype file with the scaling I am using. scratch-example.hype.zip (352.1 KB)
When "zoom contents" is checked, this relies on using the CSS transform:scale on the group which scales everything inside like a bitmap. I suspect that the scratchpad code isn't taking this into account for its mouse location handling.
If you don't mind turning the zoom contents setting, you can then turn on flexible layout for the children elements individually. Basically just turn on all pins/sizing for the inner elements and then they'll still adjust in size, but do so using their width/height values instead of doing a scale transformation. It appears that the scratchpad code mostly handles this correctly, there are two caveats:
The initial size is wrong
When resizing the window, it takes scratchpad half a second to adjust, whereas Hype's elements adjust immediately. This momentarily reveals the item underneath.
I didn't look too deeply, but point #1 is probably just a timing issue; by moving the setup timeline action 1 frame later it seems to work for me. I personally don't think #2 is a big issue, but perhaps they have an API call to immediately update that you could use if the window size changes.
Amazing! Thank you so much. Tweaking the scaling options within Hype made a difference. It is a bit of a headache getting it right on all devices as I've also added a mobile layout which behaves completely different, but I've successfully managed to scale all screens and still have the scratch work.