OLD | NEW |
1 <sky> | 1 <sky> |
2 <style> | 2 <style> |
3 div { | 3 div { |
4 height: 200px; | 4 height: 200px; |
5 background-color: lightblue; | 5 background-color: lightblue; |
6 } | 6 } |
7 </style> | 7 </style> |
8 <div id="canvas" /> | 8 <div id="canvas" /> |
9 <script> | 9 <script> |
10 import 'dart:math' as math; | 10 import 'dart:math' as math; |
| 11 import 'dart:typed_data'; |
11 import 'dart:sky'; | 12 import 'dart:sky'; |
12 | 13 |
13 void main() { | 14 void main() { |
14 var element = document.getElementById('canvas'); | 15 var element = document.getElementById('canvas'); |
15 element.requestPaint((PaintingContext context) { | 16 element.requestPaint((PaintingContext context) { |
16 Paint paint = new Paint(); | 17 Paint paint = new Paint(); |
17 Point mid = new Point(context.width / 2.0, context.height / 2.0); | 18 Point mid = new Point(context.width / 2.0, context.height / 2.0); |
18 double radius = math.min(mid.x, mid.y); | 19 double radius = math.min(mid.x, mid.y); |
19 | 20 |
20 context.save(); | 21 context.save(); |
21 | 22 |
22 context.clipRect(new Rect.fromLTRB(0.0, 0.0, context.width, radius)); | 23 context.clipRect(new Rect.fromLTRB(0.0, 0.0, context.width, radius)); |
23 | 24 |
24 context.translate(mid.x, mid.y); | 25 context.translate(mid.x, mid.y); |
25 paint.color = const Color.fromARGB(128, 255, 0, 255); | 26 paint.color = const Color.fromARGB(128, 255, 0, 255); |
26 context.rotateDegrees(45.0); | 27 context.rotateDegrees(45.0); |
27 | 28 |
28 context.drawRect(new Rect.fromLTRB(-radius, -radius, radius, radius), | 29 context.drawRect(new Rect.fromLTRB(-radius, -radius, radius, radius), |
29 paint); | 30 paint); |
30 | 31 |
31 // Scale x and y by 0.5. | 32 // Scale x and y by 0.5. |
32 var scaleMatrix = [ | 33 var scaleMatrix = new Float32List.fromList([ |
33 0.5, 0.0, 0.0, | 34 0.5, 0.0, 0.0, 0.0, |
34 0.0, 0.5, 0.0, | 35 0.0, 0.5, 0.0, 0.0, |
35 0.0, 0.0, 1.0 | 36 0.0, 0.0, 0.0, 0.0, |
36 ]; | 37 0.0, 0.0, 0.0, 1.0, |
| 38 ]); |
37 context.concat(scaleMatrix); | 39 context.concat(scaleMatrix); |
38 paint.color = const Color.fromARGB(128, 0, 255, 0); | 40 paint.color = const Color.fromARGB(128, 0, 255, 0); |
39 context.drawCircle(0.0, 0.0, radius, paint); | 41 context.drawCircle(0.0, 0.0, radius, paint); |
40 | 42 |
41 context.restore(); | 43 context.restore(); |
42 | 44 |
43 context.translate(0.0, 50.0); | 45 context.translate(0.0, 50.0); |
44 var builder = new LayerDrawLooperBuilder() | 46 var builder = new LayerDrawLooperBuilder() |
45 ..addLayerOnTop( | 47 ..addLayerOnTop( |
46 new DrawLooperLayerInfo() | 48 new DrawLooperLayerInfo() |
(...skipping 22 matching lines...) Expand all Loading... |
69 layerPaint.color = const Color.fromARGB(128, 255, 0, 0); | 71 layerPaint.color = const Color.fromARGB(128, 255, 0, 0); |
70 }); | 72 }); |
71 paint.setDrawLooper(builder.build()); | 73 paint.setDrawLooper(builder.build()); |
72 context.drawCircle(0.0, 0.0, radius, paint); | 74 context.drawCircle(0.0, 0.0, radius, paint); |
73 | 75 |
74 context.commit(); | 76 context.commit(); |
75 }); | 77 }); |
76 } | 78 } |
77 </script> | 79 </script> |
78 </sky> | 80 </sky> |
OLD | NEW |