自定义颜色选择器

[{"insert":"此demo主要思路是基于色相，饱和度，明亮度三种参数计算出具体的颜色rgb值，没有利用其他组件，只由坐标计算出颜色，在原生小程序中也能得出颜色值。\n具体实现方法："},{"attributes":{"link":"https://blog.csdn.net/jh035/article/details/128128139?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-128128139-blog-120775906.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-128128139-blog-120775906.235%5Ev38%5Epc_relevant_sort_base2&utm_relevant_index=10","underline":true},"insert":"https://blog.csdn.net/jh035/article/details/128128139?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-128128139-blog-120775906.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-128128139-blog-120775906.235%5Ev38%5Epc_relevant_sort_base2&utm_relevant_index=10"},{"insert":"\n\n1.色相柱\n给色相柱设置基本的样式，主要设置背景颜色为渐变，\n"},{"attributes":{"bold":true},"insert":"linear-gradient(180deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00)，"},{"insert":"\n基于滑动块的位置计算色相值\n"},{"insert":{"image":"R10580997-1852bd0e248934cf8cd944502af29393_1878_35_236.png"}},{"insert":{"image":"R10580997-0c90254052f69cfa954db65ae27774c6_48182_1444_276.png"}},{"insert":"\n\n2.饱和度和明亮度\n将面板的背景效果设置为渐变\n"},{"attributes":{"bold":true},"insert":"linear-gradient(to top, #000, transparent), linear-gradient(to right, #FFF, transparent)"},{"insert":"\n"},{"insert":{"image":"R10580997-8fb8c10de00dd5b91bca36982bbfacc0_7634_328_235.png"}},{"insert":"\n加入基本背景颜色:红色 #f00\n"},{"insert":{"image":"R10580997-3553eff144ba8d41a3177bb4b408eefd_90004_330_228.png"}},{"insert":"\n\n基于滑动块在面板中的位置计算出饱和度和明亮度\n"},{"insert":{"image":"R10580997-4a9e37bcf8dbaa4c2b546533340136c7_59479_903_438.png"}},{"insert":"\n\n3.计算颜色的rgb值\n"},{"insert":{"image":"R10580997-b0af6e32fb7c3e90490b9272d9fdcf2c_120590_582_534.png"}},{"insert":"\n"}]