欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-09 17:13:59
目录介绍功能演示安装使用方法拓展ui定制保持相对绘制路径参考及其他文章地址参考插件介绍一款简洁实用的图片编辑器,纯dart开发。支持:涂鸦、旋转&翻转、马赛克、添加文字,及自定义ui风格。功能...

介绍

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

功能演示

涂鸦

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

旋转&翻转

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

马赛克

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

添加文字及删除

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

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

安装

添加依赖

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 图片编辑器内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!