likes
comments
collection
share

Flutter 中有填充或者泛洪或者油漆桶功能可以处理图像，你知道吗？

作者站长头像
站长
· 阅读数 45

🌹 ⭐️ 🌹请首先看我 🌹 ⭐️ 🌹

  1. 下面介绍的功能都是有 IDKit 库提供。
  2. 下面该功能需要 idkit ^ 0.3.8 以及以上可以使用。
  3. idkit 包的引入方式如下: 1. 可以手动引入 idkit 包，就是将 idkit ^ 0.3.8 放在项目的 pubspec.yaml 文件的 dependencies 模块下，然后执行 flutter pub get 指令即可。 2. 可以使用后指令 flutter pub add idkit 在项目根目录终端下执行即可。

[》跳过拾光记忆]

拾光记忆

简介: 针对 Flutter 项目资产管理的脚本服务。Fam 具有以下特点: 支持多种平台以及各平台无差异化、界面美观、功能齐全、快捷方便。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 针对 Flutter 多手指检测以及手势触发其他手势也触发的问题。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更深入的了解 Dart 的枚举以及相关使用和方法。 推荐: ⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现单选、多选功能，无需你对数据处理。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更深入的了解 Flutter 的两种指针的介绍以及相关使用和方法。 推荐: ⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现多种样式的轨道滑块，比如:轨道渐变色、触控笔悬浮标等。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更加便捷的查看日志，通过日志能够分析变量当前数值以及业务逻辑走势，同时也能作为日志收集日志文本。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现图像添加图片类型的水印和文字类型的水印，支持水印多种样式的设定。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: IImage 是 IDKit 的其中一个功能模块，它提供了许多方便的图像处理方法，例如：尺寸调整、相对某点的矩形位置、大小调整、图像缩放、背景去除、真实内容尺寸获取以及真实内容图像获取等等。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 该篇主要介绍 Matrix4 的 16 个参数的含义。 推荐: ⭐️⭐️⭐️⭐️

简介: 该篇主要介绍 Flutter 中所有颜色的模式以及对应颜色的一些便捷方法有和LAB 颜色的支持以及颜色差异提供算法。 推荐: ⭐️⭐️⭐️⭐️⭐️

[返回拾光记忆《]

一、简述

在使用 PS 或其他图像处理软件时，我们都应该接触过填充、油漆桶等功能。这些功能非常强大，但同时也会让人产生疑问：它们是如何实现的，如何做到精确填充呢？那么在 Flutter 中，我们又是如何实现这些功能的呢？下面让我们一起来探讨。

二、问题分析

图像填充或油漆桶功能看似简单，但其实涉及多个步骤。实现这个功能需要进行以下步骤：

  1. 获取图像数据源
  2. 获取触摸点的坐标和颜色
  3. 扫描图像并计算颜色容差
  4. 生成填充后的图像。

虽然这个功能看似简单，但实际上需要进行复杂的算法计算和处理。其中 扫描图像 和 颜色容差 这两项是核心，有一定的难度。下面我们将从这两个方面介绍。

三、颜色容差

四、图像扫描

图像的扫描也有很多途径和思路，例如：四向扫描、八向扫描以及跨域扫描等。下面简单介绍一下这几种方法。

  • 四向扫描

    我们知道图像都是由许多像素格子组成，如下图所示：

    Flutter 中有填充或者泛洪或者油漆桶功能可以处理图像，你知道吗？

    而四向扫描法是以一个像素点为基础，上下左右进行扩散扫描，如下所示：

    Flutter 中有填充或者泛洪或者油漆桶功能可以处理图像，你知道吗？

    该方法主要是一个递归调用，一直到最后或者条件不满足时停止。该方法递归调用会导致 Flutter 调用栈爆满。

  • 八向扫描

    八向扫描和四项基本类似，它的演示如下：

    Flutter 中有填充或者泛洪或者油漆桶功能可以处理图像，你知道吗？

    从上图可以看出，八向比四向更快。但是八向也有四向的缺点，它们都能充满调用栈。

  • 跨域扫描 （重点）

    跨域扫描是目前最好以及最快的方法，它其实我们并不陌生，它类似于经典游戏中的扫雷。它的演示如下:

    Flutter 中有填充或者泛洪或者油漆桶功能可以处理图像，你知道吗？

    它的过程是:

    1. 首先是我们填充的开始点，见：第一行的第二个图。
    2. 然后将开始点的 X 坐标，移动到该填充区域的左边最小值，见：第一行的第三个图。
    3. 然后判断 Y 轴的上下在 X 坐标最小值的区域是否是填充区域以及变更 Y 轴该行所有可填充的像素格，见： 第二行的第一个图。
    4. 我们在填充 Y-1 轴时，也会判断 Y-1 -1 轴是否可以填充，见图：第二行的第二个图。
    5. 我们在填充 Y+1 轴时，也会判断 Y+1 +1 轴是否可以填充，见图：第二行的第三个图。

总结： 上面提供了三种扫描方法，前两个实现基本一致很好理解；第三张扫描有点难懂，但是多次模拟也能很快理解。无论哪种方法，它们在计算时都需要注意通过 X/Y 组合的值去图像序列中查找数据时的越界问题。

