鸿蒙开发者社区

实现一个全局可随意拖动的悬浮工具球，可控制是否吸边，根据悬浮球的位置，向四个方向弹出工具栏。全局监听工具按钮的点击事件回调。效果演示：实现思路：1.使用新建窗口实现悬浮状态，收起状态时系统窗口和控制按钮大小一样，当展开时，计算需要的窗口大小，重新设置悬浮窗口大小2.控制是否吸边，只需要在拖动手势结束时，判断当前手指位置在屏幕的左侧还是右侧，然后将窗口的X坐标赋值成0或屏幕像素窗口大小，避免遮挡3.将屏...

实现一个类似于手机锁屏页左下角工具类按钮，点击工具按钮，弹出4个操作按钮，弧形排列。实现思路：1.点击开关按钮弹出4个隐藏按钮，需要用到动画，可以将隐藏按钮的初始位置放到开关按钮的下面，点击修改距离开关按钮的距离，实现动画效果2.按钮排列，需要计算目标按钮和开关按钮的偏移距离，通过角度和半径计算偏移量演示：源码：EntryComponentV2structCircleToolsView{Localtoolweight:number30LocalspaceBetween:number0ca...

上一篇实现了一句歌词颜色渐变效果，这篇在上一篇的基础上，完整实现歌词的动态展示，并且实现播放和暂停功能。最终效果：歌词解析：我们把歌词先按行分割，记录每行歌词的开始时间和歌词内容，然后再将每行的歌词按照上一篇的方法分割，依次执行属性动画。[00:00.000]义勇军进行曲[00:07.00][00:08.44]起来[00:09.64]不愿做[00:10.84]奴隶的[00:12.04]人们[00:12.65][00:12.85]把我们的[00:14.05]血肉[00:15.25]筑成我们[00:16...

blendMode(value:BlendMode,type:BlendApplyType)将当前控件的内容（包含子节点内容）与下方画布（可能为离屏画布）已有内容进行混合。BlendMode，混合模式，定义当前内容和已有内容如何相互作用产生新的效果，不同的混合模式相互作用叠加的计算方式和效果也会对应有所不同。BlendMode枚举计算公示中：s表示源像素，d表示目标像素；sa表示原像素透明度，da表示目标像素透明度；r表示混合后像素，ra表示混合后像素透明度BlendApp...

实现一个音乐播放器中，歌词颜色渐变的效果。简单点说，就是解析歌词内容，拿到每个词，或者每句话的开始时间、结束时间，执行颜色渐变的动画，然后依次执行。今天这篇先实现一个简单的一句话字体颜色渐变效果。实现演示：实现思路：1.实现字体颜色渐变可以使用之前介绍过的Canvas绘制字体和线性渐变色实现，这种方案需要大量的绘制，相对复杂。2.如果让字体镂空，底部背景使用animateTo实现颜色渐变，这样也可以实现字体颜色渐...

使用Canvas绘制文字时，通常需要设置文字的对齐方式。官方文档解释：textBaseline设置文本绘制中的水平对齐方式，textAlign设置文本绘制中的文本对齐方式。通俗地说：textBaseline设置文字基于绘制坐标点垂直方向的对齐方式textAlign设置文字基于绘制坐标点水平方向的对齐方式使用Canvas绘制文字的方法：fillText(text:string,x:number,y:number)text:需要绘制的文本内容x,y:需要绘制的文本的左下角坐标了解以上基础属性，通过...

Canvas提供了线性渐变、径向渐变、圆锥渐变三种渐变效果，今天通过动画直观地看一下每个渐变的效果。线性渐变createLinearGradient(x0:number,y0:number,x1:number,y1:number)x0,y0:起点的坐标，默认单位：vpx1,y1:终点的坐标，默认单位：vp设置渐变断点值：addColorStop(offset:number,color:string)offset:渐变点距离起点的位置占总体长度的比例,可以理解为开始渐变的位置演示效果：径向渐变createRadialGradient(x0:number,y...

水印在我们日常使用的APP中是很常见的。本文记录一下如何实现一个自定义的水印，可以自定义设置水印文字、间距、旋转角度。实现效果：实现思路：核心方法是使用Canvas绘制文字，只需要在指定的间隔上绘制我们想要展示的水印文字内容就可以了。需要使用到Canvas的坐标系平移、坐标系旋转、文字绘制。源码：import{WindowUtils}from"..utilsWindowUtils"EntryComponentV2structWaterMarkTest{privatemaxHorizontalSpace:numberMat...

【HarmonyOS应用开发者高级认证部分题库】一、单选题（132题）1.以下关于Taskpool和Worker的描述正确的是A.开发者需要自行管理taskpool的数量及生命周期B.TaskPool支持任务延时执行C.TaskPool和Worker的任务执行时长上限都是无限制D.Worker自行管理生命周期，开发者无需关心任务负载高低2.以下有关自定义组件ComponentV2描述正确的是A.Prop能在ComponentV2声明B.State能在ComponentV2声明C.Param能在ComponentV2中声明D.Link能...

最近想把日常开发练习总结的APP上架到应用市场，由于之前APP内容都是最终的效果演示，看着有些单调，于是打算把对应的源码也加入到里面，可以直接阅读，和文章里的代码展示是一样的。最终效果：实现过程：1.不知道鸿蒙有没有支持的三方库可以直接引用实现，我没有去查，最近刚好写Web的使用，正好可以结合HTML展示2.对于一个移动端的开发程序员，写一个类似于Markdown的展示效果，也无从下手，于是找了AI帮忙，让他帮我写这个HT...

本篇对比一下Web的两种渲染模式，三种不同的布局方式。渲染模式对比同步渲染：RenderMode.SYNCRENDER开发者模式：过度绘制检测10次同步加载耗时：毫秒IwebonPageBegin:同步完成加载耗时:1376IwebonPageBegin:同步完成加载耗时:989IwebonPageBegin:同步完成加载耗时:1014IwebonPageBegin:同步完成加载耗时:1040IwebonPageBegin:同步完成加载耗时:1052IwebonPageBegin:同步完成加载耗时:1004IwebonPageBegin:同步完成加载耗时:182...

上篇总结了Web组件的基础属性和事件，这篇通过一个简单案例，学习原生与web的交互。涉及到JS注入，原生调用JS方法，JS调用原生方法。实现效果：实现目标：1.打开目标页面，当有图片或gif预览时，按返回键拦截，关闭预览可以返回到上一页2.从目标页面跳转到其他页后，按返回键返回到上一页，直到返回目标页时才能退出实现思路：1.需要给目标web页面注入一个JS方法，监听是否有图片或者gif预览，调试发现，当有预览时，html的body...

本文总结一下使用Web组件访问在线网页时的基础属性和事件设置。使用Web组件加载一个网页，最简单的一行代码就可实现，即Web({src:网页地址,controller:newwebview.WebviewController()})Web组件需要传一个参数WebOptions，接下来看一下WebOptions的各个参数：名称类型src网页资源地址controller控制器，通过controller可以控制Web组件各种行为renderMode表示当前Web组件的渲染方式incognitoMode表示当前创建的webview是否是隐私...

天下产品一大”借鉴“，可以发现某宝、东、鱼等APP的首页菜单，横向滚动第一页是一行展示5个完整的菜单和一小部分第二页的一个菜单，第二页是三行展示菜单，左右滑动可动态调整菜单栏的高度。看一下模仿实现效果：实现思路：1.首先想到使用Swiper+Grid实现，通过设置Swiper的nextMargin可以显示出第二页的一部分，但是由于设置了该属性，滑动过程中第一页和第二页的Grid间隔是一样的，和目标不一致，如果滑动时修改，连贯性不好...

系统设置及系统应用跳转是各类应用的高频使用场景之一，如跳转至系统设置、一键拨打电话、查看与修改应用权限、打开浏览器浏览网页等。本文总结了打开系统蓝牙设置、打开移动网络设置、打开WiFi设置、拉起拨打电话、打开指定应用的设置详情页、打开指定应用在华为市场的详情页、打开应用通知设置、跳转系统浏览器打开网页、使用OpenLink跳转到系统其他应用。跳转工具类源码import{common,OpenLinkOptions,Want}from"kit.Ability...

基于上篇一镜到底实现，做出一些优化，增加长按事件弹出操作框。演示：上篇不足：1.图片初始位置相对屏幕Y轴的偏移没有赋值，影响图片放大后拖动的上下边界，导致上边会有黑边，下边有一部分显示不全2.图片缩放没有限制，图片可以放大很大3.手势识别区域为图片初始大小，放大之后其他区域没有响应优化：1.图片绘制完成之后，获取图片左上角相对页面左上角的位置.onAreaChange((oldValue:Area,newValue:Area){this.imagePosition...

当首次安装应用时，通常会有功能引导提示的需求，本文实现一个简单的功能引导案例供参考，也可以使用第三方的插件库ohoshighlightguide实现效果：实现思路：1.使用Stack布局在需要引导的布局上面增加一个蒙版2.在蒙版中显示需要引导的内容，需要获取关键元素的位置，在蒙版中重新绘制高亮显示，再增加popup步骤提示弹框3.通过提示步骤控制每个提示框的显示和隐藏，需要处理返回键、home键点击事件对popup的影响核心方法：getIns...

本文总结一下常用的窗口管理、屏幕管理常用的方法，封装作为一个工具类，统一管理使用。例如获取屏幕长宽，获取状态栏和导航栏的高度，设置状态栏属性，设置横竖屏，设置沉浸式全屏等方法。实现效果：封装工具类api方法名介绍getWindow()获取应用主窗口getWindowWidth()获取主窗口宽度getWindowHeight()获取主窗口高度getStatusHeight()获取状态栏高度getNavHeight()获取导航栏高度setWindowFullScreen()设置沉浸式全屏isFullSc...

实现目标：一组图片点击其中一张可以跳转到全屏预览，并且使用一镜到底转场动画，预览界面可以左右滑动查看其他图片，单张图片可以放大查看，向下拖动退出预览。实现原理：1.一镜到底设置geometryTransition属性将图片首页和大图页面的图片绑定同一id值，结合属性动画效果实现一镜到底效果组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效。通过设置opacity，设置组件转场时的透明度效果，为插入...

当我们抽离一个功能作为一个module供其他模块调用，或者导入第三方的module时，可能需要在应用entry模块中打开module中的page，本文介绍一下如何新建一个module，及entry打开module中的页面的3中方法。新建module选择StaticLibrary点击下一步，设置modulename完成即可创建完成引用module在entry模块下的ohpackage.json5文件中添加module的引用"dependencies":{'librarycommon':'file:..librarycommon'}在librarycommon中创建3个...