这篇文章介绍一下旋转手势(RotationGesture)的触发条件和回调信息。还有控制组件旋转的rotate介绍。旋转手势处理器配置参数:RotationGestureHandlerOptions名称说明fingers触发捏合的最少手指数[2,5]angle触发旋转手势的最小改变度数isFingerCountLimited是否检查触摸屏幕的手指数量GestureEvent对象在RotationGesture中的回调属性:名称说明angle旋转角度fingerListFingerInfo[],包含触发事件的所有触点信息回调比较简单,只...
上篇已经了解了捏合手势的基础使用和回调函数。在上篇的捏合手势中,我们可以发现,图片在缩放过程中都是居中缩放的,虽然捏合中心点不一样,但是缩放效果都是一样的。这显然不符合我们手指捏合的预期。实际图片展示中,我们希望实现,手指捏合放大或缩小的过程中,可以让缩放中心位置保持不变,这样我们就可以直接看到我们想要放大展示的地方。看一下最终实现效果演示:实现思路:1.由于我们的image放在stack布局中,居中显示...
今天这篇我们来学习捏合手势(PinchGesture),首先要了解捏合手势的构造参数和回调函数的回调信息都有哪些。捏合手势处理器配置参数:PinchGestureHandlerOptions名称说明fingers触发捏合的最少手指数[2,5]distance最小识别距离isFingerCountLimited是否检查触摸屏幕的手指数量GestureEvent对象在PinchGesture中的回调属性:名称说明scale缩放比例pinchCenterX捏合手势中心点距离开始时左上角的x轴距离pinchCenterY捏合手势中心...
2025-10-16 09:17:33 2638浏览 0点赞 0回复 0收藏
鸿蒙ArkTS组件为我们提供了6种基础手势,分别是点击手势(TapGesture)、长按手势(LongPressGesture)、滑动手势(PanGesture)、捏合手势(PinchGesture)、旋转手势(RotationGesture)、快滑手势(SwipeGesture)。这些手势的回调函数的事件信息都封装在GestureEvent对象中,本文主要介绍滑动手势,因此也只介绍滑动手势回调可接收到的GestureEvent属性。GestureEvent对象在PanGesture中的回调属性:名称说明offsetX相对于...
2025-10-15 09:31:02 2925浏览 0点赞 0回复 0收藏
修改一个组件的位置,可以通过position或offset实现,今天通过一篇文章,了解这两个属性的异同。相同点传参类型:他们都支持三个传参类型,分别是Position、Edges、LocalizedEdges,接下来详细看一每个类型。Position:用于表示一个坐标点,参数可选。名称说明xx轴坐标。单位:vpyy轴坐标。单位:vpEdges:表示相对四边的偏移量。同时设置top和bottom,仅top生效;同时设置left和right,仅left生效。参数可选。参数类型为Dimens...
2025-10-14 09:41:06 3201浏览 0点赞 0回复 0收藏
实现一个全局可随意拖动的悬浮工具球,可控制是否吸边,根据悬浮球的位置,向四个方向弹出工具栏。全局监听工具按钮的点击事件回调。效果演示:实现思路:1.使用新建窗口实现悬浮状态,收起状态时系统窗口和控制按钮大小一样,当展开时,计算需要的窗口大小,重新设置悬浮窗口大小2.控制是否吸边,只需要在拖动手势结束时,判断当前手指位置在屏幕的左侧还是右侧,然后将窗口的X坐标赋值成0或屏幕像素窗口大小,避免遮挡3.将屏...
2025-09-22 09:27:17 7572浏览 1点赞 0回复 0收藏
实现一个类似于手机锁屏页左下角工具类按钮,点击工具按钮,弹出4个操作按钮,弧形排列。实现思路:1.点击开关按钮弹出4个隐藏按钮,需要用到动画,可以将隐藏按钮的初始位置放到开关按钮的下面,点击修改距离开关按钮的距离,实现动画效果2.按钮排列,需要计算目标按钮和开关按钮的偏移距离,通过角度和半径计算偏移量演示:源码:EntryComponentV2structCircleToolsView{Localtoolweight:number30LocalspaceBetween:number0ca...
2025-09-17 17:36:46 6158浏览 0点赞 0回复 0收藏
上一篇实现了一句歌词颜色渐变效果,这篇在上一篇的基础上,完整实现歌词的动态展示,并且实现播放和暂停功能。最终效果:歌词解析:我们把歌词先按行分割,记录每行歌词的开始时间和歌词内容,然后再将每行的歌词按照上一篇的方法分割,依次执行属性动画。[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...
2025-09-16 10:01:46 1.1w浏览 1点赞 0回复 0收藏
blendMode(value:BlendMode,type:BlendApplyType)将当前控件的内容(包含子节点内容)与下方画布(可能为离屏画布)已有内容进行混合。BlendMode,混合模式,定义当前内容和已有内容如何相互作用产生新的效果,不同的混合模式相互作用叠加的计算方式和效果也会对应有所不同。BlendMode枚举计算公示中:s表示源像素,d表示目标像素;sa表示原像素透明度,da表示目标像素透明度;r表示混合后像素,ra表示混合后像素透明度BlendApp...
2025-09-16 10:00:03 7046浏览 0点赞 0回复 0收藏
实现一个音乐播放器中,歌词颜色渐变的效果。简单点说,就是解析歌词内容,拿到每个词,或者每句话的开始时间、结束时间,执行颜色渐变的动画,然后依次执行。今天这篇先实现一个简单的一句话字体颜色渐变效果。实现演示:实现思路:1.实现字体颜色渐变可以使用之前介绍过的Canvas绘制字体和线性渐变色实现,这种方案需要大量的绘制,相对复杂。2.如果让字体镂空,底部背景使用animateTo实现颜色渐变,这样也可以实现字体颜色渐...
2025-09-15 09:00:25 4865浏览 0点赞 0回复 0收藏
使用Canvas绘制文字时,通常需要设置文字的对齐方式。官方文档解释:textBaseline设置文本绘制中的水平对齐方式,textAlign设置文本绘制中的文本对齐方式。通俗地说:textBaseline设置文字基于绘制坐标点垂直方向的对齐方式textAlign设置文字基于绘制坐标点水平方向的对齐方式使用Canvas绘制文字的方法:fillText(text:string,x:number,y:number)text:需要绘制的文本内容x,y:需要绘制的文本的左下角坐标了解以上基础属性,通过...
2025-09-09 09:25:48 3940浏览 0点赞 0回复 0收藏
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...
2025-09-04 22:21:02 3419浏览 0点赞 0回复 0收藏
水印在我们日常使用的APP中是很常见的。本文记录一下如何实现一个自定义的水印,可以自定义设置水印文字、间距、旋转角度。实现效果:实现思路:核心方法是使用Canvas绘制文字,只需要在指定的间隔上绘制我们想要展示的水印文字内容就可以了。需要使用到Canvas的坐标系平移、坐标系旋转、文字绘制。源码:import{WindowUtils}from"..utilsWindowUtils"EntryComponentV2structWaterMarkTest{privatemaxHorizontalSpace:numberMat...
2025-09-02 17:30:43 3653浏览 0点赞 0回复 0收藏
【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能...
2025-09-01 08:32:16 1.4w浏览 2点赞 1回复 1收藏
最近想把日常开发练习总结的APP上架到应用市场,由于之前APP内容都是最终的效果演示,看着有些单调,于是打算把对应的源码也加入到里面,可以直接阅读,和文章里的代码展示是一样的。最终效果:实现过程:1.不知道鸿蒙有没有支持的三方库可以直接引用实现,我没有去查,最近刚好写Web的使用,正好可以结合HTML展示2.对于一个移动端的开发程序员,写一个类似于Markdown的展示效果,也无从下手,于是找了AI帮忙,让他帮我写这个HT...
2025-09-01 08:27:54 8030浏览 1点赞 0回复 0收藏
本篇对比一下Web的两种渲染模式,三种不同的布局方式。渲染模式对比同步渲染:RenderMode.SYNCRENDER开发者模式:过度绘制检测10次同步加载耗时:毫秒IwebonPageBegin:同步完成加载耗时:1376IwebonPageBegin:同步完成加载耗时:989IwebonPageBegin:同步完成加载耗时:1014IwebonPageBegin:同步完成加载耗时:1040IwebonPageBegin:同步完成加载耗时:1052IwebonPageBegin:同步完成加载耗时:1004IwebonPageBegin:同步完成加载耗时:182...
2025-09-01 08:25:22 7732浏览 1点赞 0回复 0收藏
上篇总结了Web组件的基础属性和事件,这篇通过一个简单案例,学习原生与web的交互。涉及到JS注入,原生调用JS方法,JS调用原生方法。实现效果:实现目标:1.打开目标页面,当有图片或gif预览时,按返回键拦截,关闭预览可以返回到上一页2.从目标页面跳转到其他页后,按返回键返回到上一页,直到返回目标页时才能退出实现思路:1.需要给目标web页面注入一个JS方法,监听是否有图片或者gif预览,调试发现,当有预览时,html的body...
2025-08-20 08:58:28 1.2w浏览 2点赞 0回复 0收藏
本文总结一下使用Web组件访问在线网页时的基础属性和事件设置。使用Web组件加载一个网页,最简单的一行代码就可实现,即Web({src:网页地址,controller:newwebview.WebviewController()})Web组件需要传一个参数WebOptions,接下来看一下WebOptions的各个参数:名称类型src网页资源地址controller控制器,通过controller可以控制Web组件各种行为renderMode表示当前Web组件的渲染方式incognitoMode表示当前创建的webview是否是隐私...
2025-08-20 08:57:18 6833浏览 1点赞 0回复 0收藏
天下产品一大”借鉴“,可以发现某宝、东、鱼等APP的首页菜单,横向滚动第一页是一行展示5个完整的菜单和一小部分第二页的一个菜单,第二页是三行展示菜单,左右滑动可动态调整菜单栏的高度。看一下模仿实现效果:实现思路:1.首先想到使用Swiper+Grid实现,通过设置Swiper的nextMargin可以显示出第二页的一部分,但是由于设置了该属性,滑动过程中第一页和第二页的Grid间隔是一样的,和目标不一致,如果滑动时修改,连贯性不好...
2025-08-14 17:45:36 5843浏览 2点赞 0回复 1收藏
系统设置及系统应用跳转是各类应用的高频使用场景之一,如跳转至系统设置、一键拨打电话、查看与修改应用权限、打开浏览器浏览网页等。本文总结了打开系统蓝牙设置、打开移动网络设置、打开WiFi设置、拉起拨打电话、打开指定应用的设置详情页、打开指定应用在华为市场的详情页、打开应用通知设置、跳转系统浏览器打开网页、使用OpenLink跳转到系统其他应用。跳转工具类源码import{common,OpenLinkOptions,Want}from"kit.Ability...
2025-08-13 10:48:03 8561浏览 1点赞 0回复 0收藏