This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Tom Mudgett
Posted Jan 23 - Read on Facebook

Hi Everyone - Is there a way to create a layer at the exact point where I click my mouse? I've been trying to use event.clientX and event.clientY to the x and y positions but the layer is off by a couple of pixels. Any suggestions would be helpful. Thanks.

8 Comments

Joshua Tucker

Are you looking to create the layer from the left corner out from your mouse click, or centered on your click?

Tom Mudgett

centered

Joshua Tucker

Are you using the layer's midX/Y value, or just its X/Y value? Because you should be able to do something like:

clickLayer = new Layer
midX: event.clientX
midY: event.clientY

Tom Mudgett

Thanks, I think that helps, however I think the problem that I'm having is that the position of event.clientX and event.clientY aren't relative to the background. A new layer is created but it's still off.

Here's what I have:
bg= new BackgroundLayer

bg.on Events.Click, (event, layer) ->
clickLayer = new Layer
midX: event.clientX
midY: event.clientY

Joshua Tucker

This is true - clientX/Y accounts for the entire window, not just the device view. I am looking into this and will get back to you if I discover something. I've wanted to look into this for a while myself so we can investigate together! Good place to start is pouring through Framer's Github page. https://github.com/koenbok/framer. Some snippets of promise include DeviceView/ScreenView. It looks like we may need to do a little math to calculate where exactly clientX/Y translates to the device.

Jordan Robert Dobson

I use a helper method like this: http://cl.ly/ZIkN

Tom Mudgett

thanks Jordan Robert Dobson! I finally got it to work

Jordan Robert Dobson

Yep... see this comment from Koen as well: http://cl.ly/ZRnp

Read the entire post on Facebook