Вставить изображение на холст (Пользовательский художник)

В настоящее время я работаю над «Custom Paint», я определил фигуру (drawPath), в которую я хотел бы встроить изображение (drawImage), но я не могу этого сделать, форма и изображение сложены. Спасибо за вашу помощь.

      
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
import 'dart:typed_data';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ui.Image image;
  bool isImageLoaded = false;

  void initState() {
    super.initState();
    init();
  }

  Future<Null> init() async {
    final ByteData data = await rootBundle.load('images/lake.jpg');
    image = await loadImage(Uint8List.view(data.buffer));
  }

  Future<ui.Image> loadImage(List<int> img) async {
    final Completer<ui.Image> completer = Completer();
    ui.decodeImageFromList(img, (ui.Image img) {
      setState(() {
        isImageLoaded = true;
      });
      return completer.complete(img);
    });
    return completer.future;
  }

  Widget _buildImage() {
    if (this.isImageLoaded) {
      return CustomPaint(
        painter: ImageEditor(image: image),
      );
    } else {
      return Center(child: Text('loading'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _buildImage(),
    );
  }
}

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

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.lightBlue.withOpacity(0.3);
    paint.style = PaintingStyle.fill; // Change this to fill

    var path = Path();
    path.moveTo(0, size.height * 0.380);
    path.quadraticBezierTo(size.width * 0.25, size.height * 0.700,
        size.width * 0.5, size.height * 0.400);
    path.quadraticBezierTo(size.width * 0.75, size.height * 0.100,
        size.width * 1.0, size.height * 0.150);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);

    canvas.drawPath(path, paint); // I think the issu is from here
    canvas.drawImage(image, Offset(0.0, 0.0), Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Я думаю, мне нужно объединить эти 2 строки кода, «canvas.drawPath» и «canvas.drawImage», но я не знаю, как это сделать.

0 ответов

Другие вопросы по тегам