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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: sdk/lib/html/dart2js/html_dart2js.dart

Side-by-side diff isn't available for this file because of its large size.
Issue 12775010: Added the CanvasImageSource interface, which all types that a canvas can draw (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 7 years, 9 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:
Download patch
« no previous file with comments | « no previous file | sdk/lib/html/dartium/html_dartium.dart » ('j') | tools/dom/templates/html/impl/impl_CanvasRenderingContext2D.darttemplate » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: sdk/lib/html/dart2js/html_dart2js.dart
diff --git a/sdk/lib/html/dart2js/html_dart2js.dart b/sdk/lib/html/dart2js/html_dart2js.dart
index eb03c9f02459e6392e8d86b56782968827cd6900..59d2986336acb18f57da45b069a4f5bd16961f7b 100644
--- a/sdk/lib/html/dart2js/html_dart2js.dart
+++ b/sdk/lib/html/dart2js/html_dart2js.dart
@@ -889,7 +889,7 @@ class CDataSection extends Text native "*CDATASection" {
@DomName('HTMLCanvasElement')
-class CanvasElement extends Element native "*HTMLCanvasElement" {
+class CanvasElement extends Element implements CanvasImageSource native "*HTMLCanvasElement" {
@DomName('HTMLCanvasElement.HTMLCanvasElement')
@DocsEditable
@@ -1264,9 +1264,10 @@ class CanvasRenderingContext2D extends CanvasRenderingContext native "*CanvasRen
@DocsEditable
CanvasGradient createRadialGradient(num x0, num y0, num r0, num x1, num y1, num r1) native;
+ @JSName('drawImage')
@DomName('CanvasRenderingContext2D.drawImage')
@DocsEditable
- void drawImage(canvas_OR_image_OR_video, num sx_OR_x, num sy_OR_y, [num sw_OR_width, num height_OR_sh, num dx, num dy, num dw, num dh]) native;
+ void $dom_drawImage(canvas_OR_image_OR_video, num sx_OR_x, num sy_OR_y, [num sw_OR_width, num height_OR_sh, num dx, num dy, num dw, num dh]) native;
@DomName('CanvasRenderingContext2D.fill')
@DocsEditable
@@ -1482,6 +1483,100 @@ class CanvasRenderingContext2D extends CanvasRenderingContext native "*CanvasRen
$dom_arc(x, y, radius, startAngle, endAngle, anticlockwise);
}
+ /**
+ * Draws an image from a [CanvasImageSource] to this canvas.
Kathy Walrath 2013/03/15 17:23:06 Remove the [] (no need for a link here; you have i
Andrei Mouravski 2013/03/15 20:06:12 Done.
+ *
+ * The entire image from [source] will be drawn to this context with its top
+ * left corner at the point ([destinationX], [destinationY]). If the image is
+ * larger than canvas will allow, the image will be cropped to fit the
+ * available space.
+ *
+ * CanvasElement canvas = new CanvasElement(width: 600, height: 600);
+ * CanvasRenderingContext2D ctx = canvas.context2d;
+ * ImageElement img = document.query('img');
+ *
+ * ctx.drawImage(img, 100, 100);
+ *
+ * VideoElement video = document.query('video');
+ * ctx.drawImage(video, 0, 0);
+ *
+ * CanvasElement otherCanvas = document.query('canvas');
+ * otherCanvas.width = 100;
+ * otherCanvas.height = 100;
+ * ctx.drawImage(otherCanvas, 590, 590); // will get cropped
+ *
+ * See also:
+ *
+ * * [CanvasImageSource] for more information on what data is retrieved
+ * from [source].
+ * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage)
+ * from the WHATWG.
+ */
+ @DomName('CanvasRenderingContext2D.drawImage')
+ void drawImage(CanvasImageSource source, num destinationX, num destinationY) {
+ $dom_drawImage(source, destinationX, destinationY);
+ }
+
+ /**
+ * Draws an image from a [CanvasImageSource] to an area of this canvas.
Kathy Walrath 2013/03/15 17:23:06 Remove the [] (no need for a link here; you have i
Andrei Mouravski 2013/03/15 20:06:12 Done.
+ *
+ * The image will be drawn to an area of this canvas defined by
+ * [destinationRectangle]. If [sourceRectangle] is not provided, then
+ * the entire rectangular image from [source] will be drawn to this context.
+ * If the dimensions of [source] or [sourceRectangle]
+ * differ from [destinationRectangle], then the image will be scaled to fit.
+ * If the image is larger than canvas
+ * will allow, the image will be cropped to fit the available space.
+ *
+ * CanvasElement canvas = new CanvasElement(width: 600, height: 600);
+ * CanvasRenderingContext2D ctx = canvas.context2d;
+ * ImageElement img = document.query('img');
+ * img.width = 100;
+ * img.height = 100;
+ *
+ * // Scale the image to 20x20
Kathy Walrath 2013/03/15 17:23:06 20x20 -> 20x20.
Andrei Mouravski 2013/03/15 20:06:12 Done.
+ * ctx.drawImageAtScale(img, new Rect(50, 50, 20, 20));
+ *
+ * VideoElement video = document.query('video');
+ * video.width = 100;
+ * video.height = 100;
+ * // Take the middle 20x20 pixels from the video and stretch them.
+ * ctx.drawImageAtScale(video, new Rect(50, 50, 100, 100),
+ * sourceRectangle: new Rect(40, 40, 20, 20));
+ *
+ * // Draw the top 100x20 pixels from the otherCanvas.
+ * CanvasElement otherCanvas = document.query('canvas');
+ * ctx.drawImageAtScale(otherCanvas, new Rect(0, 0, 100, 20),
+ * sourceRectangle: new Rect(0, 0, 100, 20));
+ *
+ * See also:
+ *
+ * * [CanvasImageSource] for more information on what data is retrieved
+ * from [source].
+ * * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage)
+ * from the WHATWG.
+ */
+ @DomName('CanvasRenderingContext2D.drawImage')
+ void drawImageAtScale(CanvasImageSource source, Rect destinationRectangle,
+ {Rect sourceRectangle}) {
+ if (sourceRectangle == null) {
+ $dom_drawImage(source,
+ destinationRectangle.left,
+ destinationRectangle.top,
+ destinationRectangle.width,
+ destinationRectangle.height);
+ } else {
+ $dom_drawImage(source,
+ sourceRectangle.left,
+ sourceRectangle.top,
+ sourceRectangle.width,
+ sourceRectangle.height,
+ destinationRectangle.left,
+ destinationRectangle.top,
+ destinationRectangle.width,
+ destinationRectangle.height);
+ }
+ }
@DomName('CanvasRenderingContext2D.lineDashOffset')
num get lineDashOffset => JS('num',
@@ -13501,9 +13596,8 @@ class ImageData native "*ImageData" {
// BSD-style license that can be found in the LICENSE file.
-@DocsEditable
@DomName('HTMLImageElement')
-class ImageElement extends Element native "*HTMLImageElement" {
+class ImageElement extends Element implements CanvasImageSource native "*HTMLImageElement" {
@DomName('HTMLImageElement.HTMLImageElement')
@DocsEditable
@@ -13570,6 +13664,7 @@ class ImageElement extends Element native "*HTMLImageElement" {
@DomName('HTMLImageElement.y')
@DocsEditable
final int y;
+
}
// Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
@@ -24078,9 +24173,8 @@ class ValidityState native "*ValidityState" {
// BSD-style license that can be found in the LICENSE file.
-@DocsEditable
@DomName('HTMLVideoElement')
-class VideoElement extends MediaElement native "*HTMLVideoElement" {
+class VideoElement extends MediaElement implements CanvasImageSource native "*HTMLVideoElement" {
@DomName('HTMLVideoElement.HTMLVideoElement')
@DocsEditable
@@ -24169,6 +24263,7 @@ class VideoElement extends MediaElement native "*HTMLVideoElement" {
@SupportedBrowser(SupportedBrowser.SAFARI)
@Experimental
void exitFullscreen() native;
+
}
// Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
@@ -30097,6 +30192,32 @@ class _DataAttributeMap implements Map<String, String> {
/**
+ * An object that can be drawn to a [CanvasRenderingContext2D] object with
+ * [CanvasRenderingContext2D.drawImage] or
+ * [CanvasRenderingContext2D.drawImageAtScale].
+ *
+ * If the [CanvasImageSource] is an [ImageElement] then the element's image is
Kathy Walrath 2013/03/15 17:23:06 Remove the [] around CanvasImageSource throughout
Andrei Mouravski 2013/03/15 20:06:12 Done.
+ * used. If the [ImageElement] is an animated image, then the poster frame is
+ * used. If there is no poster frame, then the first frame of animation is used.
+ *
+ * If the [CanvasImageSource] is a [VideoElement] then the frame at the current
+ * playback position is used as the image.
+ *
+ * If the [CanvasImageSource] is a [CanvasElement] then the element's bitmap is
+ * used.
+ *
+ * See also:
+ *
+ * * [CanvasImageSource](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-sources-for-2d-rendering-contexts)
+ * from the WHATWG.
+ */
+abstract class CanvasImageSource {}
+// Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+
+/**
* An object representing the top-level context object for web scripting.
*
* In a web browser, a [Window] object represents the actual browser window.
« no previous file with comments | « no previous file | sdk/lib/html/dartium/html_dartium.dart » ('j') | tools/dom/templates/html/impl/impl_CanvasRenderingContext2D.darttemplate » ('J')

Powered by Google App Engine
This is Rietveld 408576698