CustomPaint使用渐变效果在命中时擦除形状

Question

当我点击画布时，我试图擦除我的圆圈。我想再次点击它。Atm我有这个：

class FadeEffect extends StatefulWidget {
const FadeEffect({Key? key}) : super(key: key);
@override
State<FadeEffect> createState() => _FadeEffectState();
}
class _FadeEffectState extends State<FadeEffect> {
double vOpacity = 1;
@override
void initState() {
super.initState();
Timer.periodic(const Duration(milliseconds: 100), (timer) {
vOpacity -= 0.1;
if (mounted) {
setState(() {
});
}
});
}
@override
Widget build(BuildContext context) {
return CustomPaint(
size: Size(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
painter: MyPainter(vOpacity: vOpacity),
);
}
}

class MyPainter extends CustomPainter {
double vOpacity;
MyPainter({
required this.vOpacity
});
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Rect.fromLTWH(0, 0, size.width, size.height));
var paint = Paint()
..color = Color.fromRGBO(0, 0, 0, vOpacity)
..strokeWidth = 5
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round;
canvas.drawCircle(Offset(size.width / 2, size.height / 2), 300, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
@override
bool hitTest(Offset position) {
erase();
return true;
}
void erase() {
}
}

当我运行程序时，我将圆颜色的不透明度从1更改为0(idk当我调用erase((时如何做到这一点…(。另一个问题是，一旦我的圆圈达到0透明度，它就会再次出现。

p.S：除了改变不透明度，还有其他方法可以擦除吗？

Answer 1

如果你只想让圆圈消失而不受任何影响，你可以用控制其子对象可见性的Visibility小部件包装CustomPaint。但是，当你想实现淡出效果时，你应该使用AnimatedOpacity小部件，它可以为任何不透明度的变化设置动画
下面是一个独立的代码示例，我在其中演示了这两种方法。UI显示了两个用CustomPaint绘制的圆圈，当单击画布时，这两个圆圈都会消失并再次出现。第一个使用AnimatedOpacity，而第二个则使用Visibility小部件：

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScrollController controller = ScrollController();
double _opacity = 1.0;
bool _visible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(
height: 300,
width: 300,
child: AnimatedOpacity(
duration: const Duration(
seconds: 3,
),
opacity: _opacity,
child: GestureDetector(
onTap: () {
setState(() {
_opacity = _opacity == 1 ? 0 : 1;
});
},
child: CustomPaint(
painter: MyPainter(),
),
),
),
),
SizedBox(
width: 300,
height: 300,
child: Visibility(
maintainInteractivity: true,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: _visible,
child: GestureDetector(
onTap: () {
setState(() {
_visible = _visible ? false : true;
});
},
child: CustomPaint(
painter: MyPainter(),
),
),
),
),
const Text(
"Tap on the canvas, to make the circle appear or disappear",
),
],
),
);
}
}
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = Colors.black;
canvas.drawCircle(Offset(size.width / 2, size.height / 2), 100, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}