Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(102)

Unified Diff: site/user/api/skpaint.md

Issue 1240893003: documentation: more API details and examples. (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: 2015-07-27 (Monday) 15:23:50 EDT Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: site/user/api/skpaint.md
diff --git a/site/user/api/skpaint.md b/site/user/api/skpaint.md
index 1160df08d3af9ef4b04b11888284e629e2ba2f28..4db81c3de621b88afff0eba7d4ac841cd960592e 100644
--- a/site/user/api/skpaint.md
+++ b/site/user/api/skpaint.md
@@ -3,8 +3,6 @@ SkPaint
*color, stroke, font, effects*
-<!-- Updated Jan 17, 2013 by humper@google.com -->
-
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.
@@ -12,7 +10,7 @@ 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 setup for a particular use. Factoring
+number of paint objects, each set up for a particular use. Factoring
all of these color and stylistic attribute 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
@@ -50,22 +48,31 @@ of matrix and clip settings.
<a href="https://fiddle.skia.org/c/b8e7991ede1ca88e5458aa1f0039caf9">
<img src="https://fiddle.skia.org/i/b8e7991ede1ca88e5458aa1f0039caf9_raster.png"></a>
-This shows three different paints, each setup to draw in a different
+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?-->
- canvas->drawRect(..., paint1);
- canvas->drawRect(..., paint2);
+ 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(..., paint2);
+ canvas->drawOval(SkRect::MakeXYWH(150,10,60,20), paint2);
- canvas->drawText(..., paint3);
- paint3.setColor(0xFF0000FF);
- canvas->drawText(..., paint3);
+ 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/5203b17103f487dd33965b4211d80956">
+<img src="https://fiddle.skia.org/i/5203b17103f487dd33965b4211d80956_raster.png"></a>
Beyond simple attributes such as color, strokes, and text values,
paints support effects. These are subclasses of different aspects of
@@ -78,18 +85,31 @@ assign a SkShader to the paint.
<!--?prettify lang=cc?-->
- SkShader* shader = SkGradientShader::CreateLinear(...);
+ SkPoint points[2] = {
+ SkPoint::Make(0.0f, 0.0f),
+ SkPoint::Make(256.0f, 256.0f)
+ };
+ SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
+ SkShader* shader =
+ SkGradientShader::CreateLinear(
+ points, colors, NULL, 2,
+ SkShader::kClamp_TileMode, 0, NULL);
+ SkPaint paint;
paint.setShader(shader);
shader->unref();
+ canvas->drawPaint(paint);
+
+<a href="https://fiddle.skia.org/c/f91b5310d57744a5a1475b7e47d4a172">
+<img src="https://fiddle.skia.org/i/f91b5310d57744a5a1475b7e47d4a172_raster.png"></a>
Now, anything drawn with that paint will be drawn with the gradient
-specified in the call to CreateLinear(). The shader object that is
+specified in the call to `CreateLinear()`. 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
+`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
+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:
@@ -116,3 +136,275 @@ but also for measuring it.
paint.getTextBounds(...);
paint.textToGlyphs(...);
paint.getFontMetrics(...);
+
+ShShader
+--------
+
+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);
+ SkShader* shader =
+ SkShader::CreateBitmapShader(
+ source,
+ SkShader::kRepeat_TileMode ,
+ SkShader::kRepeat_TileMode ,
+ &matrix);
+ SkPaint paint;
+ paint.setShader(shader);
+ shader->unref();
+ canvas->drawPaint(paint);
+
+ <a href="https://fiddle.skia.org/c/0e8d08e0a0b342e9e45c364d0e5cea8a">
+ <img src="https://fiddle.skia.org/i/0e8d08e0a0b342e9e45c364d0e5cea8a_raster.png"></a>
+
+* Radial Gradient Shader
+
+ <!--?prettify lang=cc?-->
+
+ SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
+ SkShader* shader =
+ SkGradientShader::CreateRadial(
+ SkPoint::Make(128.0f, 128.0f), 180.0f,
+ colors, NULL, 2, SkShader::kClamp_TileMode, 0, NULL);
+ SkPaint paint;
+ paint.setShader(shader);
+ shader->unref();
+ canvas->drawPaint(paint);
+
+ <a href="https://fiddle.skia.org/c/601abd2819e38365900bf62286986024">
+ <img src="https://fiddle.skia.org/i/601abd2819e38365900bf62286986024_raster.png"></a>
+
+* Two-Point Conical Gradient Shader
+
+ <!--?prettify lang=cc?-->
+
+ SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
+ SkShader* shader =
+ SkGradientShader::CreateTwoPointConical(
+ SkPoint::Make(128.0f, 128.0f), 128.0f,
+ SkPoint::Make(128.0f, 16.0f), 16.0f,
+ colors, NULL, 2, SkShader::kClamp_TileMode, 0, NULL);
+ SkPaint paint;
+ paint.setShader(shader);
+ shader->unref();
+ canvas->drawPaint(paint);
+
+ <a href="https://fiddle.skia.org/c/991f7d67ff1ccebd6c2c4fab18a76edc">
+ <img src="https://fiddle.skia.org/i/991f7d67ff1ccebd6c2c4fab18a76edc_raster.png"></a>
+
+
+* Sweep Gradient Shader
+
+ <!--?prettify lang=cc?-->
+
+ SkColor colors[4] = {
+ SK_ColorCYAN, SK_ColorMAGENTA, SK_ColorYELLOW, SK_ColorCYAN};
+ SkShader* shader =
+ SkGradientShader::CreateSweep(
+ 128.0f, 128.0f, colors, NULL, 4, 0, NULL);
+ SkPaint paint;
+ paint.setShader(shader);
+ shader->unref();
+ canvas->drawPaint(paint);
+
+ <a href="https://fiddle.skia.org/c/cee9d1831f6679c3d88170f857995d12">
+ <img src="https://fiddle.skia.org/i/cee9d1831f6679c3d88170f857995d12_raster.png"></a>
+
+* Fractal Perlin Noise Shader
+
+ <!--?prettify lang=cc?-->
+
+ canvas->clear(SK_ColorWHITE);
+ SkShader* shader = SkPerlinNoiseShader::CreateFractalNoise(
+ 0.05f, 0.05f, 4, 0.0f, NULL);
+ SkPaint paint;
+ paint.setShader(shader);
+ shader->unref();
+ canvas->drawPaint(paint);
+
+ <a href="https://fiddle.skia.org/c/cc45c5349c3b31f97da7c1af7f84162a">
+ <img src="https://fiddle.skia.org/i/cc45c5349c3b31f97da7c1af7f84162a_raster.png"></a>
+
+* Turbulence Perlin Noise Shader
+
+ <!--?prettify lang=cc?-->
+
+ canvas->clear(SK_ColorWHITE);
+ SkShader* shader = SkPerlinNoiseShader::CreateTurbulence(
+ 0.05f, 0.05f, 4, 0.0f, NULL);
+ SkPaint paint;
+ paint.setShader(shader);
+ shader->unref();
+ canvas->drawPaint(paint);
+
+ <a href="https://fiddle.skia.org/c/52729ed3a71b89a6dba4f60e8eb67727">
+ <img src="https://fiddle.skia.org/i/52729ed3a71b89a6dba4f60e8eb67727_raster.png"></a>
+
+* Compose Shader
+
+ <!--?prettify lang=cc?-->
+
+ SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
+ SkShader* shader1 =
+ SkGradientShader::CreateRadial(
+ SkPoint::Make(128.0f, 128.0f), 180.0f,
+ colors, NULL, 2, SkShader::kClamp_TileMode, 0, NULL);
+ SkShader* shader2 = SkPerlinNoiseShader::CreateTurbulence(
+ 0.025f, 0.025f, 2, 0.0f, NULL);
+ SkShader* shader =
+ new SkComposeShader(shader1, shader2);
+ SkPaint paint;
+ paint.setShader(shader);
+ shader->unref();
+ shader2->unref();
+ shader1->unref();
+ canvas->drawPaint(paint);
+
+ <a href="https://fiddle.skia.org/c/1209b7a29d870302edcc43dc0916e8d5">
+ <img src="https://fiddle.skia.org/i/1209b7a29d870302edcc43dc0916e8d5_raster.png"></a>
+
+
+SkMaskFilter
+------------
+
+* Blur Mask Filter
+
+ <!--?prettify lang=cc?-->
+
+ canvas->drawColor(SK_ColorWHITE);
+ SkPaint paint;
+ paint.setAntiAlias(true);
+ paint.setTextSize(120);
+ SkMaskFilter* filter =
+ SkBlurMaskFilter::Create(
+ kNormal_SkBlurStyle, 5.0f, 0);
+ paint.setMaskFilter(filter);
+ filter->unref();
+ const char text[] = "Skia";
+ canvas->drawText(text, strlen(text), 0, 160, paint);
+
+ <a href="https://fiddle.skia.org/c/0e004664122851691d67a291007b64d7">
+ <img src="https://fiddle.skia.org/i/0e004664122851691d67a291007b64d7_raster.png"></a>
+
+* Emboss Mask Filter
+
+ <!--?prettify lang=cc?-->
+
+ canvas->drawColor(SK_ColorWHITE);
+ SkPaint paint;
+ paint.setAntiAlias(true);
+ paint.setTextSize(120);
+ SkScalar direction[3] = {1.0f, 1.0f, 1.0f};
+ SkMaskFilter* filter =
+ SkBlurMaskFilter::CreateEmboss(
+ 2.0f, direction, 0.3f, 0.1f);
+ paint.setMaskFilter(filter);
+ filter->unref();
+ const char text[] = "Skia";
+ canvas->drawText(text, strlen(text), 0, 160, paint);
+
+ <a href="https://fiddle.skia.org/c/1ef71be7fb749a2d81a55721b2d2c77d">
+ <img src="https://fiddle.skia.org/i/1ef71be7fb749a2d81a55721b2d2c77d_raster.png"></a>
+
+
+SkColorFilter
+-------------
+
+* Color Matrix Color Filter
+
+ <!--?prettify lang=cc?-->
+
+ void f(SkCanvas* c, SkScalar x, SkScalar y, SkScalar colorMatrix[20]) {
+ SkColorFilter* cf = SkColorMatrixFilter::Create(colorMatrix);
+ SkPaint paint;
+ paint.setColorFilter(cf);
+ cf->unref();
+ c->drawBitmap(source, 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/91fb5341ee7903c9682df20bb3d73dbb">
+ <img src="https://fiddle.skia.org/i/91fb5341ee7903c9682df20bb3d73dbb_raster.png"></a>
+
+* Color Table Color Filter
+
+ <!--?prettify lang=cc?-->
+
+ 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;
+ }
+ SkColorFilter* cf = SkTableColorFilter::CreateARGB(NULL, ct, ct, ct);
+ SkPaint paint;
+ paint.setColorFilter(cf);
+ cf->unref();
+ canvas->drawBitmap(source, 0, 0, &paint);
+
+ <a href="https://fiddle.skia.org/c/0d3d339543afa1b10c60f9826f264c3f">
+ <img src="https://fiddle.skia.org/i/0d3d339543afa1b10c60f9826f264c3f_raster.png"></a>
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698