背景:我们使用flutter开了一个手写板,使用的是三方库实现的:Signature,新需求是要把竖屏改成横屏,生成的图片需要竖着展示,横屏生的图片竖屏展示可能想而知了。
思路:网上的是说把这个页面进行强制横屏显示,不过我没有尝试成功,可能也和我的原生工程只能竖屏显示的设置有关,也可能和我的手机锁定竖屏有关,换个思路就是把图片逆时针旋转90度或顺时针旋转270度。
接下来就是直接上关键代码吧。
import 'package:image/image.dart' as img;
import 'package:signature/signature.dart';
// 初始化签名控制器
final SignatureController _controller = SignatureController(
penStrokeWidth: 4,
penColor: Colors.red,
exportBackgroundColor: Colors.white,
exportPenColor: Colors.black,
onDrawStart: () => print('绘画开始!'),
onDrawEnd: () => print('绘画结束!'),
);
// 页面控件初化
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Signature(
key: const Key('my_signature_01'),
controller: _controller,
backgroundColor: Colors.white,
),
),
// 导出图片并矫正角度
Future<Uint8List?>? imageExport() async {
if (_controller.isEmpty) {
print("没有签名内容!");
return null;
}
final Uint8List? data = await _controller.toPngBytes();
if (data == null) {
print("获取签名图片数据失败!");
return null;
};
var imgData = img.decodeImage(data);
if (imgData == null) {
print("图片解码失败!");
return null;
};
// 旋转角度处理
var rImage = img.copyRotate(imgData, angle: 270);
var rData = img.encodeBmp(rImage);
return rData;
}
不得不说flutter有丰富三方库及函数。
网友评论