当前位置: 首页 > article >正文

巨丝滑 —— 自己动手撸一个图片编辑器(支持长图)

前言

产品拿着IOS的微信图片编辑给我看了下说:“这个功能应该很简单吧,你应该很快就能做好吧”。   
如果当时我的桌子上有块🧱的话,估计就是另一个结局了。😂
吐槽结束,先来看效果图吧

来吧,展示

本图片编辑器实现了IOS微信图片编辑除表情贴纸外的所有功能包括用户体验。  
源代码在1000行左右,阅读起来基本没有难度,非常适合二次开发。   
实现功能:涂鸦、贴纸、文字、马赛克、裁剪

主要知识点:

- Canvas
- Xfermode
- GestureDetector
- ScaleGestureDetector

使用

接入

第 1 步:在工程的`build.gradle`中添加:

allprojects {repositories {...mavenCentral()}
}

第2步:在应用的`build.gradle`中添加:

dependencies {implementation 'com.github.miaowmiaow.fragmject:miaow-picture:1.2.6'
}

快速使用

PictureEditorDialog.newInstance().setBitmapPath(path).setEditorFinishCallback(object : EditorFinishCallback {override fun onFinish(path: String) {val bitmap = BitmapFactory.decodeFile(path, BitmapFactory.Options())}}).show(fragmentManager)

如上所示:
1. 通过`PictureEditorDialog`调用图片编辑器
2. 通过`setBitmapPath(path)`传入图片路径
3. 通过`setEditorFinishCallback(callback)`获取编辑后的图片地址

如果觉得`PictureEditorDialog`不能满足需求,还可以通过`PictureEditorView`来自定义样式

自定义使用

<com.example.miaow.picture.editor.PictureEditorViewandroid:id="@+id/pic_editor"android:layout_width="match_parent"android:layout_height="match_parent" />
picEditor.setBitmapPath(path)
picEditor.setMode(PictureEditorView.Mode.STICKER)
picEditor.setGraffitiColor(Color.parseColor("#ffffff"))
picEditor.setSticker(StickerAttrs(bitmap))
picEditor.graffitiUndo()
picEditor.mosaicUndo()
picEditor.saveBitmap()

如上所示:
1. 通过`setBitmapPath(path)`传入图片路径
2. 通过`setMode(mode)`设置编辑模式,分别有:涂鸦,橡皮擦,马赛克,贴纸
3. 通过`setGraffitiColor(color)`设置涂鸦画笔颜色
4. 通过`setSticker(StickerAttrs(bitmap))设置贴纸
5. 通过`graffitiUndo()`涂鸦撤销
6. 通过`mosaicUndo()`马赛克撤销
7. 通过`saveBitmap()`保存编辑图片

`PictureEditorView`就介绍到这里,具体使用请查看`PictureEditorDialog`

图片裁剪

<com.example.miaow.picture.editor.PictureClipViewandroid:id="@+id/clip"android:layout_width="match_parent"android:layout_height="match_parent" />
clip.setBitmapResource(bitmap)
clip.rotate()
clip.reset()
clip.saveBitmap()

如上所示:
1. 通过`setBitmapResource(bitmap)`传入裁剪图片
2. 通过`clip.rotate()`图片旋转
3. 通过`clip.reset()`图片重置
4. 通过`clip.saveBitmap()`保存裁剪框内图片

`PictureClipView`就介绍到这里,具体使用请查看`PictureClipDialog`

Thanks

以上就是本篇文章的全部内容,如有问题欢迎指出,我们一起进步。   
如果喜欢的话希望点个赞吧,您的鼓励是我前进的动力。   
谢谢~~

项目地址

- github: https://github.com/miaowmiaow/fragmject

http://www.lryc.cn/news/2417917.html

相关文章:

  • 2020年有寓意的领证日期_2020有寓意的领证日期 2020热门领证日期
  • 8小时理解go - 基本语法
  • PC端分享至QQ空间、新浪、微信
  • PHP实现Trim函数功能(附完整源码)
  • .net core 请求外部接口;ABP HttpClientFactory的使用
  • vuex结合mixin在实际项目中的使用(超详细)
  • 前端缓存详解
  • 学习记录333@MySQL问题之server name is already exists解决方案
  • kernel panic 分析解决方法
  • 基于Java游戏论坛平台设计和实现(源码+LW+调试文档+讲解等)
  • Picasa生成图片幻灯片页面图文教程
  • Java集合详解(超详细)
  • 什么是CSharp
  • c语言常量详细解释及简单应用
  • 入门MySQL--0基础,操作详图,简单易懂
  • CDB(ContainerDatabase)与PDB(PluggableDatabase)
  • 【EVPN】EVPN名词简介
  • java环境变量详解_JAVA环境变量配置详解
  • php中file_get_contents如何读取大容量文件
  • 为什么下载的.msi安装文件打不开、运行不了?用mysql的.msi安装文件为例
  • 学习使用Python执行P4操作
  • 8Uftp连接服务器错误
  • 自学电脑编程_有哪些高质量的自学网站
  • javaSE(完整版)
  • 精进不休丨MogDB 数据库预读特性进一步提升20%+查询性能
  • 计算机期刊投稿须知
  • C语言qsort函数的使用详解
  • 2023最新个人博客文章发布系统的设计与实现(毕业设计+论文+开题报告+运行)
  • Android 游戏开发入门指南(一)
  • java Map遍历的5种方法和一些基本使用