AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move documentation to use the embedded fiddle elements.

Browse Source 
Now code and images will always be in sync, and
users can edit and run the fiddles that are inline with
the docs.

Previews:
  https://skia.org/user/api/skcanvas?cl=8507
  https://skia.org/user/api/skpaint?cl=8507

BUG=skia:

NOTRY=true
DOCS_PREVIEW= https://skia.org/?cl=8507

Change-Id: Iaf62d98d9aa73cf7b4e4a6baa522402ecb9e505a
Reviewed-on: https://skia-review.googlesource.com/8507
Reviewed-by: Hal Canary <halcanary@google.com>
Commit-Queue: Hal Canary <halcanary@google.com>
This commit is contained in:
Joe Gregorio 2017-02-15 12:54:08 -05:00 committed by Skia Commit-Bot
parent 3614d9adb3
commit ca4c60f541
2 changed files with 26 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
site/user/api/skcanvas.md
View File

@ -12,28 +12,7 @@ Here is an example of a set of drawing commands to draw a filled
heptagram. This function can be cut and pasted into
[fiddle.skia.org](https://fiddle.skia.org/).
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
const SkScalar scale = 256.0f;
const SkScalar R = 0.45f * scale;
const SkScalar TAU = 6.2831853f;
SkPath path;
path.moveTo(R, 0.0f);
for (int i = 1; i < 7; ++i) {
SkScalar theta = 3 * i * TAU / 7;
path.lineTo(R * cos(theta), R * sin(theta));
}
path.close();
SkPaint p;
p.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
canvas->translate(0.5f * scale, 0.5f * scale);
canvas->drawPath(path, p);
}
<a href='https://fiddle.skia.org/c/@skcanvas_star'><img
src='https://fiddle.skia.org/i/@skcanvas_star_raster.png'></a>
<fiddle-embed name='@skcanvas_star'></fiddle-embed>
Details
-------
@ -46,21 +25,7 @@ store any other drawing attributes in the context (e.g. color, pen
size). Rather, these are specified explicitly in each draw call, via a
SkPaint.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
canvas->save();
canvas->translate(SkIntToScalar(128), SkIntToScalar(128));
canvas->rotate(SkIntToScalar(45));
SkRect rect = SkRect::MakeXYWH(-90.5f, -90.5f, 181.0f, 181.0f);
SkPaint paint;
paint.setColor(SK_ColorBLUE);
canvas->drawRect(rect, paint);
canvas->restore();
}
<a href='https://fiddle.skia.org/c/@skcanvas_square'><img
src='https://fiddle.skia.org/i/@skcanvas_square_raster.png'></a>
<fiddle-embed name='@skcanvas_square'></fiddle-embed>
The code above will draw a rectangle rotated by 45 degrees. Exactly
what color and style the rect will be drawn in is described by the
@ -96,52 +61,7 @@ drawColor(), and save yourself having to allocate a paint.
All of the other draw APIs are similar, each one ending with a paint
parameter.
<!--?prettify lang=cc?-->
SkBitmap source;
void draw(SkCanvas* canvas) {
canvas->drawColor(SK_ColorWHITE);
SkPaint paint;
paint.setStyle(SkPaint::kStroke_Style);
paint.setStrokeWidth(4);
paint.setColor(SK_ColorRED);
SkRect rect = SkRect::MakeXYWH(50, 50, 40, 60);
canvas->drawRect(rect, paint);
SkRRect oval;
oval.setOval(rect);
oval.offset(40, 60);
paint.setColor(SK_ColorBLUE);
canvas->drawRRect(oval, paint);
paint.setColor(SK_ColorCYAN);
canvas->drawCircle(180, 50, 25, paint);
rect.offset(80, 0);
paint.setColor(SK_ColorYELLOW);
canvas->drawRoundRect(rect, 10, 10, paint);
SkPath path;
path.cubicTo(768, 0, -512, 256, 256, 256);
paint.setColor(SK_ColorGREEN);
canvas->drawPath(path, paint);
canvas->drawImage(image, 128, 128, &paint);
SkRect rect2 = SkRect::MakeXYWH(0, 0, 40, 60);
canvas->drawImageRect(image, rect2, &paint);
SkPaint paint2;
const char text[] = "Hello, Skia!";
canvas->drawText(text, strlen(text), 50, 25, paint2);
}
<a href='https://fiddle.skia.org/c/@skcanvas_paint'><img
src='https://fiddle.skia.org/i/@skcanvas_paint_raster.png'></a>
<fiddle-embed name='@skcanvas_paint'></fiddle-embed>
In some of the calls, we pass a pointer, rather than a reference, to
the paint. In those instances, the paint parameter may be null. In all

