Skip to content

drawCircle with saveLayer on Canvas does not draw smoothly #146967

New issue
New issue
Closed
flutter/engine
#52973
Closed
drawCircle with saveLayer on Canvas does not draw smoothly#146967
flutter/engine
#52973
Assignees
bdero
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.19Found to occur in 3.19found in release: 3.22Found to occur in 3.22has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionslimpellerEngine binary size reduction. go/slimpellerteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team
@ronnnnn

Description

@ronnnnn
ronnnnn
opened on Apr 18, 2024

Steps to reproduce

  1. use CustomPainter
  2. save layer you want to save
  3. draw circle
  4. restore saved layer

You can reproduce with Flutter 3.22.0-0.1.pre on beta channel and using Impeller.
This problem doesn't appear with Flutter 3.21.0-0.0.pre.

Expected results

drawCircle with saveLayer on Canvas draws circle smoothly.
See screenshot section to compare results.

Actual results

drawCircle with saveLayer on Canvas does not draw circle smoothly.
See screenshot section to compare results.

Code sample

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        body: Center(
          child: CustomPaint(
            painter: MyCustomPainter(
              textSpan: TextSpan(
                text: 'A',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                ),
              ),
              circleColor: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

class MyCustomPainter extends CustomPainter {
  const MyCustomPainter({
    required this.textSpan,
    required this.circleColor,
    super.repaint,
  });

  final TextSpan textSpan;
  final Color circleColor;

  @override
  void paint(Canvas canvas, Size size) {
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    )..layout();
    final textOffset =
        size.center(Offset.zero) - textPainter.size.center(Offset.zero);
    final textRect = textOffset & textPainter.size;

    final circleCenter = textRect.center;
    final radius = textPainter.height;

    canvas.saveLayer(
      Rect.fromCircle(center: circleCenter, radius: radius),
      Paint(),
    );
    textPainter.paint(canvas, textOffset);
    canvas
      ..drawCircle(
        circleCenter,
        radius,
        Paint()
          ..color = circleColor
          ..blendMode = BlendMode.srcOut,
      )
      ..restore();
  }

  @override
  bool shouldRepaint(MyCustomPainter oldDelegate) {
    return textSpan != oldDelegate.textSpan ||
        circleColor != oldDelegate.circleColor;
  }
}

Screenshots or Video

Screenshots / Video demonstration
3.22.0-0.1.pre (iOS Impeller) 3.21.0-0.0.pre (iOS Impeller) 3.22.0-0.1.pre (Android not Impeller)
device size 22_ios_simple 21_ios_simple 22_android_simple
zoom 22_ios_simple_zoom 21_ios_simple_zoom 22_android_simple_zoom

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel beta, 3.22.0-0.1.pre, on macOS 14.3.1 23D60 darwin-arm64, locale ja-JP)
    • Flutter version 3.22.0-0.1.pre on channel beta at
      /Users/s01059/.asdf/installs/flutter/3.22.0-0.1.pre-beta
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 29babcb32a (2 weeks ago), 2024-04-03 17:17:04 -0500
    • Engine revision 97550907b7
    • Dart version 3.4.0 (build 3.4.0-282.1.beta)
    • DevTools version 2.34.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/s01059/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_SDK_ROOT = /Users/s01059/Library/Android/sdk
    • Java binary at: /Users/s01059/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode-15.2.0.app/Contents/Developer
    • Build 15C500b
    ✗ CocoaPods installed but not working.
        You appear to have CocoaPods installed but it is not working.
        This can happen if the version of Ruby that CocoaPods was installed with is different from the one
        being used to invoke it.
        This can usually be fixed by re-installing CocoaPods.
      To re-install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[!] Android Studio (version unknown)
    • Android Studio at /Users/s01059/Applications/Android Studio Koala 2024.1.1 Canary 5.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
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1207.12-11679475)

[✓] Android Studio (version 2023.3)
    • Android Studio at /Users/s01059/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 17.0.10+0-17.0.10b1087.21-11572160)

[✓] Android Studio (version 2023.2)
    • Android Studio at /Users/s01059/Applications/Android Studio Iguana 2023.2.1 Patch 2.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 17.0.9+0-17.0.9b1087.7-11185874)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.1)
    • IntelliJ at /Users/s01059/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 78.5.1
    • Dart plugin version 241.15989.9

[✓] IntelliJ IDEA Ultimate Edition (version 2024.1.1)
    • IntelliJ at /Users/s01059/Applications/IntelliJ IDEA Ultimate 2024.1.1 Preview.app
    • Flutter plugin version 78.5.1
    • Dart plugin version 241.15989.9

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

[✓] Network resources
    • All expected network resources are available.

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.19Found to occur in 3.19found in release: 3.22Found to occur in 3.22has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionslimpellerEngine binary size reduction. go/slimpellerteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Type

No type

Projects

Slimpeller

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions