一. 圖像編輯器 Monica

Monica 是一款跨平臺(tái)的桌面圖像編輯器，使用 Kotlin Compose Desktop 進(jìn)行開發(fā)基于 mvvm 架構(gòu)，使用 koin 作為依賴注入的框架。

Monica github 地址：https://github.com/fengzhizi715/Monica

Monica 開發(fā)的背景和初衷可以看使用 Kotlin Compose Desktop 開發(fā)的圖像編輯器。

目前 Monica 還處于開發(fā)階段，當(dāng)前版本的主要功能包括：

加載本地圖片、網(wǎng)絡(luò)圖片。
對(duì)圖片進(jìn)行局部模糊、打馬賽克。
對(duì)圖片進(jìn)行涂鴉，并保存涂鴉的結(jié)果。
對(duì)圖片進(jìn)行裁剪。
調(diào)整圖片的飽和度、色相、亮度。
提供 20 多款濾鏡，大多數(shù)濾鏡也可以單獨(dú)調(diào)整參數(shù)。
放大、縮小圖像。
對(duì)修改的圖像進(jìn)行保存。

二. 圖像涂鴉

涂鴉是 Monica 的基礎(chǔ)功能，就是對(duì)圖像進(jìn)行隨意涂畫。

1.png

點(diǎn)擊上圖帶提示的按鈕，就可以進(jìn)入涂鴉界面，對(duì)圖像進(jìn)行隨意的涂鴉。

2.png

由于是桌面軟件，畫筆由鼠標(biāo)進(jìn)行控制。畫筆默認(rèn)是黑色的，可以隨著鼠標(biāo)的移動(dòng)而進(jìn)行繪制曲線。

3.png

Monica 支持選擇畫筆的顏色。

4.png

以及選擇畫筆的粗細(xì)。

5.png

涂鴉完之后，記得保存圖片，這樣回到主界面之后才真正的保存結(jié)果了。

6.png

涂鴉的效果主要是基于 Canvas 來繪制 Path 實(shí)現(xiàn)的。難點(diǎn)在于手勢(shì)的事件處理和 Path 的繪制，以及將最終的結(jié)果保存到 bitmap 。

特別是將 Canvas 的結(jié)果保存在網(wǎng)上的資料比較少，所以貼了出來：

    fun saveCanvasToBitmap(density:Density, paths: List<Pair<Path, PathProperties>>, image: ImageBitmap, state:ApplicationState) {

        val bitmapWidth = image.width
        val bitmapHeight = image.height

        val drawScope = CanvasDrawScope()
        val size = Size(bitmapWidth.toFloat(), bitmapHeight.toFloat())
        val canvas = Canvas(image)

        drawScope.draw(
            density = density,
            layoutDirection = LayoutDirection.Ltr,
            canvas = canvas,
            size = size,
        ) {
            state.isDoodle = false
            state.togglePreviewWindow(false)

            paths.forEach {

                val path = it.first
                val property = it.second

                drawPath(
                    color = property.color,
                    path = path,
                    style = Stroke(
                        width = property.strokeWidth,
                        cap = property.strokeCap,
                        join = property.strokeJoin
                    )
                )
            }
        }

        state.addQueue(state.currentImage!!)
        state.currentImage = image.toAwtImage()
    }