| 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:typed_data'; |
| 12 import 'dart:sky'; | 12 import 'dart:sky'; |
| 13 | 13 |
| 14 void main() { | 14 void main() { |
| 15 var element = document.getElementById('canvas'); | 15 var element = document.getElementById('canvas'); |
| 16 element.requestPaint((PaintingContext context) { | 16 element.requestPaint((PaintingContext context) { |
| 17 Paint paint = new Paint(); | 17 Paint paint = new Paint(); |
| 18 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); |
| 19 double radius = math.min(mid.x, mid.y); | 19 double radius = math.min(mid.x, mid.y); |
| 20 | 20 |
| 21 context.save(); | 21 context.save(); |
| 22 | 22 |
| 23 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)); |
| 24 | 24 |
| 25 context.translate(mid.x, mid.y); | 25 context.translate(mid.x, mid.y); |
| 26 paint.color = const Color.fromARGB(128, 255, 0, 255); | 26 paint.color = const Color.fromARGB(128, 255, 0, 255); |
| 27 context.rotate(math.PI/4.0); | 27 context.rotate(math.PI/4.0); |
| 28 | 28 |
| 29 Gradient yellowBlue = new Gradient.Linear( | 29 Gradient yellowBlue = new Gradient.linear( |
| 30 [new Point(-radius, -radius), new Point(0.0, 0.0)], | 30 [new Point(-radius, -radius), new Point(0.0, 0.0)], |
| 31 [const Color(0xFFFFFF00), const Color(0xFF0000FF)], | 31 [const Color(0xFFFFFF00), const Color(0xFF0000FF)]); |
| 32 null); | |
| 33 context.drawRect(new Rect.fromLTRB(-radius, -radius, radius, radius), | 32 context.drawRect(new Rect.fromLTRB(-radius, -radius, radius, radius), |
| 34 new Paint()..setShader(yellowBlue)); | 33 new Paint()..setShader(yellowBlue)); |
| 35 | 34 |
| 36 // Scale x and y by 0.5. | 35 // Scale x and y by 0.5. |
| 37 var scaleMatrix = new Float32List.fromList([ | 36 var scaleMatrix = new Float32List.fromList([ |
| 38 0.5, 0.0, 0.0, 0.0, | 37 0.5, 0.0, 0.0, 0.0, |
| 39 0.0, 0.5, 0.0, 0.0, | 38 0.0, 0.5, 0.0, 0.0, |
| 40 0.0, 0.0, 0.0, 0.0, | 39 0.0, 0.0, 0.0, 0.0, |
| 41 0.0, 0.0, 0.0, 1.0, | 40 0.0, 0.0, 0.0, 1.0, |
| 42 ]); | 41 ]); |
| (...skipping 17 matching lines...) Expand all Loading... |
| 60 TransferMode.srcInMode)); | 59 TransferMode.srcInMode)); |
| 61 layerPaint.setMaskFilter( | 60 layerPaint.setMaskFilter( |
| 62 new MaskFilter.Blur(BlurStyle.normal, 3.0, highQuality: true)); | 61 new MaskFilter.Blur(BlurStyle.normal, 3.0, highQuality: true)); |
| 63 }) | 62 }) |
| 64 ..addLayerOnTop( | 63 ..addLayerOnTop( |
| 65 new DrawLooperLayerInfo() | 64 new DrawLooperLayerInfo() |
| 66 ..setOffset(const Point(75.0, 75.0)) | 65 ..setOffset(const Point(75.0, 75.0)) |
| 67 ..setColorMode(TransferMode.srcMode) | 66 ..setColorMode(TransferMode.srcMode) |
| 68 ..setPaintBits(-1), | 67 ..setPaintBits(-1), |
| 69 (Paint layerPaint) { | 68 (Paint layerPaint) { |
| 70 Gradient redYellow = new Gradient.Radial( | 69 Gradient redYellow = new Gradient.radial( |
| 71 new Point(0.0, 0.0), radius/3.0, | 70 new Point(0.0, 0.0), radius/3.0, |
| 72 [const Color(0xFFFFFF00), const Color(0xFFFF0000)], | 71 [const Color(0xFFFFFF00), const Color(0xFFFF0000)], |
| 73 null, TileMode.mirror); | 72 null, TileMode.mirror); |
| 74 layerPaint.setShader(redYellow); | 73 layerPaint.setShader(redYellow); |
| 75 }) | 74 }) |
| 76 ..addLayerOnTop( | 75 ..addLayerOnTop( |
| 77 new DrawLooperLayerInfo()..setOffset(const Point(225.0, 75.0)), | 76 new DrawLooperLayerInfo()..setOffset(const Point(225.0, 75.0)), |
| 78 (Paint layerPaint) { | 77 (Paint layerPaint) { |
| 79 // Since this layer uses a DST color mode, this has no effect. | 78 // Since this layer uses a DST color mode, this has no effect. |
| 80 layerPaint.color = const Color.fromARGB(128, 255, 0, 0); | 79 layerPaint.color = const Color.fromARGB(128, 255, 0, 0); |
| 81 }); | 80 }); |
| 82 paint.setDrawLooper(builder.build()); | 81 paint.setDrawLooper(builder.build()); |
| 83 context.drawCircle(0.0, 0.0, radius, paint); | 82 context.drawCircle(0.0, 0.0, radius, paint); |
| 84 | 83 |
| 85 context.commit(); | 84 context.commit(); |
| 86 }); | 85 }); |
| 87 } | 86 } |
| 88 </script> | 87 </script> |
| 89 </sky> | 88 </sky> |
| OLD | NEW |