美文网首页
flutter图片旋转角度

flutter图片旋转角度

作者: 東玖零 | 来源:发表于2024-03-04 10:26 被阅读0次

背景:我们使用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有丰富三方库及函数。

相关文章

网友评论

      本文标题:flutter图片旋转角度

      本文链接:https://www.haomeiwen.com/subject/udglzdtx.html