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

黑板报呀

发布于 2022-8-12 07:58

浏览

3收藏

看到前几天鸿蒙官网更新了新的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');
   }
}

设置颜色选择器的逻辑：
1，添加一个颜色选择条，设置默认7中颜色。

2，给颜色旋转条添加事件，获取坐标值 createImageData

3，计算坐标点的颜色值，设置属性createLinearGradient的 gradient.addColorStop(0,'#00ffff');
4，选择后默认设置两个，一个是当前选择颜色，另一个是黑色透明的渐变

5，获取颜色值对其他界面渲染

三，实现效果
HarmonyOS应用开发：鸿蒙通用属性，渐变颜色的实现！-鸿蒙开发者社区