books

packages/idraw/lib/p12/p12.dart

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

packages/idraw/lib/p12/p12_page.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+import 'package:components/components.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+
+class P12Page extends StatelessWidget {
+  const P12Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p12',
+
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+      ],
+    );
+  }
+}

packages/idraw/lib/p12/s01.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/11/3
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: HandleWidget(),
+    );
+  }
+}
+
+class HandleWidget extends StatefulWidget {
+  final double size;
+  final double handleRadius;
+
+  HandleWidget({Key? key, this.size = 160.0, this.handleRadius = 20.0})
+      : super(key: key);
+
+  @override
+  _HandleWidgetState createState() => _HandleWidgetState();
+}
+
+class _HandleWidgetState extends State<HandleWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+        size: Size(widget.size, widget.size),
+        painter: _HandlePainter(handleR: widget.handleRadius));
+  }
+}
+
+class _HandlePainter extends CustomPainter {
+  var _paint = Paint();
+
+  var handleR;
+
+  _HandlePainter({this.handleR}) {
+    _paint
+      ..color = Colors.blue
+      ..style = PaintingStyle.fill
+      ..isAntiAlias = true;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size);
+
+    final bgR = size.width / 2 - handleR;
+
+    canvas.translate(size.width / 2, size.height / 2);
+    _paint.color = _paint.color.withAlpha(100);
+    canvas.drawCircle(Offset(0, 0), bgR, _paint);
+    _paint.color = _paint.color.withAlpha(150);
+    canvas.drawCircle(Offset(0, 0), handleR, _paint);
+  }
+
+  @override
+  bool shouldRepaint(_HandlePainter oldDelegate) =>
+      oldDelegate.handleR != handleR;
+}

packages/idraw/lib/p12/s02.dart

@@ -0,0 +1,109 @@
+import 'dart:math';
+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 Center(
+      child: HandleWidget(),
+    );
+  }
+}
+
+class HandleWidget extends StatefulWidget {
+  final double size;
+  final double handleRadius;
+
+  HandleWidget({Key? key, this.size = 160, this.handleRadius = 20.0})
+      : super(key: key);
+
+  @override
+  _HandleWidgetState createState() => _HandleWidgetState();
+}
+
+class _HandleWidgetState extends State<HandleWidget> {
+  ValueNotifier<Offset> _offset = ValueNotifier(Offset.zero);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+        onPanEnd: reset,
+        onPanUpdate: parser,
+        child: CustomPaint(
+            size: Size(widget.size, widget.size),
+            painter: _HandlePainter(
+                color: Colors.green,
+                handleR: widget.handleRadius,
+                offset: _offset)));
+  }
+
+  reset(DragEndDetails details) {
+    _offset.value = Offset.zero;
+  }
+
+  parser(DragUpdateDetails details) {
+    final offset = details.localPosition;
+    double dx = 0.0;
+    double dy = 0.0;
+
+    dx = offset.dx - widget.size / 2;
+    dy = offset.dy - widget.size / 2;
+    var rad = atan2(dx, dy);
+    if (dx < 0) {
+      rad += 2 * pi;
+    }
+    var bgR = widget.size / 2 - widget.handleRadius;
+    var thta = rad - pi / 2; //旋转坐标系90度
+    if (sqrt(dx * dx + dy * dy) > bgR) {
+      dx = bgR * cos(thta);
+      dy = -bgR * sin(thta);
+    }
+    _offset.value = Offset(dx, dy);
+  }
+}
+
+class _HandlePainter extends CustomPainter {
+  final _paint = Paint();
+  final ValueNotifier<Offset> offset;
+  final Color color;
+
+  var handleR;
+
+  _HandlePainter({this.handleR,required this.offset, this.color = Colors.blue})
+      : super(repaint: offset) ;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size);
+
+    final bgR = size.width / 2 - handleR;
+    canvas.translate(size.width / 2, size.height / 2);
+
+    _paint.style = PaintingStyle.fill;
+    _paint.color = color.withAlpha(100);
+
+    canvas.drawCircle(Offset(0, 0), bgR, _paint);
+
+    _paint.color = color.withAlpha(150);
+
+    canvas.drawCircle(
+        Offset(offset.value.dx, offset.value.dy), handleR, _paint);
+
+    _paint.color = color;
+    _paint.style = PaintingStyle.stroke;
+    canvas.drawLine(Offset.zero, offset.value, _paint);
+  }
+
+  @override
+  bool shouldRepaint(_HandlePainter oldDelegate) =>
+      oldDelegate.offset != offset ||
+          oldDelegate.color != color ||
+          oldDelegate.handleR != handleR;
+}

