『鸿蒙开发笔记』HarmonyOS色彩选取器的简单实现 原创 精华

大家好，我们是HarmonyOS开发者创新大赛的参赛作品《主题协作器》。这一期内容，主要带大家了解一下，如何制作一个简单实用的HarmonyOS取色器组件。

HarmonyOS提供了自定义对话框组件的能力，引入CommonDialog，我们可以自定义各种不同类型的对话框，这一次的色彩选取器，也是基于它完成哒！色彩选取器的样式有很多，这一期我们就来讲讲基于HSV的色彩圆盘方案：
1、首先我们需要一个大致的Layout，圆盘基础色圈为最下图层，用以体现色度值；中心发光渐变圆盘，为中间图层，用于体现亮度；最上层则为调节按钮，根据按钮坐标来计算色度与亮度。圆盘的下面再配上一份Slider滑动器，用于控制浓度！

2.然后就可以开始定制我们的对话框组件了，我们需要简单的整理一下构造函数，这样方便我们的类与内部的CommonDialog快速交互，也方便后续快速搭建色彩选取对话框。

3.基础UI有了，基本构造函数有了，那就开始制作show函数吧，即对话框展示函数。为确保数据稳定，正式展示对话框之前，需要先将色彩还原为预设值。由于横竖屏环境不同，因此这里也针对不同的设备比例，制定了不同的显示大小与显示位置！DatabaseManager.getInt(“ColorDialog_RgbMode”,0)==1?initDialogRgb():initDialog()，是因为我们的项目已经同时支持调色圆盘与RGB两种调色方案了，因此会根据上次模式来加载不同的调色布局，但这一期我们只讲调色盘模式。

4.终于，到了我们的正式环节，也就是页面内的具体逻辑。需要注意的是，圆盘内的调节按钮是不能超出圆盘边缘界限的！我们需要将圆盘拆分为四个坐标系，并记录按钮与圆盘中心原点的相对位置，然后根据三角函数、实际所处的坐标系，来计算修复x或y相对坐标值。

按钮不会超界了，接下来就是根据坐标，计算色度和亮度了。方法其实也很简单，我们有按钮的坐标，有圆盘中心原点的坐标，就能计算出按钮相对原点的x和y的距离，然后根据勾股定理就能算出，调节按钮与圆盘中心的距离，这个距离与圆盘半径的比值也就是亮度。色度的话，则可以调用java内自带的Math函数根据这些坐标计算夹角，圆盘的0-360度刚好与360个色度对应！

接下来，是完成浓度调节的实现，这个就更容易了，直接记录Slider组件的具体值，并代入HSV便可得到最终选取的色彩！
5.最后，讲解的是如何取回用户录入的色彩。这一块也非常的简单，我们在show的函数里给对话框加入过一个DestroyListener，现在只需要在DestroyListener里调用getColorValue()，然后将颜色传递到需要的对象上，就能取回颜色啦！如果需要自动跟随旋转横竖屏，重新载入取色器时记忆上次色彩，也可以打造相关saveTempColorValue()函数哦！

好啦，这样一个简单的HarmonyOS色彩选取器就实现了，大家都学会了吗？我们下一期再见啦~
*本项目已在Gitee上开源，开源地址为https://gitee.com/dawnlighti/ThemesEditor_OpenSourceProject，如果仍有不理解，或者想直接使用我们的取色器解决方案，可以在开源项目的Versions-172版本的java目录的userinterface下找到ColorDialog类