Skip to content

Impeller: BlendModes don't work with ColorFilters for drawImage #155456

@WeirdHat

Description

@WeirdHat

Steps to reproduce

Run the attached code with Impeller on macOS or iOS. I'm only attempting dstOver and srcATop blend modes in the example, but this might affect some other blend modes too. If Paint has a ColorFilter applied, these blend modes don't work and appear to use the default srcOver instead.

Expected results

How it appears in Skia:
Screenshot 2024-09-20 at 10 19 18 AM

Actual results

How it appears in Impeller:
Screenshot 2024-09-20 at 10 17 37 AM

Code sample

Code sample
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

void main() async {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: CustomPainterTest());
  }
}

class CustomPainterTest extends CustomPainter {
  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    ui.PictureRecorder recorder = ui.PictureRecorder();
    Canvas c = Canvas(recorder, Rect.fromLTWH(0, 0, 100, 100));
    c.drawCircle(Offset(50, 50), 50, Paint()..color = Colors.white);
    ui.Picture p = recorder.endRecording();
    ui.Image circle = p.toImageSync(100, 100);

    ColorFilter greenFilter = ColorFilter.mode(Colors.green, BlendMode.srcIn);

    canvas.drawRect(const Rect.fromLTRB(0, 0, 200, 1000), Paint()..color = Colors.red);
    canvas.drawImage(circle, Offset(150, 50), Paint() ..colorFilter = greenFilter ..blendMode = BlendMode.srcOver);
    canvas.drawImage(circle, Offset(150, 250), Paint() ..colorFilter = greenFilter ..blendMode = BlendMode.dstOver);
    canvas.drawImage(circle, Offset(150, 450), Paint() ..colorFilter = greenFilter ..blendMode = BlendMode.srcATop);
  }

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

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output
[✓] Flutter (Channel master, 3.26.0-1.0.pre.168, on macOS 13.6.7 22G720 darwin-arm64, locale en-US)
    • Flutter version 3.26.0-1.0.pre.168 on channel master at /Users/weirdhat/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2528fa95eb (8 hours ago), 2024-09-20 02:53:26 -0400
    • Engine revision 3fbe87c088
    • Dart version 3.6.0 (build 3.6.0-268.0.dev)
    • DevTools version 2.40.0-dev.1

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/weirdhat/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.

[!] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A240d
    ! CocoaPods 1.12.1 out of date (1.13.0 is recommended).
        CocoaPods is a package manager for iOS or macOS platform code.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/to/platform-plugins
      To update CocoaPods, see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] VS Code (version 1.93.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.96.0

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work liste: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.24Found to occur in 3.24found in release: 3.26Found to occur in 3.26has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyplatform-macBuilding on or for macOS specificallyr: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions