图像编辑器 Monica 之图像涂鸦、裁剪、有趣的滤镜

OpenCV学堂

发布于 2024-05-31 14:26:32

850

发布于 2024-05-31 14:26:32

文章被收录于专栏：贾志刚-OpenCV学堂贾志刚-OpenCV学堂

一. 图像编辑器 Monica

Monica 是一款跨平台的桌面图像编辑器，使用 Kotlin Compose Desktop 进行开发基于 mvvm 架构，使用 koin 作为依赖注入的框架。

Monica 开发的背景和初衷可以看使用 Kotlin Compose Desktop 开发的图像编辑器。

目前 Monica 还处于开发阶段，当前版本的主要功能包括：

加载本地图片、网络图片。
对图片进行局部模糊、打马赛克。
对图片进行涂鸦，并保存涂鸦的结果。
对图片进行裁剪。
调整图片的饱和度、色相、亮度。
提供 20 多款滤镜，大多数滤镜也可以单独调整参数。
放大、缩小图像。
对修改的图像进行保存。

二. 图像涂鸦

涂鸦是 Monica 的基础功能，就是对图像进行随意涂画。

点击上图带提示的按钮，就可以进入涂鸦界面，对图像进行随意的涂鸦。

由于是桌面软件，画笔由鼠标进行控制。画笔默认是黑色的，可以随着鼠标的移动而进行绘制曲线。

Monica 支持选择画笔的颜色。

以及选择画笔的粗细。

涂鸦完之后，记得保存图片，这样回到主界面之后才真正的保存结果了。

涂鸦的效果主要是基于 Canvas 来绘制 Path 实现的。难点在于手势的事件处理和 Path 的绘制，以及将最终的结果保存到 bitmap 。

特别是将 Canvas 的结果保存在网上的资料比较少，所以贴了出来：

    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()
    }