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

发布于 2022-7-10 16:31
浏览
1收藏

大家好,我们是HarmonyOS开发者创新大赛的参赛作品《主题协作器》。这一期内容,主要带大家了解一下,如何制作一个简单实用的HarmonyOS取色器组件。
『鸿蒙开发笔记』HarmonyOS色彩选取器的简单实现-开源基础软件社区
HarmonyOS提供了自定义对话框组件的能力,引入CommonDialog,我们可以自定义各种不同类型的对话框,这一次的色彩选取器,也是基于它完成哒!色彩选取器的样式有很多,这一期我们就来讲讲基于HSV的色彩圆盘方案:
1、首先我们需要一个大致的Layout,圆盘基础色圈为最下图层,用以体现色度值;中心发光渐变圆盘,为中间图层,用于体现亮度;最上层则为调节按钮,根据按钮坐标来计算色度与亮度。圆盘的下面再配上一份Slider滑动器,用于控制浓度!
『鸿蒙开发笔记』HarmonyOS色彩选取器的简单实现-开源基础软件社区
2.然后就可以开始定制我们的对话框组件了,我们需要简单的整理一下构造函数,这样方便我们的类与内部的CommonDialog快速交互,也方便后续快速搭建色彩选取对话框。
『鸿蒙开发笔记』HarmonyOS色彩选取器的简单实现-开源基础软件社区
3.基础UI有了,基本构造函数有了,那就开始制作show函数吧,即对话框展示函数。为确保数据稳定,正式展示对话框之前,需要先将色彩还原为预设值。由于横竖屏环境不同,因此这里也针对不同的设备比例,制定了不同的显示大小与显示位置!DatabaseManager.getInt(“ColorDialog_RgbMode”,0)==1?initDialogRgb():initDialog(),是因为我们的项目已经同时支持调色圆盘与RGB两种调色方案了,因此会根据上次模式来加载不同的调色布局,但这一期我们只讲调色盘模式。
『鸿蒙开发笔记』HarmonyOS色彩选取器的简单实现-开源基础软件社区
4.终于,到了我们的正式环节,也就是页面内的具体逻辑。需要注意的是,圆盘内的调节按钮是不能超出圆盘边缘界限的!我们需要将圆盘拆分为四个坐标系,并记录按钮与圆盘中心原点的相对位置,然后根据三角函数、实际所处的坐标系,来计算修复x或y相对坐标值。
『鸿蒙开发笔记』HarmonyOS色彩选取器的简单实现-开源基础软件社区
按钮不会超界了,接下来就是根据坐标,计算色度和亮度了。方法其实也很简单,我们有按钮的坐标,有圆盘中心原点的坐标,就能计算出按钮相对原点的x和y的距离,然后根据勾股定理就能算出,调节按钮与圆盘中心的距离,这个距离与圆盘半径的比值也就是亮度。色度的话,则可以调用java内自带的Math函数根据这些坐标计算夹角,圆盘的0-360度刚好与360个色度对应!
『鸿蒙开发笔记』HarmonyOS色彩选取器的简单实现-开源基础软件社区
接下来,是完成浓度调节的实现,这个就更容易了,直接记录Slider组件的具体值,并代入HSV便可得到最终选取的色彩!
5.最后,讲解的是如何取回用户录入的色彩。这一块也非常的简单,我们在show的函数里给对话框加入过一个DestroyListener,现在只需要在DestroyListener里调用getColorValue(),然后将颜色传递到需要的对象上,就能取回颜色啦!如果需要自动跟随旋转横竖屏,重新载入取色器时记忆上次色彩,也可以打造相关saveTempColorValue()函数哦!
『鸿蒙开发笔记』HarmonyOS色彩选取器的简单实现-开源基础软件社区
好啦,这样一个简单的HarmonyOS色彩选取器就实现了,大家都学会了吗?我们下一期再见啦~
*本项目已在Gitee上开源,开源地址为https://gitee.com/dawnlighti/ThemesEditor_OpenSourceProject,如果仍有不理解,或者想直接使用我们的取色器解决方案,可以在开源项目的Versions-172版本的java目录的userinterface下找到ColorDialog类

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-7-10 16:31:25修改
3
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