像素级渲染生成色彩图Colorful ColorMapView颜色轮实现原理深度解析【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOSColorful 是一款用 Swift 编写的 iOS 取色器Color Picker库其中的颜色轮由ColorMapView通过像素级渲染逐点绘制生成支持 sRGB 与扩展 sRGBDisplay P3宽色域。本文将带你深入解析这个圆形 HSB 颜色轮从数学模型到像素渲染的完整实现原理即使你是 iOS 新手也能轻松看懂。一、Colorful 是什么一个高颜值的 iOS 取色器Colorful 的取色器由四部分组合而成颜色轮ColorMapView圆形区域横轴为色相Hue、半径为饱和度Saturation亮度滑杆BrightnessSlider右侧竖条上下滑动调节明度Brightness颜色轮光标ColorMapCursor跟随手指移动的圆点指示器⚙️容器ColorPicker继承自UCtrlUIControl负责手势分发与事件回调整个 UI 的组装逻辑在 ColorPicker.swift 中各子视图分别位于Colorful/Classes/目录下。二、核心原理 1圆形颜色轮的数学模型颜色轮的本质是一次坐标系变换把手指在圆盘上的位置直角坐标转换为 HSB 颜色色相 饱和度。这部分由ColorMapView.swift底部的HRColorMapModel类完成。位置 → 颜色的映射规则非常直观饱和度 距圆心距离 × 2距离超过半径 0.5 时封顶为 1因此圆心是纯色中心色相 指针与圆心连线的角度顺时针 0~360°对应 HSB 的 0~1 归一化色相用三角函数实现起来只有几行hypot()求半径、atan2()求角度再归一化到 0~2π 区间即可。颜色 → 位置则是它的逆运算用于程序化设置取色器初始颜色时定位光标半径 饱和度 ÷ 2角度 色相 × (−2π)用cos/sin还原出圆盘上的坐标最后加上圆心偏移 (0.5, 0.5)这套正逆映射保证了「手指点哪里就取到什么颜色设置什么颜色光标就停在哪里」二者严格一致。三、核心原理 2像素级渲染逐点画出颜色图颜色轮图片不是截图、不是渐变图层而是实时逐像素计算生成的。关键方法是createColorMapImage(size:model:)位于 ColorMapView.swift 第 31~67 行分配原始内存为宽 × 高 × 3字节的 RGB 数据申请一块CFMutableData缓冲区双重循环遍历每个像素对每个 (x, y) 坐标先归一化为 0~1 的圆盘坐标再调用上一步的HRColorMapModel.color(at:)算出该点对应的 HS 颜色换算为 RGB以亮度 1最亮为基准把 HS 颜色转换为 8bit 的 R/G/B 字节按行优先顺序写入缓冲区封装成 CGImage用CGDataProvider包装原始数据指定色彩空间后创建CGImage并设置shouldInterpolate: false禁止插值——这是保证颜色轮边缘色相过渡精准的关键细节最终这张 CGImage 被赋值给CALayer的contents属性显示在屏幕上并用CAShapeLayer的圆形路径作为mask把正方形渲染结果裁成圆盘形状。 为什么选择逐像素渲染因为 HSB 颜色轮是非线性渐变任何简单的渐变图层或 Core Graphics 路径着色都无法精确还原角度色相、半径饱和度的数学关系只有逐点计算才能保证所见即所得。四、宽色域支持sRGB 与扩展 sRGBColorful 的一大亮点是同时支持两种色彩空间由HRColorSpace枚举定义见 ColorfulEntity.swift色彩空间底层实现适用场景.sRGBCGColorSpace.sRGB标准色彩兼容性最好.extendedSRGBCGColorSpace.displayP3覆盖更广的 P3 色域颜色更鲜艳渲染时会为CGImage选择对应的色彩空间颜色与 UIKit 的互转则集中在HSVColor的扩展中完成——uiColor属性会根据当前色彩空间自动选择UIColor(hue:...)还是UIColor(displayP3Red:...)构造器确保 P3 颜色不会被错误压缩到 sRGB。五、亮度如何影响颜色轮一个巧妙的透明度技巧很多人会疑惑颜色轮上明明只渲染了亮度1 的最亮颜色那亮度是怎么生效的答案藏在ColorMapView的set(brightness:)方法里颜色轮图片始终保持最亮状态调节亮度时直接把整个colorMap图层的opacity设为亮度值图层下方垫了一个黑色背景层因此透明度越高亮度越低颜色就越黑这个黑色背景 透明度的技巧避免了亮度变化时重新逐像素渲染整张图性能开销几乎为零。而右侧亮度滑杆BrightnessSlider.swift则用 20 个小色块实时展示当前 HS 颜色在不同亮度下的梯度方便用户预览。六、触摸交互从手指坐标到颜色的完整链路当你在颜色轮上滑动时ColorPicker的handleColorMapPan(pan:)会启动如下链路手指坐标通过normalize()换算为 0~1 的归一化圆盘坐标HRColorMapModel.color(at:)算出新的色相与饱和度合并当前亮度得到完整HSVColormapColorToView()同步刷新光标位置、亮度滑杆色块、以及颜色轮透明度触发valueChanged事件并伴随触觉反馈UISelectionFeedbackGenerator其中光标的位置又用到「颜色 → 位置」的逆映射形成完整的闭环。七、总结Colorful 的ColorMapView颜色轮实现堪称小型教学范本核心可以归纳为三点数学模型先行用极坐标角度色相半径饱和度定义颜色轮正逆映射保证双向精确️像素级渲染逐点计算 RGB 写入内存缓冲区生成无插值的CGImage圆形 mask 裁出圆盘⚡性能小聪明亮度变化只改图层透明度宽色域切换交给色彩空间枚举统一管理如果你想在自己的 iOS 项目中加入一个美观、支持宽色域、带触觉反馈的取色器Colorful 是一个非常值得参考的轻量级选择——它的核心源码不足 500 行阅读Colorful/Classes/下的六个文件即可掌握全部实现细节。【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
像素级渲染生成色彩图：Colorful ColorMapView颜色轮实现原理深度解析
像素级渲染生成色彩图Colorful ColorMapView颜色轮实现原理深度解析【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOSColorful 是一款用 Swift 编写的 iOS 取色器Color Picker库其中的颜色轮由ColorMapView通过像素级渲染逐点绘制生成支持 sRGB 与扩展 sRGBDisplay P3宽色域。本文将带你深入解析这个圆形 HSB 颜色轮从数学模型到像素渲染的完整实现原理即使你是 iOS 新手也能轻松看懂。一、Colorful 是什么一个高颜值的 iOS 取色器Colorful 的取色器由四部分组合而成颜色轮ColorMapView圆形区域横轴为色相Hue、半径为饱和度Saturation亮度滑杆BrightnessSlider右侧竖条上下滑动调节明度Brightness颜色轮光标ColorMapCursor跟随手指移动的圆点指示器⚙️容器ColorPicker继承自UCtrlUIControl负责手势分发与事件回调整个 UI 的组装逻辑在 ColorPicker.swift 中各子视图分别位于Colorful/Classes/目录下。二、核心原理 1圆形颜色轮的数学模型颜色轮的本质是一次坐标系变换把手指在圆盘上的位置直角坐标转换为 HSB 颜色色相 饱和度。这部分由ColorMapView.swift底部的HRColorMapModel类完成。位置 → 颜色的映射规则非常直观饱和度 距圆心距离 × 2距离超过半径 0.5 时封顶为 1因此圆心是纯色中心色相 指针与圆心连线的角度顺时针 0~360°对应 HSB 的 0~1 归一化色相用三角函数实现起来只有几行hypot()求半径、atan2()求角度再归一化到 0~2π 区间即可。颜色 → 位置则是它的逆运算用于程序化设置取色器初始颜色时定位光标半径 饱和度 ÷ 2角度 色相 × (−2π)用cos/sin还原出圆盘上的坐标最后加上圆心偏移 (0.5, 0.5)这套正逆映射保证了「手指点哪里就取到什么颜色设置什么颜色光标就停在哪里」二者严格一致。三、核心原理 2像素级渲染逐点画出颜色图颜色轮图片不是截图、不是渐变图层而是实时逐像素计算生成的。关键方法是createColorMapImage(size:model:)位于 ColorMapView.swift 第 31~67 行分配原始内存为宽 × 高 × 3字节的 RGB 数据申请一块CFMutableData缓冲区双重循环遍历每个像素对每个 (x, y) 坐标先归一化为 0~1 的圆盘坐标再调用上一步的HRColorMapModel.color(at:)算出该点对应的 HS 颜色换算为 RGB以亮度 1最亮为基准把 HS 颜色转换为 8bit 的 R/G/B 字节按行优先顺序写入缓冲区封装成 CGImage用CGDataProvider包装原始数据指定色彩空间后创建CGImage并设置shouldInterpolate: false禁止插值——这是保证颜色轮边缘色相过渡精准的关键细节最终这张 CGImage 被赋值给CALayer的contents属性显示在屏幕上并用CAShapeLayer的圆形路径作为mask把正方形渲染结果裁成圆盘形状。 为什么选择逐像素渲染因为 HSB 颜色轮是非线性渐变任何简单的渐变图层或 Core Graphics 路径着色都无法精确还原角度色相、半径饱和度的数学关系只有逐点计算才能保证所见即所得。四、宽色域支持sRGB 与扩展 sRGBColorful 的一大亮点是同时支持两种色彩空间由HRColorSpace枚举定义见 ColorfulEntity.swift色彩空间底层实现适用场景.sRGBCGColorSpace.sRGB标准色彩兼容性最好.extendedSRGBCGColorSpace.displayP3覆盖更广的 P3 色域颜色更鲜艳渲染时会为CGImage选择对应的色彩空间颜色与 UIKit 的互转则集中在HSVColor的扩展中完成——uiColor属性会根据当前色彩空间自动选择UIColor(hue:...)还是UIColor(displayP3Red:...)构造器确保 P3 颜色不会被错误压缩到 sRGB。五、亮度如何影响颜色轮一个巧妙的透明度技巧很多人会疑惑颜色轮上明明只渲染了亮度1 的最亮颜色那亮度是怎么生效的答案藏在ColorMapView的set(brightness:)方法里颜色轮图片始终保持最亮状态调节亮度时直接把整个colorMap图层的opacity设为亮度值图层下方垫了一个黑色背景层因此透明度越高亮度越低颜色就越黑这个黑色背景 透明度的技巧避免了亮度变化时重新逐像素渲染整张图性能开销几乎为零。而右侧亮度滑杆BrightnessSlider.swift则用 20 个小色块实时展示当前 HS 颜色在不同亮度下的梯度方便用户预览。六、触摸交互从手指坐标到颜色的完整链路当你在颜色轮上滑动时ColorPicker的handleColorMapPan(pan:)会启动如下链路手指坐标通过normalize()换算为 0~1 的归一化圆盘坐标HRColorMapModel.color(at:)算出新的色相与饱和度合并当前亮度得到完整HSVColormapColorToView()同步刷新光标位置、亮度滑杆色块、以及颜色轮透明度触发valueChanged事件并伴随触觉反馈UISelectionFeedbackGenerator其中光标的位置又用到「颜色 → 位置」的逆映射形成完整的闭环。七、总结Colorful 的ColorMapView颜色轮实现堪称小型教学范本核心可以归纳为三点数学模型先行用极坐标角度色相半径饱和度定义颜色轮正逆映射保证双向精确️像素级渲染逐点计算 RGB 写入内存缓冲区生成无插值的CGImage圆形 mask 裁出圆盘⚡性能小聪明亮度变化只改图层透明度宽色域切换交给色彩空间枚举统一管理如果你想在自己的 iOS 项目中加入一个美观、支持宽色域、带触觉反馈的取色器Colorful 是一个非常值得参考的轻量级选择——它的核心源码不足 500 行阅读Colorful/Classes/下的六个文件即可掌握全部实现细节。【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
