Decouple Canvas from DisplayList and map Picture and PictureRecorder more...

Decouple Canvas from DisplayList and map Picture and PictureRecorder more directly to their Skia counterparts.

Also changes the framework dart code to use the
refactored APIs and fixes the various examples and
tests.

R=abarth@chromium.org, ianh@chromium.org

Review URL: https://codereview.chromium.org/1190123003.

examples/game/lib/game_demo.dart

@@ -5,5 +5,6 @@ import 'dart:math' as Math;
 import 'package:vector_math/vector_math_64.dart';
 import 'sprites.dart';
 import 'package:box2d/box2d.dart';
+import 'package:sky/rendering/object.dart';
 
 part 'game_demo_world.dart';

examples/game/lib/game_demo_world.dart

@@ -372,7 +372,7 @@ class StarField extends Node {
     }
   }
 
-  void paint(PictureRecorder canvas) {
+  void paint(RenderCanvas canvas) {
     // Setup paint object for opacity and transfer mode
     Paint paint = new Paint();
     paint.setTransferMode(TransferMode.plus);

examples/game/lib/node.dart

@@ -395,7 +395,7 @@ class Node {
 
   // Rendering
   
-  void _visit(PictureRecorder canvas) {
+  void _visit(RenderCanvas canvas) {
     assert(canvas != null);
     if (!visible) return;
 
@@ -404,7 +404,7 @@ class Node {
     _postPaint(canvas);
   }
   
-  void _prePaint(PictureRecorder canvas) {
+  void _prePaint(RenderCanvas canvas) {
     canvas.save();
 
     // Get the transformation matrix and apply transform
@@ -419,7 +419,7 @@ class Node {
   /// bounding box's origin, override [NodeWithSize] and call the applyTransformForPivot method before making calls for
   /// drawing.
   ///
-  ///     void paint(PictureRecorder canvas) {
+  ///     void paint(RenderCanvas canvas) {
   ///       canvas.save();
   ///       applyTransformForPivot(canvas);
   ///
@@ -427,10 +427,10 @@ class Node {
   ///
   ///       canvas.restore();
   ///     }
-  void paint(PictureRecorder canvas) {
+  void paint(RenderCanvas canvas) {
   }
  
-  void _visitChildren(PictureRecorder canvas) {
+  void _visitChildren(RenderCanvas canvas) {
     // Sort children if needed
     _sortChildren();
 
@@ -455,7 +455,7 @@ class Node {
     }
   }
   
-  void _postPaint(PictureRecorder canvas) {
+  void _postPaint(RenderCanvas canvas) {
     canvas.restore();
   }
 

examples/game/lib/node_with_size.dart

@@ -32,7 +32,7 @@ abstract class NodeWithSize extends Node {
   /// If you use this method you will need to save and restore your canvas at the beginning and
   /// end of your [paint] method.
   ///
-  ///     void paint(PictureRecorder canvas) {
+  ///     void paint(RenderCanvas canvas) {
   ///       canvas.save();
   ///       applyTransformForPivot(canvas);
   ///
@@ -40,7 +40,7 @@ abstract class NodeWithSize extends Node {
   ///
   ///       canvas.restore();
   ///     }
-  void applyTransformForPivot(PictureRecorder canvas) {
+  void applyTransformForPivot(RenderCanvas canvas) {
     if (pivot.x != 0 || pivot.y != 0) {
       double pivotInPointsX = size.width * pivot.x;
       double pivotInPointsY = size.height * pivot.y;

examples/game/lib/sprite.dart

@@ -64,7 +64,7 @@ class Sprite extends NodeWithSize {
     _opacity = opacity;
   }
 
-  void paint(PictureRecorder canvas) {
+  void paint(RenderCanvas canvas) {
     canvas.save();
 
     // Account for pivot point

examples/game/lib/sprite_box.dart

@@ -251,7 +251,7 @@ class SpriteBox extends RenderBox {
     _rootNode._invalidateToBoxTransformMatrix();
   }
 
-  void paint(RenderObjectDisplayList canvas) {
+  void paint(RenderCanvas canvas) {
     canvas.save();
 
     // Move to correct coordinate space before drawing

examples/raw/hello_world.dart

@@ -9,11 +9,12 @@ Picture draw(int a, int r, int g, int b) {
   double width = view.width;
   double height = view.height;
 
-  PictureRecorder recorder = new PictureRecorder(width, height);
+  PictureRecorder recorder = new PictureRecorder();
+  Canvas canvas = new Canvas(recorder, width, height);
   double radius = min(width, height) * 0.45;
 
   Paint paint = new Paint()..color = new Color.fromARGB(a, r, g, b);
-  recorder.drawCircle(width / 2, height / 2, radius, paint);
+  canvas.drawCircle(width / 2, height / 2, radius, paint);
   return recorder.endRecording();
 }
 

examples/raw/launcher.dart

@@ -12,11 +12,12 @@ Picture draw(int a, int r, int g, int b) {
   double width = view.width;
   double height = view.height;
 
-  PictureRecorder recorder = new PictureRecorder(width, height);
+  PictureRecorder recorder = new PictureRecorder();
+  Canvas canvas = new Canvas(recorder, width, height);
   double radius = min(width, height) * 0.45;
 
   Paint paint = new Paint()..color = new Color.fromARGB(a, r, g, b);
-  recorder.drawRect(new Rect.fromSize(new Size(width, height)), paint);
+  canvas.drawRect(new Rect.fromSize(new Size(width, height)), paint);
   return recorder.endRecording();
 }
 

examples/raw/painting.dart

@@ -7,28 +7,29 @@ import 'dart:math' as math;
 import 'dart:typed_data';
 
 void beginFrame(double timeStamp) {
-  sky.PictureRecorder context = new sky.PictureRecorder(sky.view.width, 200.0);
+  sky.PictureRecorder recorder = new sky.PictureRecorder();
+  Canvas canvas = new Canvas(recorder, sky.view.width, 200.0);
 
   sky.Paint paint = new sky.Paint();
-  sky.Point mid = new sky.Point(context.width / 2.0, context.height / 2.0);
+  sky.Point mid = new sky.Point(sky.view.width / 2.0, sky.view.height / 2.0);
   double radius = math.min(mid.x, mid.y);
 
-  context.drawPaint(new sky.Paint()..color = const sky.Color(0xFFFFFFFF));
+  canvas.drawPaint(new sky.Paint()..color = const sky.Color(0xFFFFFFFF));
 
-  context.save();
+  canvas.save();
 
-  context.translate(-mid.x/2.0, context.height*2.0);
-  context.clipRect(
-      new sky.Rect.fromLTRB(0.0, -context.height, context.width, radius));
+  canvas.translate(-mid.x/2.0, sky.view.height*2.0);
+  canvas.clipRect(
+      new sky.Rect.fromLTRB(0.0, -sky.view.height, sky.view.width, radius));
 
-  context.translate(mid.x, mid.y);
+  canvas.translate(mid.x, mid.y);
   paint.color = const sky.Color.fromARGB(128, 255, 0, 255);
-  context.rotate(math.PI/4.0);
+  canvas.rotate(math.PI/4.0);
 
   sky.Gradient yellowBlue = new sky.Gradient.linear(
       [new sky.Point(-radius, -radius), new sky.Point(0.0, 0.0)],
       [const sky.Color(0xFFFFFF00), const sky.Color(0xFF0000FF)]);
-  context.drawRect(new sky.Rect.fromLTRB(-radius, -radius, radius, radius),
+  canvas.drawRect(new sky.Rect.fromLTRB(-radius, -radius, radius, radius),
                    new sky.Paint()..setShader(yellowBlue));
 
   // Scale x and y by 0.5.
@@ -38,13 +39,13 @@ void beginFrame(double timeStamp) {
       0.0, 0.0, 0.0, 0.0,
       0.0, 0.0, 0.0, 1.0,
   ]);
-  context.concat(scaleMatrix);
+  canvas.concat(scaleMatrix);
   paint.color = const sky.Color.fromARGB(128, 0, 255, 0);
-  context.drawCircle(0.0, 0.0, radius, paint);
+  canvas.drawCircle(0.0, 0.0, radius, paint);
 
-  context.restore();
+  canvas.restore();
 
-  context.translate(0.0, 50.0);
+  canvas.translate(0.0, 50.0);
   var builder = new sky.LayerDrawLooperBuilder()
       ..addLayerOnTop(
           new sky.DrawLooperLayerInfo()
@@ -80,9 +81,9 @@ void beginFrame(double timeStamp) {
         layerPaint.color = const sky.Color.fromARGB(128, 255, 0, 0);
       });
   paint.setDrawLooper(builder.build());
-  context.drawCircle(0.0, 0.0, radius, paint);
+  canvas.drawCircle(0.0, 0.0, radius, paint);
 
-  sky.view.picture = context.endRecording();
+  sky.view.picture = recorder.endRecording();
 }
 
 void main() {

examples/raw/shadow.dart

@@ -6,7 +6,8 @@ import 'dart:sky';
 
 void beginFrame(double timeStamp) {
   var size = 100.0;
-  PictureRecorder canvas = new PictureRecorder(view.width, view.height);
+  PictureRecorder recorder = new PictureRecorder();
+  Canvas canvas = new Canvas(recorder, view.width, view.height);
   canvas.translate(size + 10.0, size + 10.0);
 
   Paint paint = new Paint();
@@ -30,7 +31,7 @@ void beginFrame(double timeStamp) {
   canvas.drawPaint(
       new Paint()..color = const Color.fromARGB(255, 255, 255, 255));
   canvas.drawRect(new Rect.fromLTRB(-size, -size, size, size), paint);
-  view.picture = canvas.endRecording();
+  view.picture = recorder.endRecording();
 }
 
 void main() {

examples/raw/spinning_arabic.dart

@@ -12,7 +12,8 @@ void beginFrame(double timeStamp) {
   if (timeBase == null)
     timeBase = timeStamp;
   double delta = timeStamp - timeBase;
-  PictureRecorder canvas = new PictureRecorder(view.width, view.height);
+  PictureRecorder recorder = new PictureRecorder();
+  Canvas canvas = new Canvas(recorder, view.width, view.height);
   canvas.translate(view.width / 2.0, view.height / 2.0);
   canvas.rotate(math.PI * delta / 1800);
   canvas.drawRect(new Rect.fromLTRB(-100.0, -100.0, 100.0, 100.0),
@@ -25,7 +26,7 @@ void beginFrame(double timeStamp) {
   canvas.translate(layoutRoot.maxWidth / -2.0, (layoutRoot.maxWidth / 2.0) - 125);
   layoutRoot.paint(canvas);
 
-  view.picture = canvas.endRecording();
+  view.picture = recorder.endRecording();
   view.scheduleFrame();
 }
 

examples/raw/spinning_image.dart

@@ -4,6 +4,7 @@
 
 import 'dart:math' as math;
 import 'dart:sky';
+
 import 'package:sky/mojo/net/image_cache.dart' as image_cache;
 
 double timeBase = null;
@@ -15,7 +16,8 @@ String url2 = "http://i2.kym-cdn.com/photos/images/facebook/000/581/296/c09.jpg"
 void beginFrame(double timeStamp) {
   if (timeBase == null) timeBase = timeStamp;
   double delta = timeStamp - timeBase;
-  PictureRecorder canvas = new PictureRecorder(view.width, view.height);
+  PictureRecorder recorder = new PictureRecorder();
+  Canvas canvas = new Canvas(recorder, view.width, view.height);
   canvas.translate(view.width / 2.0, view.height / 2.0);
   canvas.rotate(math.PI * delta / 1800);
   canvas.scale(0.2, 0.2);
@@ -36,7 +38,7 @@ void beginFrame(double timeStamp) {
       paint);
   }
 
-  view.picture = canvas.endRecording();
+  view.picture = recorder.endRecording();
   view.scheduleFrame();
 }
 

examples/raw/spinning_square.dart

@@ -12,12 +12,13 @@ void beginFrame(double timeStamp) {
   if (timeBase == null)
     timeBase = timeStamp;
   double delta = timeStamp - timeBase;
-  PictureRecorder canvas = new PictureRecorder(view.width, view.height);
+  PictureRecorder recorder = new PictureRecorder();
+  Canvas canvas = new Canvas(recorder, view.width, view.height);
   canvas.translate(view.width / 2.0, view.height / 2.0);
   canvas.rotate(math.PI * delta / 1800);
   canvas.drawRect(new Rect.fromLTRB(-100.0, -100.0, 100.0, 100.0),
                   new Paint()..color = const Color.fromARGB(255, 0, 255, 0));
-  view.picture = canvas.endRecording();
+  view.picture = recorder.endRecording();
   view.scheduleFrame();
   tracing.end('beginFrame');
 }

examples/rendering/sector_layout.dart

@@ -116,7 +116,7 @@ abstract class RenderDecoratedSector extends RenderSector {
   }
 
   // origin must be set to the center of the circle
-  void paint(RenderObjectDisplayList canvas) {
+  void paint(RenderCanvas canvas) {
     assert(deltaRadius != null);
     assert(deltaTheta != null);
     assert(parentData is SectorParentData);
@@ -253,7 +253,7 @@ class RenderSectorRing extends RenderSectorWithChildren {
 
   // paint origin is 0,0 of our circle
   // each sector then knows how to paint itself at its location
-  void paint(RenderObjectDisplayList canvas) {
+  void paint(RenderCanvas canvas) {
     // TODO(ianh): avoid code duplication
     super.paint(canvas);
     RenderSector child = firstChild;
@@ -358,7 +358,7 @@ class RenderSectorSlice extends RenderSectorWithChildren {
 
   // paint origin is 0,0 of our circle
   // each sector then knows how to paint itself at its location
-  void paint(RenderObjectDisplayList canvas) {
+  void paint(RenderCanvas canvas) {
     // TODO(ianh): avoid code duplication
     super.paint(canvas);
     RenderSector child = firstChild;
@@ -452,7 +452,7 @@ class RenderBoxToRenderSectorAdapter extends RenderBox {
   }
 
   // paint origin is 0,0 of our circle
-  void paint(RenderObjectDisplayList canvas) {
+  void paint(RenderCanvas canvas) {
     super.paint(canvas);
     if (child != null) {
       Rect bounds = new Rect.fromSize(size);

examples/rendering/touch_demo.dart

@@ -36,7 +36,7 @@ class Dot {
     radius = 5 + (95 * event.pressure);
   }
 
-  void paint(RenderObjectDisplayList canvas) {
+  void paint(RenderCanvas canvas) {
     canvas.drawCircle(x, y, radius, _paint);
   }
 }
@@ -69,7 +69,7 @@ class RenderTouchDemo extends RenderBox {
     size = constraints.constrain(Size.infinite);
   }
 
-  void paint(RenderObjectDisplayList canvas) {
+  void paint(RenderCanvas canvas) {
     Paint white = new Paint()..color = const Color(0xFFFFFFFF);
     canvas.drawRect(new Rect.fromSize(size), white);
     for (Dot dot in dots.values)