[Flutter][Canvas]Canvas画布绘制图片（一）

最新推荐文章于 2024-06-22 18:56:20 发布
最新推荐文章于 2024-06-22 18:56:20 发布
阅读量7.6k 收藏 13
点赞数 3
分类专栏： Flutter Canvas PictureRecorder
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lal95828/article/details/108567013
版权

一、类型认识：

  1. assets资源（例如图片）转成ByteData ==》 例如：rootBundle.load(asset)；可以由AssetBundle对象返回
  2. ByteData转成uint8List ==》 ByteDataObj.buffer.asUint8List()
  3. uint8list对象 转成 codec对象 ==》 instantiateimageCodec()
  4. codec对象 返回 FrameInfo ==》 Codec.getNextFrame()
  5. FrameInfo 对象 返回 ui.Image ==》 FrameInfo.image

二、AssetBundle 获取资源的类

继承AssetBundle 的类

- rootBundle.load("本地资源路径")
- NetworkAssetBundle(Uri.parse("网络资源路径")).load("网络资源路径");
- DefaultAssetBundle.of(context).load("本地资源路径");//只能在build中实用，因为需要传入context

返回的Future处理

 //返回Codec句柄
 ui.Codec codec = await ui.instantiateImageCodec(ByteData.buffer.asUint8List());
 //获取一帧图片FrameInfo
 ui.FrameInfo fi = await codec.getNextFrame();
 //获取ui.Image 
 ui.Image image = fi.image;

显示ui.Image对象

  1. 使用canvas类显示（不推荐）

    import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class LALPageNews extends StatefulWidget {
  @override
  _LALPageNewsState createState() => _LALPageNewsState();
}

class _LALPageNewsState extends State<LALPageNews> {
  Uint8List imageMemory;//先定义一个uint8list对象
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          //点击按钮，点击后显示
          RaisedButton(
              onPressed:() async{
                ui.PictureRecorder pictureRecorder = new ui.PictureRecorder(); // 图片记录仪
                Canvas canvas = new Canvas(pictureRecorder); //canvas接受一个图片记录仪
                //第一个ui.image对象 给canvas.drawimage使用
                ui.Image images = await getAssetImage('assets/images/time.jpg'); // 使用方法获取ui.Image格式的图片
                Paint _linePaint = new Paint()
                  ..color = Colors.blue
                  ..style = PaintingStyle.fill
                  ..isAntiAlias = true//抗锯齿
                  ..strokeCap = StrokeCap.round//线条末端的处理方式
                  ..strokeWidth =20.0;
                // 绘制图片
                canvas.drawImage(images, Offset(0, 0), _linePaint); // 直接画图
			  //第二个 ui.Image对象 由pictureRecorder结束记录后返回  toImage裁剪图片
                ui.Image picture = await pictureRecorder.endRecording().toImage(MediaQuery.of(500, 1334);//设置生成图片的宽和高
                //ByteData对象 转成 Uint8List对象 给 Image.memory() 使用来显示
                ByteData pngImageBytes = await picture.toByteData(format: ui.ImageByteFormat.png);
                //Uint8List imgBytes = Uint8List.view(pngImageBytes.buffer); //这一行和下面这一行都是生成Uint8List格式的图片
                Uint8List pngBytes = pngImageBytes.buffer.asUint8List();
                setState(() {
                  imageMemory = pngBytes;
                });
              },
            child: Text("生成图片"),
          ),
          imageMemory != null ? Image.memory(imageMemory) : Text('loading...'),
        ],
      ),
    );
  }
}
//返回ui.Image
Future<ui.Image> getAssetImage(String asset,{width,height}) async {
  ByteData data = await rootBundle.load(asset);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),targetWidth: 		width,targetHeight: height);
  ui.FrameInfo fi = await codec.getNextFrame();
 return fi.image;
}

    备注：使用canvas对象，要传入一个pictureRecorder对象，pictureRecorder.endRecording()是绘画具体canvas图片的最后一步。

    1. 使用CustomPaint与CustomPainter widget显示（推荐）

      import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

