如何在JustPy中获取图片上点击像素的位置？

JustPy默认的click/click__out事件确实不会携带鼠标坐标数据，要实现需求，需要通过自定义JavaScript事件逻辑来获取坐标，并传递给Python后端处理函数。

解决方案步骤： #

• 给图片组件添加自定义的点击事件处理脚本，在前端JS中计算点击位置相对于图片左上角的偏移量
• 将计算得到的坐标数据通过事件消息发送给Python端
• 在Python的事件处理函数中读取并使用这些坐标

修改后的完整代码： #

import justpy as jp

def img_click(self, msg):
    # 接收前端传来的相对图片的坐标
    img_x = msg.get('img_x', 0)
    img_y = msg.get('img_y', 0)
    print(f"点击位置相对于图片左上角：X={img_x}px，Y={img_y}px")
    # 若图片存在CSS缩放，可结合原始尺寸与显示尺寸计算对应原始图片的像素位置
    # 示例：缩放比例 = 原始宽度 / 显示宽度，原始像素X = img_x * 缩放比例

def event_demo1():
    wp = jp.WebPage()
    wp.debug = True
    
    d = jp.Div(text='Not clicked yet', a=wp, classes='w-48 text-xl m-2 p-1 bg-blue-500 text-white')
    
    img = jp.Img(
        src='https://www.python.org/static/community_logos/python-powered-h-140x182.png',
        a=wp,
        # 自定义JS点击事件，计算相对坐标并发送消息
        click="""
            const rect = this.getBoundingClientRect();
            const imgX = event.clientX - rect.left;
            const imgY = event.clientY - rect.top;
            $sendMessage({img_x: Math.round(imgX), img_y: Math.round(imgY)});
        """
    )
    img.on('click', img_click)
    
    return wp

jp.justpy(event_demo1)

关键说明： #

• 前端JS通过getBoundingClientRect()获取图片在视口中的位置，用event.clientX/clientY减去图片左上角的left/top值，得到相对图片的偏移量
• 借助$sendMessage()将坐标数据传递给Python处理函数，在msg字典中可直接取出img_x和img_y
• 若图片被CSS缩放（如手动设置width/height），需额外计算缩放比例，将相对坐标乘以比例后即可得到对应原始图片的像素位置

内容的提问来源于stack exchange，提问作者stupidstudent