525
site/user/api/skpaint.md
View File

@ -29,63 +29,13 @@ 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.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
canvas->clear(SK_ColorWHITE);
SkPaint paint1, paint2, paint3;
paint1.setTextSize(64.0f);
paint1.setAntiAlias(true);
paint1.setColor(SkColorSetRGB(255, 0, 0));
paint1.setStyle(SkPaint::kFill_Style);
paint2.setTextSize(64.f);
paint2.setAntiAlias(true);
paint2.setColor(SkColorSetRGB(0, 136, 0));
paint2.setStyle(SkPaint::kStroke_Style);
paint2.setStrokeWidth(SkIntToScalar(3));
paint3.setTextSize(64.0f);
paint3.setAntiAlias(true);
paint3.setColor(SkColorSetRGB(136, 136, 136));
paint3.setTextScaleX(SkFloatToScalar(1.5f));
const char text[] = "Skia!";
canvas->drawText(text, strlen(text), 20.0f, 64.0f, paint1);
canvas->drawText(text, strlen(text), 20.0f, 144.0f, paint2);
canvas->drawText(text, strlen(text), 20.0f, 224.0f, paint3);
}
<a href='https://fiddle.skia.org/c/@skpaint_skia'><img
src='https://fiddle.skia.org/i/@skpaint_skia_raster.png'></a>
<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.
<!--?prettify lang=cc?-->
SkPaint paint1, paint2, paint3;
paint2.setStyle(SkPaint::kStroke_Style);
paint2.setStrokeWidth(3);
paint3.setAntiAlias(true);
paint3.setColor(SK_ColorRED);
paint3.setTextSize(80);
canvas->drawRect(SkRect::MakeXYWH(10,10,60,20), paint1);
canvas->drawRect(SkRect::MakeXYWH(80,10,60,20), paint2);
paint2.setStrokeWidth(SkIntToScalar(5));
canvas->drawOval(SkRect::MakeXYWH(150,10,60,20), paint2);
canvas->drawText("SKIA", 4, 20, 120, paint3);
paint3.setColor(SK_ColorBLUE);
canvas->drawText("SKIA", 4, 20, 220, paint3);
<a href='https://fiddle.skia.org/c/@skpaint_mix'><img
src='https://fiddle.skia.org/i/@skpaint_mix_raster.png'></a>
<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
@ -96,23 +46,7 @@ pipeline.
For example, to draw using a gradient instead of a single color,
assign a SkShader to the paint.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
SkPoint points[2] = {
SkPoint::Make(0.0f, 0.0f),
SkPoint::Make(256.0f, 256.0f)
};
SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
SkPaint paint;
paint.setShader(SkGradientShader::MakeLinear(
points, colors, nullptr, 2,
SkShader::kClamp_TileMode, 0, nullptr));
canvas->drawPaint(paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_shader'><img
src='https://fiddle.skia.org/i/@skpaint_shader_raster.png'></a>
<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
@ -159,88 +93,7 @@ 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.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
SkXfermode::Mode modes[] = {
SkXfermode::kClear_Mode,
SkXfermode::kSrc_Mode,
SkXfermode::kDst_Mode,
SkXfermode::kSrcOver_Mode,
SkXfermode::kDstOver_Mode,
SkXfermode::kSrcIn_Mode,
SkXfermode::kDstIn_Mode,
SkXfermode::kSrcOut_Mode,
SkXfermode::kDstOut_Mode,
SkXfermode::kSrcATop_Mode,
SkXfermode::kDstATop_Mode,
SkXfermode::kXor_Mode,
SkXfermode::kPlus_Mode,
SkXfermode::kModulate_Mode,
SkXfermode::kScreen_Mode,
SkXfermode::kOverlay_Mode,
SkXfermode::kDarken_Mode,
SkXfermode::kLighten_Mode,
SkXfermode::kColorDodge_Mode,
SkXfermode::kColorBurn_Mode,
SkXfermode::kHardLight_Mode,
SkXfermode::kSoftLight_Mode,
SkXfermode::kDifference_Mode,
SkXfermode::kExclusion_Mode,
SkXfermode::kMultiply_Mode,
SkXfermode::kHue_Mode,
SkXfermode::kSaturation_Mode,
SkXfermode::kColor_Mode,
SkXfermode::kLuminosity_Mode,
};
SkRect rect = SkRect::MakeWH(64.0f, 64.0f);
SkPaint text, stroke, src, dst;
stroke.setStyle(SkPaint::kStroke_Style);
text.setTextSize(24.0f);
text.setAntiAlias(true);
SkPoint srcPoints[2] = {
SkPoint::Make(0.0f, 0.0f),
SkPoint::Make(64.0f, 0.0f)
};
SkColor srcColors[2] = {
SK_ColorMAGENTA & 0x00FFFFFF,
SK_ColorMAGENTA};
src.setShader(SkGradientShader::MakeLinear(
srcPoints, srcColors, nullptr, 2,
SkShader::kClamp_TileMode, 0, nullptr));
SkPoint dstPoints[2] = {
SkPoint::Make(0.0f, 0.0f),
SkPoint::Make(0.0f, 64.0f)
};
SkColor dstColors[2] = {
SK_ColorCYAN & 0x00FFFFFF,
SK_ColorCYAN};
dst.setShader(SkGradientShader::MakeLinear(
dstPoints, dstColors, nullptr, 2,
SkShader::kClamp_TileMode, 0, nullptr));
canvas->clear(SK_ColorWHITE);
size_t N = sizeof(modes) / sizeof(modes[0]);
size_t K = (N - 1) / 3 + 1;
SkASSERT(K * 64 == 640); // tall enough
for (size_t i = 0; i < N; ++i) {
SkAutoCanvasRestore autoCanvasRestore(canvas, true);
canvas->translate(192.0f * (i / K), 64.0f * (i % K));
const char* desc = SkXfermode::ModeName(modes[i]);
canvas->drawText(desc, strlen(desc), 68.0f, 30.0f, text);
canvas->clipRect(SkRect::MakeWH(64.0f, 64.0f));
canvas->drawColor(SK_ColorLTGRAY);
(void)canvas->saveLayer(nullptr, nullptr);
canvas->clear(SK_ColorTRANSPARENT);
canvas->drawPaint(dst);
src.setXfermodeMode(modes[i]);
canvas->drawPaint(src);
canvas->drawRect(rect, stroke);
}
}
<a href='https://fiddle.skia.org/c/@skpaint_xfer'><img
src='https://fiddle.skia.org/i/@skpaint_xfer_raster.png'></a>
<fiddle-embed name='@skpaint_xfer'></fiddle-embed>
<span id="SkShader"></span>
@ -251,111 +104,32 @@ Several shaders are defined (besides the linear gradient already mentioned):
* Bitmap Shader
<!--?prettify lang=cc?-->
canvas->clear(SK_ColorWHITE);
SkMatrix matrix;
matrix.setScale(0.75f, 0.75f);
matrix.preRotate(30.0f);
SkPaint paint;
paint.setShader(
image->makeShader(
SkShader::kRepeat_TileMode,
SkShader::kRepeat_TileMode,
&matrix));
canvas->drawPaint(paint);
<a href='https://fiddle.skia.org/c/@skpaint_bitmap_shader'><img
src='https://fiddle.skia.org/i/@skpaint_bitmap_shader_raster.png'></a>
<fiddle-embed name='@skpaint_bitmap_shader'></fiddle-embed>
* Radial Gradient Shader
<!--?prettify lang=cc?-->
SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
SkPaint paint;
paint.setShader(SkGradientShader::MakeRadial(
SkPoint::Make(128.0f, 128.0f), 180.0f,
colors, nullptr, 2, SkShader::kClamp_TileMode, 0, nullptr));
canvas->drawPaint(paint);
<a href='https://fiddle.skia.org/c/@skpaint_radial'><img
src='https://fiddle.skia.org/i/@skpaint_radial_raster.png'></a>
<fiddle-embed name='@skpaint_radial'></fiddle-embed>
* Two-Point Conical Gradient Shader
<!--?prettify lang=cc?-->
SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
SkPaint paint;
paint.setShader(SkGradientShader::MakeTwoPointConical(
SkPoint::Make(128.0f, 128.0f), 128.0f,
SkPoint::Make(128.0f, 16.0f), 16.0f,
colors, nullptr, 2, SkShader::kClamp_TileMode, 0, nullptr));
canvas->drawPaint(paint);
<a href='https://fiddle.skia.org/c/@skpaint_2pt'><img
src='https://fiddle.skia.org/i/@skpaint_2pt_raster.png'></a>
<fiddle-embed name='@skpaint_2pt'></fiddle-embed>
* Sweep Gradient Shader
<!--?prettify lang=cc?-->
SkColor colors[4] = {
SK_ColorCYAN, SK_ColorMAGENTA, SK_ColorYELLOW, SK_ColorCYAN};
SkPaint paint;
paint.setShader(SkGradientShader::MakeSweep(
128.0f, 128.0f, colors, nullptr, 4, 0, nullptr));
canvas->drawPaint(paint);
<a href='https://fiddle.skia.org/c/@skpaint_sweep'><img
src='https://fiddle.skia.org/i/@skpaint_sweep_raster.png'></a>
<fiddle-embed name='@skpaint_sweep'></fiddle-embed>
* Fractal Perlin Noise Shader
<!--?prettify lang=cc?-->
canvas->clear(SK_ColorWHITE);
SkPaint paint;
paint.setShader(SkPerlinNoiseShader::MakeFractalNoise(
0.05f, 0.05f, 4, 0.0f, nullptr));
canvas->drawPaint(paint);
<a href='https://fiddle.skia.org/c/@skpaint_perlin'><img
src='https://fiddle.skia.org/i/@skpaint_perlin_raster.png'></a>
<fiddle-embed name='@skpaint_perlin'></fiddle-embed>
* Turbulence Perlin Noise Shader
<!--?prettify lang=cc?-->
canvas->clear(SK_ColorWHITE);
SkPaint paint;
paint.setShader(SkPerlinNoiseShader::MakeTurbulence(
0.05f, 0.05f, 4, 0.0f, nullptr));
canvas->drawPaint(paint);
<a href='https://fiddle.skia.org/c/@skpaint_turb'><img
src='https://fiddle.skia.org/i/@skpaint_turb_raster.png'></a>
<fiddle-embed name='@skpaint_turb'></fiddle-embed>
* Compose Shader
<!--?prettify lang=cc?-->
SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
SkPaint paint;
paint.setShader(
SkShader::MakeComposeShader(
SkGradientShader::MakeRadial(
SkPoint::Make(128.0f, 128.0f), 180.0f,
colors, nullptr, 2, SkShader::kClamp_TileMode, 0, nullptr),
SkPerlinNoiseShader::MakeTurbulence(0.025f, 0.025f, 2, 0.0f, nullptr),
SkXfermode::kDifference_Mode)
);
canvas->drawPaint(paint);
<a href='https://fiddle.skia.org/c/@skpaint_compose_shader'><img
src='https://fiddle.skia.org/i/@skpaint_compose_shader_raster.png'></a>
<fiddle-embed name='@skpaint_compose_shader'></fiddle-embed>
<span id="SkMaskFilter"></span>
@ -365,20 +139,7 @@ SkMaskFilter
* Blur Mask Filter
<!--?prettify lang=cc?-->
canvas->drawText(text, strlen(text), 0, 160, paint);
canvas->drawColor(SK_ColorWHITE);
SkPaint paint;
paint.setAntiAlias(true);
paint.setTextSize(120);
paint.setMaskFilter(SkBlurMaskFilter::Make(
kNormal_SkBlurStyle, 5.0f, 0));
const char text[] = "Skia";
canvas->drawText(text, strlen(text), 0, 160, paint);
<a href='https://fiddle.skia.org/c/@skpaint_blur_mask_filter'><img
src='https://fiddle.skia.org/i/@skpaint_blur_mask_filter_raster.png'></a>
<fiddle-embed name='@skpaint_blur_mask_filter'></fiddle-embed>
<span id="SkColorFilter"></span>
@ -388,96 +149,11 @@ SkColorFilter
* Color Matrix Color Filter
<!--?prettify lang=cc?-->
void f(SkCanvas* c, SkScalar x, SkScalar y, SkScalar colorMatrix[20]) {
SkPaint paint;
paint.setColorFilter(SkColorFilter::MakeMatrixFilterRowMajor255(colorMatrix));
c->drawImage(image, x, y, &paint);
}
void draw(SkCanvas* c) {
c->scale(0.25, 0.25);
SkScalar colorMatrix1[20] = {
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
1, 0, 0, 0, 0,
0, 0, 0, 1, 0};
f(c, 0, 0, colorMatrix1);
SkScalar grayscale[20] = {
0.21, 0.72, 0.07, 0.0, 0.0,
0.21, 0.72, 0.07, 0.0, 0.0,
0.21, 0.72, 0.07, 0.0, 0.0,
0.0, 0.0, 0.0, 1.0, 0.0};
f(c, 512, 0, grayscale);
SkScalar colorMatrix3[20] = {
-1, 1, 1, 0, 0,
1, -1, 1, 0, 0,
1, 1, -1, 0, 0,
0, 0, 0, 1, 0};
f(c, 0, 512, colorMatrix3);
SkScalar colorMatrix4[20] = {
0.0, 0.5, 0.5, 0, 0,
0.5, 0.0, 0.5, 0, 0,
0.5, 0.5, 0.0, 0, 0,
0.0, 0.0, 0.0, 1, 0};
f(c, 512, 512, colorMatrix4);
SkScalar highContrast[20] = {
4.0, 0.0, 0.0, 0.0, -4.0 * 255 / (4.0 - 1),
0.0, 4.0, 0.0, 0.0, -4.0 * 255 / (4.0 - 1),
0.0, 0.0, 4.0, 0.0, -4.0 * 255 / (4.0 - 1),
0.0, 0.0, 0.0, 1.0, 0.0};
f(c, 1024, 0, highContrast);
SkScalar colorMatrix6[20] = {
0, 0, 1, 0, 0,
1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 0, 1, 0};
f(c, 1024, 512, colorMatrix6);
SkScalar sepia[20] = {
0.393, 0.769, 0.189, 0.0, 0.0,
0.349, 0.686, 0.168, 0.0, 0.0,
0.272, 0.534, 0.131, 0.0, 0.0,
0.0, 0.0, 0.0, 1.0, 0.0};
f(c, 1536, 0, sepia);
SkScalar inverter[20] = {
-1, 0, 0, 0, 255,
0, -1, 0, 0, 255,
0, 0, -1, 0, 255,
0, 0, 0, 1, 0};
f(c, 1536, 512, inverter);
}
<a href='https://fiddle.skia.org/c/@skpaint_matrix_color_filter'><img
src='https://fiddle.skia.org/i/@skpaint_matrix_color_filter_raster.png'></a>
<fiddle-embed name='@skpaint_matrix_color_filter'></fiddle-embed>
* Color Table Color Filter
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
canvas->scale(0.5, 0.5);
uint8_t ct[256];
for (int i = 0; i < 256; ++i) {
int x = (i - 96) * 255 / 64;
ct[i] = x < 0 ? 0 : x > 255 ? 255 : x;
}
SkPaint paint;
paint.setColorFilter(
SkTableColorFilter::MakeARGB(nullptr, ct, ct, ct));
canvas->drawImage(image, 0, 0, &paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_color_table_filter'><img
src='https://fiddle.skia.org/i/@skpaint_color_table_filter_raster.png'></a>
<fiddle-embed name='@skpaint_color_table_filter'></fiddle-embed>
<span id="SkPathEffect"></span>
@ -487,200 +163,45 @@ SkPathEffect
* SkPath2DPathEffect: Stamp the specified path to fill the shape,
using the matrix to define the latice.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
SkScalar scale = 10.0f;
SkPath path;
static const int8_t pts[] = { 2, 2, 1, 3, 0, 3, 2, 1, 3, 1,
4, 0, 4, 1, 5, 1, 4, 2, 4, 3, 2, 5, 2, 4, 3, 3, 2, 3 };
path.moveTo(2 * scale, 3 * scale);
for (size_t i = 0 ; i < sizeof(pts)/sizeof(pts[0]); i += 2) {
path.lineTo(pts[i] * scale, pts[i + 1] * scale);
}
path.close();
SkMatrix matrix = SkMatrix::MakeScale(4 * scale);
SkPaint paint;
paint.setPathEffect(SkPath2DPathEffect::Make(matrix, path));
paint.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
SkRect bounds = canvas->getLocalClipBounds();
bounds.outset(2 * scale, 2 * scale);
canvas->drawRect(bounds, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_path_2d_path_effect'><img
src='https://fiddle.skia.org/i/@skpaint_path_2d_path_effect_raster.png'></a>
<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.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
SkPaint paint;
SkMatrix lattice;
lattice.setScale(8.0f, 8.0f);
lattice.preRotate(30.0f);
paint.setPathEffect(SkLine2DPathEffect::Make(0.0f, lattice));
paint.setAntiAlias(true);
SkRect bounds = canvas->getLocalClipBounds();
bounds.outset(8.0f, 8.0f);
canvas->clear(SK_ColorWHITE);
canvas->drawRect(bounds, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_line_2d_path_effect'><img
src='https://fiddle.skia.org/i/@skpaint_line_2d_path_effect_raster.png'></a>
<fiddle-embed name='@skpaint_line_2d_path_effect'></fiddle-embed>
* SkPath1DPathEffect: create dash-like effects by replicating the specified path along the drawn path.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
SkPaint paint;
SkPath path;
path.addOval(SkRect::MakeWH(16.0f, 6.0f));
paint.setPathEffect(SkPath1DPathEffect::Make(
path, 32.0f, 0.0f, SkPath1DPathEffect::kRotate_Style));
paint.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
canvas->drawCircle(128.0f, 128.0f, 122.0f, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_path_1d_path_effect'><img
src='https://fiddle.skia.org/i/@skpaint_path_1d_path_effect_raster.png'></a>
<fiddle-embed name='@skpaint_path_1d_path_effect'></fiddle-embed>
* SkArcToPathEffect
The following few examples use this function:
<!--?prettify lang=cc?-->
SkPath star() {
const SkScalar R = 115.2f, C = 128.0f;
SkPath path;
path.moveTo(C + R, C);
for (int i = 1; i < 8; ++i) {
SkScalar a = 2.6927937f * i;
path.lineTo(C + R * cos(a), C + R * sin(a));
}
return path;
}
void draw(SkCanvas* canvas) {
SkPaint paint;
paint.setPathEffect(SkArcToPathEffect::Make(8.0f));
paint.setStyle(SkPaint::kStroke_Style);
paint.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
SkPath path(star());
canvas->drawPath(path, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_arc_to_path_effect'><img
src='https://fiddle.skia.org/i/@skpaint_arc_to_path_effect_raster.png'></a>
<fiddle-embed name='@skpaint_arc_to_path_effect'></fiddle-embed>
* SkCornerPathEffect: a path effect that can turn sharp corners into
various treatments (e.g. rounded corners).
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
SkPaint paint;
paint.setPathEffect(SkCornerPathEffect::Make(32.0f));
paint.setStyle(SkPaint::kStroke_Style);
paint.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
const SkScalar R = 115.2f;
SkPath path(star());
canvas->drawPath(path, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_corner_path_effects'><img src='https://fiddle.skia.org/i/@skpaint_corner_path_effects_raster.png'></a>
<fiddle-embed name='@skpaint_corner_path_effects'></fiddle-embed>
* SkDashPathEffect: a path effect that implements dashing.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
const SkScalar intervals[] = { 10.0f, 5.0f, 2.0f, 5.0f };
size_t count = sizeof(intervals) / sizeof(intervals[0]);
SkPaint paint;
paint.setPathEffect(SkDashPathEffect::Make(intervals, count, 0.0f));
paint.setStyle(SkPaint::kStroke_Style);
paint.setStrokeWidth(2.0f);
paint.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
SkPath path(star());
canvas->drawPath(path, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_dash_path_effect'><img src='https://fiddle.skia.org/i/@skpaint_dash_path_effect_raster.png'></a>
<fiddle-embed name='@skpaint_dash_path_effect'></fiddle-embed>
* SkDiscretePathEffect: This path effect chops a path into discrete
segments, and randomly displaces them.
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
SkPaint paint;
paint.setPathEffect(SkDiscretePathEffect::Make(10.0f, 4.0f));
paint.setStyle(SkPaint::kStroke_Style);
paint.setStrokeWidth(2.0f);
paint.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
SkPath path(star());
canvas->drawPath(path, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_discrete_path_effect'><img
src='https://fiddle.skia.org/i/@skpaint_discrete_path_effect_raster.png'></a>
<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))).
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
const SkScalar intervals[] = { 10.0f, 5.0f, 2.0f, 5.0f };
size_t count = sizeof(intervals) / sizeof(intervals[0]);
SkPaint paint;
paint.setPathEffect(SkComposePathEffect::Make(
SkDashPathEffect::Make(intervals, count, 0.0f),
SkDiscretePathEffect::Make(10.0f, 4.0f)
));
paint.setStyle(SkPaint::kStroke_Style);
paint.setStrokeWidth(2.0f);
paint.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
SkPath path(star());
canvas->drawPath(path, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_compose_path_effect'><img
src='https://fiddle.skia.org/i/@skpaint_compose_path_effect_raster.png'></a>
<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)).
<!--?prettify lang=cc?-->
void draw(SkCanvas* canvas) {
SkPaint paint;
paint.setPathEffect(SkSumPathEffect::Make(
SkDiscretePathEffect::Make(10.0f, 4.0f),
SkDiscretePathEffect::Make(10.0f, 4.0f, 1245u)
));
paint.setStyle(SkPaint::kStroke_Style);
paint.setStrokeWidth(2.0f);
paint.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
SkPath path(star());
canvas->drawPath(path, paint);
}
<a href='https://fiddle.skia.org/c/@skpaint_sum_path_effect'><img
src='https://fiddle.skia.org/i/@skpaint_sum_path_effect_raster.png'></a>
<fiddle-embed name='@skpaint_sum_path_effect'></fiddle-embed>