| 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>
|
|
|