I'm making a module for Framer that does basically this: http://fian.my.id/Waves/#examples
There's only one thing i can't figure out. I can't seem to track the position of the mouse within the layer properly. I tried event.mouseX and Y but it gives back the position of the mouse within the entire frame. Any idea how to solve this?
What values do you ideally want returned?
The layer i want it to work in is width: 496, height:848. Ideally i would want it to return something between x: 0 - 496, y: 0 - 848 when i click the layer.
Could you do something like:newX = event.mouseX - layer.X newY = event.mouseY - layer.Y ?
mm that doesn't seem to work either. if in some way i could get the height and width of the Framer background, i could calculate it with the height and width of the layer. Any idea if i could get that somehow?
I'm struggling with this one too. Although I can get the Viewers dimension, and the device dimension, I don't believe there's a way to get the dimension and position of the current stimulated device screen?
Okay i seemed to have figured something out. Though this only works when zoom = 100%. I created the following variable: mouseX = event.clientX - ((window.innerWidth/2) - (((Screen.width*Framer.Defaults.DeviceView.deviceScale) /2) - layer.x)) - (198 * Framer.Defaults.DeviceView.deviceScale). I did the same for mouseY, and it doesn't matter how big the layer is or where it's positioned, it works! i hope to figure out the zooming and then i can share the module with you guys. Thanks for thinking with me! :)
I made a fun one when exploring this. Only catch is that you must turn your speakers up to 11 when previewing. http://share.framerjs.com/4uhy0qmif30g/
Also note that you have to hack a bit to make it work on mobile.
awesome! this one is great :)
Feature request: a property of Canvas for renderingX, renderingY, renderingWidth and RenderingHeight, or some such :)