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

935 阅读3分钟

一. 图像编辑器 Monica

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

Monica github 地址:github.com/fengzhizi71…

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

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

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

二. 图像涂鸦

涂鸦是 Monica 的基础功能,就是对图像进行随意涂画。 1.png

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

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

Monica 支持选择画笔的颜色。 4.png

以及选择画笔的粗细。 5.png

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

涂鸦的效果主要是基于 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()
    }

三. 图像裁剪

点击带提示的裁剪按钮 7.png

可以进入图像裁剪的界面 8.png

用户可以基于九宫格的选框,对图像进行裁剪。 9.png

裁剪完之后,会在主界面显示截取之后的图像。 10.png

图像裁剪也是大量基于 Canvas 的操作。

四. 有趣的滤镜

当前版本新增了一些滤镜,选择2款有意思的介绍。

一款是生成铅笔画的效果: 11.png

另一款是生成油画的效果: 12.png

五. 总结

Monica 目前到了 0.2 版本,暂时还不提供安装包不过可自行编译。等版本相对稳定后,会提供 Windows/Linux/MacOS 的安装包。因为,接下来还会有大量的架构调整和代码重构。

Monica github 地址:github.com/fengzhizi71…

后期 Monica 的重点是增加对图像各种形状的裁剪,对现有算法的效率进行提升,增加用户和软件的交互,尝试引入一些深度学习的算法等等。

该系列的相关文章:

基于 Compose Desktop 实现的图像编辑器之使用 OpenCV C++ 实现图像增强

基于 Compose Desktop 实现的图像编辑器之各种形状的裁剪、图像取色、使用查找表实现的滤镜

使用 Kotlin Compose Desktop 开发的图像编辑器