Question about blogpost-codesample-pulltorefresh

[d-ronnqvist]

It's a little bit of both, some tools that helped me along the way and a good bit of manual work as well.

Creating the vector path

I started out in an app called Sketch and wrote the text "Loading" in a font called PilGi (that I had on my system but I don't remember how I got it).

Then, in the same app I manually traced the text in two parts: "Load" and "ing":

As you can see I made some deviations from the original font, especially on the L, o, and g.

At this point I had 4 elements in my file: the original text, the path for Load, the path for ing (without the dot), and the dot over the i.

I hid the text and manually adjusted the vector paths until I liked the flow of the text

Converting to CGPath code

I then exported vector paths form above into a SVG and opened it in a simple text editor to copy and paste only the path data without all the other SVG data. This is the part of the file that I was interested in:

I pasted it into an app called Patterns which work with regular expressions and used a couple of regular expressions similar to the ones in the image below to convert Mx,y into CGPathMoveToPoint(path, NULL, x, y); and things like Lx,y into CGPathAddLineToPoint(path, NULL, x, y); and similar. At each step I took the result and used it as the source for the next replacement:

M(-?\d+\.\d*),(-?\d+\.\d*)\s
into
CGPathMoveToPoint(path, NULL, $1, $2);

L(-?\d+\.\d*),(-?\d+\.\d*)\s
into
CGPathAddLineToPoint(path, NULL, $1, $2);
(there were no lines in this example but I still have the regex for other paths)

C(-?\d+\.\d*),(-?\d+\.\d*)\s(-?\d+\.\d*),(-?\d+\.\d*)\s(-?\d+\.\d*),(-?\d+\.\d*)\s
into
CGPathAddCurveToPoint(path, NULL, $1, $2, $3, $4, $5, $6);

I did this separately for the "Load" part but I took both the "ing" and the dot over the "i" and made those into one shape instead of two.

When I tried the path in the app I felt that it was a bit to big so I scaled it down (in code) using:

CGAffineTransform t = CGAffineTransformMakeScale(0.7, 0.7); // It was slighly to big and I didn't feel like redoing it :D

You can see by the comment that there was a bit of manual work that I didn't feel was worth doing all over just to scale the paths down.