books

assets/draw/p07/p07.dart

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

assets/draw/p07/p07_page.dart

@@ -0,0 +1,28 @@
+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;
+
+class P07Page extends StatelessWidget {
+  const P07Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p07',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p07/s01.dart

@@ -0,0 +1,61 @@
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.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 {
+  static const double step = 20; // 方格变长
+  final Coordinate coordinate = Coordinate(step: step);
+
+  // 颜色列表 256 个元素
+  final Color colors = Color(0xffBBE9F7).withRed(0);
+  // final Color colors = Color(0xff00E9F9);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint paint = Paint();
+
+    canvas.save();
+    canvas.translate(size.width / 2, size.height / 2);
+
+    List<String> values = colors.value.toRadixString(2).split('').toList();
+
+    // 遍历列表 绘制矩形色块
+    canvas.translate(-step * 4.0, -step * 2.0);
+    values.asMap().forEach((i, v) {
+      int line = (i % 8); // 行
+      int row = i ~/ 8; // 列
+      var topLeft = Offset(step * line, step * row);
+      var rect = Rect.fromPoints(topLeft, topLeft.translate(step, step));
+      canvas.drawRect(
+          rect, paint..color = v == '0' ? Colors.red : Colors.black);
+    });
+
+    canvas.restore();
+    coordinate.paint(canvas, size); //绘制坐标系
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p07/s02.dart

@@ -0,0 +1,55 @@
+import 'dart:ui';
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.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 {
+  static const double step = 15; // 方格变长
+  final Coordinate coordinate = Coordinate(step: step);
+
+  // 颜色列表 256 个元素
+  final List<Color> colors =
+  List<Color>.generate(256, (i) => Color.fromARGB(255 - i, 255, 0, 0));
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint paint = Paint();
+
+    canvas.save();
+    canvas.translate(size.width / 2, size.height / 2);
+
+    // 遍历列表 绘制矩形色块
+    canvas.translate(-step * 8.0, -step * 8.0);
+    colors.asMap().forEach((i, color) {
+      int line = (i % 16); // 行
+      int row = i ~/ 16; // 列
+      var topLeft = Offset(step * line, step * row);
+      var rect = Rect.fromPoints(topLeft, topLeft.translate(step, step));
+      canvas.drawRect(rect, paint..color = color);
+    });
+
+    canvas.restore();
+    coordinate.paint(canvas, size); //绘制坐标系
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p07/s03.dart

@@ -0,0 +1,112 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate_pro.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/icon_head.png');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white, child: CustomPaint(painter: PaperPainter(_image)));
+  }
+
+
+}
+
+class PaperPainter extends CustomPainter {
+
+  final ui.Image? image;
+
+
+  PaperPainter(this.image);
+
+  static const double step = 20; // 方格变长
+  final Coordinate coordinate = Coordinate(step: step);
+
+  // 颜色列表 256 个元素
+  final List<Color> colors =
+  List<Color>.generate(256, (i) => Color.fromARGB(255 - i, 255, 0, 0));
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if(image ==null) return;
+
+    Paint srcPaint = Paint();
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.translate(-step * 17, -step * 7);
+    Paint dstPaint = Paint();
+    BlendMode.values.asMap().forEach((i, value) {
+      int line = i ~/ 10;
+      int row = i % 10;
+      canvas.save();
+
+      canvas.translate(3.7 * step * row, 5.5 * step * line);
+      canvas.drawImageRect(image!, Rect.fromPoints(Offset.zero, Offset(image!.width*1.0,image!.height*1.0)),
+          Rect.fromCenter(center:Offset.zero, width: 25*2.0,height: 25*2.0), dstPaint);
+
+      srcPaint
+        ..color = Color(0xffff0000)
+        ..blendMode = value;
+      canvas.drawRect(
+          Rect.fromPoints(Offset.zero, Offset(20 * 2.0, 20 * 2.0)), srcPaint);
+
+      _simpleDrawText(canvas,value.toString().split(".")[1],offset: Offset(-10, 50));
+      canvas.restore();
+    });
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+
+  void _simpleDrawText(Canvas canvas, String str,
+      {Offset offset = Offset.zero, Color color = Colors.black}) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.left,
+      fontSize: 11,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText(str);
+
+    canvas.drawParagraph(
+        builder.build()
+          ..layout(ui.ParagraphConstraints(width: 11.0 * str.length)),
+        offset);
+  }
+}

assets/draw/p07/s04.dart

