Chromium Code Reviews| 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 Point mid = new Point(context.width / 2.0, 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 double radius = math.min(mid.x, mid.y); |
| 19 | 19 |
| 20 context.save(); | 20 context.save(); |
| 21 | 21 |
| 22 context.clipRect(new Rect.fromLTRB(0.0, 0.0, context.width, radius)); | 22 context.clipRect(new Rect.fromLTRB(0.0, 0.0, context.width, radius)); |
| 23 | 23 |
| 24 context.translate(mid.x, mid.y); | 24 context.translate(mid.x, mid.y); |
| 25 paint.setARGB(128, 255, 0, 255); | 25 paint.color = const Color.fromARGB(128, 255, 0, 255); |
| 26 print("color: ${paint.color.value}"); | |
|
eseidel
2015/06/01 20:34:23
Intentional?
Matt Perry
2015/06/01 20:38:50
Done.
| |
| 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 = [ |
| 33 0.5, 0.0, 0.0, | 34 0.5, 0.0, 0.0, |
| 34 0.0, 0.5, 0.0, | 35 0.0, 0.5, 0.0, |
| 35 0.0, 0.0, 1.0 | 36 0.0, 0.0, 1.0 |
| 36 ]; | 37 ]; |
| 37 context.concat(scaleMatrix); | 38 context.concat(scaleMatrix); |
| 38 paint.setARGB(128, 0, 255, 0); | 39 paint.color = const Color.fromARGB(128, 0, 255, 0); |
| 39 context.drawCircle(0.0, 0.0, radius, paint); | 40 context.drawCircle(0.0, 0.0, radius, paint); |
| 40 | 41 |
| 41 context.restore(); | 42 context.restore(); |
| 42 | 43 |
| 43 context.translate(0.0, 50.0); | 44 context.translate(0.0, 50.0); |
| 44 var builder = new LayerDrawLooperBuilder() | 45 var builder = new LayerDrawLooperBuilder() |
| 45 ..addLayerOnTop( | 46 ..addLayerOnTop( |
| 46 new DrawLooperLayerInfo() | 47 new DrawLooperLayerInfo() |
| 47 ..setOffset(150.0, 0.0)..setPaintBits(-1)..setColorMode(1), | 48 ..setOffset(150.0, 0.0)..setPaintBits(-1)..setColorMode(1), |
| 48 (Paint layerPaint) { | 49 (Paint layerPaint) { |
| 49 layerPaint.setARGB(128, 255, 255, 0); | 50 layerPaint.color = const Color.fromARGB(128, 255, 255, 0); |
| 50 layerPaint.setColorFilter(new ColorFilter(0x770000ff, 5)); | 51 layerPaint.setColorFilter(new ColorFilter(0x770000ff, 5)); |
| 51 }) | 52 }) |
| 52 ..addLayerOnTop( | 53 ..addLayerOnTop( |
| 53 new DrawLooperLayerInfo()..setOffset(75.0, 75.0)..setColorMode(1), | 54 new DrawLooperLayerInfo()..setOffset(75.0, 75.0)..setColorMode(1), |
| 54 (Paint layerPaint) { | 55 (Paint layerPaint) { |
| 55 layerPaint.setARGB(128, 255, 0, 0); | 56 layerPaint.color = const Color.fromARGB(128, 255, 0, 0); |
| 56 }) | 57 }) |
| 57 ..addLayerOnTop( | 58 ..addLayerOnTop( |
| 58 new DrawLooperLayerInfo()..setOffset(225.0, 75.0), | 59 new DrawLooperLayerInfo()..setOffset(225.0, 75.0), |
| 59 (Paint layerPaint) { | 60 (Paint layerPaint) { |
| 60 // Since this layer uses a DST color mode, this has no effect. | 61 // Since this layer uses a DST color mode, this has no effect. |
| 61 layerPaint.setARGB(128, 255, 0, 0); | 62 layerPaint.color = const Color.fromARGB(128, 255, 0, 0); |
| 62 }); | 63 }); |
| 63 paint.setDrawLooper(builder.build()); | 64 paint.setDrawLooper(builder.build()); |
| 64 context.drawCircle(0.0, 0.0, radius, paint); | 65 context.drawCircle(0.0, 0.0, radius, paint); |
| 65 | 66 |
| 66 context.commit(); | 67 context.commit(); |
| 67 }); | 68 }); |
| 68 } | 69 } |
| 69 </script> | 70 </script> |
| 70 </sky> | 71 </sky> |
| OLD | NEW |