Canvasでon_hoverイベント2

単にマウスカーソルの座標値だけでは無く、Canvas内の要素上の
判断を付け加えます。

shapeの中でもCircleを利用したいです。
Canvas | Flet
shape自体でon_hoverイベントが利用出来ると楽なのですが、
残念ながらありません。
仕方が無いため、Canvasのon_hoverイベント内でshape上に有るか
どうかを判断させました。

# python using-flet
import flet as ft
import flet.canvas as cv
import math

def main(page: ft.Page):
    canvasWidth = 600
    canvasHeight = 600

    stroke_paint = ft.Paint(stroke_width=5, style=ft.PaintingStyle.STROKE)
    line_paint = ft.Paint(stroke_width=1, style=ft.PaintingStyle.STROKE)
    fill_paint = ft.Paint(style=ft.PaintingStyle.FILL, color=ft.colors.BLACK)

    def on_hover(e: ft.DragStartEvent):
        x=e.local_x-(canvasWidth*0.5)
        y=(e.local_y-(canvasHeight*0.5))*-1

        shapes = [s for s in canvas.shapes if isinstance(s, cv.Circle)]
        change_color(shapes, e.local_x, e.local_y)

        pos.value = f"{x},{y}"
        pos.update()

    def on_exit(e: ft.DragStartEvent):
        pos.value = "-"
        pos.update()

    def change_color(shapes, x, y):
        hoverShapes = []
        for shape in reversed(shapes):
            if math.sqrt((shape.x - x)*(shape.x - x) + (shape.y - y)*(shape.y - y)) < shape.radius:
                hoverShapes.append(shape)
            if shape.paint.color != ft.colors.BLACK:
                shape.paint.color = ft.colors.BLACK
            shape.update()

        for shape in hoverShapes:
            if shape.paint.color != ft.colors.RED:
                shape.paint.color = ft.colors.RED
            shape.update()

    gd = ft.GestureDetector(
        hover_interval=10,
        on_hover=on_hover,
        on_exit=on_exit,
    )

    canvas = cv.Canvas(
        [
            cv.Rect(0,0,canvasWidth,canvasHeight,10,stroke_paint),
            cv.Line(canvasWidth*0.5,0,canvasWidth*0.5,canvasHeight,line_paint),
            cv.Line(0,canvasHeight*0.5,canvasWidth,canvasHeight*0.5,line_paint),

            ft.Tooltip(
                message="This is tooltip",
                content=cv.Circle(400,200,30,fill_paint),
                padding=20,
                border_radius=10,
                text_style=ft.TextStyle(size=20, color=ft.colors.WHITE),
            )
        ],
        width=canvasWidth,
        height=canvasHeight,
        content=gd,
    )

    circles = [
        (120,130,30),
        (120,-130,50),
        (-120,-130,50),
        (-120,50,50),
    ]

    for c in circles:
        canvas.shapes.append(
            cv.Circle(
                x=c[0]+(canvasWidth*0.5),
                y=(c[1]*-1)+(canvasHeight*0.5),
                radius=canvasWidth/c[2],
                paint=fill_paint,
            )
        )

    pos = ft.Text(
        "-",
        size=30,
    )

    page.theme_mode = ft.ThemeMode.LIGHT
    page.add(
        ft.Row(
            controls=[
                canvas,
                ft.Container(
                    bgcolor=ft.colors.BLUE_100,
                    alignment=ft.alignment.top_center,
                    width=200,
                    content=pos
                ),
            ]
        ),
    )


ft.app(target = main)

黒い円を描き、ホバーしている場合は赤に変わります。
・・・あぁモチベーションが上がらない。

C#ATIA

↑ﾀｲﾄﾙ詐欺　主にFusion360API　偶にCATIA V5 VBA(絶賛ネタ切れ中)

Canvasでon_hoverイベント2