HarmonyOS应用开发：鸿蒙通用属性，渐变颜色的实现！

Posted 2022-08-18 开源基础软件社区官方

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HarmonyOS应用开发：鸿蒙通用属性，渐变颜色的实现！相关的知识，希望对你有一定的参考价值。

看到前几天鸿蒙官网更新了新的api CanvasGradient ，渐变颜色的组件，看了一下实现，发现通过样式的方式可以直接实现颜色的渐变效果，但是如果直接使用CanvasGradient会有一些问题，这里给大家实现一下样式的渐变效果和 CanvasGradient对象的介绍。

可能有人会问这个渐变样式可以干啥，其实我们常用的颜色选择器就能通过这种渐变来实现，通过渐变设置集中主要颜色的排序，通过旋转某一个坐标点来实现颜色的选择，更新对应的布局或者文字，或者识别出来颜色值。

每天学习一点点。

场景：

通过颜色渐变实现多个颜色的渐变共存，实现颜色选择器的思路。

下面我们开始今天的文章，还是老规矩，通过如下几点来说：

1，实现思路
2，代码解析
3，实现效果
3，总结

一，实现思路
添加canvas组件，静态设置线性渐变 (linear-gradient)和重复线性渐变 (repeating-linear-gradient)两种渐变属性设置颜色渐变（为啥说是静态设置因为个人验证目前只能设置css样式中，拿出来不生效），通过CanvasGradient动态设置渐变颜色。

二，代码解析

子组件：

1，hml文件

功能点：

1，设置默认渐变自上到下

2，设置幅度夹角渐变

3，设置重复渐变

4，设置带有透明度的渐变-为实现选择一种颜色后的透明度

<div class="container">
    <text style="font-size: 20px;">默认渐变方向为从上向下渐变</text>
    <canvas class="gradient"></canvas>

    <text style="font-size: 20px;">45度夹角渐变</text>
    <canvas class="gradient2"></canvas>

    <text style="font-size: 20px;">重复渐变</text>
    <canvas class="gradient3"></canvas>

    <text style="font-size: 20px;">设置方向从左向右渐变</text>
    <div class="container2">
        <!--设置选择颜色的数值-->
        <canvas ref="canvas" class="gradient4" style="background: linear-gradient(rgb(255,0,0), rgba(0, 0, 0,0));"></canvas>
        <canvas class="gradient5" ontouchstart="ontouchstart" ontouchend="ontouchend"></canvas>
    </div>
</div>

2，css文件

1，渐变颜色都设置7中最主要的颜色

2，重复颜色设置两种颜色

.container 
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;


.gradient 
    width: 100%;
    height: 120px;
    /* 从顶部开始向底部由红色向绿色渐变 */
    background: linear-gradient(rgb(255,0,0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));

.gradient2 
    width: 100%;
    height: 120px;
/* 45度夹角，从红色渐变到绿色 */
    background: linear-gradient(45deg, rgb(255,0,0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));

.gradient3 
    width: 100%;
    height: 120px;
/* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */
    background: repeating-linear-gradient(to right, rgb(255, 140, 0) 30px,rgba(187, 0, 238, 0.50) 60px);

.container2
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

.gradient4 
    width: 250px;
    height: 320px;

.gradient5 
    width: 20px;
    height: 320px;
    margin-right: 10px;
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
    background: linear-gradient(/*to right,*/ rgb(255,0,0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));

3，js文件

export default 
    data: 
        title: World,
    ,
    onShow()
        this.setSelectColor();
    ,
    ontouchstart(msg) 
        // 获取颜色选择条的坐标，通过坐标设置颜色
        console.info(`on touch start, point is: $msg.touches[0].globalX`);
        console.info(`on touch start, data is: $msg.touches[0].globalY`);
   ,
   setSelectColor()
       // 获取canvas
       const el =this.$refs.canvas;
       // 设置2d
       const ctx =el.getContext(2d);
       // 设置LinearGradient对象
       const gradient = ctx.createLinearGradient(0,0,100,0);
       // 设置渐变颜色
       gradient.addColorStop(0,#00ffff);
       gradient.addColorStop(1,#ffff00);