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