前言

產(chǎn)品拿著IOS的微信圖片編輯給我看了下說：“這個(gè)功能應(yīng)該很簡單吧，你應(yīng)該很快就能做好吧”。
如果當(dāng)時(shí)我的桌子上有塊??的話，估計(jì)就是另一個(gè)結(jié)局了。??
吐槽結(jié)束，先來看效果圖吧

來吧，展示

本圖片編輯器實(shí)現(xiàn)了IOS微信圖片編輯除表情貼紙外的所有功能包括用戶體驗(yàn)。
源代碼在1000行左右，閱讀起來基本沒有難度，非常適合二次開發(fā)。
實(shí)現(xiàn)功能：涂鴉、貼紙、文字、馬賽克、裁剪

主要知識(shí)點(diǎn)：

• Canvas
• Xfermode
• GestureDetector
• ScaleGestureDetector

使用

接入

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

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

第2步：在應(yīng)用的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調(diào)用圖片編輯器
2. 通過setBitmapPath(path)傳入圖片路徑
3. 通過setEditorFinishCallback(callback)獲取編輯后的圖片地址

如果覺得PictureEditorDialog不能滿足需求，還可以通過PictureEditorView來自定義樣式

自定義使用

<com.example.miaow.picture.editor.PictureEditorView
    android: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)設(shè)置編輯模式，分別有：涂鴉，橡皮擦，馬賽克，貼紙
3. 通過setGraffitiColor(color)設(shè)置涂鴉畫筆顏色
4. 通過setSticker(StickerAttrs(bitmap))設(shè)置貼紙
5. 通過graffitiUndo()涂鴉撤銷
6. 通過mosaicUndo()馬賽克撤銷
7. 通過saveBitmap()保存編輯圖片

PictureEditorView就介紹到這里，具體使用請查看PictureEditorDialog

圖片裁剪

<com.example.miaow.picture.editor.PictureClipView
    android: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()圖片旋轉(zhuǎn)
3. 通過clip.reset()圖片重置
4. 通過clip.saveBitmap()保存裁剪框內(nèi)圖片

PictureClipView就介紹到這里，具體使用請查看PictureClipDialog

Thanks

以上就是本篇文章的全部內(nèi)容，如有問題歡迎指出，我們一起進(jìn)步。
如果喜歡的話希望點(diǎn)個(gè)贊吧，您的鼓勵(lì)是我前進(jìn)的動(dòng)力。
謝謝~~

項(xiàng)目地址

• github： https://github.com/miaowmiaow/fragmject