1Tips & FAQ
2==========
3
4+   [Bitmap Subsetting](#bitmap-subsetting)
5+   [Capture a `.skp` file on a web page in Chromium](#skp-capture)
6+   [Capture a `.mskp` file on a web page in Chromium](#mskp-capture)
7+   [How to add hardware acceleration in Skia](#hw-acceleration)
8+   [Does Skia support Font hinting?](#font-hinting)
9+   [Does Skia shape text (kerning)?](#kerning)
10+   [How do I add drop shadow on text?](#text-shadow)
11
12* * *
13
14<span id="bitmap-subsetting">Bitmap Subsetting</span>
15-----------------------------------------------------
16
17Taking a subset of a bitmap is effectively free - no pixels are copied or
18memory is allocated. This allows Skia to offer an API that typically operates
19on entire bitmaps; clients who want to operate on a subset of a bitmap can use
20the following pattern, here being used to magnify a portion of an image with
21drawBitmapNine():
22
23    SkBitmap subset;
24    bitmap.extractSubset(&subset, rect);
25    canvas->drawBitmapNine(subset, ...);
26
27[An example](https://fiddle.skia.org/c/@subset_example)
28
29
30* * *
31
32<span id="skp-capture">Capture a `.skp` file on a web page in Chromium</span>
33-----------------------------------------------------------------------------
34
35Use the script `experimental/tools/web_to_skp` , *or* do the following:
36
371.  Launch Chrome or Chromium with `--no-sandbox --enable-gpu-benchmarking`
382.  Open the JS console (Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (MacOS))
393.  Execute: `chrome.gpuBenchmarking.printToSkPicture('/tmp')`
40    This returns "undefined" on success.
41
42Open the resulting file in the [Skia Debugger](/dev/tools/debugger), rasterize it with `dm`,
43or use Skia's `viewer` to view it:
44
45<!--?prettify lang=sh?-->
46
47    out/Release/dm --src skp --skps /tmp/layer_0.skp -w /tmp \
48        --config 8888 gpu pdf --verbose
49    ls -l /tmp/*/skp/layer_0.skp.*
50
51    out/Release/viewer --skps /tmp --slide layer_0.skp
52
53* * *
54
55<span id="mskp-capture">Capture a `.mskp` file on a web page in Chromium</span>
56-------------------------------------------------------------------------------
57
58Multipage Skia Picture files capture the commands sent to produce PDFs
59and printed documents.
60
61Use the script `experimental/tools/web_to_mskp` , *or* do the following:
62
631.  Launch Chrome or Chromium with `--no-sandbox --enable-gpu-benchmarking`
642.  Open the JS console (Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (MacOS))
653.  Execute: `chrome.gpuBenchmarking.printPagesToSkPictures('/tmp/filename.mskp')`
66    This returns "undefined" on success.
67
68Open the resulting file in the [Skia Debugger](/dev/tools/debugger) or
69process it with `dm`.
70
71<!--?prettify lang=sh?-->
72
73    experimental/tools/mskp_parser.py /tmp/filename.mskp /tmp/filename.mskp.skp
74    ls -l /tmp/filename.mskp.skp
75    # open filename.mskp.skp in the debugger.
76
77    out/Release/dm --src mskp --mskps /tmp/filename.mskp -w /tmp \
78        --config pdf --verbose
79    ls -l /tmp/pdf/mskp/filename.mskp.pdf
80
81* * *
82
83<span id="hw-acceleration">How to add hardware acceleration in Skia</span>
84--------------------------------------------------------------------------
85
86There are two ways Skia takes advantage of specific hardware.
87
881.  Custom bottleneck routines
89
90    There are sets of bottleneck routines inside the blits of Skia
91    that can be replace on a platform in order to take advantage of
92    specific CPU features. One such example is the NEON SIMD
93    instructions on ARM v7 devices. See [src/opts/](https://skia.googlesource.com/skia/+/master/src/opts/)
94
95* * *
96
97<span id="font-hinting">Does Skia support Font hinting?</span>
98--------------------------------------------------------------
99
100Skia has a built-in font cache, but it does not know how to actually render font
101files like TrueType into its cache. For that it relies on the platform to
102supply an instance of `SkScalerContext`. This is Skia's abstract interface for
103communicating with a font scaler engine. In src/ports you can see support
104files for FreeType, macOS, and Windows GDI font engines. Other font
105engines can easily be supported in a like manner.
106
107
108* * *
109
110<span id="kerning">Does Skia shape text (kerning)?</span>
111---------------------------------------------------------
112
113Shaping is the process that translates a span of Unicode text into a span of
114positioned glyphs with the apropriate typefaces.
115
116Skia does not shape text.  Skia provides interfaces to draw glyphs, but does
117not implement a text shaper. Skia's client's often use
118[HarfBuzz](http://www.freedesktop.org/wiki/Software/HarfBuzz/) to
119generate the glyphs and their positions, including kerning.
120
121[Here is an example of how to use Skia and HarfBuzz
122together](https://github.com/aam/skiaex).  In the example, a
123`SkTypeface` and a `hb_face_t` are created using the same `mmap()`ed
124`.ttf` font file. The HarfBuzz face is used to shape unicode text into
125a sequence of glyphs and positions, and the `SkTypeface` can then be
126used to draw those glyphs.
127
128* * *
129
130<span id="text-shadow">How do I add drop shadow on text?</span>
131---------------------------------------------------------------
132
133<!--?prettify lang=cc?-->
134
135    void draw(SkCanvas* canvas) {
136        const SkScalar sigma = 1.65f;
137        const SkScalar xDrop = 2.0f;
138        const SkScalar yDrop = 2.0f;
139        const SkScalar x = 8.0f;
140        const SkScalar y = 52.0f;
141        const SkScalar textSize = 48.0f;
142        const uint8_t blurAlpha = 127;
143        auto blob = SkTextBlob::MakeFromString("Skia", SkFont(nullptr, textSize));
144        SkPaint paint;
145        paint.setAntiAlias(true);
146        SkPaint blur(paint);
147        blur.setAlpha(blurAlpha);
148        blur.setMaskFilter(SkMaskFilter::MakeBlur(kNormal_SkBlurStyle, sigma, 0));
149        canvas->drawColor(SK_ColorWHITE);
150        canvas->drawTextBlob(blob.get(), x + xDrop, y + yDrop, blur);
151        canvas->drawTextBlob(blob.get(), x,         y,         paint);
152    }
153
154<a href='https://fiddle.skia.org/c/@text_shadow'><img src='https://fiddle.skia.org/i/@text_shadow_raster.png'></a>
155
156* * *
157
158<div style="margin-bottom:99%"></div>
159