//方法1：获取网络图片 返回ui.Image
Future<ui.Image> getNetImage(String url,{width,height}) async {
  ByteData data = await NetworkAssetBundle(Uri.parse(url)).load(url);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),targetWidth: width,targetHeight: height);
  ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image;
}
//方法2.1：获取本地图片  返回ui.Image 需要传入BuildContext context
Future<ui.Image> getAssetImage2(String asset,BuildContext context,{width,height}) async {
  ByteData data = await DefaultAssetBundle.of(context).load(asset);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),targetWidth: width,targetHeight: height);
  ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image;
}
//方法2.2：获取本地图片 返回ui.Image 不需要传入BuildContext context
Future<ui.Image> getAssetImage(String asset,{width,height}) async {
  ByteData data = await rootBundle.load(asset);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),targetWidth: width,targetHeight: height);
  ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image;
}
//方法3：通过stream类型来获取ui.Image 待更新

//自定义CustomPainter（CustomPainter内不能使用异步，所有ui.Image通过实例化传入）
//该widget做为CustomPaint的painter（在画布后面显示）或者foregroundPainter（在画布前面显示）参数。
class SelfForePainter extends CustomPainter{
  ui.Image _imageFrame;
  SelfForePainter(this._imageFrame):super();
  @override
  void paint(Canvas canvas, Size size){
    Paint selfPaint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill
      ..isAntiAlias = true
      ..strokeCap = StrokeCap.butt
      ..strokeWidth = 30.0;
    canvas.drawImage(_imageFrame, Offset(0,0), selfPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}



//在widget中显示
class LALPageNews extends StatefulWidget {
  @override
  _LALPageNewsState createState() => _LALPageNewsState();
}
class _LALPageNewsState extends State<LALPageNews> {
  ui.Image _assetImageFrame;//本地图片
  ui.Image _netImageFrame;//网络图片

  @override
  void initState() {
    super.initState();
    _getAssetImage();
    _getNetImage();
  }
  //获取本地图片
  _getAssetImage() async{
    ui.Image imageFrame = await getAssetImage('assets/images/time.jpg',width: 200,height: 200);
    setState(() {
      _assetImageFrame = imageFrame;
    });
  }
  //获取网络图片
  _getNetImage() async{
    ui.Image imageFrame = await getNetImage('https://img.zcool.cn/community/0145f155452efa0000019ae95ef0e4.jpg@1280w_1l_2o_100sh.jpg',width: 200);
    setState(() {
      _netImageFrame = imageFrame;
    });
  }
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          CustomPaint(
            foregroundPainter:SelfForePainter(_assetImageFrame),//画在child前面
            child: Container(
              width: double.infinity.toInt(),
              height: 300,
              color: Color.fromRGBO(155, 155, 155, 1),
            ),
          ),
          CustomPaint(
         size: Size.fromWidth(double.infinity),
            foregroundPainter:SelfForePainter(_netImageFrame),//画在child前面
            child: Container(
              width: double.infinity,
              height: 300,
              color: Color.fromRGBO(155, 155, 155, 0.1),
            ),
       ),
        ],
      ),
    );
  }
}

      备注：Custompaint作为widget来显示继承自CustomPainter的自定义类的Canvas，这种方法无需实例化Canvas和PictureRecorder，所以先对于上一种方案，更简单一些。

总结：静态资源路径或网络图片路径 可以转成ByteData类型；

  1. ByteDataObj.buffer.asUint8List() 转成 uint8List类型，这种类型 可以由 Image.memroy(uint8ListObj)直接转成图片显示（一般图片转成ByteData不会直接用Image.memroy显示，因为转成ByteData，就是为了更多的操作来修改图片，不然直接使用以下方法更直接。

    Image.asset(name)//显示本地图片
Image.network(src)//显示网络图片

  2. ByteData ByteDataObj;
