Início / coding / Perguntas / 79577035
Accepted
CameL
Asked: 2025-04-16 19:14:27 +0800 CST

como posso obter o nome do elemento svg quando clico nele no nicegui

  • 772

Tenho uma página NiceGUI com uma imagem SVG composta por dois elementos (um círculo e um quadrado). Preciso verificar qual elemento dessa imagem foi clicado quando a imagem SVG foi clicada, para que eu possa lidar com isso.

Quero que o evento "círculo clicado" seja acionado quando o círculo for clicado, e o evento "quadrado clicado" seja acionado quando o quadrado for clicado. Estou tentando implementar isso por meio de um manipulador, mas não sei o que escrever na função do manipulador. Estou anexando o código.

Meu método 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)

Meu método 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)

Obrigado a todos pela ajuda.

python

2 respostas

  1. Best Answer

    Se você quiser usar, JavaScriptvocê tem que usar o mesmo nome eventem

    (event) => { console.log(event.target) }

    Acho que você poderia usá-lo para emitir um evento personalizado com informações sobre qual objeto foi clicado

    emitEvent(`clicked_${event.tagerg.tagName}`)

    e deve enviar evento clicked_circleou clicked_rect(e talvez até mesmo clicked_svg) para Python e pode usá-lo para executar a função ui.on()em vez deelement_svg.on()

    ui.on('clicked_circle', handler=my_handler_for_circle)
ui.on('clicked_rect', handler=my_handler_for_rect)

    Você também pode usá-lo com parâmetros

    ui.on('clicked_circle', handler=lambda event:my_handler(event, "circle"))
ui.on('clicked_rect',   handler=lambda event:my_handler(event, "rect"))

    Talvez você possa até emitEventenviar alguma informação extra, mas seria necessário verificar isso na internet, pois nunca usei isso antes.

    ATUALIZAR:

    emitEventpode enviar também args(por exemplo, nome da tag clicada) e permite criar apenas um evento que enviará valores diferentes em argumentos

    emitEvent("clicked_svg", {target: event.target.tagName});

    e vai precisar apenas de umui.on()

    ui.on('clicked_svg', handler=on_click_svg)

    e precisará apenas de uma função

    def on_click_svg(event):
    print("--- clicked svg ---")
    print('event:', event)
    print('event.args["target"]:', event.args['target']) 
    if event.args['target'] == 'circle':
        print('>>> clicked circle <<<')
    if event.args['target'] == 'rect':
        print('>>> clicked rect <<<')

    Doc: Evento personalizado - NiceGUI

    Código funcional completo usado para testes.

    from nicegui import ui

def my_handler(event, target):
    print('--- my_handler ---')
    print('event:', event)
    print('event.args["target"]:', event.args['target']) 
    print('target:', target)

def on_click_svg(event):
    print("--- clicked svg ---")
    print('event:', event)
    print('event.args["target"]:', event.args['target']) 
    if event.args['target'] == 'circle':
        print('>>> clicked circle <<<')
    if event.args['target'] == 'rect':
        print('>>> clicked rect <<<')

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>
    ''')

    ui.on('clicked_circle', handler=lambda event:my_handler(event, 'circle'))
    ui.on('clicked_rect',   handler=lambda event:my_handler(event, 'rect'))
    ui.on('clicked_svg',    handler=on_click_svg)

    svg_element.on('click', js_handler='''(event) => { 
                   console.log(event.target.tagName); 
                   emitEvent(`clicked_${event.target.tagName}`, {target: event.target.tagName});
                   emitEvent("clicked_svg", {target: event.target.tagName});
                   }''')

ui.run(port = 8082)
    • 1

  2. Você pode usar um ui.interactive_image()com eventos de ponteiro integrados:

    ui.interactive_image(content='''
    <rect id="A" x="85" y="70" width="80" height="60" fill="none" stroke="red" pointer-events="all" cursor="pointer" />
    <rect id="B" x="180" y="70" width="80" height="60" fill="none" stroke="red" pointer-events="all" cursor="pointer" />
''').on('svg:pointerdown', lambda e: ui.notify(f'SVG clicked: {e.args}'))

    https://nicegui.io/documentation/interactive_image#svg_events Captura de tela

    Também pode ser usado sem imagem:

    ui.interactive_image(content='''
    <rect id="A" x="85" y="70" width="80" height="60" fill="none" stroke="red" pointer-events="all" cursor="pointer" />
    <rect id="B" x="180" y="70" width="80" height="60" fill="none" stroke="red" pointer-events="all" cursor="pointer" />
''', size=(400, 300)).classes('w-80 border').on('svg:pointerdown', lambda e: ui.notify(f'SVG clicked: {e.args}'))

    Captura de tela

    • 1

relate perguntas