flutter 叶轮模糊和传统(Skia)模糊之间的尺寸差异

kx1ctssn  于 10个月前  发布在  Flutter
关注(0)|答案(4)|浏览(122)

cc @gaaclarke
Testing against the fixes in flutter/engine#53261 the main issue of the orientation of unidirectional blurs is fixed, but there is still an inconsistency in the size of the directional blurs as can be seen in this test case:
test case

  1. import 'dart:math';
  2. import 'dart:ui';
  3. import 'package:flutter/material.dart';
  4. void main() {
  5. runApp(const MyApp());
  6. }
  7. class MyApp extends StatelessWidget {
  8. const MyApp({super.key});
  9. @override
  10. Widget build(BuildContext context) {
  11. return MaterialApp(
  12. title: 'Flutter Demo',
  13. theme: ThemeData(
  14. colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
  15. useMaterial3: true,
  16. ),
  17. home: const MyHomePage(title: 'Flutter Demo Home Page'),
  18. );
  19. }
  20. }
  21. class MyHomePage extends StatefulWidget {
  22. const MyHomePage({super.key, required this.title});
  23. final String title;
  24. @override
  25. State<MyHomePage> createState() => _MyHomePageState();
  26. }
  27. class _MyHomePageState extends State<MyHomePage> {
  28. double rotate = 45.0 * pi / 180.0;
  29. Widget makeRow(double cornerSize, double blurSize) {
  30. return Row(
  31. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  32. children: <Widget>[
  33. CustomPaint(
  34. painter: _RRectPainter(
  35. cornerSize: cornerSize,
  36. blurSize: blurSize,
  37. scale: 0.5,
  38. rotate: rotate,
  39. ),
  40. size: const Size(150, 150),
  41. ),
  42. CustomPaint(
  43. painter: _RRectPathPainter(
  44. cornerSize: cornerSize,
  45. blurSize: blurSize,
  46. scale: 0.5,
  47. rotate: rotate,
  48. ),
  49. size: const Size(150, 150),
  50. ),
  51. CustomPaint(
  52. painter: _RRectPainter(
  53. cornerSize: cornerSize,
  54. blurSize: blurSize,
  55. scale: 1.0,
  56. rotate: rotate,
  57. ),
  58. size: const Size(150, 150),
  59. ),
  60. CustomPaint(
  61. painter: _RRectPathPainter(
  62. cornerSize: cornerSize,
  63. blurSize: blurSize,
  64. scale: 1.0,
  65. rotate: rotate,
  66. ),
  67. size: const Size(150, 150),
  68. ),
  69. ],
  70. );
  71. }
  72. @override
  73. Widget build(BuildContext context) {
  74. return Scaffold(
  75. appBar: AppBar(
  76. backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  77. title: Text(widget.title),
  78. ),
  79. body: Center(
  80. child: Column(
  81. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  82. children: <Widget>[
  83. makeRow(10, 10),
  84. makeRow(10, 30),
  85. makeRow(10, 50),
  86. Row(
  87. mainAxisAlignment: MainAxisAlignment.center,
  88. children: <Widget>[
  89. const Text('rotation'),
  90. Slider(
  91. value: rotate,
  92. min: 0.0,
  93. max: pi * 2.0,
  94. onChanged: (value) {
  95. setState(() {
  96. rotate = value;
  97. });
  98. },
  99. ),
  100. ],
  101. ),
  102. ],
  103. ),
  104. ),
  105. );
  106. }
  107. }
  108. class _RRectPainter extends CustomPainter {
  109. _RRectPainter({
  110. required this.cornerSize,
  111. required this.blurSize,
  112. required this.scale,
  113. required this.rotate,
  114. });
  115. final double cornerSize;
  116. final double blurSize;
  117. final double scale;
  118. final double rotate;
  119. @override
  120. void paint(Canvas canvas, Size size) {
  121. canvas.translate(size.width * 0.5, size.height * 0.5);
  122. canvas.rotate(rotate);
  123. canvas.translate(-size.width * 0.5, -size.height * 0.5);
  124. canvas.scale(scale, scale);
  125. double w = size.width / scale;
  126. double h = size.height / scale;
  127. double c = cornerSize / scale;
  128. Rect rect = Rect.fromLTRB(0, 0, w, h);
  129. RRect rrect = RRect.fromRectXY(rect, c, c);
  130. Paint paint = Paint()
  131. ..imageFilter = ImageFilter.blur(sigmaX: blurSize, sigmaY: 0.0, tileMode: TileMode.decal)
  132. // ..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSize)
  133. ..color = Colors.blue;
  134. canvas.drawRRect(rrect, paint);
  135. }
  136. @override
  137. bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
  138. }
  139. class _RRectPathPainter extends CustomPainter {
  140. _RRectPathPainter({
  141. required this.cornerSize,
  142. required this.blurSize,
  143. required this.scale,
  144. required this.rotate,
  145. });
  146. final double cornerSize;
  147. final double blurSize;
  148. final double scale;
  149. final double rotate;
  150. @override
  151. void paint(Canvas canvas, Size size) {
  152. canvas.translate(size.width * 0.5, size.height * 0.5);
  153. canvas.rotate(rotate);
  154. canvas.translate(-size.width * 0.5, -size.height * 0.5);
  155. canvas.scale(scale, scale);
  156. double w = size.width / scale;
  157. double h = size.height / scale;
  158. double c = cornerSize / scale;
  159. Path path = Path();
  160. path.addRect(Rect.fromLTRB(c, 0, w - c, h));
  161. path.addRect(Rect.fromLTRB(0, c, w, h - c));
  162. path.addOval(Rect.fromLTRB(0, 0, c * 2, c * 2));
  163. path.addOval(Rect.fromLTRB(w - c * 2, 0, w, c * 2));
  164. path.addOval(Rect.fromLTRB(0, h - c * 2, c * 2, h));
  165. path.addOval(Rect.fromLTRB(w - c * 2, h - c * 2, w, h));
  166. Paint paint = Paint()
  167. ..imageFilter = ImageFilter.blur(sigmaX: blurSize, sigmaY: 0.0, tileMode: TileMode.decal)
  168. // ..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSize)
  169. ..color = Colors.blue;
  170. canvas.drawPath(path, paint);
  171. }
  172. @override
  173. bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
  174. }

