2017-07-28 19:18:29 +00:00
|
|
|
SkPaint Overview
|
2015-05-19 17:21:29 +00:00
|
|
|
=======
|
2016-12-09 16:27:30 +00:00
|
|
|
<span id="top"></span>
|
2015-05-19 17:21:29 +00:00
|
|
|
|
|
|
|
*color, stroke, font, effects*
|
|
|
|
|
2016-12-09 16:27:30 +00:00
|
|
|
<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>
|
|
|
|
|
2015-07-31 18:58:13 +00:00
|
|
|
|
2015-05-19 17:21:29 +00:00
|
|
|
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
|
2015-07-27 20:13:03 +00:00
|
|
|
number of paint objects, each set up for a particular use. Factoring
|
2016-04-22 18:25:43 +00:00
|
|
|
all of these color and stylistic attributes out of the canvas state,
|
2015-05-19 17:21:29 +00:00
|
|
|
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.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_skia'></fiddle-embed>
|
2015-05-19 17:21:29 +00:00
|
|
|
|
2015-07-27 20:13:03 +00:00
|
|
|
This shows three different paints, each set up to draw in a different
|
2015-05-19 17:21:29 +00:00
|
|
|
style. Now the caller can intermix these paints freely, either using
|
|
|
|
them as is, or modifying them as the drawing proceeds.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_mix'></fiddle-embed>
|
2015-05-19 17:21:29 +00:00
|
|
|
|
|
|
|
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.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_shader'></fiddle-embed>
|
2015-05-19 17:21:29 +00:00
|
|
|
|
|
|
|
Now, anything drawn with that paint will be drawn with the gradient
|
2016-04-22 18:25:43 +00:00
|
|
|
specified in the call to `MakeLinear()`. The shader object that is
|
2015-05-19 17:21:29 +00:00
|
|
|
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
|
2015-07-27 20:13:03 +00:00
|
|
|
`unref()` on the shader once it has assigned it to the paint. Now the
|
2015-05-19 17:21:29 +00:00
|
|
|
paint is the only "owner" of that shader, and it will automatically
|
2015-07-27 20:13:03 +00:00
|
|
|
call `unref()` on the shader when either the paint goes out of scope, or
|
2015-05-19 17:21:29 +00:00
|
|
|
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
|
2016-12-08 16:58:52 +00:00
|
|
|
colorized and drawn (e.g. blur)
|
2015-05-19 17:21:29 +00:00
|
|
|
* **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(...);
|
2015-07-27 20:13:03 +00:00
|
|
|
|
2015-07-31 18:58:13 +00:00
|
|
|
<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
|
2015-07-31 19:02:18 +00:00
|
|
|
horizontal alpha gradient and the destination is a solid cyan color
|
2015-07-31 18:58:13 +00:00
|
|
|
with a vertical alpha gradient.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_xfer'></fiddle-embed>
|
2015-07-31 18:58:13 +00:00
|
|
|
|
2016-12-09 16:27:30 +00:00
|
|
|
<span id="SkShader"></span>
|
2015-07-31 18:58:13 +00:00
|
|
|
|
2016-12-09 16:27:30 +00:00
|
|
|
SkShader
|
2015-07-27 20:13:03 +00:00
|
|
|
--------
|
|
|
|
|
|
|
|
Several shaders are defined (besides the linear gradient already mentioned):
|
|
|
|
|
|
|
|
* Bitmap Shader
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_bitmap_shader'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
* Radial Gradient Shader
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_radial'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
* Two-Point Conical Gradient Shader
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_2pt'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
|
|
|
|
* Sweep Gradient Shader
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_sweep'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
* Fractal Perlin Noise Shader
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_perlin'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
* Turbulence Perlin Noise Shader
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_turb'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
* Compose Shader
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_compose_shader'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
|
2015-07-31 18:58:13 +00:00
|
|
|
<span id="SkMaskFilter"></span>
|
|
|
|
|
2015-07-27 20:13:03 +00:00
|
|
|
SkMaskFilter
|
|
|
|
------------
|
|
|
|
|
|
|
|
* Blur Mask Filter
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_blur_mask_filter'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
|
2015-07-31 18:58:13 +00:00
|
|
|
<span id="SkColorFilter"></span>
|
|
|
|
|
2015-07-27 20:13:03 +00:00
|
|
|
SkColorFilter
|
|
|
|
-------------
|
|
|
|
|
|
|
|
* Color Matrix Color Filter
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_matrix_color_filter'></fiddle-embed>
|
2015-07-27 20:13:03 +00:00
|
|
|
|
|
|
|
* Color Table Color Filter
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_color_table_filter'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|
|
|
|
<span id="SkPathEffect"></span>
|
|
|
|
|
|
|
|
SkPathEffect
|
|
|
|
------------
|
|
|
|
|
|
|
|
* SkPath2DPathEffect: Stamp the specified path to fill the shape,
|
|
|
|
using the matrix to define the latice.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_path_2d_path_effect'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|
|
|
|
* SkLine2DPathEffect: a special case of SkPath2DPathEffect where the
|
|
|
|
path is a straight line to be stroked, not a path to be filled.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_line_2d_path_effect'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|
|
|
|
* SkPath1DPathEffect: create dash-like effects by replicating the specified path along the drawn path.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_path_1d_path_effect'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|
|
|
|
* SkCornerPathEffect: a path effect that can turn sharp corners into
|
|
|
|
various treatments (e.g. rounded corners).
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_corner_path_effects'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|
|
|
|
* SkDashPathEffect: a path effect that implements dashing.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_dash_path_effect'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|
|
|
|
* SkDiscretePathEffect: This path effect chops a path into discrete
|
|
|
|
segments, and randomly displaces them.
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_discrete_path_effect'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|
|
|
|
* SkComposePathEffect: a pathEffect whose effect is to apply
|
|
|
|
first the inner pathEffect and the the outer pathEffect (i.e.
|
|
|
|
outer(inner(path))).
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_compose_path_effect'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|
|
|
|
* SkSumPathEffect: a pathEffect whose effect is to apply two effects,
|
|
|
|
in sequence (i.e. first(path) + second(path)).
|
|
|
|
|
2017-02-15 17:54:08 +00:00
|
|
|
<fiddle-embed name='@skpaint_sum_path_effect'></fiddle-embed>
|
2015-08-03 13:55:20 +00:00
|
|
|
|