10d45b867f
Bug: skia:11799 Change-Id: Ic9e9bc6a91cf1a7c9166ca1eae4aec6b00eb5e2a Docs-Preview: https://skia.org/?cl=391436 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/391436 Reviewed-by: Heather Miller <hcm@google.com>
210 lines
6.4 KiB
Markdown
210 lines
6.4 KiB
Markdown
|
|
---
|
|
title: "SkPaint Overview"
|
|
linkTitle: "SkPaint Overview"
|
|
|
|
weight: 280
|
|
|
|
---
|
|
|
|
<span id="top"></span>
|
|
|
|
*color, stroke, font, effects*
|
|
|
|
<div class="float">
|
|
<ul>
|
|
<li><a href="#">SkPaint</a></li>
|
|
<li><a href="#SkXfermode">SkXfermode</a></li>
|
|
<li><a href="#SkShader">SkShader</a></li>
|
|
<li><a href="#SkMaskFilter">SkMaskFilter</a></li>
|
|
<li><a href="#SkColorFilter">SkColorFilter</a></li>
|
|
<li><a href="#SkPathEffect">SkPathEffect</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
Anytime you draw something in Skia, and want to specify what color it
|
|
is, or how it blends with the background, or what style or font to
|
|
draw it in, you specify those attributes in a paint.
|
|
|
|
Unlike `SkCanvas`, paints do not maintain an internal stack of state
|
|
(i.e. there is no save/restore on a paint). However, paints are
|
|
relatively light-weight, so the client may create and maintain any
|
|
number of paint objects, each set up for a particular use. Factoring
|
|
all of these color and stylistic attributes out of the canvas state,
|
|
and into (multiple) paint objects, allows canvas' save/restore to be
|
|
that much more efficient, as all they have to do is maintain the stack
|
|
of matrix and clip settings.
|
|
|
|
<fiddle-embed name='@skpaint_skia'></fiddle-embed>
|
|
|
|
This shows three different paints, each set up to draw in a different
|
|
style. Now the caller can intermix these paints freely, either using
|
|
them as is, or modifying them as the drawing proceeds.
|
|
|
|
<fiddle-embed name='@skpaint_mix'></fiddle-embed>
|
|
|
|
Beyond simple attributes such as color, strokes, and text values,
|
|
paints support effects. These are subclasses of different aspects of
|
|
the drawing pipeline, that when referenced by a paint (each of them is
|
|
reference-counted), are called to override some part of the drawing
|
|
pipeline.
|
|
|
|
For example, to draw using a gradient instead of a single color,
|
|
assign a SkShader to the paint.
|
|
|
|
<fiddle-embed name='@skpaint_shader'></fiddle-embed>
|
|
|
|
Now, anything drawn with that paint will be drawn with the gradient
|
|
specified in the call to `MakeLinear()`. The shader object that is
|
|
returned is reference-counted. Whenever any effects object, like a
|
|
shader, is assigned to a paint, its reference-count is increased by
|
|
the paint. To balance this, the caller in the above example calls
|
|
`unref()` on the shader once it has assigned it to the paint. Now the
|
|
paint is the only "owner" of that shader, and it will automatically
|
|
call `unref()` on the shader when either the paint goes out of scope, or
|
|
if another shader (or null) is assigned to it.
|
|
|
|
There are 6 types of effects that can be assigned to a paint:
|
|
|
|
* **SkPathEffect** - modifications to the geometry (path) before it
|
|
generates an alpha mask (e.g. dashing)
|
|
* **SkRasterizer** - composing custom mask layers (e.g. shadows)
|
|
* **SkMaskFilter** - modifications to the alpha mask before it is
|
|
colorized and drawn (e.g. blur)
|
|
* **SkShader** - e.g. gradients (linear, radial, sweep), bitmap patterns
|
|
(clamp, repeat, mirror)
|
|
* **SkColorFilter** - modify the source color(s) before applying the
|
|
xfermode (e.g. color matrix)
|
|
* **SkXfermode** - e.g. porter-duff transfermodes, blend modes
|
|
|
|
Paints also hold a reference to a SkTypeface. The typeface represents
|
|
a specific font style, to be used for measuring and drawing
|
|
text. Speaking of which, paints are used not only for drawing text,
|
|
but also for measuring it.
|
|
|
|
<!--?prettify lang=cc?-->
|
|
|
|
paint.measureText(...);
|
|
paint.getTextBounds(...);
|
|
paint.textToGlyphs(...);
|
|
paint.getFontMetrics(...);
|
|
|
|
<span id="SkXfermode"></span>
|
|
|
|
SkXfermode
|
|
----------
|
|
|
|
The following example demonstrates all of the Skia's standard transfer
|
|
modes. In this example the source is a solid magenta color with a
|
|
horizontal alpha gradient and the destination is a solid cyan color
|
|
with a vertical alpha gradient.
|
|
|
|
<fiddle-embed name='@skpaint_xfer'></fiddle-embed>
|
|
|
|
<span id="SkShader"></span>
|
|
|
|
SkShader
|
|
--------
|
|
|
|
Several shaders are defined (besides the linear gradient already mentioned):
|
|
|
|
* Bitmap Shader
|
|
|
|
<fiddle-embed name='@skpaint_bitmap_shader'></fiddle-embed>
|
|
|
|
* Radial Gradient Shader
|
|
|
|
<fiddle-embed name='@skpaint_radial'></fiddle-embed>
|
|
|
|
* Two-Point Conical Gradient Shader
|
|
|
|
<fiddle-embed name='@skpaint_2pt'></fiddle-embed>
|
|
|
|
|
|
* Sweep Gradient Shader
|
|
|
|
<fiddle-embed name='@skpaint_sweep'></fiddle-embed>
|
|
|
|
* Fractal Perlin Noise Shader
|
|
|
|
<fiddle-embed name='@skpaint_perlin'></fiddle-embed>
|
|
|
|
* Turbulence Perlin Noise Shader
|
|
|
|
<fiddle-embed name='@skpaint_turb'></fiddle-embed>
|
|
|
|
* Compose Shader
|
|
|
|
<fiddle-embed name='@skpaint_compose_shader'></fiddle-embed>
|
|
|
|
|
|
<span id="SkMaskFilter"></span>
|
|
|
|
SkMaskFilter
|
|
------------
|
|
|
|
* Blur Mask Filter
|
|
|
|
<fiddle-embed name='@skpaint_blur_mask_filter'></fiddle-embed>
|
|
|
|
|
|
<span id="SkColorFilter"></span>
|
|
|
|
SkColorFilter
|
|
-------------
|
|
|
|
* Color Matrix Color Filter
|
|
|
|
<fiddle-embed name='@skpaint_matrix_color_filter'></fiddle-embed>
|
|
|
|
* Color Table Color Filter
|
|
|
|
<fiddle-embed name='@skpaint_color_table_filter'></fiddle-embed>
|
|
|
|
<span id="SkPathEffect"></span>
|
|
|
|
SkPathEffect
|
|
------------
|
|
|
|
* SkPath2DPathEffect: Stamp the specified path to fill the shape,
|
|
using the matrix to define the latice.
|
|
|
|
<fiddle-embed name='@skpaint_path_2d_path_effect'></fiddle-embed>
|
|
|
|
* SkLine2DPathEffect: a special case of SkPath2DPathEffect where the
|
|
path is a straight line to be stroked, not a path to be filled.
|
|
|
|
<fiddle-embed name='@skpaint_line_2d_path_effect'></fiddle-embed>
|
|
|
|
* SkPath1DPathEffect: create dash-like effects by replicating the specified path along the drawn path.
|
|
|
|
<fiddle-embed name='@skpaint_path_1d_path_effect'></fiddle-embed>
|
|
|
|
* SkCornerPathEffect: a path effect that can turn sharp corners into
|
|
various treatments (e.g. rounded corners).
|
|
|
|
<fiddle-embed name='@skpaint_corner_path_effects'></fiddle-embed>
|
|
|
|
* SkDashPathEffect: a path effect that implements dashing.
|
|
|
|
<fiddle-embed name='@skpaint_dash_path_effect'></fiddle-embed>
|
|
|
|
* SkDiscretePathEffect: This path effect chops a path into discrete
|
|
segments, and randomly displaces them.
|
|
|
|
<fiddle-embed name='@skpaint_discrete_path_effect'></fiddle-embed>
|
|
|
|
* SkComposePathEffect: a pathEffect whose effect is to apply
|
|
first the inner pathEffect and the the outer pathEffect (i.e.
|
|
outer(inner(path))).
|
|
|
|
<fiddle-embed name='@skpaint_compose_path_effect'></fiddle-embed>
|
|
|
|
* SkSumPathEffect: a pathEffect whose effect is to apply two effects,
|
|
in sequence (i.e. first(path) + second(path)).
|
|
|
|
<fiddle-embed name='@skpaint_sum_path_effect'></fiddle-embed>
|
|
|
|
|