mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
0f8ae9f16c
For this, I added back my previous CustomDart attribute for customizing the generated Dart code of an interface. R=eseidel@chromium.org Review URL: https://codereview.chromium.org/1162843003
79 lines
2.4 KiB
Plaintext
79 lines
2.4 KiB
Plaintext
<sky>
|
|
<style>
|
|
div {
|
|
height: 200px;
|
|
background-color: lightblue;
|
|
}
|
|
</style>
|
|
<div id="canvas" />
|
|
<script>
|
|
import 'dart:math' as math;
|
|
import 'dart:sky';
|
|
|
|
void main() {
|
|
var element = document.getElementById('canvas');
|
|
element.requestPaint((PaintingContext context) {
|
|
Paint paint = new Paint();
|
|
Point mid = new Point(context.width / 2.0, context.height / 2.0);
|
|
double radius = math.min(mid.x, mid.y);
|
|
|
|
context.save();
|
|
|
|
context.clipRect(new Rect.fromLTRB(0.0, 0.0, context.width, radius));
|
|
|
|
context.translate(mid.x, mid.y);
|
|
paint.color = const Color.fromARGB(128, 255, 0, 255);
|
|
context.rotateDegrees(45.0);
|
|
|
|
context.drawRect(new Rect.fromLTRB(-radius, -radius, radius, radius),
|
|
paint);
|
|
|
|
// Scale x and y by 0.5.
|
|
var scaleMatrix = [
|
|
0.5, 0.0, 0.0,
|
|
0.0, 0.5, 0.0,
|
|
0.0, 0.0, 1.0
|
|
];
|
|
context.concat(scaleMatrix);
|
|
paint.color = const Color.fromARGB(128, 0, 255, 0);
|
|
context.drawCircle(0.0, 0.0, radius, paint);
|
|
|
|
context.restore();
|
|
|
|
context.translate(0.0, 50.0);
|
|
var builder = new LayerDrawLooperBuilder()
|
|
..addLayerOnTop(
|
|
new DrawLooperLayerInfo()
|
|
..setOffset(const Point(150.0, 0.0))
|
|
..setColorMode(TransferMode.srcMode)
|
|
..setPaintBits(-1),
|
|
(Paint layerPaint) {
|
|
layerPaint.color = const Color.fromARGB(128, 255, 255, 0);
|
|
layerPaint.setColorFilter(
|
|
new ColorFilter(const Color.fromARGB(128, 0, 0, 255),
|
|
TransferMode.srcInMode));
|
|
layerPaint.setMaskFilter(
|
|
new MaskFilter.Blur(BlurStyle.normal, 3.0, highQuality: true));
|
|
})
|
|
..addLayerOnTop(
|
|
new DrawLooperLayerInfo()
|
|
..setOffset(const Point(75.0, 75.0))
|
|
..setColorMode(TransferMode.srcMode),
|
|
(Paint layerPaint) {
|
|
layerPaint.color = const Color.fromARGB(128, 255, 0, 0);
|
|
})
|
|
..addLayerOnTop(
|
|
new DrawLooperLayerInfo()..setOffset(const Point(225.0, 75.0)),
|
|
(Paint layerPaint) {
|
|
// Since this layer uses a DST color mode, this has no effect.
|
|
layerPaint.color = const Color.fromARGB(128, 255, 0, 0);
|
|
});
|
|
paint.setDrawLooper(builder.build());
|
|
context.drawCircle(0.0, 0.0, radius, paint);
|
|
|
|
context.commit();
|
|
});
|
|
}
|
|
</script>
|
|
</sky>
|