So I have this custom paint which gets ui.Image of a mask and an image both drawn on canvas. Now I made the mask be painted blue for this example but my goal is to save the canvas after I manage to completely delete the blue masked area (see example image) by making it transparent and saving it as a png image with just the body. Is this possible to achieve with custom painter? So far I cant seem to make anything on the canvas completely transparent even with blendmode.clear shapes.
import 'dart:ui' as ui;
import 'package:body_detection/models/pose_landmark_type.dart';
import 'package:flutter/material.dart';
class SegmentationPainter extends CustomPainter {
SegmentationPainter(
{required this.mask, required this.imageSize, this.image});
final ui.Image? mask;
final ui.Image? image;
final Size imageSize;
final pointPaint = Paint()..color = const Color.fromRGBO(255, 255, 255, 0.8);
final leftPointPaint = Paint()..color = const Color.fromRGBO(223, 157, 80, 1);
final rightPointPaint = Paint()
..color = const Color.fromRGBO(100, 208, 218, 1);
final linePaint = Paint()
..color = const Color.fromRGBO(255, 255, 255, 0.9)
..strokeWidth = 3;
final maskPaint = Paint()
..colorFilter = const ColorFilter.mode(Colors.blue, BlendMode.srcOut);
@override
void paint(Canvas canvas, Size size) {
Paint background = Paint()..color = Colors.red;
Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
canvas.drawRect(rect, background);
canvas.clipRect(rect);
if (image != null) canvas.drawImage(image!, Offset.zero, Paint());
canvas.saveLayer(Rect.fromLTWH(0, 0, size.width, size.height), Paint());
canvas.restore();
_paintMask(canvas, size);
}
void _paintMask(Canvas canvas, Size size) {
if (mask == null) return;
canvas.drawImageRect(
mask!,
Rect.fromLTWH(0, 0, mask!.width.toDouble(), mask!.height.toDouble()),
Rect.fromLTWH(0, 0, size.width, size.height),
maskPaint);
}
enter image description here
@override
bool shouldRepaint(SegmentationPainter oldDelegate) {
return oldDelegate.mask != mask || oldDelegate.imageSize != imageSize;
}