Get coordinates of a click on image

[vaibhavpawar05]

I want to get the coordinates of a mouse click on an image element. These coordinates must be relative to the image. How can I do that?

[rjachuthan]

By any chance, were you able to do this?

[vaibhavpawar05]

No. I moved on to something else.

[masenf]

@rjachuthan here is a solution using custom code

Screen.Recording.2024-02-18.at.10.21.06.mov

import reflex as rx


class State(rx.State):
    coordinates: tuple[int, int] = (0, 0)

    def update_coordinates(self, offsetX, offsetY):
        self.coordinates = (int(offsetX), int(offsetY))


custom_handler = rx.vars.BaseVar(
    _var_name="ev => {const rect = ev.target.getBoundingClientRect(); %s} " % (
        rx.utils.format.format_event_chain(
            rx.EventChain(
                events=[
                    State.update_coordinates(
                        "${ev.clientX - Math.round(rect.left)}",
                        "${ev.clientY - Math.round(rect.top)}"
                    ),
                ],
            ),
        ),
    ),
    _var_type=rx.EventChain,
)


def index() -> rx.Component:
    return rx.center(
        rx.heading("Clicked At: ", State.coordinates.to_string()),
        rx.image(
            src="https://images.unsplash.com/photo-1707327956851-30a531b70cda?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            width="500px",
            on_click=custom_handler,
        ),
        flex_direction="column",
        height="100vh",
    )


app = rx.App()
app.add_page(index)

[rjachuthan]

Thank you so much. This gives me a starting point 😊