books

assets/draw/p04/p04.dart

@@ -0,0 +1 @@
+export 'p04_page.dart';

assets/draw/p04/p04_page.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+import 's06.dart' as s6;
+import 's07.dart' as s7;
+
+
+class P04Page extends StatelessWidget {
+  const P04Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p04',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+        s7.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p04/s01.dart

@@ -0,0 +1,83 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _image;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/wy_300x200.jpg');
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white, child: CustomPaint(painter: PaperPainter(_image)));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawImage(canvas);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) =>
+      image != oldDelegate.image;
+
+  void _drawImage(Canvas canvas) {
+    if (image != null) {
+      canvas.drawImage(
+          image!, Offset(-image!.width / 2, -image!.height / 2), _paint);
+    }
+  }
+}

assets/draw/p04/s02.dart

@@ -0,0 +1,118 @@
+import 'dart:async';
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/wy_300x200.jpg');
+    setState(() {});
+  }
+
+  ui.Image? _image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+            painter: PaperPainter(
+              _image,
+            )));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawImage(canvas);
+    _drawImageRect(canvas);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
+
+  void _drawImage(Canvas canvas) {
+    if (image != null) {
+      canvas.drawImage(
+          image!, Offset(-image!.width / 2, -image!.height / 2), _paint);
+    }
+  }
+
+  void _drawImageRect(Canvas canvas) {
+    if (image != null) {
+      canvas.drawImageRect(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height / 2),
+              width: 60,
+              height: 60),
+          Rect.fromLTRB(0, 0, 100, 100).translate(200, 0),
+          _paint);
+
+      canvas.drawImageRect(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height / 2 - 60),
+              width: 60,
+              height: 60),
+          Rect.fromLTRB(0, 0, 100, 100).translate(-280, -100),
+          _paint);
+
+      canvas.drawImageRect(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2 + 60, image!.height / 2),
+              width: 60,
+              height: 60),
+          Rect.fromLTRB(0, 0, 100, 100).translate(-280, 50),
+          _paint);
+    }
+  }
+}

assets/draw/p04/s03.dart

@@ -0,0 +1,129 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+///
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/right_chat.png');
+    setState(() {});
+  }
+
+  ui.Image? _image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+            painter: PaperPainter(
+              _image,
+            )));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawImageNine(canvas);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
+
+  void _drawImageNine(Canvas canvas) {
+    if (image != null) {
+      canvas.drawImageNine(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height - 6.0),
+              width: image!.width - 20.0,
+              height: 2.0),
+          Rect.fromCenter(
+              center: Offset(
+                0,
+                0,
+              ),
+              width: 300,
+              height: 120),
+          _paint);
+
+      canvas.drawImageNine(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height - 6.0),
+              width: image!.width - 20.0,
+              height: 2.0),
+          Rect.fromCenter(
+              center: Offset(
+                0,
+                0,
+              ),
+              width: 100,
+              height: 50)
+              .translate(250, 0),
+          _paint);
+
+      canvas.drawImageNine(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height - 6.0),
+              width: image!.width - 20.0,
+              height: 2.0),
+          Rect.fromCenter(
+              center: Offset(
+                0,
+                0,
+              ),
+              width: 80,
+              height: 250)
+              .translate(-250, 0),
+          _paint);
+    }
+  }
+}

assets/draw/p04/s04.dart

