OLD | NEW |
1 SkCanvas | 1 SkCanvas |
2 ======== | 2 ======== |
3 | 3 |
4 *The drawing context* | 4 *The drawing context* |
5 | 5 |
6 <!-- Updated Mar 4, 2011 --> | 6 <!-- Updated Mar 4, 2011 --> |
7 | 7 |
8 Preview | 8 Preview |
9 ------- | 9 ------- |
10 | 10 |
11 Here is an example of a set of drawing commands to draw a filled | 11 Here is an example of a set of drawing commands to draw a filled |
12 heptagram. This function can be cut and pasted into | 12 heptagram. This function can be cut and pasted into |
13 [fiddle.skia.org](https://fiddle.skia.org/). | 13 [fiddle.skia.org](https://fiddle.skia.org/). |
14 | 14 |
15 <!--?prettify lang=cc?--> | 15 <!--?prettify lang=cc?--> |
16 | 16 |
17 void draw(SkCanvas* canvas) { | 17 void draw(SkCanvas* canvas) { |
18 const SkScalar scale = 256.0f; | 18 const SkScalar scale = 256.0f; |
19 const SkScalar R = 0.45f * scale; | 19 const SkScalar R = 0.45f * scale; |
20 const SkScalar TAU = 6.2831853f; | 20 const SkScalar TAU = 6.2831853f; |
21 SkPath path; | 21 SkPath path; |
22 for (int i = 0; i < 7; ++i) { | 22 path.moveTo(R, 0.0f); |
| 23 for (int i = 1; i < 7; ++i) { |
23 SkScalar theta = 3 * i * TAU / 7; | 24 SkScalar theta = 3 * i * TAU / 7; |
24 if (i == 0) { | 25 path.lineTo(R * cos(theta), R * sin(theta)); |
25 path.moveTo(R * cos(theta), R * sin(theta)); | |
26 } else { | |
27 path.lineTo(R * cos(theta), R * sin(theta)); | |
28 } | |
29 } | 26 } |
30 path.close(); | 27 path.close(); |
31 SkPaint p; | 28 SkPaint p; |
32 p.setAntiAlias(true); | 29 p.setAntiAlias(true); |
33 canvas->clear(SK_ColorWHITE); | 30 canvas->clear(SK_ColorWHITE); |
34 canvas->translate(0.5f * scale, 0.5f * scale); | 31 canvas->translate(0.5f * scale, 0.5f * scale); |
35 canvas->drawPath(path, p); | 32 canvas->drawPath(path, p); |
36 } | 33 } |
37 | 34 |
| 35 <a href="https://fiddle.skia.org/c/d7b4ccb6d6281b68a274a72b187fc450"> |
| 36 <img src="https://fiddle.skia.org/i/d7b4ccb6d6281b68a274a72b187fc450_raster.png"
></a> |
| 37 |
38 Details | 38 Details |
39 ------- | 39 ------- |
40 | 40 |
41 SkCanvas is the drawing context for Skia. It knows where to direct the | 41 SkCanvas is the drawing context for Skia. It knows where to direct the |
42 drawing (i.e. where the screen of offscreen pixels are), and maintains | 42 drawing (i.e. where the screen of offscreen pixels are), and maintains |
43 a stack of matrices and clips. Note however, that unlike similar | 43 a stack of matrices and clips. Note however, that unlike similar |
44 contexts in other APIs like postscript, cairo, or awt, Skia does not | 44 contexts in other APIs like postscript, cairo, or awt, Skia does not |
45 store any other drawing attributes in the context (e.g. color, pen | 45 store any other drawing attributes in the context (e.g. color, pen |
46 size). Rather, these are specified explicitly in each draw call, via a | 46 size). Rather, these are specified explicitly in each draw call, via a |
47 SkPaint. | 47 SkPaint. |
48 | 48 |
49 <!--?prettify lang=cc?--> | 49 <!--?prettify lang=cc?--> |
50 | 50 |
51 void draw(SkCanvas* canvas) { | 51 void draw(SkCanvas* canvas) { |
52 canvas->save(); | 52 canvas->save(); |
53 canvas->rotate(SkIntToScalar(45)); | 53 canvas->rotate(SkIntToScalar(45)); |
54 SkRect rect = SkRect::MakeXYWH(150, -50, 100, 100); | 54 SkRect rect = SkRect::MakeXYWH(150, -50, 100, 100); |
55 SkPaint paint; | 55 SkPaint paint; |
56 canvas->drawRect(rect, paint); | 56 canvas->drawRect(rect, paint); |
57 canvas->restore(); | 57 canvas->restore(); |
58 } | 58 } |
59 | 59 |
| 60 <a href="https://fiddle.skia.org/c/71f2e87df2be1cdbc44139ee3e2790eb"> |
| 61 <img src="https://fiddle.skia.org/i/71f2e87df2be1cdbc44139ee3e2790eb_raster.png"
></a> |
| 62 |
60 The code above will draw a rectangle rotated by 45 degrees. Exactly | 63 The code above will draw a rectangle rotated by 45 degrees. Exactly |
61 what color and style the rect will be drawn in is described by the | 64 what color and style the rect will be drawn in is described by the |
62 paint, not the canvas. | 65 paint, not the canvas. |
63 | 66 |
64 Check out more detailed info on [creating a SkCanvas object](canvas). | 67 Check out more detailed info on [creating a SkCanvas object](canvas). |
65 | 68 |
66 To begin with, we might want to erase the entire canvas. We can do | 69 To begin with, we might want to erase the entire canvas. We can do |
67 this by drawing an enormous rectangle, but there are easier ways to do | 70 this by drawing an enormous rectangle, but there are easier ways to do |
68 it. | 71 it. |
69 | 72 |
(...skipping 16 matching lines...) Expand all Loading... |
86 | 89 |
87 void draw(SkCanvas* canvas) { | 90 void draw(SkCanvas* canvas) { |
88 canvas->drawColor(SK_ColorWHITE); | 91 canvas->drawColor(SK_ColorWHITE); |
89 } | 92 } |
90 | 93 |
91 All of the other draw APIs are similar, each one ending with a paint | 94 All of the other draw APIs are similar, each one ending with a paint |
92 parameter. | 95 parameter. |
93 | 96 |
94 <!--?prettify lang=cc?--> | 97 <!--?prettify lang=cc?--> |
95 | 98 |
| 99 SkBitmap source; |
| 100 |
96 void draw(SkCanvas* canvas) { | 101 void draw(SkCanvas* canvas) { |
| 102 canvas->drawColor(SK_ColorWHITE); |
| 103 |
97 SkPaint paint; | 104 SkPaint paint; |
98 paint.setStyle(SkPaint::kStroke_Style); | 105 paint.setStyle(SkPaint::kStroke_Style); |
99 paint.setStrokeWidth(2); | 106 paint.setStrokeWidth(4); |
| 107 paint.setColor(SK_ColorRED); |
100 | 108 |
101 SkRect rect = SkRect::MakeXYWH(50, 50, 40, 60); | 109 SkRect rect = SkRect::MakeXYWH(50, 50, 40, 60); |
102 canvas->drawRect(rect, paint); | 110 canvas->drawRect(rect, paint); |
103 | 111 |
104 SkRRect oval; | 112 SkRRect oval; |
105 oval.setOval(rect); | 113 oval.setOval(rect); |
106 oval.offset(40, 60); | 114 oval.offset(40, 60); |
| 115 paint.setColor(SK_ColorBLUE); |
107 canvas->drawRRect(oval, paint); | 116 canvas->drawRRect(oval, paint); |
108 | 117 |
| 118 paint.setColor(SK_ColorCYAN); |
109 canvas->drawCircle(180, 50, 25, paint); | 119 canvas->drawCircle(180, 50, 25, paint); |
110 | 120 |
111 rect.offset(80, 0); | 121 rect.offset(80, 0); |
| 122 paint.setColor(SK_ColorYELLOW); |
112 canvas->drawRoundRect(rect, 10, 10, paint); | 123 canvas->drawRoundRect(rect, 10, 10, paint); |
113 | 124 |
114 SkPath path; | 125 SkPath path; |
115 path.cubicTo(768, 0, -512, 256, 256, 256); | 126 path.cubicTo(768, 0, -512, 256, 256, 256); |
| 127 paint.setColor(SK_ColorGREEN); |
116 canvas->drawPath(path, paint); | 128 canvas->drawPath(path, paint); |
117 | 129 |
118 canvas->drawBitmap(source, 128, 128, &paint); | 130 canvas->drawBitmap(source, 128, 128, &paint); |
119 | 131 |
120 SkRect rect2 = SkRect::MakeXYWH(0, 0, 40, 60); | 132 SkRect rect2 = SkRect::MakeXYWH(0, 0, 40, 60); |
121 canvas->drawBitmapRect(source, rect2); | 133 canvas->drawBitmapRect(source, rect2); |
122 | 134 |
123 SkPaint paint2; | 135 SkPaint paint2; |
124 const char text[] = "Hello, Skia!"; | 136 const char text[] = "Hello, Skia!"; |
125 canvas->drawText(text, strlen(text), 50, 25, paint2); | 137 canvas->drawText(text, strlen(text), 50, 25, paint2); |
126 } | 138 } |
127 | 139 |
| 140 <a href="https://fiddle.skia.org/c/35b614d41e60289461d658a9d509e28d"> |
| 141 <img src="https://fiddle.skia.org/i/35b614d41e60289461d658a9d509e28d_raster.png"
></a> |
| 142 |
128 In some of the calls, we pass a pointer, rather than a reference, to | 143 In some of the calls, we pass a pointer, rather than a reference, to |
129 the paint. In those instances, the paint parameter may be null. In all | 144 the paint. In those instances, the paint parameter may be null. In all |
130 other cases the paint parameter is required. | 145 other cases the paint parameter is required. |
131 | 146 |
132 Next: [SkPaint](/user/api/skpaint) | 147 Next: [SkPaint](/user/api/skpaint) |
OLD | NEW |