https://kotlinlang.org logo
#compose
Title
# compose
u

ursus

01/25/2023, 7:07 PM
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?
r

romainguy

01/25/2023, 8:39 PM
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)
u

ursus

01/25/2023, 8:48 PM
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?
r

romainguy

01/25/2023, 8:49 PM
You’d have to interpolate, yes.
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
Ah I found what I was looking for
Square wrote a blog about this years ago
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/
(which they do with points 🙂
u

ursus

01/25/2023, 8:52 PM
oh sweet
r

romainguy

01/25/2023, 8:53 PM
I would do it slightly differently and not use a fixed
drawSteps
like they do
But use the length of each curve to figure that out
u

ursus

01/25/2023, 8:55 PM
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?
r

romainguy

01/25/2023, 8:55 PM
It’s usually a mix of velocity and angle of the stylus (when available)
Sometimes also the “local turn radius”
u

ursus

01/25/2023, 8:56 PM
in android that is VelocityTracker right?
r

romainguy

01/25/2023, 8:57 PM
You can use that yes
u

ursus

01/25/2023, 8:58 PM
also, If I could ask, how can a stylus tell its angle? by the area of the tip touching?
r

romainguy

01/25/2023, 8:59 PM
Something like that yeah
j

jw

01/25/2023, 9:00 PM
Our signature pad has seen two or three rewrites since that post. No idea what they do today.
u

ursus

01/25/2023, 9:00 PM
but that is their thing? or with say
pointerInput
can I tell the area of the finger?
j

jw

01/25/2023, 9:00 PM
I remember it being quite the rabbit hole
r

romainguy

01/25/2023, 9:01 PM
It is indeed
There are entire apps built around this (Procreate for instance)
@ursus There would be an API telling you the tilt angle
You could also use pressure (https://developer.android.com/reference/android/view/MotionEvent#getPressure(int)) to vary the stroke width
u

ursus

01/25/2023, 9:04 PM
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?
r

romainguy

01/25/2023, 9:05 PM
it barely feels good with a stylus
u

ursus

01/25/2023, 9:05 PM
is it a latency thing?
r

romainguy

01/25/2023, 9:14 PM
Latency is part of it but it’s gotten a lot better. It’s also precision
u

ursus

01/25/2023, 9:59 PM
I'm already looking into it, thank you so much
r

romainguy

01/25/2023, 10:33 PM
My pleasure!
6 Views