重现步骤
使用具有 maskFilter 的画笔在 canvas.drawVertices 上进行模糊处理。
预期结果
我们应该能够使用 drawVertices 进行模糊处理。
实际结果
我们无法使用 drawVertices 进行模糊处理。
代码示例
代码示例
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(const _MyApp());
}
class _MyApp extends StatelessWidget {
const _MyApp();
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: _MyHomePage(),
);
}
}
class _MyHomePage extends StatelessWidget {
const _MyHomePage();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Blur issue with drawVertices'),
),
body: const Row(
children: [
Expanded(
child: _Pane(
title: 'drawVertices',
painter: _VerticesPainter(),
),
),
Expanded(
child: _Pane(
title: 'drawRect',
painter: _RectPainter(),
),
),
],
),
);
}
}
class _Pane extends StatelessWidget {
const _Pane({
required this.title,
required this.painter,
});
final String title;
final CustomPainter painter;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Text(
title,
style: Theme.of(context).textTheme.displayMedium,
),
Expanded(
child: CustomPaint(
painter: painter,
child: const SizedBox.expand(),
),
),
],
),
);
}
}
class _VerticesPainter extends CustomPainter {
const _VerticesPainter();
@override
void paint(Canvas canvas, Size size) {
final rect = Rect.fromCircle(
center: size.center(Offset.zero),
radius: size.shortestSide / 4,
);
final paint = Paint()
..maskFilter = const MaskFilter.blur(BlurStyle.solid, 10);
return canvas.drawVertices(
Vertices(
VertexMode.triangles,
[rect.topLeft, rect.topRight, rect.bottomLeft, rect.bottomRight],
colors: List.filled(4, Colors.red),
indices: [0, 1, 2, 1, 2, 3],
),
BlendMode.dst,
paint,
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
class _RectPainter extends CustomPainter {
const _RectPainter();
@override
void paint(Canvas canvas, Size size) {
final rect = Rect.fromCircle(
center: size.center(Offset.zero),
radius: size.shortestSide / 4,
);
final paint = Paint()
..color = Colors.red
..maskFilter = const MaskFilter.blur(BlurStyle.solid, 10);
return canvas.drawRect(rect, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}截图或视频
截图/视频演示
展示上述代码操作效果的截图，并将相同矩形绘制方式放在一起。左侧使用了 drawVertices,右侧使用了 drawRect。
日志
日志
[Paste your logs here]Flutter Doctor 输出
医生输出
[✓] Flutter (Channel stable, 3.22.1, on macOS 14.1 23B74 darwin-arm64, locale fr-FR)
• Flutter version 3.22.1 on channel stable at /Users/letsar/dev/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision a14f74ff3a (3 weeks ago), 2024-05-22 11:08:21 -0500
• Engine revision 55eae6864b
• Dart version 3.4.1
• DevTools version 2.34.3
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/letsar/Library/Android/sdk
• Platform android-33, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
• Xcode at /Applications/Xcode-15.0.1.app/Contents/Developer
• Build 15A507
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2020.3)
• 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.10+0-b96-7249189)
[✓] VS Code (version 1.86.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.90.0
[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.1 23B74 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.1 23B74 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.142
[✓] Network resources
• All expected network resources are available.
• No issues found!
5条答案
按热度按时间yvfmudvl1#
感谢您的报告。已在Flutter主渠道上复制了相同的内容。
flutter doctor -v (stable和master)
34gzjxbg2#
它看起来Skia不支持在drawVertices上使用遮罩滤镜。我想知道我们是否意外地为Impeller实现了它。
目前还不清楚为什么我们会或不会添加对此的支持，将其标记为一个新功能。
m0rkklqb3#
它尚未为叶轮(至少在macOS和iOS上)实现。如果我们不支持这个功能(可能是因为工作量太大，而且使用率不高),开发者至少应该通过文档明确了解这一点。但最好还是通过API来实现(但这并不容易，因为它使用了共享的
Paint类)。ttygqcqt4#
嗨，我正在经历同样的问题，在使用canvas.drawArc和mask MaskFilter.blur时，它在v3.19.3中不存在。我应该打开一个不同的问题吗？
vxf3dgd45#
听起来无关