//句柄(我的理解是，绘画一系列图片的对象，比如gif就是一系列图片的集合)
ui.Codec codec = await ui.instantiateImageCodec(ByteDataObj.buffer.asUint8List(),targetWidth: width,targetHeight: height);
//一帧数据
ui.FrameInfo fi = await codec.getNextFrame();
//帧数据变成ui.Image
ui.Image image = fi.image;//ByteDataObj 对象可以转成 ui.image给CanvasObj.drawImage()作为参数
//Canvas()需要PictureRecorder()来记录绘画动作，Canvas对象有可以绘画各种形状的方法；CanvasObj.drawImage()方法需要传入ui.Image【ui.Image与material中的Image不是一种widget】
//CanvasObj其他draw方法就可以在图片上绘制其他形图案或者修改图片
lal95828
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
funvas:基于时间和数学函数的Flutter中有趣的画布动画
04-22
Flutter软件包，允许基于时间和数学（主要是三角函数）功能创建画布动画。 名称“ funvas”基于Flutter + fun + canvas。 让我知道您是否有更好的主意:) 我在Twitter上分享了我的funvas创作，并且还创建了一个实时...
Flutter Image实现图片加载
01-06
有了这个基础后，所有的widget都不会提供画布(canvas)来直接绘制image RawImage 这是一个最基础图片容器Widget。 Image 这是一个通用包装类，它包装了RawImage。 前言 Image 基本使用 从ImageProvider来获取图片...
canvas之drawImage
lsy__lsy的博客
05-16 403
deawImage三种调用方式context.deawImage(image,dx,dy,dw,dh)context.deawImage(image,dx,dy)context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)&lt;input type="range"&gt;滑动杆var canvas=document.getElementById("canvas...
『Flutter-绘制篇』实现炫酷的雨雪特效
下位子的博客
09-01 540
前言 前不久，利用周末时间学习并完成一个简单的 Flutter 项目 - 简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径以及生活指数等服务，支持定位、删除、搜索等操作。 下图为主页效果： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FdKPCMM6-1598962223360)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76bdbd8781d64
Flutter 画笔(Paint) 根据坐标点 绘制曲线图
最新发布
2401_85730347的博客
06-22 1006
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！资料⬅专栏获取//x方向两个点之间的距离(刻度长)
FlutterUI（二）Canvas 与 Paint
大灰狼的小绵羊哥哥的博客
06-07 844
Flutter自定义控件分为三大类： 组合控件，通过组合其他widget成为一个新的widget。 自绘控件，通过使用canvas与paint来完全绘制。 继承widget，使用RenderObject来绘制，但最终还是使用canvas来绘制。 本文重点 着重介绍自绘控件，因为所有的widget归根结底都是使用canvas和paint来绘制的，理解了二者，对于其他的widget原理有溯源的功效。 Canvas：画布 Paint：画笔 怎么做？ 继承CustomPainter 重写paint
Flutter 绘制探索 | 绘制中的动画变换
张风捷特烈的博客
04-05 495
theme: cyanosis 前言： 这篇文章来通过一个有趣的案例，介绍一下 绘制中的动画变换 ，以及如何在当前的变换基础上，叠加变换。如下所示，小车在界面上呈现的任何变动，都是变换矩阵作用的效果： 注: gif 图片为 15fps ，有些卡顿，非实际动画运行效果 1. 图片的绘制 首先看一下如何在 Flutter 中绘制一张资源图片。如下所示，在 assets/image...
Flutter Canvas 属性详解与实际运用
爱喝水程序员的博客
01-29 821
在Flutter中，Canvas是绘制的基本单元，它提供了一系列的方法来实现图形绘制。Canvas通常与CustomPainter一起使用，后者用于在绘制过程中定义绘制逻辑。
Flutter——Canvas自定义曲线图
人生在世
06-20 2198
Canvas画布实现曲线图
flutter 保存分享海报、画报
u012029712的博客
04-09 988
需求 画报分享，常见于电商APP 效果实现 1 写布局 2 将需要导出的内容用RepaintBoundary包裹 注意：需要生成一个key,并赋给RepaintBoundary，后面要用到 3 编写点击事件 3.1 判断是否有保存图片的权限 使用permission_handler插件 PermissionStatus status = await Permission.storage.status; if (!status.isGranted) { status = a
Flutter 绘图
xiangxiongfly
07-13 1816
- Canvas（画布）用来在上面画图形的，如绘制点、线、矩形、圆形、路径、图像等。 - Paint（画笔）用来设置画布上绘制图形的颜色、粗细、是否抗锯齿等作图风格。 - 在Flutter中，绘图需要用到`CustomPaint`和`CustomPainter`，`CustomPaint`可以理解为画板，用于承载画布，`CustomPainter`可以理解为画布，承载绘制内容。...
Flutter的动画背景能很方便扩展可在画布上绘制任何您想要的东西
08-10
Flutter的动画背景，能很方便扩展，可在画布上绘制任何您想要的东西
Flutter进阶之实现动画效果（一）
01-05
上一篇文章我们了解了Flutter的动画基础，这一篇文章我们就来实现一个图表的动画效果。 首先，我们需要创建一个新项目myapp，然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp(
用Flutter做桌上弹球(绘图（Canvas&CustomPaint）API)
08-18
主要介绍了用Flutter做桌上弹球 聊聊绘图（Canvas&CustomPaint）API,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Flutter 使用FFI+CustomPainter实现全平台渲染视频
11-23
最好的方法应该是一套代码每个平台都能运行，于是有了一个设想，使用c++实现跨平台的视频采集，通过ffi将数据传到dart界面，通过画布控件将图像绘制出来。最终通过测试发现能用的方案就是ffi结合CustomPainter实现...
自定义的画板canvas
08-10
如果这是一个跨平台项目，那么可能使用了如React Native、Flutter或Cordova等框架，使得基于Canvas的Web组件能在Android原生环境中运行。如果是纯Android应用，那么可能使用了Android的SurfaceView或Canvas类来实现...
Flutter CustomPainter实现半圆形饼图
10-20
4. **绘制扇形**：使用`canvas.save()`和`canvas.restore()`来保存和恢复画布状态，确保每个扇形的绘制不会影响其他部分。接着，使用`canvas.rotate`旋转画布到每个扇形的起始角度，然后使用`drawArc`方法绘制扇形。...
canvas绘制重复图案
不睡觉的怪叔叔的博客
08-16 4051
canvas的createPattern()可以用于绘制重复图案，它可以接收image元素、canvas元素或video元素作为图案参数，并且可以传入如何重复图案的字符串参数： repeat —— 为整个区域绘制重复图案 repeat-x —— 只在x方向绘制重复图案 repeat-y —— 只在y方向绘制重复图案 no-repeat ——...
Flutter Demo 简单的涂鸦应用
berge
05-08 7035
成果预览 与andorid极其类似，自定义一个CustomPainter 相当于控件 import 'package:flutter/material.dart'; /** * 通过继承CustomPainter 自定义一个控件 */ class SignaturePainter extends CustomPainter { SignaturePainte...
flutter canvas
07-13
Flutter Canvas 是 Flutter 框架提供的一个功能强大的绘图 API，它允许你直接在屏幕上绘制图形、文本和其他视觉元素。你可以使用 Flutter Canvas 创建自定义的 UI 控件、动画效果以及图表等。 通过 Flutter Canvas，你可以使用各种绘图方法来绘制形状、路径、渐变、图片和文本等。你可以使用 Canvas 类提供的方法来绘制直线、曲线、圆形、矩形等基本形状，还可以使用 Path 类来创建复杂的路径。同时，你也可以设置画笔的样式、颜色和透明度等属性，来实现各种视觉效果。 在 Flutter 中使用 Canvas，你需要在自定义的绘制方法中重写父类的 paint 方法，并将 Canvas 对象作为参数传入。然后，你可以在这个方法中使用 Canvas 对象提供的方法来绘制你想要的图形。 例如，下面是一个简单的 Flutter Canvas 绘制一个红色圆形的示例代码： ```dart import 'package:flutter/material.dart'; class MyCanvasWidget extends StatelessWidget { @override Widget build(BuildContext context) { return CustomPaint( painter: MyPainter(), ); } } class MyPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = Colors.red ..style = PaintingStyle.fill; final center = Offset(size.width / 2, size.height / 2); final radius = size.width / 4; canvas.drawCircle(center, radius, paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } } ``` 这段代码定义了一个自定义的绘制 Widget `MyCanvasWidget`，并在其 `paint` 方法中使用 Canvas 绘制了一个红色的圆形。在 Flutter 的 UI 树中使用 `CustomPaint` 包裹这个自定义的绘制 Widget，即可将这个绘制效果显示在屏幕上。 希望这个简单的示例可以帮助你了解 Flutter Canvas 的基本使用方法。如果你有更多关于 Flutter Canvas 的问题，欢迎继续提问！
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值