How to draw fountain pen stroke using Quartz?

Question

I know a better way is using a texture in OpenGL. But I still want to use Quartz to draw vector graphic in my App.

I followed this link but it did not work as expected. Applying a texture to stroke a CGContextStrokePath It's possible I misunderstood something.

Can you show me the way to solve this problem?

Answer 1

I'm assuming that "fountain pen stroke" means a stroke that gets thicker or thinner depending upon the direction the curve is headed, i.e. thick when vertical and thin when horizontal.

A fountain pen stroke as vector graphics can be closed shape. Take the curve and offset two copies in opposite directions along the axis of the fountain pen tip, each half the width of the fountain pen tip. Close those curves, and fill them with the fountain pen color or pattern. A horizontal pen tip four pixels wide would offset one curve two pixels to the right and the second curve two pixels to the left. Pen tips not aligned to an axis may require a little trigonometry to calculate exact offsets. If just using preset pen sizes and angles, the offsets could be fudged with integer offsets that just look good.

Where the curve exactly meets the angle of the pen tip, the shape may drop below the minimum desired stroke thickness. This can be address by also applying a stroke to this derived shape, making the resulting effect never too thin. This may make the thick parts thicker, which can be adjusted by changing the offsets.

Edit to respond to comment about how to make the center of the stroke darker than the edges:

I can think of a few ways to accomplish a darker center of the stroke shape. Multiple shapes can be drawn of varying thickness, layered on top of each other. The thickest could be filled with the lightest color, and the thinest the darkest color. Or a stroke of the original path can be drawn to a image, blurred, then clipped to the fountain pen stroke shape. This can be drawn as a second layer with a multiply blending mode, darkening the center of the stroke, and tapering off at the edges. Or the shape can be broken into little segments. Each little segment along the path can be filled with a gradient that goes from light at the ends to dark in the middle.

As Caleb mentions in his answer, there are plenty of additional aspects of a fountain pen's real world functionality and performance characteristics that could be added to a simulation. The more aspects included, the more complex the drawing code.

Answer 2

Following on Mr. Berna's excellent analysis, I'll point out that beside direction, hand pressure and nib construction also affect the line width. Fine nibs can produce a line that's almost the same width in any direction, but increased pressure on the nib causes the two halves of the nib to spread, producing a wider line and increased ink flow. This effect will obviously be more pronounced with a more flexible nib like a quill pen than with a steel nib.

You'll need to decide how to determine hand pressure changes along your lines. You might do that manually for each line, or come up with some algorithm based on changes in direction, distance from the end of the line (pressure decreases as the writer finishes a line and starts to lift the pen), handedness of the writer (lefty or righty), writing surface, etc.