Flutter Color 大调整,需适配迁移,颜色不再是 0-255,而是 0-1.0,支持更大色域

在之前的 3.10 里, Flutter 的 Impeller 在 iOS 上支持了 P3 广色域图像渲染,但是当时也仅仅是当具有广色域图像或渐变时,Impeller 才会在 iOS 上显示 P3 的广色域的颜色,而如果你使用的是 Color API,会发现使用的还是 sRGB 色域的绘制。

⚠️ 如果对原因和调整不感兴趣的,可以直接看后面的适配。

那么实现 sRGB 和 P3 有什么区别?简单来说,最直观的感受就是如下图所示的区别,在具备 P3 色域的设备屏幕上, P3 拥有更广的色域,所以可以看到更鲜艳的颜色,而在如今 2024 来看,其实大部分移动设备都已经具备了 P3 色域的硬件支持。

简单看下如下图所示 sRGB(白色三角形)与 Display P3(橙色三角形)的色域对比,从比例上说,P3 广色域可以比 sRGB 多出至少 25% 的颜色支持。

当然, 3.10 中 Flutter 只是为 Impeller 开启了图像渲染是的广色域支持,对于使用 Color 类 API 的情况,依然还停留在 sRGB 下,它没有对在 Flutter Widget 中渲染广色域提供 API 的支持。

所以 Flutter Team 在 2023 年开启了重构 Color 对象的提案,让 Color 也调整为支持 P3 广色域的能力,最直观的就是,原本参数的有效范围 [0, 255] 的整形,而现在颜色分量调整为 [0,1.0] 的浮点

你是不是奇怪,为什么 [0, 255] 变成 [0,1.0] ,但是色域居然还变大了?这其实是因为整形变成了浮点之后,精度带来的可用位数增加:

在此之前,整形的 [0, 255] 颜色也就是每个颜色只有 8 位,从 Dart 层传递到引擎的方式是:ARGB(4x8) 被打包成一个 32 位 alpha-red-blue-green 的 Dart 整数 ,每个 color 有 8 位(255),之后 color 会被转化为 Skia 的 SkColor,然后被处理为引擎中绘制需要的 DlColor ,都是整形数据。

在 Impeller 中,DlColor 会进一步被转换为 impeller::Colorimpeller::Color 是 128 位,每个颜色都具有 32 位标准化浮点,也就是精度让位数变高了。

那为什么提高位数对支持色域很重要?因为 P3 覆盖的颜色较多,8bit/channel 已经不能表达所有 P3 颜色了,所以至少需要用 10bit/channel 来表示

而很明显,在此之前 Flutter 的 sRGB [0, 255] 的整形表示,每个颜色只有 8 位,合起来一个整体 x4 也只有 32 位,而使用浮点 [0-1.0] 表示,则改变了这一格局:

从 3.27 beta 版本开始, dart:ui 中 Color 从最大 64 位变为最大 320 位。

为什么说是从 64 位变为 320 位?因为原本只有一个整型 int ,int 在 dart 里是 64 位,所以原本 Color 最大只有 64 位,而现在增加了 a、r、g、b 四个 double ,也就是多了四个 64 位精度的参数,所以 Color 现一共有 5 个参数,变成了最大 320 位,不过未来 value 会被弃用:

也就是每个 a、r、g、b 每个理论可用为 64 位之多,如果不考虑 value ,Color 就是从原本的 64 位整数更改为 256 位浮点数。

image-20241024163722126

之后,组件将颜色的 TypedData 发送到 C++,而前面说过,在 Engine 层的 DlColor 也调整到 128 位适配 impeller::Color , 也就是 DlColor 是 4 个 32 位的 float 组成,同时往后兼容 sRGB 色彩空间。

不要在意 Dart/64 => C++/32 ,只是语言特性导致的差异。

另外,ColorSpace 也新增了 displayP3 选项,至此整个 Color 广色域支持初步完成,但是真实的 P3 渲染效果目前只在 iOS 上可以看到,后续 Android 需要等 Vulkan Impeller 支持的成熟才能在底层进一步适配支持

代码兼容调整

随着 Color 底层支持的变化,Color 上层 API 也发生了不少调整,其实本次调整算是比较大的 break ,因为色域变化后其实上层 API 调整还是很明显的, 例如最明显的就是不再推荐用 fromARGB ,而是用 Color.from

// Before
final magenta = Color.fromARGB(0xff, 0xff, 0x0, 0xff);
// After
final magenta = Color.from(alpha: 1.0, red: 1.0, green: 0.0, blue: 1.0)

