iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter简洁实用的图片编辑器的实现
  • 523
分享到

Flutter简洁实用的图片编辑器的实现

2024-04-02 19:04:59 523人浏览 泡泡鱼
摘要

目录介绍功能演示安装使用方法拓展UI定制保持相对绘制路径参考及其他文章地址参考插件介绍 一款简洁实用的图片编辑器,纯dart开发。支持:涂鸦、旋转&翻转、马赛克、添加文字,及

介绍

一款简洁实用的图片编辑器,纯dart开发。支持:涂鸦、旋转&翻转、马赛克、添加文字,及自定义ui风格。

功能演示

涂鸦

draw.gif

旋转&翻转

flip&rotate.gif

马赛克

mosaic.gif

添加文字及删除

text_delete.gif

addtext_done.gif

安装

添加依赖

dependencies:
  image_editor_dove: ^latest

import

import 'package:image_editor/Flutter_image_editor.dart';

使用方法

获取到原图片后,将其传给ImageEditor 如下:

  Future<void> toImageEditor(File origin) async {
    return Navigator.push(context, MaterialPageRoute(builder: (context) {
      return ImageEditor(
        originImage: origin,
        //可空,支持自定义存储位置(编辑后的图片)
        savePath: customDirectory
      );
    })).then((result) {
      if (result is EditorImageResult) {
        setState(() {
          _image = result.newFile;
        });
      }
    }).catchError((er) {
      debugPrint(er);
    });
  }

返回结果

///The editor's result.
class EditorImageResult {
  ///宽度
  final int imgWidth;

  ///高度
  final int imgHeight;

  ///编辑后的图片
  final File newFile;

  EditorImageResult(this.imgWidth, this.imgHeight, this.newFile);
}

拓展

UI定制

一些按钮、滑块等widget支持自定义,可通过继承ImageEditorDelegate来自定义ui风格:

class YourUiDelegate extends ImageEditorDelegate{
    ...
}

ImageEditor.uiDelegate = YourUiDelegate();

class ImageEditor extends StatefulWidget {

  const ImageEditor({Key? key, required this.originImage, this.savePath}) : super(key: key);
   
   ...
    
  ///[uiDelegate] is determine the editor's ui style.
  ///You can extends [ImageEditorDelegate] and custome it by youself.
  static ImageEditorDelegate uiDelegate = DefaultImageEditorDelegate();

  @override
  State<StatefulWidget> createState() {
    return ImageEditorState();
  }
}

保持相对绘制路径

为了获得更大的绘制区域,所以绘制面积并非为图片显示区域,这也就导致了旋转的时候,相对位置会有变化。如果你需要保持相对,可以控制绘制区域与图片显示区域保持一致即可。

参考及其他文章

地址

GitHub仓库地址: image_editor_dove

插件地址:image_editor_dove

参考插件

signature | Flutter Package (flutter-io.cn)

到此这篇关于Flutter简洁实用的图片编辑器的实现的文章就介绍到这了,更多相关Flutter 图片编辑器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Flutter简洁实用的图片编辑器的实现