packages/idraw/lib/p12/s03.dart

@@ -0,0 +1,153 @@
+import 'dart:async';
+import 'dart:math';
+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
+  State<Paper> createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  double _rotate = 0;
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Transform.rotate(
+            angle: _rotate,
+            child:
+            Container(
+              color: Colors.blue,
+              alignment: Alignment.center,
+              width: 100,
+              height: 100,
+            ),
+          ),
+          HandleWidget(
+            onMove: _onMove,
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _onMove(double rotate, double distance) {
+    setState(() {
+      _rotate= rotate;
+    });
+  }
+}
+class HandleWidget extends StatefulWidget {
+  final double size;
+  final double handleRadius;
+  final void Function(double rotate, double distance) onMove;
+
+  HandleWidget(
+      {Key? key,
+        this.size = 160,
+        this.handleRadius = 20.0,
+        required this.onMove})
+      : super(key: key);
+
+  @override
+  _HandleWidgetState createState() => _HandleWidgetState();
+}
+
+class _HandleWidgetState extends State<HandleWidget> {
+  ValueNotifier<Offset> _offset = ValueNotifier(Offset.zero);
+
+  @override
+  Widget build(BuildContext context) {
+    return RepaintBoundary(
+      child: GestureDetector(
+          onPanEnd: reset,
+          onPanUpdate: parser,
+          child: CustomPaint(
+              size: Size(widget.size, widget.size),
+              painter: _HandlePainter(
+                  color: Colors.green,
+                  handleR: widget.handleRadius,
+                  offset: _offset))),
+    );
+  }
+
+  reset(DragEndDetails details) {
+    _offset.value = Offset.zero;
+    widget.onMove(0, 0);
+  }
+
+  parser(DragUpdateDetails details) {
+    final offset = details.localPosition;
+    double dx = 0.0;
+    double dy = 0.0;
+
+    dx = offset.dx - widget.size / 2;
+    dy = offset.dy - widget.size / 2;
+    var rad = atan2(dx, dy);
+    if (dx < 0) {
+      rad += 2 * pi;
+    }
+    var bgR = widget.size / 2 - widget.handleRadius;
+    var thta = rad - pi / 2; //旋转坐标系90度
+    var d = sqrt(dx * dx + dy * dy);
+    if (d > bgR) {
+      dx = bgR * cos(thta);
+      dy = -bgR * sin(thta);
+    }
+    widget.onMove(thta, d);
+    _offset.value = Offset(dx, dy);
+  }
+}
+
+class _HandlePainter extends CustomPainter {
+  var _paint = Paint();
+  final ValueNotifier<Offset> offset;
+  final Color color;
+
+  var handleR;
+
+  _HandlePainter({this.handleR,required this.offset, this.color = Colors.blue})
+      : super(repaint: offset);
+
+
+  @override
+  void paint(Canvas canvas, Size size) {
+
+    canvas.clipRect(Offset.zero & size);
+
+    final bgR = size.width / 2 - handleR;
+    canvas.translate(size.width / 2, size.height / 2);
+
+    _paint.style = PaintingStyle.fill;
+    _paint.color = color.withAlpha(100);
+
+    canvas.drawCircle(Offset(0, 0), bgR, _paint);
+
+    _paint.color = color.withAlpha(150);
+
+    canvas.drawCircle(
+        Offset(offset.value.dx, offset.value.dy), handleR, _paint);
+
+    _paint.color = color;
+    _paint.style = PaintingStyle.stroke;
+    canvas.drawLine(Offset.zero, offset.value, _paint);
+  }
+
+  @override
+  bool shouldRepaint(_HandlePainter oldDelegate) =>
+      oldDelegate.offset != offset ||
+          oldDelegate.color != color ||
+          oldDelegate.handleR != handleR;
+}

packages/idraw/lib/p12/s04.dart