另外,在以前 Color 具有 “opacity” 的概念,所有会有 opacitywithOpacity() 的存在,以前引入 Opacity 是为了让 Color 具有浮点的 alpha 通道,而现在 alpha 是一个浮点值,所以 opacity 显得多余,未来opacitywithOpacity 已被弃用并计划删除:

// Before
final x = color.opacity;
// After
final x = color.a;// Before
final x = color.withOpacity(0.0);
// After
final x = color.withValues(alpha: 0.0);

另外,如果有对于 Color 的继承最好暂时换成 implements ,也就是不需要再实现 super 相关部分逻辑,另外为什么说是暂时,因为目前 Flutter 团队计划未来 Color 会锁定并通过 sealed 封闭,所以如果通过 sealed 封闭 ,那以后基本不会有 Color 的外部实现了

class Foo implements Color {int _red;double get r => _red * 255.0;
}

其次,现在使用 Color 并对颜色执行任何类型的计算,都需要首先检查颜色的 ColorSpace ,然后再执行计算逻辑,这里推荐使用新的 Color.withValues 方法来执行颜色空间转换:

// Before
double redRatio(Color x, Color y) => x.red / y.red;// After
double redRatio(Color x, Color y) {final xPrime = x.withValues(colorSpace: ColorSpace.extendedSRGB);final yPrime = y.withValues(colorSpace: ColorSpace.extendedSRGB);return xPrime.r / yPrime.r;
}

使用颜色进行计算,如果不对齐色彩空间可能会导致细微的意外结果,例如在上面的示例中,如果使用不同的颜色空间与对齐的颜色空间进行计算时,redRatio 的差异为 0.09。

最后

事实上,本次调整虽然看起来就像是一个简单的 toDouble 过程,但是它对于 Flutter 的 UI 影响确实不小,不管是颜色 API 的适配,还是计算方式的变化,甚至是色域的支持等场景,如果单从影响效果看,这个合并可以说是影响广泛,整出边界渲染问题其实并非不可能,所以这个合并也是憋了这么久才被合并到 beta ,也许不久之后,我们就可以在正式版本中看到它了。

参考资料:

https://github.com/flutter/flutter/issues/55092

https://github.com/dart-lang/sdk/issues/56363

https://github.com/flutter/flutter/issues/127852

https://github.com/flutter/flutter/issues/127855

https://docs.flutter.dev/release/breaking-changes/wide-gamut-framework

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/461583.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

动态威胁场景下赋能企业安全,F5推出BIG-IP Next Web应用防火墙

许多企业正面临由混合和多云环境运营复杂性所引发的危机,它们普遍耗巨资于物理和虚拟设备的持续维护、修补和升级上,而针对不同云环境下的应用部署则需要特有的技能来管理众多繁杂的工具和服务。为助力企业应对上述挑战,F5公司发布了BIG-IP N…

如何用Python同时抓取多个网页:深入ThreadPoolExecutor

背景介绍 在信息化时代,数据的实时性和获取速度是其核心价值所在。对于体育赛事爱好者、数据分析师和投注行业而言,能否快速、稳定地抓取到实时比赛信息显得尤为重要。特别是在五大足球联赛中,能够在比赛进行时获得比分、控球率等实时数据&a…

(转载)Tools for Learning LLVM TableGen

前提 最近在学习有关llvm的东西,其中TableGen占了一部分,所以想特意学习下TableGen相关的语法。这里找到了LLVM官网的一篇介绍TableGen的博客,学习并使用机器翻译为中文。在文章的最后也添加了一些学习TableGen的资源。 原文地址&#xff1…

LARGE SCALE GAN TRAINING FORHIGH FIDELITY NATURAL IMAGE SYNTHESIS

ABSTRACT 尽管最近在生成图像建模方面取得了进展,但成功地从复杂的数据集(如ImageNet)生成高分辨率、多样化的样本仍然是一个难以实现的目标。为此,我们在迄今为止尝试的最大规模上训练生成对抗网络,并研究这种规模特有的不稳定性。我们发现…

组队学习专用——task05

目录 一、基本原理 1. 决策树的基本思想 2. 决策树划分过程中可能遇到的特殊情况 (1) 单一类别终止: (2) 属性用尽: (3) 样本空缺: 3. 决策树的结构 二、信息量、信息熵 1. 信息量 2. 信息熵 三、决策树 1. ID3 决策树&#xff08…

Linux RAID 技术详解:原理、配置、管理及故障处理

本文档深入探讨 Linux 软件 RAID 技术,涵盖 RAID 原理、各种 RAID 级别、mdadm 命令详解、配置步骤、管理方法以及高级故障处理和性能调优策略。 一、 RAID 原理与架构 RAID (Redundant Arrays of Independent Disks,独立磁盘冗余阵列) 技术并非单一技…

