Flutter中为Image添加水印的便捷方法

在Flutter中，为Image添加水印通常需要一些自定义的绘制工作。这里有两种常见的方法：
方法一：使用CustomPaint和CustomPainter
这种方法允许你直接在图片上绘制文本或图形。你可以创建一个自定义的CustomPainter，在其中绘制文本或图形，然后使用CustomPaint和CustomPainter来绘制到你的Image上。
下面是一个简单的例子，展示如何在图片上绘制文本水印：
```dart
import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter Image Watermark’,
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
)..repeat();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Image Watermark’)),
body: Center(
child: CustomPaint(
size: Size(300, 300), // 设置水印图片的大小
painter: WatermarkPainter(text: ‘Watermark’), // 创建自定义画师来绘制文本水印
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
if (_controller.status == AnimationStatus.completed) {
_controller.reverse(); // 反转动画效果，使得水印持续显示在图片上。你可以根据需要调整这个逻辑。
} else {
_controller.forward(); // 开始动画，使水印出现和消失。你可以根据需要调整这个逻辑。
}
});
},
),
);
}
}
class WatermarkPainter extends CustomPainter {
final String text;
WatermarkPainter({required this.text});
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// 这里可以根据需要决定是否需要重新绘制水印。例如，你可以根据动画状态来决定。
return oldDelegate != this; // 默认情况下，每次构建时都会重新绘制。你可以根据需要调整这个逻辑。
}
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = Colors.white; // 设置水印颜色为白色，可以根据需要调整。
final textMetrics = measureText(text); // 获取文本的尺寸。你可以根据需要调整字体和大小。
canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint); // 绘制一个覆盖整个画布的矩形。你可以根据需要调整这个逻辑。
canvas.drawText(text, Offset(size.width / 2, size.height - textMetrics.descent), paint); // 在画布上绘制文本水印。你可以根据需要调整这个逻辑。例如，可以改变位置、颜色、字体等。注意文本的位置应该使它在图片上看起来合适。例如，如果图片是正方形的，你可能需要调整文本的位置使其居中。如果图片是长方形的，你可能需要调整文本的位置使其居中或根据其他标准（如左下角、右下角等）放置。在文本水印的情况下，这可能是一个关键的考虑因素，因为它会影响水印的可读性和可见性。在某些情况下，你可能希望将文本放在图片的边缘之外，以防止它被裁剪或部分可见。这可能需要根据你的应用程序的具体需求