HarmonyOS实战开发-如何通过BlendMode属性来实现挂件和图片的混合

介绍

本实例主要通过BlendMode属性来实现挂件和图片的混合,通过更改不同的混合参数,能够展示不同的混合效果。

效果图预览

在这里插入图片描述

使用说明:

1.进入页面,点击挂件区域,进行挂件和图片的混合,点击不同的挂件,展示不同的挂件和混合效果,再次点击取消混合效果以及挂件。

实现思路

首先将挂件Image组件绑定BlendMode属性,currentBlendMode控制混合模式更改的变量,初始化为BlendMode.NONE,不进行任何混合操作, 点击挂件区域,切换不同的混合模式达到不同的混合效果。

1.挂件Image组件绑定BlendMode属性,属性值初始化为BlendMode.NONE。

 Image(this.currentUserPendant).width($r('app.integer.blend_mode_image_size')).height($r('app.integer.blend_mode_image_size')).borderRadius($r('app.integer.blend_mode_image_border_radius')).blendMode(this.currentBlendMode, BlendApplyType.OFFSCREEN)

2.点击挂件区域,通过currentBlendMode变量来改变混合模式。

if (this.currentBlendMode === item.blendMode) {this.currentBlendMode = BlendMode.DST;this.currentUserPendant = '';this.currentIndex = -1;return;
}
// TODO:知识点:点击切换混合模式
this.currentIndex = index;
this.currentUserPendant = item.pendantImage;
this.currentBlendMode = item.blendMode;

高性能知识点

数据通过LazyForEach进行遍历。

工程结构&模块类型

blendmode                                // har类型
|---model
|   |---DataSource.ets                   // 数据资源
|   |---DataType.ets                     // 数据类型
|   |---MockData.ets                     // 模拟数据
|---view
|   |---BlendModeView.ets                // 视图层-应用主页面

模块依赖

本实例依赖common模块来实现日志的打印、资源 的调用、依赖动态路由模块来实现页面的动态加载。

如果大家还没有掌握鸿蒙,现在想要在最短的时间里吃透它,我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》:

如何快速入门:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

在这里插入图片描述

开发基础知识:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF:https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/7581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

miniforge:Anaconda的代餐

诸神缄默不语-个人CSDN博文目录 总之conda / anaconda / miniforge / mamba都是差不多一个系列的Python环境管理工具。我一般自己用的话会用Anaconda,我之前也写过教程:Anaconda教程(持续更新ing…) miniforge是因为我队友用&am…

Golang 开发实战day12 - Pointer

🏆个人专栏 🤺 leetcode 🧗 Leetcode Prime 🏇 Golang20天教程 🚴‍♂️ Java问题收集园地 🌴 成长感悟 欢迎大家观看,不执着于追求顶峰,只享受探索过程 Golang 开发实战day12 - 指针…

Python实验代码定时调起

Python代码实验调参需要等待1小时运行完成,自动将提前设置的5组参数(每组参数有8个)间隔1小时之后让Python代码再次自动依次调起运行其中的一组参数,每次跑完将实验结果写一个文件在本地存储通过邮件发送运行结果到指定QQ邮箱 im…

国家电网某地电力公司网络硬件综合监控运维项目

国家电网某地电力公司是国家电网有限公司的子公司,负责当地电网规划、建设、运营和供电服务,下属多家地市供电企业和检修公司、信息通信公司等业务支撑实施机构。 项目现状 随着公司信息化建设加速,其信息内网中存在大量物理服务器、存储设备…

Linux动态库与静态库解析

文章目录 一、引言二、C/C源文件的编译过程三、静态库1、静态库的定义和原理2、静态库的优缺点3、静态库的创建和使用a、创建静态库b、使用静态库 四、动态库1、动态库的定义和原理2、动态库的优缺点3、动态库的创建和使用示例a、创建动态库b、使用动态库 五、动静态库的比较 一…

Python使用多进程和多线程处理数据

