Native XComponent、Drawing、手势实现上下滑动文本和图形拖移
Native XComponent、Drawing、手势实现上下滑动文本和图形拖移
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
使用Native、XComponent和EGL绘制图形
822浏览 • 1回复 待解决
使用Drawing实现图形绘制与显示
736浏览 • 1回复 待解决
键盘拉起时列表无法上下滑动
2029浏览 • 1回复 待解决
服务卡片可以响应上下滑动操作吗?
6762浏览 • 2回复 待解决
如何实现列表既可以左右滑、又可以上下滑动
960浏览 • 1回复 待解决
XComponent、NativeDrawing实现2D图形绘制
908浏览 • 1回复 待解决
XComponent、openGL实现3D图形绘制
1308浏览 • 1回复 待解决
HarmonyOS list组件包含tab组件上下滑动冲突解决方案
139浏览 • 1回复 待解决
Text文本过长时如何实现上下滚动?
393浏览 • 1回复 待解决
HarmonyOS Native Drawing模块 文字渲染是否支持描边和阴影
228浏览 • 1回复 待解决
HarmonyOS Web组件怎么和其它组件一起上下滑动?并且Web组件根据加载的url内容自适应高度?
46浏览 • 1回复 待解决
HarmonyOS 有没有类似于电台首页推荐的导航和上下滑动切换背景效果的三方包或者Demo?
124浏览 • 1回复 待解决
web页面判断是在上滑和下滑以及是否滑动到底
721浏览 • 1回复 待解决
通过Native 调用c++层实现文本绘制
852浏览 • 1回复 待解决
web组件和list嵌套滚动,在出现list后向下滑动,出现web滑动list不动的情况
1747浏览 • 1回复 待解决
如何实现一个可以上下滚动的文本选择器?
284浏览 • 1回复 待解决
XComponent是怎么与native进行关联的?
2441浏览 • 1回复 待解决
HarmonyOS SideBarContainer如何实现手势滑动控制侧滑栏的开关和关联页面的移入移出效果?
149浏览 • 1回复 待解决
编写一个工程,进行Native XComponent开发
612浏览 • 1回复 待解决
Swiper组件设置不跟随手势滑动
374浏览 • 1回复 待解决
HarmonyOS是否有滑动手势能模拟系统的Scroll,滑动惯性?
143浏览 • 1回复 待解决
设置键盘弹出内容上移
299浏览 • 1回复 待解决
如何在键盘弹出时,让内容上移,而不是整个窗口上移
1962浏览 • 1回复 待解决
基于滑动监听和状态变量实现滑动时取消按压态
613浏览 • 1回复 待解决
HarmonyOS 新闻频道编辑页面,长按手势和拖动手势冲突,无法实现长按拖动功能
282浏览 • 1回复 待解决
通过Native XComponent、Drawing实现文本与图形的绘制和渲染工作,再使用手势获取手指滑动的距离位置,从而改变绘制的图形或文本的渲染位置,实现文本的随手势上下滑动和图形随手势移动。
因为文本上下滑动与图形拖移仅有绘制时是绘制文本还是绘制图形的代码不一致,逻辑实现完全相同,以下仅介绍图形拖移。
实现图形拖移,从逻辑上大致分成两大步:
1 使用Native XComponent、Drawing实现图形的绘制
2 使用位移手势,获取到将手滑动的距离,传递给Native C++侧从而改变图形的渲染位置,实现图形随手势移动的效果
使用的核心API
XCompnent
Native XComponent
使用Drawing实现图形绘制与显示
拖动手势PanGesture
核心代码解释
1 在ArkTs侧的Index.ets文件中添加XComponent组件。为XComponent设置id,设置类型为
,设置动态库库名称。
2 在 Native C++侧的plugin_manager.cpp获取NativeXComponent,并使用单例模式保存XComponent。
3 Native C++侧注册回调函数。
3.2 在my_draw.cpp进行绘制的初始化:获取Native Window并存储,获取Native Window的宽高并存储,创建canvas、bitmap、pen和brush并存储。
3.3 在渲染器的构造函数中创建绘制使用的对象并保存,初始化Native XComponent的回调函数。
3.4 在plugin_manager.cpp中将OH_NativeXComponent_Callback注册给NativeXComponent
4 绘制2D图形
4.1 在上述Native XComponent的初始化函数中,调用my_draw.cpp的init方法已经进行绘制初始化,包括2D图形绘制需要的canvas、bitmap、pen和brush的创建和存储,需要使用时直接使用即可。这里还需要构造Path形状。构建五角星的Path形状【my_draw.cpp】:
4.2 将图形绘制到画布上【my_draw.cpp】
5 绘制内容呈现到Native Window上【my_draw.cpp】
6 my_draw.cpp整合绘制方法
7 Native C++导出可供ArkTs侧调用绘制图形的方法
7.1 在plugin_render.cpp导出
7.2 在plugin_manager.cpp导出
8 加入手势,让图形随拖动手势移动
8.1 在ArkTs侧,为XCompont组件加入手势。获取到移动的距离,并调用Native C++侧的绘制方法,将移动距离作为参数传入。
8.2 在Native C++侧,根据传入的移动距离,更新渲染图形的位置。
五角星顶点位置(X,Y)=上一刻的位置+手势移动的距离(X,Y)
9 绘制资源释放【my_draw.cpp】
注意事项
1 在ArkTS侧,向Native C++侧传递手势位移时,需要将ArkTS侧获取到的位移需要转换单位后再传递,将vp转成xp,否则会出现“难以拖动”的效果。
2 在Native C++侧绘制2D图形中,用OH_NativeWindow_NativeWindowRequestBuffer方法申请的OHNativeWindowBuffer,是每次渲染完之后都必须要去掉内存映射,下次渲染的时候再重新申请buffer;创建的canvas、bitmap、pen、brush是可以复用,不用每次渲染完都销毁,程序退出时销毁一次即可。
适配的版本信息
DevEco Studio Version: 4.0.1.501
SDK:HarmoneyOS 3.2.14.6