2015-07-16 18:54:25 +00:00
|
|
|
// Copyright 2015 The Chromium Authors. All rights reserved.
|
|
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
|
|
// found in the LICENSE file.
|
|
|
|
|
2016-02-13 22:30:37 +00:00
|
|
|
// This example shows how to use the ui.Canvas interface to draw various shapes
|
|
|
|
// with gradients and transforms.
|
|
|
|
|
2015-10-10 03:55:54 +00:00
|
|
|
import 'dart:ui' as ui;
|
2015-07-16 18:54:25 +00:00
|
|
|
import 'dart:math' as math;
|
|
|
|
import 'dart:typed_data';
|
|
|
|
|
2015-10-10 03:55:54 +00:00
|
|
|
ui.Picture paint(ui.Rect paintBounds) {
|
2016-02-13 22:30:37 +00:00
|
|
|
// First we create a PictureRecorder to record the commands we're going to
|
|
|
|
// feed in the canvas. The PictureRecorder will eventually produce a Picture,
|
|
|
|
// which is an immutable record of those commands.
|
2015-10-10 03:55:54 +00:00
|
|
|
ui.PictureRecorder recorder = new ui.PictureRecorder();
|
2016-02-13 22:30:37 +00:00
|
|
|
|
|
|
|
// Next, we create a canvas from the recorder. The canvas is an interface
|
|
|
|
// which can receive drawing commands. The canvas interface is modeled after
|
|
|
|
// the SkCanvas interface from Skia. The paintBounds establishes a "cull rect"
|
|
|
|
// for the canvas, which lets the implementation discard any commands that
|
|
|
|
// are entirely outside this rectangle.
|
2015-10-10 03:55:54 +00:00
|
|
|
ui.Canvas canvas = new ui.Canvas(recorder, paintBounds);
|
2015-07-16 18:54:25 +00:00
|
|
|
|
2015-10-10 03:55:54 +00:00
|
|
|
ui.Paint paint = new ui.Paint();
|
2016-02-13 22:30:37 +00:00
|
|
|
canvas.drawPaint(new ui.Paint()..color = const ui.Color(0xFFFFFFFF));
|
|
|
|
|
|
|
|
ui.Size size = paintBounds.size;
|
2015-10-10 03:55:54 +00:00
|
|
|
ui.Point mid = size.center(ui.Point.origin);
|
2015-07-16 18:54:25 +00:00
|
|
|
double radius = size.shortestSide / 2.0;
|
|
|
|
|
|
|
|
canvas.save();
|
2015-10-28 05:54:45 +00:00
|
|
|
canvas.translate(-mid.x/2.0, ui.window.size.height*2.0);
|
2015-07-16 18:54:25 +00:00
|
|
|
canvas.clipRect(
|
2015-10-28 05:54:45 +00:00
|
|
|
new ui.Rect.fromLTRB(0.0, -ui.window.size.height, ui.window.size.width, radius));
|
2015-07-16 18:54:25 +00:00
|
|
|
|
|
|
|
canvas.translate(mid.x, mid.y);
|
2015-10-10 03:55:54 +00:00
|
|
|
paint.color = const ui.Color.fromARGB(128, 255, 0, 255);
|
2015-07-16 18:54:25 +00:00
|
|
|
canvas.rotate(math.PI/4.0);
|
|
|
|
|
2015-10-10 03:55:54 +00:00
|
|
|
ui.Gradient yellowBlue = new ui.Gradient.linear(
|
2015-10-22 20:29:12 +00:00
|
|
|
<ui.Point>[new ui.Point(-radius, -radius), new ui.Point(0.0, 0.0)],
|
|
|
|
<ui.Color>[const ui.Color(0xFFFFFF00), const ui.Color(0xFF0000FF)]
|
|
|
|
);
|
2015-10-10 03:55:54 +00:00
|
|
|
canvas.drawRect(new ui.Rect.fromLTRB(-radius, -radius, radius, radius),
|
2015-10-22 20:29:12 +00:00
|
|
|
new ui.Paint()..shader = yellowBlue);
|
2015-07-16 18:54:25 +00:00
|
|
|
|
|
|
|
// Scale x and y by 0.5.
|
2015-10-22 20:29:12 +00:00
|
|
|
Float64List scaleMatrix = new Float64List.fromList(<double>[
|
2015-07-16 18:54:25 +00:00
|
|
|
0.5, 0.0, 0.0, 0.0,
|
|
|
|
0.0, 0.5, 0.0, 0.0,
|
2015-09-03 05:22:32 +00:00
|
|
|
0.0, 0.0, 1.0, 0.0,
|
2015-07-16 18:54:25 +00:00
|
|
|
0.0, 0.0, 0.0, 1.0,
|
|
|
|
]);
|
2016-01-08 06:22:16 +00:00
|
|
|
canvas.transform(scaleMatrix);
|
2015-10-10 03:55:54 +00:00
|
|
|
paint.color = const ui.Color.fromARGB(128, 0, 255, 0);
|
|
|
|
canvas.drawCircle(ui.Point.origin, radius, paint);
|
2015-07-16 18:54:25 +00:00
|
|
|
canvas.restore();
|
|
|
|
|
2016-03-04 01:32:34 +00:00
|
|
|
paint.color = const ui.Color.fromARGB(128, 255, 0, 0);
|
|
|
|
canvas.drawCircle(new ui.Point(150.0, 300.0), radius, paint);
|
2015-07-16 18:54:25 +00:00
|
|
|
|
2016-02-13 22:30:37 +00:00
|
|
|
// When we're done issuing painting commands, we end the recording an receive
|
|
|
|
// a Picture, which is an immutable record of the commands we've issued. You
|
|
|
|
// can draw a Picture into another canvas or include it as part of a
|
|
|
|
// composited scene.
|
2015-09-03 05:22:32 +00:00
|
|
|
return recorder.endRecording();
|
|
|
|
}
|
|
|
|
|
2015-10-10 03:55:54 +00:00
|
|
|
ui.Scene composite(ui.Picture picture, ui.Rect paintBounds) {
|
2015-10-28 05:54:45 +00:00
|
|
|
final double devicePixelRatio = ui.window.devicePixelRatio;
|
2015-10-12 17:09:57 +00:00
|
|
|
Float64List deviceTransform = new Float64List(16)
|
2015-09-03 05:22:32 +00:00
|
|
|
..[0] = devicePixelRatio
|
2015-09-03 16:39:45 +00:00
|
|
|
..[5] = devicePixelRatio
|
|
|
|
..[10] = 1.0
|
|
|
|
..[15] = 1.0;
|
2016-03-08 22:17:01 +00:00
|
|
|
ui.SceneBuilder sceneBuilder = new ui.SceneBuilder()
|
2015-09-03 05:22:32 +00:00
|
|
|
..pushTransform(deviceTransform)
|
2016-01-12 20:20:13 +00:00
|
|
|
..addPicture(ui.Offset.zero, picture)
|
2015-09-03 05:22:32 +00:00
|
|
|
..pop();
|
|
|
|
return sceneBuilder.build();
|
|
|
|
}
|
|
|
|
|
2015-10-28 05:54:45 +00:00
|
|
|
void beginFrame(Duration timeStamp) {
|
|
|
|
ui.Rect paintBounds = ui.Point.origin & ui.window.size;
|
2015-10-10 03:55:54 +00:00
|
|
|
ui.Picture picture = paint(paintBounds);
|
|
|
|
ui.Scene scene = composite(picture, paintBounds);
|
2015-10-28 05:54:45 +00:00
|
|
|
ui.window.render(scene);
|
2015-07-16 18:54:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
void main() {
|
2015-10-28 05:54:45 +00:00
|
|
|
ui.window.onBeginFrame = beginFrame;
|
|
|
|
ui.window.scheduleFrame();
|
2015-07-16 18:54:25 +00:00
|
|
|
}
|