使用png在颤动中剪切图像？

Question

我试图在这个问题底部的图像中展示效果，基本上我有orc图形（方形）和暗云/烟雾的png，我想用它作为我的兽人图像的遮罩。 / p>

到目前为止，我找到了clip images using bezier curves的选项，但没有使用其他图像作为掩码。这可以实现吗？

Answer 1

您当然可以使用CustomPainter来完成。请注意，Flutter中有两个不同的类，称为Image。正常的是Widget;另一个（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;
  }
}

将图像绘制到画布时，您可能需要处理“变形”以正确缩放图像。

我没有机会尝试，但您尝试过将Stack与两个（小部件）Image放在一起吗？