介绍
本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播，
效果图预览
使用说明
直接进入页面，对图片进行左右滑动，或者等待几秒，图片会自动轮播,图片切换后即可改变背景颜色。
实现思路
- 在事件onAnimationStart切换动画过程中通过Image模块相关能力，获取图片颜色平均值，使用effectKit库中的ColorPicker智能取色器进行颜色取值。
const context = getContext(this);//获取resourceManager资源管理器const resourceMgr: resourceManager.ResourceManager = context.resourceManager;const fileData: Uint8Array = await resourceMgr.getMediaContent(this.imgData[targetIndex]);//获取图片的ArrayBufferconst buffer = fileData.buffer;//创建imageSourceconst imageSource: image.ImageSource = image.createImageSource(buffer);//创建pixelMapconst pixelMap: image.PixelMap = await imageSource.createPixelMap();effectKit.createColorPicker(pixelMap, (err, colorPicker) => {//读取图像主色的颜色值，结果写入Colorlet color = colorPicker.getMainColorSync();})
- 同时通过接口animateTo开启背景颜色渲染的属性动画。全局界面开启沉浸式状态栏。
animateTo({ duration: 500, curve: Curve.Linear, iterations: 1 }, () => {//将取色器选取的color示例转换为十六进制颜色代码this.bgColor = "#" + color.alpha.toString(16) + color.red.toString(16) + color.green.toString(16) + color.blue.toString(16);})
- 通过属性linearGradient设置背景色渲染方向以及渲染氛围。
linearGradient({//渐变方向direction: GradientDirection.Bottom,//数组末尾元素占比小于1时，满足重复着色的效果colors: [[this.bgColor, 0.0], [Color.White, 0.5]]})
工程结构&模块类型
effectKit // har类型|---pages|---|---MainPage.ets // 视图层-场景列表页面
为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05
《鸿蒙开发学习手册》：
如何快速入门：https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识：https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发：https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向
