HarmonyOS应用开发:鸿蒙渐变颜色的实现!可实现颜色选择器!

·  阅读 418
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');
   }
}
复制代码

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

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

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

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

三,实现效果

四,总结

1,静态设置线性渐变 (linear-gradient)和重复线性渐变 (repeating-linear-gradient)两种渐变属性 可以实现简单的颜色渲染效果。

2,实现颜色选择器需要createImageData通过坐标获取颜色值,设置 属性gradient.addColorStop(0,'#00ffff'); 来渲染选择颜色的渐变效果

原创不易,有用就关注一下。要是帮到了你 就给个点赞吧,多谢支持。
觉得不错的小伙伴,记得帮我 点个赞和关注哟,笔芯笔芯~**

有问题请留言或者私信。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改