多进程适合于计算密集型任务和需要大量计算资源的场景,而多线程适合于I/O密集型任务和需要快速上下文切换的场景。 多线程版本 import time import concurrent.futures from tqdm import tqdmfile_list [file1.txt, file2.txt, file3.txt]*10def process_file(fi…

最长连续序列(Lc128)——哈希表

给定一个未排序的整数数组 nums ,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1: 输入:nums [100,4,200,1,3,2] 输出:4 …

Pytorch学习笔记——神经网络基本框架

一、神经网络是什么 神经网络在人工智能和深度学习的领域,一般称为人工神经网络,即ANN(Artificial Neural Network),是一种模仿人脑神经系统工作方式的计算模型。被广泛应用于人工智能、自动控制、机器人、统计学等领域的信息处理中。 二、…

套管外径测量仪 多尺寸型号 规格全可定制

套管(bushing)是一种将带电导体引入电气设备或穿过墙壁的一种绝缘装置。前者称为电器套管,后者称为穿墙套管。套管通常用在建筑地下室,是用来保护管道或者方便管道安装的铁圈。套管的分类有刚性套管、柔性防水套管、钢管套管及铁皮…

【快速幂取模】

求 a 的 b 次方对 p 取模的值&#xff0c;其中 1≤a,b,p≤109 输入 三个用空格隔开的整数a,b和p。 输出 一个整数&#xff0c;表示ab mod p的值。 样例输入 Copy 2 3 9样例输出 Copy 8 思路&#xff1a; 这里借鉴一下大佬的用例&#xff1a; #include<bits/stdc.h&…

idea提示 CreateProcess error=206, 文件名或扩展名太长有哪些具体的解决方法

背景&#xff1a; 项目启动后提示CreateProcess error206&#xff0c;通常我本地是将shorten command line改成如下就可以解决&#xff0c;但是今天遇到一个&#xff0c;无论这里怎么设置都是启动提示扩展名太长&#xff0c;经过一番处理问题终于解决&#xff0c;特此记录一下。…

《21天学通C++》(第十八章)STL list和forward_list

std::list的特点 1.插入和删除操作高效&#xff1a;在任意位置插入或删除元素的开销是 O(1)&#xff0c;不需要像 std::vector 那样可能需要移动大量元素。 2.不支持随机访问&#xff1a;访问 std::list 中的元素需要从头开始遍历到所需位置&#xff0c;访问特定元素的时间复杂…

面试笔记——垃圾回收

对象被垃圾回收的时机 垃圾回收主要面向的是堆中的对象。简单一句就是&#xff1a;如果一个或多个对象没有任何的引用指向它了&#xff0c;那么这个对象现在就是垃圾&#xff0c;如果定位了垃圾&#xff0c;则有可能会被垃圾回收器回收。 如果要定位什么是垃圾&#xff0c;有两…

linux命令行与shell脚本大全——学习笔记(7-8章)

第7章 理解Linux文件权限 用户、用户组、其他用户 用户权限是通过创建用户时分配的用户 ID&#xff08;user ID&#xff0c;UID&#xff09;来跟踪的。UID 是个数值&#xff0c;每个 用户都有一个唯一的 UID。但用户在登录系统时是使用登录名&#xff08;login name&#xff…

分布式锁-快速入门

文章目录 前言一、基础概念1.1 什么是锁1.2 什么是分布式锁1.3 锁和事务的区别二、分布式锁基础理论2.1 为什么要使用分布式锁2.2 分布式锁特性2.3 分布式锁的实现方式总结前言 由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题…

TRILL解析

Deep Imitation Learning for Humanoid Loco-manipulation through Human Teleoperation解析 摘要1.简介2. Related work2.1 人形机器人的局部操纵2.2 远程操作示范中的模仿学习 3. 方法 论文链接&#xff1a;https://arxiv.org/abs/2309.01952 论文项目&#xff1a;https://ut…

通过mask得到bbox(numpy实现)

在SAM的加持下&#xff0c;我们很容易得到物体的mask&#xff0c;但是物体的bbox信息通常也很有用。那么&#xff0c;我们可以写一个函数&#xff0c;立马可以通过mask得到bbox。 代码如下&#xff1a; import numpy as npdef mask2bbox(mask):nonzero_indices np.nonzero(m…

运维开发工程师教程之MongoDB单机版设置

MongoDB单机版设置 一、创建虚拟机 在VMware Workstation软件中新建一个虚拟机&#xff0c;具体操作步骤如下&#xff1a; ①运行VMware Workstation软件&#xff0c;进入到主界面&#xff0c;单击“创建新的虚拟机”来创建新的虚拟机&#xff0c;如图3-1所示。 图3-1 VMware…

Anaconda安装教程

1Anaconda 简介 Anaconda是一个数据科学平台&#xff0c;提供一个发行版的 Python 以及大量常用的数据科学包、库和工具。通过包含诸如 NumPy、Pandas、SciPy、Matplotlib等核心库&#xff0c;以及 Jupyter Notebook等开发工具&#xff0c;使数据分析、机器学习和数据可视化变…

stm32和树莓派的区别?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「stm32的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;Stm32和树莓派是两个不同的领域…