Native XComponent、Drawing、手势实现上下滑动文本和图形拖移

通过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