@@ -0,0 +1,121 @@
+import 'dart:async';
+import 'dart:math';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+///
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/shoot.png');
+    setState(() {});
+  }
+
+  ui.Image? _image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+            painter: PaperPainter(
+              _image,
+            )));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  final List<Sprite> allSprites = [];
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (image == null) {
+      return;
+    }
+    coordinate.paint(canvas, size);
+
+    allSprites.add(Sprite(
+        position: Rect.fromLTWH(0, 325, 257, 166),
+        offset: Offset(0, 0),
+        alpha: 255,
+        rotation: 0));
+
+    allSprites.add(Sprite(
+        position: Rect.fromLTWH(0, 325, 257, 166),
+        offset: Offset(257, 130),
+        alpha: 255,
+        rotation: 0));
+
+    final List<RSTransform> transforms = allSprites
+        .map((sprite) => RSTransform.fromComponents(
+      rotation: sprite.rotation,
+      scale: 1.0,
+      anchorX: sprite.anchor.dx,
+      anchorY: sprite.anchor.dy,
+      translateX: sprite.offset.dx,
+      translateY: sprite.offset.dy,
+    ))
+        .toList();
+
+    final List<Rect> rects =
+    allSprites.map((sprite) => sprite.position).toList();
+
+    canvas.drawAtlas(image!, transforms, rects, null, null, null, _paint);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
+}
+
+class Sprite {
+  Rect position; // 雪碧图 中 图片矩形区域
+  Offset offset; // 移动偏倚
+  Offset anchor; // 移动偏倚
+  int alpha; // 透明度
+  double rotation; // 旋转角度
+
+  Sprite({this.offset=Offset.zero,this.anchor=Offset.zero, this.alpha=255, this.rotation=0,required this.position});
+}

assets/draw/p04/s05.dart

@@ -0,0 +1,135 @@
+import 'dart:async';
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+///
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/shoot.png');
+    setState(() {});
+  }
+
+  ui.Image? _image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+            painter: PaperPainter(
+              _image,
+            )));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  final List<Sprite> allSprites = [];
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (image == null) {
+      return;
+    }
+
+    coordinate.paint(canvas, size);
+
+    allSprites.add(Sprite(
+        position: Rect.fromLTWH(0, 325, 257, 166),
+        offset: Offset(0, 0),
+        alpha: 255,
+        rotation: 0));
+
+    allSprites.add(Sprite(
+        position: Rect.fromLTWH(0, 325, 257, 166),
+        offset: Offset(257, 130),
+        alpha: 255,
+        rotation: 0));
+
+    Float32List rectList = Float32List(allSprites.length * 4);
+    Float32List transformList = Float32List(allSprites.length * 4);
+
+    for (int i = 0; i < allSprites.length; i++) {
+      final Sprite sprite = allSprites[i];
+
+      rectList[i * 4 + 0] = sprite.position.left;
+      rectList[i * 4 + 1] = sprite.position.top;
+      rectList[i * 4 + 2] = sprite.position.right;
+      rectList[i * 4 + 3] = sprite.position.bottom;
+
+      final RSTransform transform = RSTransform.fromComponents(
+        rotation: sprite.rotation,
+        scale: 1.0,
+        anchorX: sprite.anchor.dx,
+        anchorY: sprite.anchor.dy,
+        translateX: sprite.offset.dx,
+        translateY: sprite.offset.dy,
+      );
+
+      transformList[i * 4 + 0] = transform.scos;
+      transformList[i * 4 + 1] = transform.ssin;
+      transformList[i * 4 + 2] = transform.tx;
+      transformList[i * 4 + 3] = transform.ty;
+
+    }
+
+    canvas.drawRawAtlas(image!, transformList, rectList, null, null, null, _paint);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
+}
+
+class Sprite {
+  Rect position; // 雪碧图 中 图片矩形区域
+  Offset offset; // 移动偏倚
+  Offset anchor; // 移动偏倚
+  int alpha; // 透明度
+  double rotation; // 旋转角度
+
+  Sprite({this.offset=Offset.zero,this.anchor=Offset.zero, this.alpha=255, this.rotation=0,required this.position});
+}

assets/draw/p04/s06.dart