@@ -0,0 +1,167 @@
+import 'dart:async';
+import 'dart:math';
+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 StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: RulerChooser(
+        onChanged: (value) {},
+      ),
+    );
+  }
+}
+
+class RulerChooser extends StatefulWidget {
+  final Size size;
+  final void Function(double) onChanged;
+  final int min;
+  final int max;
+
+  const RulerChooser(
+      {Key? key,
+      required this.onChanged,
+      this.max = 200,
+      this.min = 100,
+      this.size = const Size(240.0, 60)})
+      : super(key: key);
+
+  @override
+  _RulerChooserState createState() => _RulerChooserState();
+}
+
+class _RulerChooserState extends State<RulerChooser> {
+  ValueNotifier<double> _dx = ValueNotifier(0.0);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onPanUpdate: _parser,
+      child: CustomPaint(
+          size: widget.size,
+          painter: _HandlePainter(dx: _dx, max: widget.max, min: widget.min)),
+    );
+  }
+
+  double dx = 0;
+
+  void _parser(DragUpdateDetails details) {
+    dx += details.delta.dx;
+
+    if (dx > 0) {
+      dx = 0.0;
+    }
+    var limitMax = -(widget.max - widget.min) * (_kSpacer + _kStrokeWidth);
+    if (dx < limitMax) {
+      dx = limitMax;
+    }
+    _dx.value = dx;
+
+    if (widget.onChanged != null) {
+      widget.onChanged(details.delta.dx / (_kSpacer + _kStrokeWidth));
+    }
+  }
+}
+
+const double _kHeightLevel1 = 20; // 短线长
+const double _kHeightLevel2 = 25; // 5 线长
+const double _kHeightLevel3 = 30; //10 线长
+const double _kPrefixOffSet = 5; // 左侧偏移
+const double _kVerticalOffSet = 12; // 线顶部偏移
+const double _kStrokeWidth = 2; // 刻度宽
+const double _kSpacer = 4; // 刻度间隙
+const List<Color> _kRulerColors = [
+  // 渐变色
+  Color(0xFF1426FB), Color(0xFF6080FB), Color(0xFFBEE0FB),
+];
+const List<double> _kRulerColorStops = [0.0, 0.2, 0.8];
+
+class _HandlePainter extends CustomPainter {
+  var _paint = Paint();
+  Paint _pointPaint = Paint();
+
+  final ValueNotifier<double> dx;
+
+  final int max;
+  final int min;
+
+  _HandlePainter({required this.dx, required this.max, required this.min})
+      : super(repaint: dx) {
+    _paint
+      ..strokeWidth = _kStrokeWidth
+      ..shader = ui.Gradient.radial(
+          Offset(0, 0), 25, _kRulerColors, _kRulerColorStops, TileMode.mirror);
+    _pointPaint
+      ..color = Colors.purple
+      ..strokeWidth = 4
+      ..strokeCap = StrokeCap.round;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size);
+
+    drawArrow(canvas);
+    canvas.translate(dx.value, 0);
+    drawRuler(canvas);
+  }
+
+  // 绘制刻度
+  void drawRuler(Canvas canvas) {
+    double y = _kHeightLevel1;
+    for (int i = min; i < max + 5; i++) {
+      if (i % 5 == 0 && i % 10 != 0) {
+        y = _kHeightLevel2;
+      } else if (i % 10 == 0) {
+        y = _kHeightLevel3;
+        _simpleDrawText(canvas, i.toString(),
+            offset: Offset(-3, _kHeightLevel3 + 2));
+      } else {
+        y = _kHeightLevel1;
+      }
+      canvas.drawLine(Offset.zero, Offset(0, y), _paint);
+      canvas.translate(_kStrokeWidth + _kSpacer, 0);
+    }
+  }
+
+  // 绘制三角形尖角
+  void drawArrow(Canvas canvas) {
+    var path = Path()
+      ..moveTo(_kStrokeWidth / 2 + _kPrefixOffSet, 3)
+      ..relativeLineTo(-3, 0)
+      ..relativeLineTo(3, _kPrefixOffSet)
+      ..relativeLineTo(3, -_kPrefixOffSet)
+      ..close();
+    canvas.drawPath(path, _pointPaint);
+    canvas.translate(_kStrokeWidth / 2 + _kPrefixOffSet, _kVerticalOffSet);
+  }
+
+  void _simpleDrawText(Canvas canvas, String str,
+      {Offset offset = Offset.zero}) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle())
+      ..pushStyle(
+        ui.TextStyle(
+            color: Colors.black, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText(str);
+    canvas.drawParagraph(
+        builder.build()
+          ..layout(ui.ParagraphConstraints(width: 11.0 * str.length)),
+        offset);
+  }
+
+  @override
+  bool shouldRepaint(_HandlePainter oldDelegate) =>
+      oldDelegate.dx != dx || oldDelegate.min != min || oldDelegate.max != max;
+}