Skia output

Impeller output

animated comparison

atmip9wb

atmip9wb1#

在那个PR之前,模糊半径看起来是否有所不同?如果是这样,可能会有一个缺失的效果转换。据我回忆,黄金测试并不能很好地捕获效果转换的错误。

fcipmucu

fcipmucu2#

我能够在主版本上复现报告的错误。
运行主版本的flutter doctor -v:

  1. [!] Flutter (Channel master, 3.23.0-13.0.pre.149, on macOS 12.2.1 21D62
  2. darwin-x64, locale en-GB)
  3. Flutter version 3.23.0-13.0.pre.149 on channel master at
  4. /Users/dhs/documents/fluttersdk/flutter
  5. ! Warning: `flutter` on your path resolves to
  6. /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
  7. your current Flutter SDK checkout at
  8. /Users/dhs/documents/fluttersdk/flutter. Consider adding
  9. /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
  10. ! Warning: `dart` on your path resolves to
  11. /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
  12. current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
  13. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
  14. of your path.
  15. Upstream repository https://github.com/flutter/flutter.git
  16. Framework revision ae47edab7a (68 minutes ago), 2024-06-07 01:34:14 -0400
  17. Engine revision 087feab992
  18. Dart version 3.5.0 (build 3.5.0-234.0.dev)
  19. DevTools version 2.36.0
  20. If those were intentional, you can disregard the above warnings; however
  21. it is recommended to use "git" directly to perform update checks and
  22. upgrades.
  23. [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
  24. Android SDK at /Users/dhs/Library/Android/sdk
  25. cmdline-tools component is missing
  26. Run `path/to/sdkmanager --install "cmdline-tools;latest"`
  27. See https://developer.android.com/studio/command-line for more details.
  28. Android license status unknown.
  29. Run `flutter doctor --android-licenses` to accept the SDK licenses.
  30. See https://flutter.dev/docs/get-started/install/macos#android-setup for
  31. more details.
  32. [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
  33. Xcode at /Applications/Xcode.app/Contents/Developer
  34. Build 13C100
  35. CocoaPods version 1.11.2
  36. [✓] Chrome - develop for the web
  37. Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
  38. [✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
  39. IntelliJ at /Applications/IntelliJ IDEA.app
  40. Flutter plugin version 65.1.4
  41. Dart plugin version 213.7228
  42. [✓] VS Code (version 1.62.0)
  43. VS Code at /Applications/Visual Studio Code.app/Contents
  44. Flutter extension version 3.29.0
  45. [✓] Connected device (3 available)
  46. Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
  47. • iOS 15.3.1 19D52
  48. • macOS (desktop) • macos •
  49. darwin-x64 • macOS 12.2.1 21D62 darwin-x64
  50. • Chrome (web) • chrome •
  51. web-javascript • Google Chrome 109.0.5414.119
  52. [✓] Network resources
  53. • All expected network resources are available.
  54. ! Doctor found issues in 1 category.
  55. [!] Xcode - develop for iOS and macOS (Xcode 12.3)
  56. • Xcode at /Applications/Xcode.app/Contents/Developer
  57. ! Flutter recommends a minimum Xcode version of 13.
  58. Download the latest version or update via the Mac App Store.
  59. • CocoaPods version 1.11.2
  60. [✓] Chrome - develop for the web
  61. • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
  62. [✓] VS Code (version 1.62.0)
  63. • VS Code at /Applications/Visual Studio Code.app/Contents
  64. • Flutter extension version 3.21.0
  65. [✓] Connected device (5 available)
  66. • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30)
  67. • Darshan's iphone (mobile) 21150b119064aecc249dfcfe05e259197461ce23
  68. ios iOS 14.4.1 18D61
  69. iPhone 12 Pro Max (mobile) A5473606-0213-4FD8-BA16-553433949729
  70. ios com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
  71. macOS (desktop) macos
  72. darwin-x64 Mac OS X 10.15.4 19E2269 darwin-x64
  73. Chrome (web) chrome
  74. web-javascript Google Chrome 98.0.4758.80
  75. [✓] HTTP Host Availability
  76. All required HTTP hosts are available
  77. ! Doctor found issues in 1 category.
展开查看全部
e5nszbig

e5nszbig3#

在那个PR之前,模糊半径看起来是否有所不同?如果是这样,可能会有一个缺失的效果变换。据我回忆,黄金测试并不能很好地捕获效果变换的bug。
我之前没有特别关注模糊大小,我是在运行修复后的代码来查看新代码的性能表现有多接近。

kuhbmx9i

kuhbmx9i4#

我想要确保flutter/engine#53261没有因为缺少效果变换而破坏任何东西。那个PR并没有影响模糊大小
截图

有PR的

没有PR的

相关问题