@@ -0,0 +1,123 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate_pro.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? _srcImage;
+  ui.Image? _dstImage;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _srcImage = await loadImageFromAssets('assets/images/src.png');
+    _dstImage = await loadImageFromAssets('assets/images/dst.png');
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(painter: PaperPainter(_srcImage, _dstImage)));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+}
+
+class PaperPainter extends CustomPainter {
+  final ui.Image? srcImage;
+  final ui.Image? dstImage;
+
+  PaperPainter(this.srcImage, this.dstImage);
+
+  static const double step = 20; // 方格变长
+  final Coordinate coordinate = Coordinate(step: step);
+
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (dstImage == null || srcImage == null) return;
+
+    Paint srcPaint = Paint();
+    Paint dstPaint = Paint();
+
+    int index = 4;
+
+    BlendMode srcModel = BlendMode.dstOver;
+    BlendMode dstModel = BlendMode.srcOver;
+
+    srcPaint
+      ..blendMode = srcModel;
+    dstPaint
+      ..blendMode = dstModel;
+
+    _simpleDrawText(canvas, BlendMode.values[index].toString().split(".")[1],
+        fontSize: 16,
+        offset: Offset(50, 50));
+
+    canvas.translate(size.width / 2, size.height / 2);
+
+    canvas.drawImageRect(
+        dstImage!,
+        Rect.fromPoints(
+            Offset.zero, Offset(dstImage!.width * 1.0, dstImage!.height * 1.0)),
+        Rect.fromCenter(
+            center: Offset.zero, width: 400, height: 400),
+        dstPaint);
+
+    canvas.drawImageRect(
+        srcImage!,
+        Rect.fromPoints(
+            Offset.zero, Offset(srcImage!.width * 1.0, srcImage!.height * 1.0)),
+        Rect.fromCenter(
+            center: Offset.zero, width: 400, height: 400),
+        srcPaint);
+
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+
+  void _simpleDrawText(Canvas canvas, String str,
+      {double fontSize = 11,Offset offset = Offset.zero, Color color = Colors.black}) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.left,
+      fontSize: fontSize,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText(str);
+
+    canvas.drawParagraph(
+        builder.build()
+          ..layout(ui.ParagraphConstraints(width: fontSize * str.length)),
+        offset);
+  }
+}

assets/draw/p07/s05.dart

@@ -0,0 +1,81 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:image/image.dart' as image;
+
+import '../components/coordinate_pro.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> {
+  image.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<image.Image?> loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    List<int> bytes = data.buffer.asUint8List();
+    return image.decodeImage(Uint8List.fromList(bytes));
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final image.Image? imageSrc;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.imageSrc) {
+    _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) =>true;
+
+  void _drawImage(Canvas canvas) {
+    if (imageSrc == null)  return;
+    image.Pixel pixel = imageSrc!.getPixel(imageSrc!.width, 0);
+    var color = Color.fromARGB(pixel.a.toInt(),pixel.r.toInt(),pixel.g.toInt(),pixel.b.toInt());
+    canvas.drawCircle(Offset.zero, 10, _paint..color = color);
+  }
+}

assets/draw/p07/s06.dart

@@ -0,0 +1,110 @@
+import 'dart:async';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:image/image.dart' as image;
+
+import '../components/coordinate_pro.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> {
+  image.Image? _image;
+  List<Ball> balls = [];
+  double d = 20; //复刻的像素边长
+
+  @override
+  void initState() {
+    super.initState();
+    _initBalls();
+  }
+
+  void _initBalls() async {
+    _image = await loadImageFromAssets('assets/images/icon_head.png');
+    if (_image == null) return;
+    for (int i = 0; i < _image!.width; i++) {
+      for (int j = 0; j < _image!.height; j++) {
+        Ball ball = Ball();
+        ball.x = i * d + d / 2;
+        ball.y = j * d + d / 2;
+        ball.r = d / 2;
+        image.Pixel pixel = _image!.getPixel(i, j);
+        var color = Color.fromARGB(pixel.a.toInt(),pixel.r.toInt(),pixel.g.toInt(),pixel.b.toInt());
+        ball.color = color;
+        balls.add(ball);
+      }
+    }
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+          painter: PaperPainter(balls),
+        ));
+  }
+
+  //读取 assets 中的图片
+  Future<image.Image?> loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    List<int> bytes = data.buffer.asUint8List();
+    return image.decodeImage(Uint8List.fromList(bytes));
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final List<Ball> balls;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.balls) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(-710, -1000);
+    _drawImage(canvas);
+  }
+
+  void _drawImage(Canvas canvas) {
+    balls.forEach((Ball ball) {
+      canvas.drawCircle(
+          Offset(ball.x, ball.y), ball.r, _paint..color = ball.color);
+    });
+  }
+
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => true;
+
+}
+
+class Ball {
+  double x; //点位X
+  double y; //点位Y
+  Color color; //颜色
+  double r; // 半径
+
+  Ball({this.x=0, this.y=0, this.color=Colors.black, this.r=5});
+
+}