Skija

[madhead]

A series of articles about Skija.

• [ ] Project setup
• [ ] Paints, Paths & Contours.
• [ ] Transforms
• [ ] Blend modes
• [ ] SKP files and Skia Debugger
• [ ] Bitmaps
• [ ] Rendering SVGs
• [ ] Drawing Kotlin logo with code
• [ ] Drawing text
• [ ] Drawing a bar chart
• [ ] Effects
• [ ] Lottie, Skottie
• [ ] Drawing over images (Macro Generator!)

[madhead]

TextLine / TextBlob ✅ Typeface — basically, a font data and metadata. TTF. ✅ Font — typeface + fontSize + options ✅ TextLine TextBlob

[madhead]

Canvas / SkCanvas — drawing context (you draw on it) SkCanvas is the drawing context for Skia. It knows where to direct the drawing (i.e. where the screen of offscreen pixels are), and maintains a stack of matrices and clips. Note however, that unlike similar contexts in other APIs like postscript, cairo, or awt, Skia does not store any other drawing attributes in the context (e.g. color, pen size). Rather, these are specified explicitly in each draw call, via a SkPaint.

Raster backend — for drawing in-memory with CPU (good for you headless backend).

path.closePath() instead of path.close()!!! SIGSERV OTHERWISE!

[madhead]

Topics to vover:

Managed class Native class RefCnt class

[madhead]

Paints, Paths & Contours

• Paints — link to the first article where we just used it with no explnation, then explain it.
• Path A graphics path is encapsulated by the SKPath object. A path is a collection of one or more contours. Each contour is a collection of connected straight lines and curves. Contours are not connected to each other but they might visually overlap. Sometimes a single contour can overlap itself. Keep in mind that an SKPath object defines only a geometry — a series of points and connections. Only when an SKPath is combined with an SKPaint object is the path rendered with a particular color, stroke width, and so forth. Also, keep in mind that the SKPaint object passed to the DrawPath method defines characteristics of the entire path. If you want to draw something requiring several colors, you must use a separate path for each color.
  • Line (the simplest path)
  • Straight contours (circles, triangles, rectangles)
  • Joins & caps
  • closePath
  • Contours. Now before that our path consisted of a single contour, but it's not always the case…
  • Adding entire contours (addRect, addCircle, etc)
  • Relative & absolute movements
  • Path Fill Types
• Curves (probably another article)

[madhead]

Transformations

• Translate
• Scale
• Rotate
• Skew