【问题标题】:How to get the color of the image pixel on which I clicked?如何获取我点击的图像像素的颜色?
【发布时间】:2019-06-06 13:11:13
【问题描述】:

我有一张图片,具体来说,它是从Image.asset() 加载的。

它被包装在一个扩展的小部件中,并且有自己的上下文。

我可以点击它,并获取我点击的本地位置(图像/上下文的 x/y 本地)。

从那时起,我想做的就是获取一些信息(特别是颜色和 alpha/不透明度,但颜色是关键)。我真的只是想要那个上下文的图像信息,以及明确地说“我需要字节#”或“我需要来自 X 和 Y 的像素信息”的能力。我觉得这必须存在于 Flutter 中,因为它在许多(大多数?)其他具有丰富 UI 的平台中非常微不足道。

我错过了一些简单的东西,还是在这个平台上这比我心理允许的更难?

或者我应该加载 html 库并在那里做我需要的事情?

谢谢!

(从历史上看,我精通 iOS 开发、C# 和 .Net、HTML 和画布工作,以及许多其他平台,这些年我想记住的时间都比较长,等等,但对 Flutter 来说还是很新的,因为我们正在紧急重写我们在 Trigger 中的应用程序,该应用程序不再运行良好。谢谢。) :)

【问题讨论】:

    标签: flutter dart colors


    【解决方案1】:

    我不知道你是否还在寻找解决方案。

    我刚刚为你制作了this prototype...希望够清楚了。

    Here's a video 的结果。

    顺便说一句,图像库有很多方法可以解决您需要的问题...如果您需要它,并且像素值可以作为列表访问,因此您可以解决 KML 颜色并将列表视为网格(行、列数学来查找索引)。

    警告:该库使用不同的颜色格式 (#AABBGGRR),但可以轻松转换。

    更新:

    我根据 cmets 中指出的限制制作了 v2,但更改了 original snippet 以显示这两种方法。 这会生成您想要的任何小部件的快照(因此它需要转换/着色/盒子配件/您在屏幕上呈现的任何内容)。

    如果您不必经常为小部件设置动画或使小部件无效,则为您提供很多功能。

    检查demo in youtube

    【讨论】:

    • O_O 太棒了!谢啦!我将解决这个问题,看看我的不同之处;快速浏览一下,它确实看起来足够接近。谢谢!!!!
    • 100% 完全符合我的需要,而且我似乎无法控制足够的旧窗口来恢复正常工作以进行比较。我已经写了,删除,调整,重写了很多次......从我所看到的,我非常接近 - 我知道我是;我知道这取决于缩放。流构建器本质上是获取渲染图像的快照;我认为那是我没有把它做好的地方。哇靠!谢谢!
    • PM我你的邮箱什么的?我要谢谢你,并在我的应用程序中为你添加一个确认。谢谢,伙计!
    • 很高兴为您提供帮助 :) 知道如何 PM n stackoverflow,抱歉
    • 这不是一个解决方案:您根本没有考虑 Image.fit 属性 - 例如尝试使用 BoxFit.coverfillnone 它将不起作用跨度>
    【解决方案2】:

    我想添加一个答案,仅在 2020 年 9 月之后可用。

    如果您需要读取小部件树中图像的图像像素,可以使用 https://pub.dev/packages/image_pixels 包中的 ImagePixels 小部件(注意:我是该包的作者)。

    注意,您不需要从Image.asset() 手动预加载它。您只需要提供imageProvider。您需要根据 GestureDetector 给出的绝对位置计算自己的相对位置:

    // Some (x, y) position you got from the GestureDetector.
    var x = 50;
    var y = 25;
    
    @override
    Widget build(BuildContext context) {
        return ImagePixels(
                  imageProvider: imageProvider,
                  builder: (context, img) =>
                      double xRelative = ... // Calculate from x and img.width;
                      double yRelative = ... // Calculate from y and img.width;
                      Text(
                         "Pixel color is: ${img.pixelColorAt(xRelative, yRelative)}.");
                  );
    } 
    

    【讨论】:

    • 如何以编程方式执行此操作,假设我有一个正方形的图像,我需要在不物理单击的情况下获取左下角的像素颜色。如何获得图像上该像素的 x,y 位置?
    猜你喜欢
    • 2013-07-11
    • 1970-01-01
    • 2019-07-27
    • 1970-01-01
    • 1970-01-01
    • 2013-07-21
    • 2018-05-10
    • 2014-12-06
    • 1970-01-01
    相关资源
    最近更新 更多