当前位置：首页 > 科技观察

OpenHarmony-基于ArkUI的Hue滑块组件（JS）

时间：2023-03-13 17:55:12 科技观察

了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言由于项目需要，和这个组件目前还没有社区其他童鞋写过，想着自己造个轮子，帮OpenHarmony做个生态。其实组件的基本功能已经实现了，只是还不够理想。后续会进行维护和更新，继续完善更多功能。开发环境说明工具版本：OpenHarmonyDevEcoStudio3.0Beta3SDK版本：3.0.0.901(APIVersion8Beta3)组主要组件：组件名称yg-slider显示效果属性属性名称类型默认值函数g-colorArray[]渐变色值组,eg:#ff9800stepNumber20步长，g-color属性中每两个渐变色之间的步长，步长越大越准确，渲染压力越大show-cardBooleanfalse是否显示色卡组件事件属性nametype返回值备注get-resultFunction{num:String,rgbColor:String,hexColor:String,hex:Object}num:当前滑块下标值,rgbColor:rgb颜色值【rgb(0,0,0)】,hex颜色value【##ff9800】,hex:R,G,B对应十六进制的十六进制值调用实现hml中需要引用的元素导入组件。

jsscheduled中的参数传递和绑定事件。从“../../common/utils/log”导入日志constlg=newLog('indexpage');//你可以传入一个值作为页面的标识符exportdefault{data:{gColor:['#FF0000','#FFE300','#74FF00','#00FFA6','#00FDFF','#0034FC','#4200FF','#BC00FF','#FD00FF','#FF0000'],步骤:20,showCard:true,},onInit(){},getResult(res){lg.info(res._detail)},}gColor为渐变色值组，需要与css样式保持一致。我尝试绑定linear-gradient到内联样式，但是报错提示无法绑定渐变的内联样式。此问题已在问题中提出：https://gitee.com/openharmony/docs/issues/I5F8KC?from=project-issue。实现思路是根据UI写样式。绑定滑块的触摸事件。获取滑块的长度和位置，与当前触摸的位置进行比较，计算得到滑块的位置。封装了两种颜色之间的渐变值集合。根据渐变值组的总长度设置为滑块的刻度值。滑动滑块到某个位置计算位置比例，得到渐变值组对应的颜色值，赋给色卡显示。实现过程1、根据UI编写页面和样式ygSlider.hml页面：

ygSlider.css：.yg-slider{width:320px;}.yg-slider-bg{background:linear-gradient(90deg,#FF0000，#FFE300，#74FF00，#00FFA6，#00FDFF，#0034FC，#4200FF，#BC00FF，#FD00FF，#FF0000）；宽度：100%；高度：4px；border-radius:16px;}.yg-slider-button{/*设置热点*/position:absolute;顶部：-16px；转换：translateX(-18px);左：0%；宽度：36px；高度：36px；背景色：rgba(52,0,250,.5);边界半径：16px；显示：弹性；证明内容：居中；对齐项目：中心；}.yg-slider-button-child{边框半径：8px；宽度：16px；高度：16px；背景色：rgba(255,255,255,1)；box-shadow:001px1pxrgba(0,0,0,.2);}.yg-slider-color{position:absolute;顶部：-80px；转换：translateX(-20px)；宽度：40px；高度：40px；边界半径：40px；background-color:red;}2.绑定滑块的触摸事件ygSlider.hml:ygSlider.js：在sliderStart事件中，通过getBoundingClientRect()方法获取滑块的宽高和位置sliderStart(){constt=this.$refs.ygSlider.getBoundingClientRect();this.startX=t.left;this.endX=t.left+t.width;this.sliderW=t.width;}，在sliderMove事件中设置pct为滑动按钮的位置，并保证按钮不超过滑动条sliderMove(e){letx=e.touches[0].globalX;让s_x=x-this.startX;如果(x<=this.startX){this.pct=0;}elseif(x>=this.endX){this.pct=100;}else{this.pct=s_x*100/this.sliderW;}},3,封装了获取两种颜色之间渐变值组的方法。封装颜色渐变之间的值方法，带有注释。这个方法是在之前的一个组件中实现的，如果需要的话，就拿过来修改一下。传送门：HarmonyOS基于JSAPI自定义封装渐变环进度条组件。/***@description:封装颜色渐变之间的值*@param{String}startColor起始颜色hex*@param{Number}endColor结束颜色hex*@param{Number}stepgradientprecision*@return{Array}*/gradientColor(startColor,endColor,step){letstartRGB=this.hexToRgb(startColor);//转换为rgb数组方式letendRGB=this.hexToRgb(endColor);letsR=(endRGB[0]-startRGB[0])/step;//总差letsG=(endRGB[1]-startRGB[1])/step;让sB=(endRGB[2]-startRGB[2])/step；varcolorArr=[];for(vari=0;i-1){varaNum=rgb.replace(/#/,'').toUpperCase().split('');if(aNum.length===6){return{R:aNum[0]+aNum[1],G:aNum[2]+aNum[3],B:aNum[4]+aNum[5]};}elseif(aNum.length===3){return{R:aNum[0]+aNum[0],G:aNum[1]+aNum[1],B:aNum[2]+aNum[2]};}else{返回rgb;}}elseif(/^(rgb|RGB)/.test(rgb)){letaColor=rgb.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");让R=this.getHexNumber(颜色[0]);让G=this.getHexNumber(aColor[1]);让B=this.getHexNumber(aColor[2]);返回{R，G，B}；}else{返回rgb;}},getHexNumber(str){if(typeofstr==='string'){returnNumber(str).toString(16).padStart(2,'0').toUpperCase()}else{returnstr;}}因为传入了两个以上的颜色组，所以做了一个循环onPageShow(){this.setColorList();},//根据传入的颜色生成渐变色值集setColorList(){for(leti=0;i=this.endX){this.pct=100;}else{this.pct=s_x*100/this.sliderW;}//计算当前刻度值letr=this.getValue(s_x);//设置slider按钮滑动到的位置的颜色值。this.nowColor=this.colorList[r];//最后将每个滑块改变的值抛给父组件调用进行相应的处理),十六进制:this.colorToHex(this.nowColor),})},sliderEnd(e){让x=e.touches[0].globalX;让s_x=x-this.startX;让r=this.getValue(s_x);this.nowColor=this.colorList[r];this.$emit('getResult',{num:r,rgbColor:this.nowColor,hexColor:this.rgbToHex(this.nowColor),hex:this.colorToHex(this.nowColor),})},//获取当前比例值getValue(s_x){letr=Math.ceil(this.maxValue*s_x/this.sliderW);如果（r<=0）{r=0;}elseif(r>=this.maxValue){r=this.maxValue;}returnr;},代码地址#夏日挑战赛#openHarmony-基于ArkUI实现hue滑块组件(JS)难点总结：逻辑比较简单，主要难点是计算两个颜色值的渐变颜色值组之间。并计算当前的比例尺，这里需要注意三个值：滑块按钮的当前位置0%-100%滑块条的长度，例如320px的滑块的比例尺需要计算和转换他们三个。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。

上一篇：【现代C++】深入理解左值和右值

下一篇：OLED屏和LCD屏有什么区别？谁更好？终于想通了

OpenHarmony-基于ArkUI的Hue滑块组件（JS）相关文章

最新推荐

猜你喜欢