OLD | NEW |
1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
4 | 4 |
5 part of $LIBRARYNAME; | 5 part of $LIBRARYNAME; |
6 | 6 |
7 abstract class CanvasRenderingContext { | 7 abstract class CanvasRenderingContext { |
8 CanvasElement get canvas; | 8 CanvasElement get canvas; |
9 } | 9 } |
10 | 10 |
11 $(ANNOTATIONS)$(NATIVESPEC)$(CLASS_MODIFIERS)class $CLASSNAME$EXTENDS implements
CanvasRenderingContext { | 11 $(ANNOTATIONS)$(NATIVESPEC)$(CLASS_MODIFIERS)class $CLASSNAME$EXTENDS implements
CanvasRenderingContext { |
12 $!MEMBERS | 12 $!MEMBERS |
13 | 13 |
14 @DomName('CanvasRenderingContext2D.createImageDataFromImageData') | 14 @DomName('CanvasRenderingContext2D.createImageDataFromImageData') |
15 @DocsEditable() | 15 @DocsEditable() |
16 ImageData createImageDataFromImageData(ImageData imagedata) => | 16 ImageData createImageDataFromImageData(ImageData imagedata) => |
17 $if DART2JS | |
18 JS('ImageData', '#.createImageData(#)', this, imagedata); | 17 JS('ImageData', '#.createImageData(#)', this, imagedata); |
19 $else | |
20 this.createImageData(imagedata); | |
21 $endif | |
22 | 18 |
23 /** | 19 /** |
24 * Sets the color used inside shapes. | 20 * Sets the color used inside shapes. |
25 * [r], [g], [b] are 0-255, [a] is 0-1. | 21 * [r], [g], [b] are 0-255, [a] is 0-1. |
26 */ | 22 */ |
27 void setFillColorRgb(int r, int g, int b, [num a = 1]) { | 23 void setFillColorRgb(int r, int g, int b, [num a = 1]) { |
28 this.fillStyle = 'rgba($r, $g, $b, $a)'; | 24 this.fillStyle = 'rgba($r, $g, $b, $a)'; |
29 } | 25 } |
30 | 26 |
31 /** | 27 /** |
(...skipping 21 matching lines...) Expand all Loading... |
53 * [a] is 0-1. | 49 * [a] is 0-1. |
54 */ | 50 */ |
55 void setStrokeColorHsl(int h, num s, num l, [num a = 1]) { | 51 void setStrokeColorHsl(int h, num s, num l, [num a = 1]) { |
56 this.strokeStyle = 'hsla($h, $s%, $l%, $a)'; | 52 this.strokeStyle = 'hsla($h, $s%, $l%, $a)'; |
57 } | 53 } |
58 | 54 |
59 @DomName('CanvasRenderingContext2D.arc') | 55 @DomName('CanvasRenderingContext2D.arc') |
60 void arc(num x, num y, num radius, num startAngle, num endAngle, | 56 void arc(num x, num y, num radius, num startAngle, num endAngle, |
61 [bool anticlockwise = false]) { | 57 [bool anticlockwise = false]) { |
62 // TODO(terry): This should not be needed: dartbug.com/20939. | 58 // TODO(terry): This should not be needed: dartbug.com/20939. |
63 $if DART2JS | |
64 JS('void', '#.arc(#, #, #, #, #, #)', this, x, y, radius, startAngle, | 59 JS('void', '#.arc(#, #, #, #, #, #)', this, x, y, radius, startAngle, |
65 endAngle, anticlockwise); | 60 endAngle, anticlockwise); |
66 $else | |
67 _arc(x, y, radius, startAngle, endAngle, anticlockwise); | |
68 $endif | |
69 } | 61 } |
70 | 62 |
71 @DomName('CanvasRenderingContext2D.createPatternFromImage') | 63 @DomName('CanvasRenderingContext2D.createPatternFromImage') |
72 CanvasPattern createPatternFromImage(ImageElement image, String repetitionType
) => | 64 CanvasPattern createPatternFromImage(ImageElement image, String repetitionType
) => |
73 $if DART2JS | |
74 JS('CanvasPattern', '#.createPattern(#, #)', this, image, repetitionType); | 65 JS('CanvasPattern', '#.createPattern(#, #)', this, image, repetitionType); |
75 $else | |
76 createPattern(image, repetitionType); | |
77 $endif | |
78 | 66 |
79 /** | 67 /** |
80 * Draws an image from a CanvasImageSource to an area of this canvas. | 68 * Draws an image from a CanvasImageSource to an area of this canvas. |
81 * | 69 * |
82 * The image will be drawn to an area of this canvas defined by | 70 * The image will be drawn to an area of this canvas defined by |
83 * [destRect]. [sourceRect] defines the region of the source image that is | 71 * [destRect]. [sourceRect] defines the region of the source image that is |
84 * drawn. | 72 * drawn. |
85 * If [sourceRect] is not provided, then | 73 * If [sourceRect] is not provided, then |
86 * the entire rectangular image from [source] will be drawn to this context. | 74 * the entire rectangular image from [source] will be drawn to this context. |
87 * | 75 * |
(...skipping 24 matching lines...) Expand all Loading... |
112 * See also: | 100 * See also: |
113 * | 101 * |
114 * * [CanvasImageSource] for more information on what data is retrieved | 102 * * [CanvasImageSource] for more information on what data is retrieved |
115 * from [source]. | 103 * from [source]. |
116 * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage
/the-canvas-element.html#dom-context-2d-drawimage) | 104 * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage
/the-canvas-element.html#dom-context-2d-drawimage) |
117 * from the WHATWG. | 105 * from the WHATWG. |
118 */ | 106 */ |
119 @DomName('CanvasRenderingContext2D.drawImage') | 107 @DomName('CanvasRenderingContext2D.drawImage') |
120 void drawImageToRect(CanvasImageSource source, Rectangle destRect, | 108 void drawImageToRect(CanvasImageSource source, Rectangle destRect, |
121 {Rectangle sourceRect}) { | 109 {Rectangle sourceRect}) { |
122 $if DART2JS | |
123 if (sourceRect == null) { | 110 if (sourceRect == null) { |
124 drawImageScaled(source, | 111 drawImageScaled(source, |
125 destRect.left, | 112 destRect.left, |
126 destRect.top, | 113 destRect.top, |
127 destRect.width, | 114 destRect.width, |
128 destRect.height); | 115 destRect.height); |
129 } else { | 116 } else { |
130 drawImageScaledFromSource(source, | 117 drawImageScaledFromSource(source, |
131 sourceRect.left, | 118 sourceRect.left, |
132 sourceRect.top, | 119 sourceRect.top, |
133 sourceRect.width, | 120 sourceRect.width, |
134 sourceRect.height, | 121 sourceRect.height, |
135 destRect.left, | 122 destRect.left, |
136 destRect.top, | 123 destRect.top, |
137 destRect.width, | 124 destRect.width, |
138 destRect.height); | 125 destRect.height); |
139 } | 126 } |
140 $else | |
141 if (sourceRect == null) { | |
142 _drawImage(source, | |
143 destRect.left, | |
144 destRect.top, | |
145 destRect.width, | |
146 destRect.height); | |
147 } else { | |
148 _drawImage(source, | |
149 sourceRect.left, | |
150 sourceRect.top, | |
151 sourceRect.width, | |
152 sourceRect.height, | |
153 destRect.left, | |
154 destRect.top, | |
155 destRect.width, | |
156 destRect.height); | |
157 } | |
158 $endif | |
159 } | 127 } |
160 | 128 |
161 /** | 129 /** |
162 * Draws an image from a CanvasImageSource to this canvas. | 130 * Draws an image from a CanvasImageSource to this canvas. |
163 * | 131 * |
164 * The entire image from [source] will be drawn to this context with its top | 132 * The entire image from [source] will be drawn to this context with its top |
165 * left corner at the point ([destX], [destY]). If the image is | 133 * left corner at the point ([destX], [destY]). If the image is |
166 * larger than canvas will allow, the image will be clipped to fit the | 134 * larger than canvas will allow, the image will be clipped to fit the |
167 * available space. | 135 * available space. |
168 * | 136 * |
(...skipping 12 matching lines...) Expand all Loading... |
181 * ctx.drawImage(otherCanvas, 590, 590); // will get clipped | 149 * ctx.drawImage(otherCanvas, 590, 590); // will get clipped |
182 * | 150 * |
183 * See also: | 151 * See also: |
184 * | 152 * |
185 * * [CanvasImageSource] for more information on what data is retrieved | 153 * * [CanvasImageSource] for more information on what data is retrieved |
186 * from [source]. | 154 * from [source]. |
187 * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage
/the-canvas-element.html#dom-context-2d-drawimage) | 155 * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage
/the-canvas-element.html#dom-context-2d-drawimage) |
188 * from the WHATWG. | 156 * from the WHATWG. |
189 */ | 157 */ |
190 @DomName('CanvasRenderingContext2D.drawImage') | 158 @DomName('CanvasRenderingContext2D.drawImage') |
191 $if DART2JS | |
192 @JSName('drawImage') | 159 @JSName('drawImage') |
193 void drawImage(CanvasImageSource source, num destX, num destY) native; | 160 void drawImage(CanvasImageSource source, num destX, num destY) native; |
194 $else | |
195 void drawImage(CanvasImageSource source, num destX, num destY) { | |
196 _drawImage(source, destX, destY); | |
197 } | |
198 $endif | |
199 | 161 |
200 /** | 162 /** |
201 * Draws an image from a CanvasImageSource to an area of this canvas. | 163 * Draws an image from a CanvasImageSource to an area of this canvas. |
202 * | 164 * |
203 * The image will be drawn to this context with its top left corner at the | 165 * The image will be drawn to this context with its top left corner at the |
204 * point ([destX], [destY]) and will be scaled to be [destWidth] wide and | 166 * point ([destX], [destY]) and will be scaled to be [destWidth] wide and |
205 * [destHeight] tall. | 167 * [destHeight] tall. |
206 * | 168 * |
207 * If the image is larger than canvas | 169 * If the image is larger than canvas |
208 * will allow, the image will be clipped to fit the available space. | 170 * will allow, the image will be clipped to fit the available space. |
209 * | 171 * |
210 * CanvasElement canvas = new CanvasElement(width: 600, height: 600); | 172 * CanvasElement canvas = new CanvasElement(width: 600, height: 600); |
211 * CanvasRenderingContext2D ctx = canvas.context2D; | 173 * CanvasRenderingContext2D ctx = canvas.context2D; |
212 * ImageElement img = document.query('img'); | 174 * ImageElement img = document.query('img'); |
213 * img.width = 100; | 175 * img.width = 100; |
214 * img.height = 100; | 176 * img.height = 100; |
215 * | 177 * |
216 * // Scale the image to 300x50 at the point (20, 20) | 178 * // Scale the image to 300x50 at the point (20, 20) |
217 * ctx.drawImageScaled(img, 20, 20, 300, 50); | 179 * ctx.drawImageScaled(img, 20, 20, 300, 50); |
218 * | 180 * |
219 * See also: | 181 * See also: |
220 * | 182 * |
221 * * [CanvasImageSource] for more information on what data is retrieved | 183 * * [CanvasImageSource] for more information on what data is retrieved |
222 * from [source]. | 184 * from [source]. |
223 * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage
/the-canvas-element.html#dom-context-2d-drawimage) | 185 * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage
/the-canvas-element.html#dom-context-2d-drawimage) |
224 * from the WHATWG. | 186 * from the WHATWG. |
225 */ | 187 */ |
226 @DomName('CanvasRenderingContext2D.drawImage') | 188 @DomName('CanvasRenderingContext2D.drawImage') |
227 $if DART2JS | |
228 @JSName('drawImage') | 189 @JSName('drawImage') |
229 void drawImageScaled(CanvasImageSource source, | 190 void drawImageScaled(CanvasImageSource source, |
230 num destX, num destY, num destWidth, num destHeight) native; | 191 num destX, num destY, num destWidth, num destHeight) native; |
231 $else | |
232 void drawImageScaled(CanvasImageSource source, | |
233 num destX, num destY, num destWidth, num destHeight) { | |
234 _drawImage(source, destX, destY, destWidth, destHeight); | |
235 } | |
236 $endif | |
237 | 192 |
238 /** | 193 /** |
239 * Draws an image from a CanvasImageSource to an area of this canvas. | 194 * Draws an image from a CanvasImageSource to an area of this canvas. |
240 * | 195 * |
241 * The image is a region of [source] that is [sourceWidth] wide and | 196 * The image is a region of [source] that is [sourceWidth] wide and |
242 * [destHeight] tall with top left corner at ([sourceX], [sourceY]). | 197 * [destHeight] tall with top left corner at ([sourceX], [sourceY]). |
243 * The image will be drawn to this context with its top left corner at the | 198 * The image will be drawn to this context with its top left corner at the |
244 * point ([destX], [destY]) and will be scaled to be [destWidth] wide and | 199 * point ([destX], [destY]) and will be scaled to be [destWidth] wide and |
245 * [destHeight] tall. | 200 * [destHeight] tall. |
246 * | 201 * |
(...skipping 11 matching lines...) Expand all Loading... |
258 * ctx.drawImageScaledFromSource(otherCanvas, 0, 0, 100, 20, 0, 0, 100, 20
); | 213 * ctx.drawImageScaledFromSource(otherCanvas, 0, 0, 100, 20, 0, 0, 100, 20
); |
259 * | 214 * |
260 * See also: | 215 * See also: |
261 * | 216 * |
262 * * [CanvasImageSource] for more information on what data is retrieved | 217 * * [CanvasImageSource] for more information on what data is retrieved |
263 * from [source]. | 218 * from [source]. |
264 * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage
/the-canvas-element.html#dom-context-2d-drawimage) | 219 * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage
/the-canvas-element.html#dom-context-2d-drawimage) |
265 * from the WHATWG. | 220 * from the WHATWG. |
266 */ | 221 */ |
267 @DomName('CanvasRenderingContext2D.drawImage') | 222 @DomName('CanvasRenderingContext2D.drawImage') |
268 $if DART2JS | |
269 @JSName('drawImage') | 223 @JSName('drawImage') |
270 void drawImageScaledFromSource(CanvasImageSource source, | 224 void drawImageScaledFromSource(CanvasImageSource source, |
271 num sourceX, num sourceY, num sourceWidth, num sourceHeight, | 225 num sourceX, num sourceY, num sourceWidth, num sourceHeight, |
272 num destX, num destY, num destWidth, num destHeight) native; | 226 num destX, num destY, num destWidth, num destHeight) native; |
273 $else | |
274 void drawImageScaledFromSource(CanvasImageSource source, | |
275 num sourceX, num sourceY, num sourceWidth, num sourceHeight, | |
276 num destX, num destY, num destWidth, num destHeight) { | |
277 _drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, | |
278 destX, destY, destWidth, destHeight); | |
279 } | |
280 $endif | |
281 | 227 |
282 $if DART2JS | |
283 @SupportedBrowser(SupportedBrowser.CHROME) | 228 @SupportedBrowser(SupportedBrowser.CHROME) |
284 @SupportedBrowser(SupportedBrowser.SAFARI) | 229 @SupportedBrowser(SupportedBrowser.SAFARI) |
285 @SupportedBrowser(SupportedBrowser.IE, '11') | 230 @SupportedBrowser(SupportedBrowser.IE, '11') |
286 @Unstable() | 231 @Unstable() |
287 @DomName('CanvasRenderingContext2D.lineDashOffset') | 232 @DomName('CanvasRenderingContext2D.lineDashOffset') |
288 // TODO(14316): Firefox has this functionality with mozDashOffset, but it | 233 // TODO(14316): Firefox has this functionality with mozDashOffset, but it |
289 // needs to be polyfilled. | 234 // needs to be polyfilled. |
290 num get lineDashOffset => JS('num', | 235 num get lineDashOffset => JS('num', |
291 '#.lineDashOffset || #.webkitLineDashOffset', this, this); | 236 '#.lineDashOffset || #.webkitLineDashOffset', this, this); |
292 | 237 |
293 @SupportedBrowser(SupportedBrowser.CHROME) | 238 @SupportedBrowser(SupportedBrowser.CHROME) |
294 @SupportedBrowser(SupportedBrowser.SAFARI) | 239 @SupportedBrowser(SupportedBrowser.SAFARI) |
295 @SupportedBrowser(SupportedBrowser.IE, '11') | 240 @SupportedBrowser(SupportedBrowser.IE, '11') |
296 @Unstable() | 241 @Unstable() |
297 @DomName('CanvasRenderingContext2D.lineDashOffset') | 242 @DomName('CanvasRenderingContext2D.lineDashOffset') |
298 // TODO(14316): Firefox has this functionality with mozDashOffset, but it | 243 // TODO(14316): Firefox has this functionality with mozDashOffset, but it |
299 // needs to be polyfilled. | 244 // needs to be polyfilled. |
300 set lineDashOffset(num value) { | 245 set lineDashOffset(num value) { |
301 JS('void', | 246 JS('void', |
302 'typeof #.lineDashOffset != "undefined" ? #.lineDashOffset = # : ' | 247 'typeof #.lineDashOffset != "undefined" ? #.lineDashOffset = # : ' |
303 '#.webkitLineDashOffset = #', this, this, value, this, value); | 248 '#.webkitLineDashOffset = #', this, this, value, this, value); |
304 } | 249 } |
305 $else | |
306 // TODO(amouravski): Add Dartium native methods for drawImage once we figure | |
307 // out how to not break native bindings. | |
308 $endif | |
309 | 250 |
310 @SupportedBrowser(SupportedBrowser.CHROME) | 251 @SupportedBrowser(SupportedBrowser.CHROME) |
311 @SupportedBrowser(SupportedBrowser.SAFARI) | 252 @SupportedBrowser(SupportedBrowser.SAFARI) |
312 @SupportedBrowser(SupportedBrowser.IE, '11') | 253 @SupportedBrowser(SupportedBrowser.IE, '11') |
313 @Unstable() | 254 @Unstable() |
314 @DomName('CanvasRenderingContext2D.getLineDash') | 255 @DomName('CanvasRenderingContext2D.getLineDash') |
315 List<num> getLineDash() { | 256 List<num> getLineDash() { |
316 // TODO(14316): Firefox has this functionality with mozDash, but it's a bit | 257 // TODO(14316): Firefox has this functionality with mozDash, but it's a bit |
317 // different. | 258 // different. |
318 $if DART2JS | |
319 if (JS('bool', '!!#.getLineDash', this)) { | 259 if (JS('bool', '!!#.getLineDash', this)) { |
320 return JS('List<num>', '#.getLineDash()', this); | 260 return JS('List<num>', '#.getLineDash()', this); |
321 } else if (JS('bool', '!!#.webkitLineDash', this)) { | 261 } else if (JS('bool', '!!#.webkitLineDash', this)) { |
322 return JS('List<num>', '#.webkitLineDash', this); | 262 return JS('List<num>', '#.webkitLineDash', this); |
323 } | 263 } |
324 $else | |
325 var result = _getLineDash(); | |
326 if (result == null) { | |
327 result = []; | |
328 } | |
329 return result; | |
330 $endif | |
331 } | 264 } |
332 | 265 |
333 $if DART2JS | |
334 @SupportedBrowser(SupportedBrowser.CHROME) | 266 @SupportedBrowser(SupportedBrowser.CHROME) |
335 @SupportedBrowser(SupportedBrowser.SAFARI) | 267 @SupportedBrowser(SupportedBrowser.SAFARI) |
336 @SupportedBrowser(SupportedBrowser.IE, '11') | 268 @SupportedBrowser(SupportedBrowser.IE, '11') |
337 @Unstable() | 269 @Unstable() |
338 @DomName('CanvasRenderingContext2D.setLineDash') | 270 @DomName('CanvasRenderingContext2D.setLineDash') |
339 void setLineDash(List<num> dash) { | 271 void setLineDash(List<num> dash) { |
340 // TODO(14316): Firefox has this functionality with mozDash, but it's a bit | 272 // TODO(14316): Firefox has this functionality with mozDash, but it's a bit |
341 // different. | 273 // different. |
342 if (JS('bool', '!!#.setLineDash', this)) { | 274 if (JS('bool', '!!#.setLineDash', this)) { |
343 JS('void', '#.setLineDash(#)', this, dash); | 275 JS('void', '#.setLineDash(#)', this, dash); |
344 } else if (JS('bool', '!!#.webkitLineDash', this)) { | 276 } else if (JS('bool', '!!#.webkitLineDash', this)) { |
345 JS('void', '#.webkitLineDash = #', this, dash); | 277 JS('void', '#.webkitLineDash = #', this, dash); |
346 } | 278 } |
347 } | 279 } |
348 $endif | |
349 | 280 |
350 $if DART2JS | |
351 | 281 |
352 /** | 282 /** |
353 * Draws text to the canvas. | 283 * Draws text to the canvas. |
354 * | 284 * |
355 * The text is drawn starting at coordinates ([x], [y]). | 285 * The text is drawn starting at coordinates ([x], [y]). |
356 * If [maxWidth] is provided and the [text] is computed to be wider than | 286 * If [maxWidth] is provided and the [text] is computed to be wider than |
357 * [maxWidth], then the drawn text is scaled down horizontally to fit. | 287 * [maxWidth], then the drawn text is scaled down horizontally to fit. |
358 * | 288 * |
359 * The text uses the current [CanvasRenderingContext2D.font] property for font | 289 * The text uses the current [CanvasRenderingContext2D.font] property for font |
360 * options, such as typeface and size, and the current | 290 * options, such as typeface and size, and the current |
361 * [CanvasRenderingContext2D.fillStyle] for style options such as color. | 291 * [CanvasRenderingContext2D.fillStyle] for style options such as color. |
362 * The current [CanvasRenderingContext2D.textAlign] and | 292 * The current [CanvasRenderingContext2D.textAlign] and |
363 * [CanvasRenderingContext2D.textBaseLine] properties are also applied to the | 293 * [CanvasRenderingContext2D.textBaseLine] properties are also applied to the |
364 * drawn text. | 294 * drawn text. |
365 */ | 295 */ |
366 @DomName('CanvasRenderingContext2D.fillText') | 296 @DomName('CanvasRenderingContext2D.fillText') |
367 void fillText(String text, num x, num y, [num maxWidth]) { | 297 void fillText(String text, num x, num y, [num maxWidth]) { |
368 if (maxWidth != null) { | 298 if (maxWidth != null) { |
369 JS('void', '#.fillText(#, #, #, #)', this, text, x, y, maxWidth); | 299 JS('void', '#.fillText(#, #, #, #)', this, text, x, y, maxWidth); |
370 } else { | 300 } else { |
371 JS('void', '#.fillText(#, #, #)', this, text, x, y); | 301 JS('void', '#.fillText(#, #, #)', this, text, x, y); |
372 } | 302 } |
373 } | 303 } |
374 | 304 |
375 @DomName('CanvasRenderingContext2D.fill') | 305 @DomName('CanvasRenderingContext2D.fill') |
376 void fill([String winding = 'nonzero']) { | 306 void fill([String winding = 'nonzero']) { |
377 JS('void', '#.fill(#)', this, winding); | 307 JS('void', '#.fill(#)', this, winding); |
378 } | 308 } |
379 $endif | |
380 | 309 |
381 /** Deprecated always returns 1.0 */ | 310 /** Deprecated always returns 1.0 */ |
382 @DomName('CanvasRenderingContext2D.webkitBackingStorePixelRation') | 311 @DomName('CanvasRenderingContext2D.webkitBackingStorePixelRation') |
383 @Experimental() | 312 @Experimental() |
384 @deprecated | 313 @deprecated |
385 double get backingStorePixelRatio => 1.0; | 314 double get backingStorePixelRatio => 1.0; |
386 } | 315 } |
OLD | NEW |