flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
11.13k stars 429 forks source link

`stroke_dash_pattern` is not applied to all canvas shapes #1791

Open zrr1999 opened 1 year ago

zrr1999 commented 1 year ago

Description stroke_dash_pattern is not effective

Code example to reproduce the issue:

import flet as ft
import math 

def main(page: ft.Page):
    page.add(
        ft.canvas.Canvas(
            [
                ft.canvas.Circle(
                    150,
                    150,
                    130,
                    ft.Paint(
                        color=ft.colors.BLUE,
                        stroke_width=4,
                        stroke_dash_pattern=[0.5, 0.5],
                        style=ft.PaintingStyle.STROKE,
                    ),
                ),
                ft.canvas.Arc(
                    10,
                    10,
                    240,
                    240,
                    0,
                    math.pi,
                    paint=ft.Paint(
                        color=ft.colors.BLUE,
                        stroke_width=4,
                        stroke_dash_pattern=[100, 100],
                        style=ft.PaintingStyle.STROKE,
                    ),
                ),
                ft.canvas.Arc(
                    20,
                    20,
                    220,
                    220,
                    0,
                    2 * math.pi,
                    paint=ft.Paint(
                        color=ft.colors.BLUE,
                        stroke_width=4,
                        stroke_dash_pattern=[100, 100],
                        style=ft.PaintingStyle.STROKE,
                    ),
                ),
            ],
            width=300,
            height=300,
        )
    )

ft.app(target=main)

Describe the results you received: image

Describe the results you expected:

image

Additional information you deem important (e.g. issue happens only occasionally):

Flet version (pip show flet):

0.9.0

Operating system: Windows

Additional environment details:

ndonkoHenri commented 1 year ago

I just made a notice that canvas shapes like Oval, Circle, Arc... do not show/paint the dashes for an unknown reason. :( Trying Line on the other hand works/shows as expected.

FeodorFitsner commented 1 year ago

Currently, dash pattern is supported in Line and Path only. You can achieve the same effect by using Path shape:

import math

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.canvas.Canvas(
            [
                ft.canvas.Path(
                    [
                        ft.canvas.Path.Oval(75, 75, 200, 200),
                        ft.canvas.Path.Arc(10, 10, 240, 240, 0, math.pi),
                        ft.canvas.Path.Arc(20, 20, 220, 220, 0, math.pi * 2),
                    ],
                    paint=ft.Paint(
                        color=ft.colors.BLUE,
                        stroke_width=4,
                        stroke_dash_pattern=[2, 2],
                        style=ft.PaintingStyle.STROKE,
                    ),
                ),
            ],
            width=300,
            height=300,
        )
    )

ft.app(target=main)

I'll leave this issue open to re-write other shapes to use Path.

zrr1999 commented 1 year ago

You can achieve the same effect by using Path shap

thank you. I'll try this method