「C/C++」C/C++标准库 之 <cstring> 字符串操作库

✨博客主页何曾参静谧的博客📌文章专栏「C/C++」C/C++程序设计📚全部专栏「VS」Visual Studio「C/C++」C/C++程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid函数说明目…

单细胞数据分析(一):10X数据生成seurat数据对象

文章目录 介绍加载R包数据链接导入数据过滤细胞:移除双重细胞合并所有seurat数据对象输出结果系统信息介绍 在单细胞基因组学研究中,Seurat是一个流行的R包,用于单细胞基因表达数据的分析和探索。以下是如何从10X基因注释数据生成Seurat数据对象,并对该数据进行过滤的步骤…

day13:FTP服务

一,FTP概述 概述 FTP(File Transfer Protocol,文件传输协议)是用于在计算机之间传输文件的协议。它工作在网络的应用层,通过 TCP 协议进行数据传输,默认端口号为 21(命令端口,另外…

从0开始的STM32学习之旅:使用中断完成等待型任务(理论部分)

目录 中断 NVIC 中断优先级 先说说一般我们聊到的中断优先级 STM32中的NVIC中断优先级表示 API CubeMx配置说明 很好,我们在之前的学习中已经完成了简单的GPIO输入输出驱动的控制,我们的下一步就是仔细了解一下中断这个事情。 中断 中断这个事情…

使用Python进行数据分析入门

文章目录 Python环境搭建安装Anaconda验证安装 必备库介绍NumPyPandasMatplotlibSciPy 数据导入与清洗导入数据清洗数据 数据探索与分析描述性统计相关性分析 数据可视化绘制直方图 高级主题机器学习深度学习 总结 随着大数据时代的到来,数据分析变得越来越重要。Py…

RabbitMQ + JMeter组合,优化你的中间件处理方式!

RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息中间件,它是基于Erlang语言编写的,并发能力强,性能好,是目前主流的消息队列中间件之一。 RabbitMQ的安装可参照官网( https://www.rabbitmq.c…

python 爬虫 入门 五、抓取图片、视频

目录 一、图片、音频 二、下载视频: 一、图片、音频 抓取图片的手法在上一篇python 爬虫 入门 四、线程,进程,协程-CSDN博客里面其实有,就是文章中的图片部分,在那一篇文章,初始代码的28,29行…

Vulnhub靶机——DC-1

#环境 本次环境是利用VMware15搭建 靶机DC-1( https://download.vulnhub.com/dc/DC-1.zip) --192.168.200.131 Kali2021.1--192.168.200 将以上两个操作系统启动,并设置网卡为NAT模式 #信息收集 使用arp-scan对网段进行扫描,探测存活主机 使用nmap…

吴恩达深度学习笔记(10)12.

多任务学习 什么时候多任务学习有意义: 能从共享低级特征中获益;每个任务拥有的数据相当相似;训练一个足够大的神经网络用于所有任务。 目标定位: 分类定位(单个对象)与检测不同(多个对象&…

Android 音量调节流程分析

音量调节流程分析 按下音量键 音量键被按下后,按键事件会一路派发给Acitivity,如果无人拦截并处理,承载当前Activity的显示PhoneWindow类的onKeyDown()以及onKeyUp()函数将会被处理,从而开始通过音量键调整音量的处理流程&#x…

LLMs在股票投资组合崩溃中的时间关系推理

1. 引言 想象一下,你是一位投资经理,管理着一个多元化的股票投资组合。突然,一场前所未有的全球性事件发生了,比如2007年的金融危机或2020年的新冠疫情,这可能会对你的投资组合造成重大影响。传统的投资组合崩溃检测方…

o1驾驶无人机后空翻,OpenAI开发者日惊掉下巴!2分钟爆改代码写App

【导读】OpenAI伦敦开发者日上,首次曝出了o1五大核心能力,还有图像理解。o1两分钟构建应用驾驶无人机、电话订餐、讲解太阳系,现场演示让所有开发者沸腾。 完整版o1的解禁,离我们不远了! 就在刚刚举办的OpenAI伦敦开…

利用AWS服务轻松迁移数据上云

在数字化转型的浪潮中,越来越多的企业意识到将数据迁移至云端的重要性。云服务不仅能够提供更高的灵活性和可扩展性,还能显著降低IT成本。AWS(Amazon Web Services)作为全球领先的云服务提供商,为企业提供了一系列高效…

期货跟单、量化交易模拟演示系统

演示版可直接下载本文绑定资源。 一、跟单下单 在“排行榜”中选择要跟单的用户,合约可以跟全部,也可以指定跟该用户的某一合约操作,选定跟单的倍数(操作手数的倍数)/手数(指定手数,可以不是对…