Flutter Paint

Posted 2021-09-10 123_000000

1、着色器Shader

Gradient：渐变

渐变有三种 liner、radial和sweep。
浅谈Flutter 中渐变的高级用法(3种)

ImageShader : 图片着色器

ImageShader 使用 ImageShader 可以加载一张图片，绘制时使用图片对图形进行着色。ImageShader 使用的Image为ui.Image ( import ‘dart:ui’ as ui; )

class _MyHomePageState extends State<CanvsBasePage> {
  ui.Image image;
  ui.Image image1;

 // load url image
  Future<flutterUi.Image> loadUrl(String url) async {
    ImageStream stream=new NetworkImage(url).resolve(ImageConfiguration.empty);
    Completer<flutterUi.Image> completer = new Completer<flutterUi.Image>();
    void listener(ImageInfo frame, bool synchronousCall) {
      final flutterUi.Image image = frame.image;
      completer.complete(image);
      stream.removeListener(new ImageStreamListener(listener));
    }

    stream.addListener(new ImageStreamListener(listener));
    return completer.future;
  }
  // load local image
  Future<ui.Image> loadImage() async {
    ImageProvider provider =
        AssetImage('assets/ct_image/detail_collection_pre.png');
    Completer<ui.Image> completer = Completer<ui.Image>();
    ImageStreamListener listener;
    ImageStream stream = provider.resolve(ImageConfiguration());
    listener = ImageStreamListener((info, syno) {
      final ui.Image image = info.image;
      completer.complete(image);
      stream.removeListener(listener);
    });
    stream.addListener(listener);
    return completer.future;
  }

  void initState() {
    super.initState();
    Future.wait([
      loadUrl(
          "https://img3.chouti.com/group8/M02/CC/C9/wKgCHFP9iiyMUgZ9AAAihP7IpIE262.jpg?imageView2/1/w/100/h/100/interlace/1"),
      loadImage(),
    ]).then((results) {
      image = results[0];
      image1 = results[1];
      if (mounted) {
        setState(() {});
      }
    });
  }
  
 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      margin: EdgeInsets.only(top: 50),
      child: SingleChildScrollView(
        child: Column(
          children: [
            CustomPaint(
              size: Size(double.infinity, 800),
              painter: ImageEditor(image: image, image2: image2),
            )
          ],
        ),
      ),
    ));
  }
}

class ImageEditor extends CustomPainter {
  ImageEditor({
    this.image,
    this.image2,
  });

  ui.Image image;
  ui.Image image2;

  @override
  void paint(Canvas canvas, Size size) {
      Paint paint5=Paint()
        ..strokeWidth = 15
        ..shader = ImageShader(
            image2,
            TileMode.repeated,
            TileMode.repeated,
            Float64List.fromList(
                [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]));

      canvas.drawCircle(Offset(300, 600), 50, paint5);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

=项目开发过程学习记录，后续补充=