使用react-native-skia实现自绘地图实践与踩坑记录

react-native-skia版本: 1.9.1 官方文档 官方demo示例 版本更新日志

Tips: 1.9.1后启用了新的协调器,导致更新版本各种报错,所以没有升级到新版,先使用1.9.1版本

1、Text文字需要font文件?不想引入font文件怎么办

虽然官方文档给了Text使用默认字体的示例,但是实际验证并不生效

解决方案: 使用Paragraph相关api 可不指定字体 默认使用系统字体

2、想要增加字体描边效果,但没有相关api支持

解决方案: 使用Paragraph生成5遍相同文字,第一遍是黑色正文,后面是白色复制内容并分别偏移上下左右四个方向几像素模拟描边效果

3、图片与文字的定位问题

skia中元素定位默认都是以右下角为原点,需要自行偏移 解决方案: 建议给元素xy设置为0,外面包一层Group做transform偏移并且不设置origin 这样可以方便后续增加动画,简单实现可以直接包Group并设置origin, 如果直接设置xy和origin再加上transform偏移,容易造成双重偏移导致偏差

4、旋转中心点问题

默认的旋转中心点是元素原点,如果设置origin改变旋转中心点遇到问题可以采用"先位移旋转再挪回定位点"方案,能达到同样效果

5、Paragraph多段不同字号颜色文字混排

解决方案: 目前Paragraph看起来只有链式增加文字,如果分开写的话可能会造成对不齐问题

6、由四个点组成的不规则四边形path怎么添加圆角

解决方案: path内添加CornerPathEffect实现

7、元素点击事件实现

skia的所有元素都没有点击事件 需要自行实现 解决方案: 闭合的path可以使用path.contains(x,y)实现 非闭合的path及其他形状元素需要自行判断

注意:1、如果元素偏移过,点击事件需要相应的偏移

2、触摸点需要通过屏幕坐标转换到canvas逻辑坐标并反转回自定义坐标系进行匹配

8、权重层级问题

不支持zIndex权重属性 解决方案: skia元素遵循后渲染的层级更高,或自行在数据中添加zIndex属性动态渲染实现

9、手势与state更新冲突引起卡顿

react的state更新会引起组件rerender,频率过高会影响手势操作和动画的更新

解决方案: 使用redux更新数据,需要注意redux数据并不会随着组件销毁而销毁,需要手动清除

10、canvasSize变化后图片位置异常

canvas宽高变化后path会重新绘制,但图片的定位并没有跟着更新位置,可能是skia的bug, 解决方案: 需要canvasSize变化后手动重新设置一遍图片的位置

11、线段缩减动画处理

使用Path组件自带的start&end属性,传递一个动画值

12、线段渐变

Path组件内使用LinearGradient

13、线段起始点绑定元素一起动画(场景:导航线起点绑定车辆)

使用useVectorInterpolation+useAnimatedReaction获取当前进度所在点位并绑定元素动画, 需要注意iniptRange和outputRange需要保持一致的距离比例,否则可能导致获取的点位和实际进度不一致

14、去除线段固定像素

使用虚线效果实现

15、创建矩阵与矩阵的变换

创建:使用skia的Matrix方法,可以是动画值,方便后续制作动效

变换:利用useAnimatedReaction监听动画值的变化,再对应的变换矩阵

16、坐标矩阵转换与反转

使用skia的mapPoint3d和invert4 实现

17、canvas的手势缩放平移矩阵变换处理

canvas内增加Group组件,由Group接收matrix矩阵变换或transform变换,这样Group下面的所有子组件都会自动应用矩阵的变换

18、元素视觉固定大小,不跟随缩放

方案一:需要固定大小的原生不给赋值缩放scale属性,但涉及到和缩放后的原生位置保持,不好实现较复杂

方案二:缩放后再单独处理元素的反缩放,视觉上保持大小不变

相关推荐
程序员小刘6 小时前
鸿蒙【HarmonyOS 5】 (React Native)的实战教程
react native·华为·harmonyos
烈焰晴天14 小时前
使用ReactNative加载Svga动画支持三端【Android/IOS/Harmony】
android·react native·ios
哼唧唧_1 天前
使用 React Native 开发鸿蒙运动健康类应用的高频易错点总结
react native·react.js·harmonyos·harmony os5·运动健康
依旧002 天前
react native webview加载本地HTML,解决iOS无法加载成功问题
react native·ios·html·vite·webview
不想当reducer2 天前
React Native 阿里云 OSS 上传实战:从相册资源处理到动态签名管理
前端·javascript·react native
hellokai2 天前
ReactNative介绍及简化版原理实现
android·react native
哼唧唧_4 天前
基于React Native开发鸿蒙新闻类应用的实战开发笔记
react native·华为·新闻·harmony os5
老猿阿浪4 天前
React Native 实现抖音式图片滑动切换浏览组件-媲美抖音体验的滑动式流畅预览组件
javascript·react native·react.js
哼唧唧_4 天前
使用React Native开发新闻资讯类鸿蒙应用的准备工作
react native·华为·harmonyos·新闻·harmony os5