尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

FAST 1.x 颜色工具深度解析:xyzToRGB() 函数的签名、参数与色域越界处理

FAST 1.x 颜色工具深度解析:xyzToRGB() 函数的签名、参数与色域越界处理 前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本文基于 FASTmicrosoft/fast-colors1.x 版本官方 API 文档完整讲解xyzToRGB()转换函数的函数签名、参数与返回值定义并结合仓库中同属fast-colors命名空间的ColorXYZ、ColorRGBA64类文档展开说明 D65 白点常量的作用、64 位通道颜色的结构以及 XYZ → RGB 转换中rgb 值大于 1 或小于 0这一色域越界行为的来源与处理建议。读完本文你可以正确调用该函数、理解其输入输出数据结构并在生成设计系统色板时规避越界值带来的渲染异常。需要说明的前提当前仓库镜像的packages/目录下仅包含fast-element、fast-router、fast-test-harness三个包的源码fast-colors的运行时源码并未包含在内因此本文的全部实现事实均来源于仓库中 API Documenter 自动生成的官方 API 文档位于sites/website/src/docs/1.x/api/目录文中所有引用链接均指向这些真实存在的文档文件。一、xyzToRGB() 函数签名、参数与返回值该函数的官方定义完整继承自 xyzToRGB 文档页如下功能描述Converts aColorXYZto aColorRGBA64将 XYZ 颜色转换为 RGBA64 颜色函数签名Signatureexport declare function xyzToRGB(xyz: ColorXYZ, alpha?: number): ColorRGBA64;参数表ParametersParameterTypeDescriptionxyzColorXYZthe xyz color to convert待转换的 XYZ 颜色alphanumberthe alpha value输出的 alpha 值可选参数返回值ReturnsColorRGBA64从签名可以确认三个事实xyz是唯一的必选参数类型为ColorXYZ实例alpha为可选参数类型为number。这与返回类型ColorRGBA64的构造函数new ColorRGBA64(red, green, blue, alpha)相呼应——XYZ 颜色本身不携带透明度信息因此 alpha 需要由调用方显式提供返回值为完整的ColorRGBA64对象而非裸数组或 CSS 字符串可继续链式调用其toStringHexRGB()、clamp()等方法。二、输入侧ColorXYZ 类与 D65 白点常量理解xyzToRGB()的第一步是理解输入类型ColorXYZ。根据 ColorXYZ 类文档类定义export declare class ColorXYZ构造方式为(constructor)(x, y, z)即三个number类型的分量属性实例属性x、y、z均为number静态属性static readonly whitePoint: ColorXYZ官方注释为D65 2 degree white pointD65 2 度观察者白点方法equalValue(rhs)判等、static fromObject(data)从配置对象构造、roundToPrecision(precision)返回按指定精度舍入的新ColorXYZ、toObject()序列化为对象。该文档中有一段对使用xyzToRGB()至关重要的说明原文照录This implementation uses the D65 constants for 2 degrees. That determines the constants used for the pure white point of the XYZ space of0.95047, 1.0, 1.08883. These constants determine how the XYZ, LCH and LAB colors convert to/from RGB.也就是说FAST 的xyzToRGB()以及同族的labToRGB、lchToRGB、xyzToLAB、labToXYZ等全部基于D65 标准光源、2 度观察者的白点三元组 (0.95047, 1.0, 1.08883) 进行归一化计算。ColorXYZ.whitePoint静态属性即封装了这一常量详见 whitePoint 属性文档。这一选择直接影响转换矩阵的数值——如果你手工按公式实现 XYZ→RGB 转换必须使用同一组白点常量否则结果会与 FAST 的输出不一致。三、输出侧ColorRGBA64 类与 64 位通道返回值ColorRGBA64的官方描述是A RGBA color with 64 bit channels带 64 位通道的 RGBA 颜色。根据 ColorRGBA64 类文档文档示例new ColorRGBA64(1, 0, 0, 1) // red——四个分量red, green, blue, alpha在示例中均为 01 之间的归一化浮点数属性r、g、b、a均为number序列化方法toStringHexRGB()返回#RRGGBB、toStringHexARGB()返回#AARRGGBB、toStringHexRGBA()返回#RRGGBBAA、toStringWebRGB()返回rgb(0xRR, 0xGG, 0xBB)格式、toStringWebRGBA()返回rgba(0xRR, 0xGG, 0xBB, a)格式其他方法equalValue(rhs)判等、static fromObject(data)从ColorRGBA64Config构造、roundToPrecision(precision)精度舍入、toObject()序列化为ColorRGBA64Config、clamp()。其中clamp()方法与本文的主题直接相关其文档定义为Returns a newColorRGBA64with channel values clamped between 0 and 1.即返回一个新的ColorRGBA64将各通道值钳制在 0 到 1 之间。这一方法的存在本身就暗示了官方预期某些转换尤其是从更宽的色域转入 RGB可能产生超出 [0, 1] 的通道值clamp()就是为此提供的标准处理手段。四、Remarks 精读为什么 xyzToRGB 可能返回 rgb 1 或 0xyzToRGB 文档页 的 Remarks 一节是整篇文档中信息量最大的部分原文照录Note that the xyz color space is significantly larger than sRGB. As such, this can return colors rgb values greater than 1 or less than 0.翻译并展开解释如下原因CIE XYZ 色域显著大于 sRGB 色域。XYZ 是设备无关的母空间其中包含大量人眼可见、但 sRGB 显示器无法再现的颜色超出 sRGB 三角形范围的部分即超色域/gamut 外颜色。表现xyzToRGB()对这类输入不做钳制转换得到的ColorRGBA64的r/g/b通道可能大于 1如某些高饱和的青绿/品红色或小于 0矩阵变换中某些分量为负。这是符合数学定义的预期输出而不是 bug——保持线性值不被破坏有利于后续继续做 LAB/LCH 空间插值等色度计算。处理方式如果你要把结果直接用作屏幕 CSS 颜色应调用ColorRGBA64.clamp()将通道钳制到 [0, 1]再使用toStringHexRGB()等方法序列化如果你只是继续做色度计算例如配合 interpolateXYZ 做插值则建议保留原始线性值避免提前丢失色度信息。五、在 fast-colors 转换矩阵中的位置xyzToRGB()并非孤立存在microsoft/fast-colors命名空间完整索引见 fast-colors 总览页提供了一整套互相衔接的颜色空间转换函数。与 XYZ 直接相关的有函数签名说明文档rgbToXYZ(rgb)(rgb: ColorRGBA64) ColorXYZRGB → XYZ输入 alpha 通道被忽略rgbToXYZxyzToRGB(xyz, alpha)(xyz: ColorXYZ, alpha?: number) ColorRGBA64本文主题函数xyzToRGBxyzToLAB(xyz)(xyz: ColorXYZ) ColorLABXYZ → CIELABxyzToLABlabToXYZ(lab)(lab: ColorLAB) ColorXYZCIELAB → XYZlabToXYZlabToRGB(lab, alpha)(lab: ColorLAB, alpha?: number) ColorRGBA64LAB → RGBlabToRGBlchToRGB(lch, alpha)(lch: ColorLCH, alpha?: number) ColorRGBA64LCH → RGBlchToRGBinterpolateXYZ(position, left, right)—在 XYZ 空间按 position 插值两个颜色interpolateXYZ由此可以读出三条实用要点往返转换rgbToXYZ()与xyzToRGB()互为逆运算且rgbToXYZ()的 Remarks 明确说明The alpha channel of the input is ignored输入 alpha 通道被忽略——即往返时透明度不保留重建时需通过xyzToRGB的第二参数重新指定间接路径LAB/LCH → RGB 的转换labToRGB、lchToRGB从文档结构看均经过 XYZ 空间ColorLAB/ColorLCH文档同样声明基于同一组 D65 白点常量因此 LAB/LCH 颜色转 RGB 后同样可能出现超 [0,1] 的通道值处理策略与xyzToRGB一致白点一致性ColorLAB、ColorLCH、ColorXYZ三个类的文档均声明使用 D65 2 度白点 (0.95047, 1.0, 1.08883)跨函数组合使用时无需自行换算白点。六、最小使用示例与常见检查点基于上述文档给出的类型信息一次典型的调用与后处理如下仅依据文档声明的 API 形态给出非仓库内现成示例import { ColorXYZ, ColorRGBA64, xyzToRGB, rgbToXYZ } from microsoft/fast-colors; // 1) 从已有 RGB 颜色构造 XYZalpha 会被忽略 const white new ColorRGBA64(1, 1, 1, 1); const xyz rgbToXYZ(white); // 2) XYZ - RGB显式指定 alpha const rgb xyzToRGB(xyz, 0.8); // 3) 若结果用于 CSS 输出先钳制再序列化 const safe rgb.clamp(); console.log(safe.toStringHexRGBA()); // #RRGGBBAA使用该函数时的检查点清单输入 alpha 是否保留rgbToXYZ()忽略 alpha往返后需经xyzToRGB(xyz, alpha)的第二参数补回越界通道对超 sRGB 色域的输入检查结果r/g/b是否超出 [0, 1]需要屏幕上色时调用clamp()需要继续色度计算时保留原值白点假设与外部工具/库比对数值时确认对方同样采用 D65 2 度白点 (0.95047, 1.0, 1.08883)避免混用 D50 等其他白点导致的系统偏差精度处理ColorXYZ与ColorRGBA64均提供roundToPrecision(precision)方法跨工具传递浮点数时可统一精度减少舍入噪声。七、相关文档索引主题仓库内文档路径xyzToRGB 函数本文主体sites/website/src/docs/1.x/api/fast-colors.xyztorgb.mdfast-colors 命名空间总览类/函数/接口全表sites/website/src/docs/1.x/api/fast-colors.mdColorXYZ 类D65 白点说明sites/website/src/docs/1.x/api/fast-colors.colorxyz.mdColorRGBA64 类64 位通道与序列化方法sites/website/src/docs/1.x/api/fast-colors.colorrgba64.mdrgbToXYZ逆转换sites/website/src/docs/1.x/api/fast-colors.rgbtoxyz.mdxyzToLABXYZ → LABsites/website/src/docs/1.x/api/fast-colors.xyztolab.mdinterpolateXYZXYZ 空间插值sites/website/src/docs/1.x/api/fast-colors.interpolatexyz.md以上文档均带有automatically generated by API Documenter的标注属于 FAST 1.x 版本1.x API 体系的接口契约适用于使用microsoft/fast-colors1.x 的 FAST 设计系统场景本文档集不包含fast-colors的运行时源码若需核对具体转换矩阵的数值实现建议以该包发布版本中的源码为准。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST 1.x microsoft/fast-colorstemperatureToRGB() 色温转 RGB 颜色函数详解FAST 1.x microsoft/fast colorstemperatureToRGB 色温转 RGB 颜色函数详解 在 FAST 1.x 的 mi前端UI组件microsoft/fast-colors 1.x rescale() 函数详解将一组颜色外推为更大调色板的工具microsoft/fast colors 1.x rescale 函数详解将一组颜色外推为更大调色板的工具 本篇基于 FAST 1.x 版本 micro前端UI组件FAST 1.x fast-colorsQuantizeConfig.significantBits 参数——颜色量化精度与直方图内存的权衡FAST 1.x fast colorsQuantizeConfig.significantBits 参数——颜色量化精度与直方图内存的权衡 本文围绕 FAS前端UI组件上一篇CaisheniOS支付卡UI验证器的终极指南 - 10分钟快速集成完整教程下一篇Mootdx通达信数据接口完整指南Python量化投资必备工具创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表