How does one draw `Path`s like this i e how to change stroke

Question

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 · Answer

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 · Answer

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 · Answer

You d have to interpolate yes

romainguy · Answer

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 · Answer

Ah I found what I was looking for

romainguy · Answer

Square wrote a blog about this years ago

romainguy · Answer

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 · Answer

which they do with points slightly smiling face

ursus · Answer

oh sweet

romainguy · Answer

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

romainguy · Answer

But use the length of each curve to figure that out

ursus · Answer

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 grinning when writing in cursive is it velocity

romainguy · Answer

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

romainguy · Answer

Sometimes also the local turn radius

ursus · Answer

in android that is VelocityTracker right

romainguy · Answer

You can use that yes

ursus · Answer

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

romainguy · Answer

Something like that yeah

jw · Answer

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

ursus · Answer

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

jw · Answer

I remember it being quite the rabbit hole

romainguy · Answer

It is indeed

romainguy · Answer

There are entire apps built around this Procreate for instance

romainguy · Answer

< ursus> There would be an API telling you the tilt angle

romainguy · Answer

You could also use pressure <https developer android com reference android view MotionEvent getPressure int > to vary the stroke width

ursus · Answer

Btw how do you like finger signing annotating screenshots as a user I could never like the end result grinning 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 · Answer

it barely feels good with a stylus

ursus · Answer

is it a latency thing

romainguy · Answer

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

ursus · Answer

I m already looking into it thank you so much

romainguy · Answer

My pleasure