1 Tips & 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 17 Taking a subset of a bitmap is effectively free - no pixels are copied or 18 memory is allocated. This allows Skia to offer an API that typically operates 19 on entire bitmaps; clients who want to operate on a subset of a bitmap can use 20 the following pattern, here being used to magnify a portion of an image with 21 drawBitmapNine(): 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 35 Use the script `experimental/tools/web_to_skp` , *or* do the following: 36 37 1. Launch Chrome or Chromium with `--no-sandbox --enable-gpu-benchmarking` 38 2. Open the JS console (Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (MacOS)) 39 3. Execute: `chrome.gpuBenchmarking.printToSkPicture('/tmp')` 40 This returns "undefined" on success. 41 42 Open the resulting file in the [Skia Debugger](/dev/tools/debugger), rasterize it with `dm`, 43 or 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 58 Multipage Skia Picture files capture the commands sent to produce PDFs 59 and printed documents. 60 61 Use the script `experimental/tools/web_to_mskp` , *or* do the following: 62 63 1. Launch Chrome or Chromium with `--no-sandbox --enable-gpu-benchmarking` 64 2. Open the JS console (Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (MacOS)) 65 3. Execute: `chrome.gpuBenchmarking.printPagesToSkPictures('/tmp/filename.mskp')` 66 This returns "undefined" on success. 67 68 Open the resulting file in the [Skia Debugger](/dev/tools/debugger) or 69 process 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 86 There are two ways Skia takes advantage of specific hardware. 87 88 1. 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 100 Skia has a built-in font cache, but it does not know how to actually render font 101 files like TrueType into its cache. For that it relies on the platform to 102 supply an instance of `SkScalerContext`. This is Skia's abstract interface for 103 communicating with a font scaler engine. In src/ports you can see support 104 files for FreeType, macOS, and Windows GDI font engines. Other font 105 engines can easily be supported in a like manner. 106 107 108 * * * 109 110 <span id="kerning">Does Skia shape text (kerning)?</span> 111 --------------------------------------------------------- 112 113 Shaping is the process that translates a span of Unicode text into a span of 114 positioned glyphs with the apropriate typefaces. 115 116 Skia does not shape text. Skia provides interfaces to draw glyphs, but does 117 not implement a text shaper. Skia's client's often use 118 [HarfBuzz](http://www.freedesktop.org/wiki/Software/HarfBuzz/) to 119 generate the glyphs and their positions, including kerning. 120 121 [Here is an example of how to use Skia and HarfBuzz 122 together](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 125 a sequence of glyphs and positions, and the `SkTypeface` can then be 126 used 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