@@ -0,0 +1,137 @@
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    // _drawTextWithParagraph(canvas,TextAlign.left);
+    // _drawTextWithParagraph(canvas,TextAlign.center);
+    // _drawTextWithParagraph(canvas,TextAlign.right);
+
+    // _drawWithTextPaint(canvas);
+    // _drawTextPaintShowSize(canvas);
+    _drawTextPaintWithPaint(canvas);
+  }
+
+  void _drawTextWithParagraph(Canvas canvas, TextAlign textAlign) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: textAlign,
+      fontSize: 40,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ));
+    builder.pushStyle(
+      ui.TextStyle(
+          color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
+    );
+    builder.addText("Flutter Unit");
+    ui.Paragraph paragraph = builder.build();
+    paragraph.layout(ui.ParagraphConstraints(width: 300));
+    canvas.drawParagraph(paragraph, Offset(0, 0));
+
+    canvas.drawRect(Rect.fromLTRB(0, 0, 300, 40),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  void _drawWithTextPaint(Canvas canvas) {
+    var textPainter = TextPainter(
+        text: TextSpan(
+            text: 'Flutter Unit',
+            style: TextStyle(fontSize: 40, color: Colors.black)),
+        textAlign: TextAlign.center,
+        textDirection: TextDirection.ltr);
+
+    // 进行布局
+    textPainter.layout();
+    textPainter.paint(canvas, Offset.zero);
+  }
+
+  void _drawTextPaintShowSize(Canvas canvas) {
+    TextPainter textPainter = TextPainter(
+        text: TextSpan(
+            text: 'Flutter Unit',
+            style: TextStyle(
+              // foreground: Paint()..style=PaintingStyle.stroke,
+                fontSize: 40,
+                color: Colors.black)),
+        textAlign: TextAlign.center,
+        textDirection: TextDirection.ltr);
+
+    textPainter.layout(); // 进行布局
+    Size size = textPainter.size; // 尺寸必须在布局后获取
+    textPainter.paint(canvas, Offset(-size.width / 2, -size.height / 2));
+
+    canvas.drawRect(
+        Rect.fromLTRB(0, 0, size.width, size.height)
+            .translate(-size.width / 2, -size.height / 2),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  void _drawTextPaintWithPaint(Canvas canvas) {
+    Paint textPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1;
+    TextPainter textPainter = TextPainter(
+        text: TextSpan(
+            text: 'Flutter Unit by 张风捷特烈',
+            style: TextStyle(
+                foreground: textPaint, fontSize: 40)),
+        textAlign: TextAlign.center,
+        textDirection: TextDirection.ltr);
+
+    textPainter.layout(maxWidth: 280); // 进行布局
+    Size size = textPainter.size; // 尺寸必须在布局后获取
+    textPainter.paint(canvas, Offset(-size.width / 2, -size.height / 2));
+
+    canvas.drawRect(
+        Rect.fromLTRB(0, 0, size.width, size.height)
+            .translate(-size.width / 2, -size.height / 2),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => false;
+}

assets/draw/p04/s07.dart

@@ -0,0 +1,125 @@
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate(step: 25);
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    _drawTextLeft(canvas);
+    _drawTextTextAlignRight(canvas);
+    _drawTextPaint(canvas, "100", offset: Offset(0, 0));
+  }
+
+  void _drawTextLeft(Canvas canvas) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.left,
+      fontSize: 40,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(
+            color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText("Flutter Unit");
+
+    canvas.drawParagraph(
+        builder.build()..layout(ui.ParagraphConstraints(width: 300)),
+        Offset(0, -100));
+    canvas.drawRect(Rect.fromLTRB(0, 0 - 100.0, 300, 40 - 100.0),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  void _drawTextCenter(Canvas canvas,String str) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.center,
+      fontSize: 12,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(
+            color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText(str);
+
+    canvas.drawParagraph(
+        builder.build()..layout(ui.ParagraphConstraints(width: 12.0*str.length)),
+        Offset(0, 0));
+
+  }
+
+  void _drawTextTextAlignRight(Canvas canvas) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.right,
+      fontSize: 40,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(
+            color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText("Flutter Unit");
+
+    canvas.drawParagraph(
+        builder.build()..layout(ui.ParagraphConstraints(width: 300)),
+        Offset(0, 100));
+
+    canvas.drawRect(Rect.fromLTRB(0, 0 + 100.0, 300, 40 + 100.0),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  void _drawTextPaint(Canvas canvas, String text,
+      {Offset offset = Offset.zero}) {
+    TextPainter(
+        text: TextSpan(
+            text: text, style: TextStyle(fontSize: 12, color: Colors.black)),
+        textAlign: TextAlign.left,
+        textDirection: TextDirection.ltr)
+      ..layout(maxWidth: 300)
+      ..paint(canvas, offset);
+
+    canvas.drawRect(Rect.fromLTRB(0, 0, 300, 40),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => false;
+}