本文链接: https://www.lsjlt.com/news/138768.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter简洁实用的图片编辑器的实现
    目录介绍功能演示安装使用方法拓展UI定制保持相对绘制路径参考及其他文章地址参考插件介绍 一款简洁实用的图片编辑器,纯dart开发。支持:涂鸦、旋转&翻转、马赛克、添加文字,及...
    99+
    2024-04-02
  • 如何实现Flutter简洁实用的图片编辑器
    小编给大家分享一下如何实现Flutter简洁实用的图片编辑器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!介绍一款简洁实用的图片编辑器,纯dart开发。支持:涂鸦...
    99+
    2023-06-29
  • canvas怎么实现多张图片编辑的图片编辑器
    这篇文章将为大家详细讲解有关canvas怎么实现多张图片编辑的图片编辑器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。图片编辑器产品需求先说需求,由于涉及到实际公司的项目开发,满足需求的图片编辑器可能只是...
    99+
    2023-06-09
  • 纯 JS 实现的轻量化图片编辑器实例详解
    目录介绍一款纯 JS 实现的轻量化图片编辑器Optimizer 框架特点Optimizer 框架使用启动场景管理器 (Scene)页面事件Event鼠标事件键盘事件注册组件 ...
    99+
    2022-11-13
    纯JS轻量化图片编辑器 JS 图片编辑器
  • Android简易图片浏览器的实现
    闲着没事,花了半个小时用这几天发布的部分内容来做一个Android简易图片浏览器小程序,代码设main_activity.xml设计首界面,设计三个按钮并赋予id,然后在MainAc...
    99+
    2024-04-02
  • C语言实现简单的文本编辑器
    本文实例为大家分享了C语言实现简单的文本编辑器的具体代码,供大家参考,具体内容如下 预期实现三个功能,第一,可以对指定的行输入字符串;第二,删除指定行的字符串;第三,显示编辑器的行数...
    99+
    2024-04-02
  • Flutter使用AnimatedOpacity实现图片渐现动画
    目录前言AnimatedOpacity 简介AnimatedOpacity 应用图片渐现过渡总结前言 我们介绍了几篇 Flutter 的动画控制类,相信大家对动画也有了一定的了解,可...
    99+
    2024-04-02
  • 如何实现一个基于canvas的移动端图片编辑器
    这篇文章给大家分享的是有关如何实现一个基于canvas的移动端图片编辑器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。该插件是一款脱离jq的移动端图片编辑器。可以应用在移动端H5页面或者微信小程序中。插件实现的功...
    99+
    2023-06-09
  • 怎么用CSS和JS打造一个简单的图片编辑器
    本篇内容介绍了“怎么用CSS和JS打造一个简单的图片编辑器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • Android 实现圆角图片的简单实例
    Android 实现圆角图片的简单实例实现效果图:本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出。于是自己自定义了个View,实现图片的圆角以及圆形效果。效果图:Android 圆角图片的实现形...
    99+
    2023-05-31
    android 圆角图片 roi
  • React框架快速实现简易的Markdown编辑器
    目录前言需要实现的功能具体实现一、布局二、markdown语法解析三、markdown主题样式四、代码块高亮五、同步滚动bug1:bug2:六、工具栏七、补充八、最后前言 最近我在项...
    99+
    2024-04-02
  • Qt实现一个简单的word文档编辑器
    目录1.先看效果图2.需要用到的类2.1字体选择下拉框:QFontComboBox。2.2颜色对话框:QColorDialog2.3QTextCharFormat3.源码1.先看效果...
    99+
    2024-04-02
  • Java使用POI解析带图片的excel,简洁好用
    一、场景         这天遇到这个这样的需求,需要导入表格中的数据,还得支持带图片;这应该难不倒咱阿里的EasyExcel,打开官网文档一看哦豁,明确表示暂时不支持解析带图片的Excel...... 好了,这下只能看POI了,然后想起...
    99+
    2023-09-01
    POI解析带图片表格 POI解析Excel EasyExcel解析表格 java解析带图片表格 java解析excel
  • ueditor富文本编辑器怎么实现跨域上传图片
    这篇文章主要介绍了ueditor富文本编辑器怎么实现跨域上传图片,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在使用百度富文本编辑器上传...
    99+
    2024-04-02
  • C语言实现简易文本编辑器
    本程序要求完成一个简易文本编辑器,能够完成文本的录入、编辑、删除、查找,并能够完成文件的存取。 在文本编辑软件中把用户输入的所有文本内容作为一个字符串。虽然各种文本编辑软件的功能有强...
    99+
    2024-04-02
  • C语言如何实现简单的文本编辑器
    这篇文章将为大家详细讲解有关C语言如何实现简单的文本编辑器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下预期实现三个功能,第一,可以对指定的行输入字符串;第二,删除指定行的字符串;第三,显示编...
    99+
    2023-06-15
  • 用Python实现几个简单的图片特效
    导入 numpy 、PIL numpy用来做矩阵运算,PIL用来读取图片。 import numpy as np from PIL import Image 读取图片,然后转换成RGB模式存在矩阵里 im = Image.open...
    99+
    2023-01-31
    几个 特效 简单
  • Pixi.js实现可视化图形编辑器的方法
    要用Pixi.js实现一个可视化编辑器,需要先了解Pixi.js的基本概念和操作。Pixi.js是一个用于创建2D图形的JavaScript库,它可以高效地利用WebGL进行渲染。接...
    99+
    2023-03-19
    Pixi.js 可视化图形编辑器 Pixi.js 图形编辑器
  • pytorch机器学习softmax回归的简洁实现
    目录初始化模型参数重新审视softmax的实现优化算法通过深度学习框架的高级API也能更方便地实现分类模型。让我们继续使用Fashion-MNIST数据集,并保持批量大小为256。 ...
    99+
    2024-04-02
  • VUE脚手架框架编写简洁的登录界面的实现
    目录前言安装Vue脚手架创建登录界面的文件--login.Vue配置路由-- router.js配置main.js编写登录界面--Login.Vue总结前言 一个好的前端开发项目,都...
    99+
    2022-11-13
    VUE 登录界面
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作