五、 填充、泛洪、油漆桶功能的便捷实现

确实，实现填充或油漆桶功能需要进行多种计算和处理，包括颜色转换、根据像素坐标获取图像数据等。这些计算和处理都需要耗费大量的时间和精力。但是，在Flutter中，我们可以使用 idkit 包来轻松实现这个功能。该包提供了便捷的方法，可以帮助我们简单地实现填充或油漆桶功能，无需手动进行复杂的计算和处理。

idkit 的引用，请移步到文章的顶部。

idkit 提供了四种便捷方法来实现填充或者油漆桶的功能，方法如下：

  1. Future<Image> euclideanDistanceFlooding({ required Offset offset, required Color fillColor, double tolerance = 1.0, bool isDispose = false, })

    该方法是欧氏距离泛洪方法，该方法计算速度快，但是精度较低，需要调节 tolerance 值来满足自己的业务需求。 参数介绍：

    • offset： 我们手指或者鼠标或者触控笔在图像最后的位置。
    • fillColor：要填充的颜色，是 RGB 格式。
    • tolerance：颜色容差值，可根据自己的业务进行调节，默认值为 1。
    • isDispose：是否清除原始图像，默认为 false。

  2. Future<Image> cie76Flooding({ required Offset offset, required Color fillColor, double tolerance = 2.3, bool isDispose = false, })

    该方法是 cie76 泛洪方法，该方法计算速度还是很快的，比欧式距离精度高。也可以调节 tolerance 值来满足自己的业务需求。参数介绍：

    • offset： 我们手指或者鼠标或者触控笔在图像最后的位置。

    • fillColor：要填充的颜色，是 RGB 格式。

    • tolerance：颜色容差值，可根据自己的业务进行调节，默认值为 2.3。

    • isDispose：是否清除原始图像，默认为 false。

    注意: 高精度计算需要更多的时间和资源，因此会导致速度变慢。如果同时要求速度和精度，那可能需要使用更高级别的算法或者硬件来实现。在实现填充或油漆桶功能时，如果要求高精度，可能会影响到应用程序的性能和响应速度。因此，在实现这个功能时，需要根据具体的需求权衡速度和精度。如果想要更高的精度，则需要付出更多的时间和资源来实现。。

  3. Future<Image> cie94Flooding({ required Offset offset, required Color fillColor, ColorImageStyle colorImageStyle = ColorImageStyle.graphicArt, double tolerance = 2.3, double kc = 1.0, double kh = 1.0, double sl = 1.0, bool isDispose = false, })

    该方法是 cie94 泛洪方法，该方法计算速度还是很快的，比欧式距离、cie76 精度高。也可以调节 tolerance、kc、kh、sl 值来满足自己的业务需求。参数介绍：

    • offset： 我们手指或者鼠标或者触控笔在图像最后的位置。

    • fillColor：要填充的颜色，是 RGB 格式。

    • colorImageStyle: 颜色图像的风格，包含：图形艺术类；纹理、纺织品。

    • kc: 调整色差感知权重的常数。

    • kh: 调整亮度差异感知权重的常数。

    • sl: 调整 L* 分量（亮度）影响的常数。

    • tolerance：颜色容差值，可根据自己的业务进行调节，默认值为 2.3。

    • isDispose：是否清除原始图像，默认为 false。

  4. Future<Image> ciede2000Flooding({ required Offset offset, required Color fillColor, double tolerance = 2.3, double kc = 1.0, double kh = 1.0, double kl = 1.0, bool isDispose = false, })

    该方法是 ciede2000 泛洪方法，该方法计算速度还是很快的，比欧式距离、cie76、cie94 精度高。也可以调节 tolerance、kc、kh、kl 值来满足自己的业务需求。参数介绍：

    • offset： 我们手指或者鼠标或者触控笔在图像最后的位置。
    • fillColor：要填充的颜色，是 RGB 格式。
    • colorImageStyle: 颜色图像的风格，包含：图形艺术类；纹理、纺织品。
    • kc: 调整色差感知权重的常数。
    • kh: 调整亮度差异感知权重的常数。
    • kl: 光度反射加权函数的调整参数
    • tolerance：颜色容差值，可根据自己的业务进行调节，默认值为 2.3。
    • isDispose：是否清除原始图像，默认为 false。

六、应用展示

我们使用这个进行一个线稿图的填充，视频展示效果如下：

Flutter 中有填充或者泛洪或者油漆桶功能可以处理图像，你知道吗？

注意：图像的像素密度会导致你选择坐标点的位置变化，进而影响你在高密度图像下采集到颜色不是你选择点的颜色。

演示例子的地址 👉🏻 填充/油漆桶 ， 欢迎下载或者收藏以及点赞。

七、总结

确实，图像处理中的填充、油漆桶功能看似简单，但实际上需要进行多种计算和处理。idkit 包提供了方便的方法来实现这个功能，这样我们就可以摆脱繁琐的计算和处理，专注于应用程序的开发。如果您觉得这个功能实现方法有用，请给我们一个赞👍，这将激励我们提供更好的服务。

转载自:https://juejin.cn/post/7244819740543287356
评论
请登录