Обрезать изображения с помощью png в флаттере?

Question

Я пытаюсь добиться эффекта, показанного на изображении внизу этого вопроса, по сути, у меня есть орк-графика (квадрат) и png для темного облака / дыма, которые я хочу использовать в качестве маски для своего изображения орка.

До сих пор я нашел варианты обрезать изображения с помощью кривых Безье, но ничего не использовал при использовании других изображений в качестве маски. Это достижимо?

Answer 1

Вы, конечно, можете сделать это с CustomPainter, Обратите внимание, что во Flutter есть два разных класса Image, Нормальный виджет; другой (часть ui пакет) ближе к растровому изображению. Мы будем использовать последний. Я положил два изображения в папку с активами (милый котенок и фон с прозрачной дырой). Здесь показано, как загрузить графику из ресурсов, преобразовать их в растровые изображения и как нарисовать их в Canvas. Конечным результатом является котенок, показывающий сквозное отверстие.

import 'dart:ui' as ui;
import 'dart:typed_data';
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;

class ImageOverlay extends StatefulWidget {
  @override
  State createState() => new ImageOverlayState();
}

class ImageOverlayState extends State<ImageOverlay> {
  ui.Image kitten;
  ui.Image hole;

  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      width: 500.0,
      height: 500.0,
      child: new CustomPaint(
        painter: new OverlayPainter(hole, kitten),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    load('assets/hole.png').then((i) {
      setState(() {
        hole = i;
      });
    });
    load('assets/kitty.jpg').then((i) {
      setState(() {
        kitten = i;
      });
    });
  }

  Future<ui.Image> load(String asset) async {
    ByteData data = await rootBundle.load(asset);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    ui.FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }
}

class OverlayPainter extends CustomPainter {
  ui.Image hole;
  ui.Image kitten;

  OverlayPainter(this.hole, this.kitten);

  @override
  void paint(Canvas canvas, Size size) {
    if (kitten != null) {
      canvas.drawImage(kitten, Offset(0.0, 0.0), new Paint());
    }
    if (hole != null) {
      canvas.drawImage(hole, Offset(0.0, 0.0), new Paint());
    }
  }

  @override
  bool shouldRepaint(OverlayPainter oldDelegate) {
    return hole != oldDelegate.hole || kitten != oldDelegate.kitten;
  }
}

При рисовании изображений в Canvas вам может потребоваться иметь дело с Transforms, чтобы правильно масштабировать изображения.

У меня не было возможности попробовать, но вы пробовали Stack с двумя (виджет) Images расположены друг над другом?