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:sky'; | 11 import 'dart:sky'; |
12 | 12 |
13 void main() { | 13 void main() { |
14 var element = document.getElementById('canvas'); | 14 var element = document.getElementById('canvas'); |
15 element.requestPaint((PaintingContext context) { | 15 element.requestPaint((PaintingContext context) { |
16 Paint paint = new Paint(); | 16 Paint paint = new Paint(); |
17 double radius = math.min(context.width, context.height) / 2.0; | 17 Point mid = new Point(context.width / 2.0, context.height / 2.0); |
| 18 double radius = math.min(mid.x, mid.y); |
18 | 19 |
19 context.save(); | 20 context.save(); |
20 | 21 |
21 context.clipRect(new Rect()..setLTRB(0.0, 0.0, context.width, radius)); | 22 context.clipRect(new Rect()..setLTRB(0.0, 0.0, context.width, radius)); |
22 | 23 |
23 context.translate(context.width / 2.0, context.height / 2.0); | 24 context.translate(mid.x, mid.y); |
24 paint.setARGB(128, 255, 0, 255); | 25 paint.setARGB(128, 255, 0, 255); |
25 context.rotateDegrees(45.0); | 26 context.rotateDegrees(45.0); |
26 | 27 |
27 context.drawRect(new Rect()..setLTRB(-radius, -radius, radius, radius), | 28 context.drawRect(new Rect()..setLTRB(-radius, -radius, radius, radius), |
28 paint); | 29 paint); |
29 | 30 |
30 // Scale x and y by 0.5. | 31 // Scale x and y by 0.5. |
31 var scaleMatrix = [ | 32 var scaleMatrix = [ |
32 0.5, 0.0, 0.0, | 33 0.5, 0.0, 0.0, |
33 0.0, 0.5, 0.0, | 34 0.0, 0.5, 0.0, |
34 0.0, 0.0, 1.0 | 35 0.0, 0.0, 1.0 |
35 ]; | 36 ]; |
36 context.concat(scaleMatrix); | 37 context.concat(scaleMatrix); |
37 paint.setARGB(128, 0, 255, 0); | 38 paint.setARGB(128, 0, 255, 0); |
38 context.drawCircle(0.0, 0.0, radius, paint); | 39 context.drawCircle(0.0, 0.0, radius, paint); |
39 | 40 |
40 context.restore(); | 41 context.restore(); |
41 | 42 |
42 context.drawCircle(0.0, 0.0, radius, paint); | 43 context.drawCircle(0.0, 0.0, radius, paint); |
43 | 44 |
44 context.commit(); | 45 context.commit(); |
45 }); | 46 }); |
46 } | 47 } |
47 </script> | 48 </script> |
48 </sky> | 49 </sky> |
OLD | NEW |