zoukankan      html  css  js  c++  java
  • flutter 绘图

    在 iOS 上,你通过 CoreGraphics 来在屏幕上绘制线条和形状。Flutter 有一套基于 Canvas 类的不同的 API,还有 CustomPaint 和 CustomPainter这两个类来帮助你绘图。后者实现你在 canvas 上的绘图算法。

    想要学习如何实现一个笔迹画笔,请参考 Collin 在 StackOverflow 上的回答。

    import 'package:flutter/material.dart';
    class SignaturePainter extends CustomPainter {
      SignaturePainter(this.points);
    
      final List<Offset> points;
    
      void paint(Canvas canvas, Size size) {
        var paint = Paint()
          ..color = Colors.white
          ..strokeCap = StrokeCap.round
          ..strokeWidth = 5.0;
        for (int i = 0; i < points.length - 1; i++) {
          if (points[i] != null && points[i + 1] != null)
            canvas.drawLine(points[i], points[i + 1], paint);
        }
      }
    
      bool shouldRepaint(SignaturePainter other) => other.points != points;
    }
    
    class Signature extends StatefulWidget {
      SignatureState createState() => SignatureState();
    }
    
    class SignatureState extends State<Signature> {
    
      List<Offset> _points = <Offset>[];
    
      Widget build(BuildContext context) {
        return GestureDetector(
          onPanUpdate: (DragUpdateDetails details) {
            setState(() {
              RenderBox referenceBox = context.findRenderObject();
              Offset localPosition =
              referenceBox.globalToLocal(details.globalPosition);
              _points = List.from(_points)..add(localPosition);
            });
          },
          onPanEnd: (DragEndDetails details) => _points.add(null),
          child: CustomPaint(painter: SignaturePainter(_points), size: Size.infinite),
        );
      }
    }
    void main() {
      runApp(new Signature());
    }

    运行完以后就直接用手指画起来吧

  • 相关阅读:
    angularjs中directive声明scope对象的用法
    MongoDB win32-bit 安装
    javascript Date对象 之 date初始化
    javascript Date对象 之 时间转字符串
    javascript Date对象 之 获取时间
    javascript Date对象 之 设置时间
    Javascript 小数保留2位
    javascript 中的比较大小,兼 typeof()用法
    IE6/7 下:inline-block解决方案
    js刷新页面 location.reload()
  • 原文地址:https://www.cnblogs.com/gaozhang12345/p/12049525.html
Copyright © 2011-2022 走看看