From 1fe428daf067c3ea3bd8ae4d87d0427f4026601f Mon Sep 17 00:00:00 2001 From: jcdahuzi Date: Thu, 5 Sep 2024 16:13:37 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[#IAP2H9]=E6=9B=B4=E6=96=B0react-native?= =?UTF-8?q?-svg-capi=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-svg-capi.md | 59 ++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/zh-cn/react-native-svg-capi.md b/zh-cn/react-native-svg-capi.md index 79a2e469..dfadf74e 100644 --- a/zh-cn/react-native-svg-capi.md +++ b/zh-cn/react-native-svg-capi.md @@ -189,6 +189,44 @@ ohpm install 然后编译、运行即可。 +### 在 ArkTs 侧引入和注册字体文件 + +步骤一： + 复制字体文件到 `entry/src/main/resources/rawfile/assets/fonts` 目录下(如使用了外部字体文件，需要将*.ttf文件复制过来) + +步骤二： + 打开 `entry/src/main/ets/pages/Index.ets`，添加以下代码 + +```ts + const fonts: Record = { + "Noto Sans Pau Cin Hau": $rawfile("assets/fonts/Noto Sans Pau Cin Hau.ttf") , + "NotoSansVai-Regular": $rawfile("assets/fonts/NotoSansVai-Regular.ttf") , + "HarmonyOS_Sans_Condensed_Regular_Italic": $rawfile("assets/fonts/HarmonyOS_Sans_Condensed_Regular_Italic.ttf") + "HarmonyOS_Sans_Digit_Medium": $rawfile("assets/fonts/HarmonyOS_Sans_Digit_Medium.ttf") + } + + @Entry + @Component + struct Index { + //... + build() { + Column(){ + //... + + //注册字体文件 + RNApp({ + rnInstanceConfig: { + //... + fontResourceByFontFamily: fonts + }, + //... + } + + } + //... + } +``` + ## 约束与限制 ### 兼容性 @@ -379,7 +417,6 @@ ohpm install | :-----------------: | :----------------------------------------------------: | :-------------: | -------- | -------- | ----------------- | | id | 为元素分配唯一的名称 | string | Yes | All | Yes | | viewBox | 视窗在用户空间中的位置和尺寸 | string | No | All | Yes | -| preserveAspectRatio | 是否强制进行统一缩放 | string | No | All | Yes | | refX | 标记参考点的 x 坐标 | number\| string | No | All | Yes | | refY | 标记参考点的 y 坐标 | number\| string | No | All | Yes | | markerUnits | markerWidth 和 markerHeight 属性的坐标系以及标记的内容 | string | No | All | Yes | @@ -431,6 +468,7 @@ ohpm install | rotate | 旋转每个单独字形的方向 | array | No | All | Yes | | opacity | 透明度 | number | No | All | Yes | | inlineSize | 水平或垂直尺寸 | number | No | All | Yes | +| alignmentBaseline | 指定文本的对齐基线 | string | NO | ALL | Yes | **TSpan**：绘制文本或 Text 内的子文本 @@ -477,6 +515,13 @@ ohpm install | xml | svg 代码的字符串 | string | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes | +**SvgXml**：该组件通过传入字符串来渲染出 svg + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------: | :-------------------: | :------: | :------: | :------: | :---------------: | +| xml | svg 代码的字符串 | string | Yes | All | Yes | +| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes | + **SvgUri**：该组件通过传入 uri 地址来渲染出 svg | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -565,7 +610,17 @@ FontProps 组件属性 HarmonyOS 侧支持情况 ## 遗留问题 -- [x] RadialGradient 和 Image 未实现：在 Canary3 Sp2 及以上的 ROM 和 SDK，使用@react-native-oh-tpl/react-native-svg 13.14.0-0.4.0 及以上版本两组件已实现 -- [PR#149](https://github.com/react-native-oh-library/react-native-harmony-svg/pull/149) [PR#142](https://github.com/react-native-oh-library/react-native-harmony-svg/pull/142)。 +- [ ] isPointInFill 判断点位坐标是否在fill上 未实现 +- [ ] isPointInStroke 判断点位坐标是否在stroke上 未实现 +- [ ] getTotalLength 获取总path的长度 未实现 +- [ ] getPointAtLength 获取点位坐标在path上的信息 未实现 +- [ ] getBBox 获取组件的边界信息 未实现 +- [ ] getCTM 获取相对于父组件的matrix矩阵信息 未实现 +- [ ] getScreenCTM 获取组件的matrix矩阵信息 未实现 +- [ ] getRawResource 获取android中的资源文件 未实现 +- [ ] foreignObject 该组件允许svg使用外部组件 未实现 +- [ ] filter 该组件可以为 SVG 图形添加各种视觉效果 未实现 +- [ ] TextPath 功能未完全实现 ## 其他 -- Gitee