主页 / user-9658075

CameL's questions

Martin Hope
CameL
Asked: 2025-04-16 19:14:27 +0800 CST
  • 6

我有一个 NiceGUI 页面，其中包含一个由两个元素（一个圆形和一个正方形）组成的 SVG 图像。我需要检查当点击该 SVG 图像时，点击的是该图像的哪个元素，以便进行处理。

我希望点击圆形时触发“圆形点击”事件，点击正方形时触发“正方形点击”事件。我正在尝试通过处理程序实现此操作，但不知道在处理程序函数中该写什么。我附上了代码。

我的方法1：

from nicegui import ui

def my_handler(event_args):
    print("Button clicked!")

with ui.row():
    svg_element = ui.html('''
        <svg width="200" height="200" style="border: 1px solid black;">
            <circle cx="50" cy="50" r="40" fill="red" class="clickable-circle"/>
            <rect x="100" y="10" width="80" height="80" fill="blue" class="clickable-square"/>
        </svg>
    ''')

    svg_element.on('click', js_handler='(click) => { console.log(event.target.clickable-circle); }')

ui.run(port = 8082)

我的方法2：

from nicegui import ui


def my_handler(event_args):
    element = event_args.sender
    # ???????


with ui.row():
    svg_element = ui.html('''
        <svg width="200" height="200" style="border: 1px solid black;">
            <circle cx="50" cy="50" r="40" fill="red" class="clickable-circle"/>
            <rect x="100" y="10" width="80" height="80" fill="blue" class="clickable-square"/>
        </svg>
    ''')

    svg_element.on('click', handler=my_handler)

ui.run(port=8082)

谢谢大家的帮助。

python