Canvasでon_hoverイベント1

やっと出来た・・・。

ちょっと2DCAD的な画面を作りたいと思っているのですが、fletの場合は
Canvasを利用するのだろうと思います。
Canvas | Flet

Imageを利用してsvgをゴリゴリ作って・・・とも思いましたが、Canvasの
方が楽そうです。

そこでこの様な(センスのない)感じで作りました。

縦横の細い線は、原点のラインを見立てています。えぇ分かってます、一点鎖線
又は破線にしたいのですが、どうすれば良いのか分かってません。
（出来るのか出来ないのかすら分かりません）

欲しかった機能の一つが、マウスカーソルの位置です。薄っすらとon_hoverイベントで
取得出来るような記憶が有ったのですが、Canvasにはon_hoverイベントが有りません。
そこで利用するのがGestureDetectorです。
GestureDetector | Flet
こちらを利用すればCanvasにon_hoverイベントを付けられそうな・・・
と思い昨日試したのですが、どうしてもダメでした。
が、今日試すと出来ました。

単位は・・・恐らくピクセルです。

汚いままですが、こんな感じです。

import flet as ft
import flet.canvas as cv

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)

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

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

    def on_exit(e: ft.DragStartEvent):
        pos.value = "-"
        pos.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),
        ],
        width=canvasWidth,
        height=canvasHeight,
        content=gd,
    )

    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)

少しづつですが前進している・・・と思いたい。