How does one draw `Path`s like this? i.e. how to change stroke width during the path? (Notice the l...

# compose

[ursus]

How does one draw `Path`s like this?
i.e. how to change stroke width during the path?

(Notice the line being thicker at the beginning)

I only see one style for the whole path

drawPath(path, color, style)

Is this even a Path? could it maybe be drawPoints with changed size per point?

[romainguy]

Unfortunately you cannot do this with the Path APIs. It’s something that would have to be built and exposed as a PathEffect. To achieve what you want you could indeed draw points of varying size, or stamp a bitmap brush along a path, varying its scale (and you’d have to be careful if you ever need to use translucent colors since overlapping points/brushes won’t do what you want)

[ursus]

would drawing points captured from drag events be enough though?
currently I'm only drawing lines with path.lineTo and sometimes it is possible to see the individual segments .. so should I maybe interpolate until it's contiguous at all times? or go the path effect way?

[romainguy]

You’d have to interpolate, yes.

[romainguy]

And to be clear, you can’t build a PathEffect for this unfortunately. What I meant is that we (Android team) would have to add a new PathEffect API in the platform

[romainguy]

Ah I found what I was looking for

[romainguy]

Square wrote a blog about this years ago

[romainguy]

Both on how to smooth the curves by using Bézier segments instead of lineTo and how to achieve the variable width: https://developer.squareup.com/blog/smoother-signatures/

[romainguy]

(which they do with points 🙂

[ursus]

oh sweet

[romainguy]

I would do it slightly differently and not use a fixed drawSteps like they do

[romainguy]

But use the length of each curve to figure that out

[ursus]

btw when samsung are having drawing apps for their stylus, what do you think is the thing that modulates the width around "loops" or however you say it in english 😀 when writing in cursive

is it velocity?

[romainguy]

It’s usually a mix of velocity and angle of the stylus (when available)

[romainguy]

Sometimes also the “local turn radius”

[ursus]

in android that is VelocityTracker right?

[romainguy]

You can use that yes

[ursus]

also, If I could ask, how can a stylus tell its angle? by the area of the tip touching?

[romainguy]

Something like that yeah

[jw]

Our signature pad has seen two or three rewrites since that post. No idea what they do today.

[ursus]

but that is their thing? or with say pointerInput can I tell the area of the finger?

[jw]

I remember it being quite the rabbit hole

[romainguy]

It is indeed

[romainguy]

There are entire apps built around this (Procreate for instance)

[romainguy]

@ursus There would be an API telling you the tilt angle

[romainguy]

You could also use pressure (https://developer.android.com/reference/android/view/MotionEvent#getPressure(int)) to vary the stroke width

[ursus]

Btw how do you like finger signing/annotating screenshots as a user? I could never like the end result 😀 I was wondering why is it so hard to sign nicely.. maybe offset the "cursor" so its not drawing directly under a finger where I cannot see it?

[romainguy]

it barely feels good with a stylus

[ursus]

is it a latency thing?

[romainguy]

Latency is part of it but it’s gotten a lot better. It’s also precision

[ursus]

I'm already looking into it, thank you so much

[romainguy]

My pleasure!