This week, I overcame a technical difficulty that had troubled me for half a year in a project, so I would like to make a summary here. The requirement of the project is to make such a colouring function.

I found very little information on the Internet, during which I tried:

  1. Export SVG image and convert toUIBezierPathPath to fill in the color
  2. Export SVG images and convert them using PaintCodeUIBezierPathRoad king code

All ended in failure. After taking a lot of detours, I deeply studied the algorithm of graphics and learned that there is an efficient polygon filling algorithm: scan line seed filling algorithm.

Scanning line seed filling algorithm is an idea to avoid recursion and improve efficiency. You can start with a seed point in the polygon area and end up at the boundary, extending as an equal Y line across the screen. When the points on the polygon coincide with the scan line, these points are filled.

Before implementing the algorithm in the project, we also need to understand bitmaps.

A bitmap image (or sampled image) is an array of pixels (or samples). Each pixel represents a single point in the image. JPEG, TIFF, and PNG graphics files are examples of bitmap images

A bitmap is an array of pixels, each pixel representing a point in the image. So, colouring is actually the process of assigning a color attribute to a point in an array.