@ohmi/react-native-svg

v15.0.0-0.7.9

Published

2 months ago

> 模板版本：v0.2.2

Downloads

0High
0Medium
0Low

模板版本：v0.2.2

This project is based on react-native-svg(CAPI)

[!TIP] gitee 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@ohmi/react-native-svg Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

npm install @ohmi/react-native-svg

yarn

yarn add @ohmi/react-native-svg

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import React from 'react';
import { StyleSheet,SafeAreaView } from 'react-native';
import { Svg,Path } from 'react-native-svg';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Svg width="100" height="100">
        <Path d="M90 0 L0 180 L180 180 Z" fill="red" />
      </Svg>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: 'grey',
  },
});

Link

目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

1.在工程根目录的 `oh-package.json5` 添加 overrides 字段

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2.引入原生端代码

目前有两种方法：

通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
直接链接源码。

方法一：通过 har 包引入

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@ohmi/react-native-svg": "file:../../node_modules/@ohmi/react-native-svg/harmony/svg.har"
  }

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

方法二：直接链接源码

[!TIP] 如需使用直接链接源码，请参考直接链接源码说明

3.配置 CMakeLists 和引入 SVGPackage

打开 entry/src/main/cpp/CMakeLists.txt，添加：

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@ohmi/react-native-svg/src/main/cpp" ./svg)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_svg)
# RNOH_END: link_packages

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "SVGPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
        std::make_shared<SamplePackage>(ctx),
+       std::make_shared<SVGPackage>(ctx),
    };
}

4.在 ArkTs 侧引入 SvgPackage

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

  ...
+ import { SvgPackage } from '@ohmi/react-native-svg/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new SvgPackage(ctx),
  ];
}

5.运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

在 ArkTs 侧引入和注册字体文件(非必选配置项)

[!TIP] 本项非必配项，当使用 Text 组件的 fontFamily 属性指定字体时才需配置

步骤一：复制字体文件到 entry/src/main/resources/rawfile/assets/fonts 目录下(如使用了外部字体文件，需要将*.ttf文件复制过来)

步骤二：打开 entry/src/main/ets/pages/Index.ets，添加以下代码

const fonts: Record<string, Resource> = {
    "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
            },
            //...
        }
        
    }
    //...
}

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@ohmi/react-native-svg Releases

属性

详细请查看 react-native-svg 的文档介绍

以下为目前已支持的组件属性：

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Svg：绘制组件的父组件

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :------------------: | :-------------: | :------: | :------: | :---------------: | | width | 组件宽度 | number| string | Yes | All | Yes | | height | 组件高度 | number| string | Yes | All | Yes | | viewBox | 组件视区 | string | No | All | Yes | | color | 颜色 | string | No | All | Yes | | title | 组件标题名 | string | No | All | Yes | | preserveAspectRatio | 是否强制进行统一缩放 | string | No | All | Yes |

G：该元素是用于对其他 SVG 元素进行分组的容器

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :---------: | :-------------: | -------- | -------- | ----------------- | | opacity | 透明度 | number| string | No | All | Yes |

Path：路径绘制组件，根据绘制路径生成封闭的自定义形状

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :------------------: | :----: | -------- | -------- | ----------------- | | d | 路径绘制的命令字符串 | string | Yes | All | Yes | | opacity | 透明度 | number | No | All | Yes |

Rect：矩形绘制组件，根据角位置和宽高生成矩形形状

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :---------------: | :-------------: | -------- | -------- | ----------------- | | x | 在 x 轴上平移距离 | number| string | No | All | Yes | | y | 在 y 轴上平移距离 | number| string | No | All | Yes | | width | 元素宽度 | number| string | Yes | All | Yes | | height | 元素高度 | number| string | Yes | All | Yes | | rx | 定义 x 轴上的半径 | number| string | No | All | Yes | | ry | 定义 y 轴上的半径 | number| string | No | All | Yes | | opacity | 透明度 | number| string | No | All | Yes |

Image：图像元素，支持 JPEG、PNG 格式

[!WARNING]
注： Image 依赖 Canary3 Sp2 以上版本的 SDK 和 ROM。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :----------------------------------------: | :------------------------------: | -------- | -------- | ----------------- | | x | 在 x 轴上平移距离 | number| string | No | All | Yes | | y | 在 y 轴上平移距离 | number| string | No | All | Yes | | width | 元素宽度 | number| string | Yes | All | Yes | | height | 元素高度 | number| string | Yes | All | Yes | | href | 图像资源引用 | source| string | Yes | All | Yes | | xlinkHref | 用于指定要嵌入的图像的 URL | RNImageProps['source'] | string | No | All | Yes | | preserveAspectRatio | 控制在给定的容器尺寸内如何保持图像的宽高比 | string | No | All | Yes | | opacity | 透明度 | source| string | No | All | Yes |

Circle：园绘制组件，基于圆心和半径生成园形形状

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :-------------------: | :-------------: | -------- | -------- | ----------------- | | r | 园半径 | number| string | Yes | All | Yes | | cx | 圆心在 x 轴上平移距离 | number| string | No | All | Yes | | cy | 圆心在 y 轴上平移距离 | number| string | No | All | Yes | | opacity | 透明度 | number | No | All | Yes |

Polygon：多边形制组件，用于创建至少包含三条边的图形

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :----------------------------: | :------------: | -------- | -------- | ----------------- | | points | 定义多边形每个角的 x 和 y 坐标 | string| array | Yes | All | Yes | | opacity | 透明度 | number | No | All | Yes |

Polyline：多段线组件，用于创建一条线段构成的轨迹

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :------------------------------: | :------------: | -------- | -------- | ----------------- | | points | 定义多段线每个端点的 x 和 y 坐标 | string| array | Yes | All | Yes | | opacity | 透明度 | number | No | All | Yes |

Defs：该元素是用于对其他 SVG 元素进行分组的容器

注：该组件无属性

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :--: | :---------: | :--: | -------- | -------- | ----------------- | | / | / | / | / | All | Yes |

LinearGradient：用于定义线性渐变

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------------: | :------------------------------------: | :-------------------------------------: | -------- | -------- | ----------------- | | x1 | 在 x 轴上平移距离 | number| string | No | All | Yes | | y1 | 在 y 轴上平移距离 | number| string | No | All | Yes | | x2 | 在 x 轴上平移距离 | number| string | No | All | Yes | | y2 | 在 y 轴上平移距离 | number| string | No | All | Yes | | gradientUnits | 指定元素属性使用的坐标系 | 'userSpaceOnUse' | 'objectBoundingBox' | No | All | Yes | | gradientTransform | 指定从元素当前坐标系到目标坐标系的转换 | ColumnMajorTransformMatrix | string | No | All | Yes |

RadialGradient：用于定义线性渐变

[!WARNING]
注： RadialGradient 依赖 Canary3 Sp2 以上版本的 SDK 和 ROM。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------------: | :------------------------------------: | :-------------------------------------: | -------- | -------- | ----------------- | | fx | 起始圆的 x 轴坐标 | number| string | No | All | Yes | | fy | 起始圆的 y 轴坐标 | number| string | No | All | Yes | | rx | 终止椭圆的 x 轴半径 | number| string | No | All | Yes | | ry | 终止椭圆的 y 轴半径 | number| string | No | All | Yes | | cx | 终止圆的 x 轴坐标 | number| string | No | All | Yes | | cy | 终止圆的 y 轴坐标 | number| string | No | All | Yes | | r | 终止圆的半径 | number| string | No | All | Yes | | gradientUnits | 指定元素属性使用的坐标系 | 'userSpaceOnUse' | 'objectBoundingBox' | No | All | Yes | | gradientTransform | 指定从元素当前坐标系到目标坐标系的转换 | ColumnMajorTransformMatrix | string | No | All | Yes |

Stop：定义渐变上的颜色坡度

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------: | :------------: | :----: | -------- | -------- | ----------------- | | stopColor | 渐变色 | string | No | All | Yes | | stopOpacity | 渐变色透明度 | string | No | All | Yes | | offset | 渐变色相对位置 | string | No | All | Yes |

Mask：定义 alpha 蒙版，用于将当前对象合成到背景中

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :--------------: | ------------------------------------------------------------ | ---------- | -------- | -------- | :---------------: | | id | 唯一标识 | string | No | All | Yes | | x | 左侧顶角横坐标 | NumberProp | No | All | Yes | | y | 左侧顶角纵坐标 | NumberProp | No | All | Yes | | width | 元素宽度 | NumberProp | No | All | Yes | | height | 元素高度 | NumberProp | No | All | Yes | | maskUnits | 定义 x,y,width,height 使用的坐标系，默认值为 objectBoundingBox，可以使用 objectBoundingBox|userSpaceOnUse | TMaskUnits | No | All | Yes | | maskContentUnits | 定义内容使用的坐标系，默认值为 userSpaceOnUse，可以使用 objectBoundingBox|userSpaceOnUse | TMaskUnits | No | All | Yes |

Use：该元素可以重复使用 SVG 元素

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-------: | :----------------------------------------------------: | :-------------: | -------- | -------- | ----------------- | | x | 在 x 轴上平移距离 | number| string | No | All | Yes | | y | 在 y 轴上平移距离 | number| string | No | All | Yes | | width | 元素宽度 | number| string | No | All | Yes | | height | 元素高度 | number| string | No | All | Yes | | href | 图像资源引用 | source| string | Yes | All | Yes | | xlinkHref | 指定了一个 URI，该 URI 指向了 SVG 文档中定义的一个元素 | string | No | All | Yes | | opacity | 透明度 | number| string | No | All | Yes |

Ellipse：椭圆绘制组件，基于一个中心坐标以及它们的 x 半径和 y 半径

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :-------------------: | :-------------: | -------- | -------- | ----------------- | | cx | 圆心在 x 轴上平移距离 | number| string | No | All | Yes | | cy | 圆心在 y 轴上平移距离 | number| string | No | All | Yes | | rx | 定义 x 轴上的半径 | number| string | No | All | Yes | | ry | 定义 y 轴上的半径 | number| string | No | All | Yes | | opacity | 透明度 | number| string | No | All | Yes |

Symbol：该元素用来定义一个图形模板对象，它可以用一个元素实例化

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :------------------: | :----: | -------- | -------- | ----------------- | | preserveAspectRatio | 是否强制进行统一缩放 | string | No | All | Yes | | viewBox | 组件视区 | string | No | All | Yes |

ClipPath：该元素定义一条剪切路径，可作为其他元素的 clipPath 属性的值

注：该组件无属性

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :--: | :---------: | :--: | -------- | -------- | ----------------- | | / | / | / | / | All | Yes |

Marker：用于在绘制类组件上添加标记

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :----------: | :----------------------------------------------------: | :-------------: | -------- | -------- | ----------------- | | id | 为元素分配唯一的名称 | string | Yes | All | Yes | | viewBox | 视窗在用户空间中的位置和尺寸 | 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 | | orient | 将标记放置在形状上的相应位置时如何旋转 | string | No | All | Yes | | markerWidth | 表示标记进入的视窗的宽度 | number| string | No | All | Yes | | markerHeight | 表示标记进入的视窗的高度 | number| string | No | All | Yes |

Pattern：用于定义一个图形对象，可以被引用以平铺重绘该图形对象以覆盖某个区域。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :----------------------------------------------------------: | :-------------: | -------- | -------- | ----------------- | | id | 为元素分配唯一的名称 | string | Yes | All | Yes | | x | 标记参考点的 x 坐标 | number| string | No | All | Yes | | y | 标记参考点的 y 坐标 | number| string | No | All | Yes | | width | 表示标记进入的视窗的宽度 | number| string | No | All | Yes | | height | 表示标记进入的视窗的高度 | number| string | No | All | Yes | | patternUnits | 属性指示 pattern 元素的几何属性使用哪个坐标系。 | string | No | All | Yes | | patternContentUnit | 属性指示 pattern 元素的几何属性使用哪个坐标系。 | string | No | All | Yes | | patternTransform | 定义了应用于图案图块的变换定义的列表 | string | No | All | Yes | | viewBox | 定义视窗在用户空间中的位置和尺寸 | string | No | All | Yes | | preserveAspectRatio | 指示具有提供给定宽高比的 viewBox 的元素必须如何适应具有不同宽高比的视口。 | string | No | All | Yes |

Symbol：用于定义可由 use 元素实例化的图形模板对象。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :----------------------------------------------------------: | :----: | -------- | -------- | ----------------- | | id | 为元素分配唯一的名称 | string | Yes | All | Yes | | viewBox | 定义视窗在用户空间中的位置和尺寸 | string | No | All | Yes | | preserveAspectRatio | 指示具有提供给定宽高比的 viewBox 的元素必须如何适应具有不同宽高比的视口。 | string | No | All | Yes |

Line：SVG 基本形状，用于创建连接两点的线。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :--------------: | :-------------: | -------- | -------- | ----------------- | | x1 | x 轴上线条的起点 | number| string | No | All | Yes | | y1 | y 轴上的线的起点 | number| string | No | All | Yes | | x2 | x 轴上的线的末端 | number| string | No | All | Yes | | y2 | y 轴上的线的末端 | number| string | No | All | Yes | | opacity | 透明度 | number| string | No | All | Yes |

Text：绘制由文本组成的图形元素

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------------: | :------------------------------: | :-------------: | -------- | -------- | ----------------- | | x | 文本基线起点的 x 坐标 | number\string | No | All | Yes | | y | 文本基线起点的 y 坐标 | number\string | No | All | Yes | | dx | 从前一个文本元素水平移动文本位置 | number\string | No | All | Yes | | dy | 从前一个文本元素垂直移动文本位置 | number| string | No | All | Yes | | rotate | 旋转每个单独字形的方向 | array | No | All | Yes | | opacity | 透明度 | number | No | All | Yes | | inlineSize | 水平或垂直尺寸 | number | No | All | No | | alignmentBaseline | 指定文本的对齐基线 | string | NO | ALL | Yes | | baselineShift | 设置垂直位置调整 | number| string | No | All | Yes | | lengthAdjust | 调整文本以适应特定的布局约束 | string | No | All | Yes | | textLength | 指定文本应该被渲染的长度 | number | No | All | Yes |

TSpan：绘制文本或 Text 内的子文本

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :--------: | :------------------------------: | :-------------: | -------- | -------- | ----------------- | | x | 文本基线起点的 x 坐标 | number\string | No | All | Yes | | y | 文本基线起点的 y 坐标 | number\string | No | All | Yes | | dx | 从前一个文本元素水平移动文本位置 | number\string | No | All | Yes | | dy | 从前一个文本元素垂直移动文本位置 | number| string | No | All | Yes | | rotate | 旋转每个单独字形的方向 | array | No | All | Yes | | opacity | 透明度 | number | No | All | Yes | | inlineSize | 水平或垂直尺寸 | number | No | All | Yes |

TextPath：若要沿路径形状呈现文本，将文本括在具有 href 属性的 TextPath 元素中，并引用 Path 元素。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------: | :--------------------------------: | :-------------: | -------- | -------- | ----------------- | | href | 用于呈现文本的路径或基本形状的 URL | string | No | All | No | | xlinkHref | 用于呈现文本的路径或基本形状的 URL | string | No | All | No | | method | 沿路径渲染各个字形的方法 | string | No | All | No | | spacing | 绘制字符之间的间距 | string | No | All | No | | side | 文本应呈现在路径的哪一侧 | string | No | All | No | | midLine | 中线 | string | No | All | No | | startOffset | 文本开始被沿着路径绘制时的偏移量 | number| string | No | All | No |

SvgAst：该组件通过传入 ast 来渲染出 svg

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :--------------------------: | :----: | :------: | :------: | :---------------: | | ast | 解析 svg 字符串得到的 ast 树 | JsxAST | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |

SvgFromUri：该组件通过传入 uri 地址来渲染出 svg

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :-------------------: | :----: | :------: | :------: | :---------------: | | uri | svg 资源地址 | string | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |

SvgFromXml：该组件通过传入字符串来渲染出 svg

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :-------------------: | :----: | :------: | :------: | :---------------: | | xml | svg 代码的字符串 | string | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |

SvgXml：该组件通过传入字符串来渲染出 svg

SvgUri：该组件通过传入 uri 地址来渲染出 svg

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :-------------------: | :------: | :------: | :------: | :---------------: | | uri | svg 资源地址 | string | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes | | onError | 错误时触发 | function | No | All | Yes | | onLoad | 加载成功后触发 | function | No | All | Yes | | fallback | 加载中元素 | function | No | All | Yes |

函数

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-------: | :------------------------: | :------: | :------: | :------: | :---------------: | | parse | 将 svg 字符串解析成 JsxAST | function | No | All | Yes | | err | 打印日志 | function | No | All | Yes | | camelCase | 字符串首字母转成大写 | function | No | All | Yes | | fetchText | 将 svg 字符串解析成 JsxAST | function | No | All | Yes |

公共属性：

Common props 组件属性 HarmonyOS 侧支持情况

| Name | | :--------------: | fill | | fillOpacity | | fillRule | | clipRule | | clipPath | | stroke | | strokeWidth | | strokeOpacity | | strokeDasharray | | strokeDashoffset | | strokeLinecap | | strokeLinejoin | | strokeMiterlimit | | vectorEffect | | translate | | translateX | | translateY | | origin | | originX | originY | scale | | scaleX | | scaleY | | rotation | | x | | y | | transform | | marker | | markerStart | | markerMid | | markerEnd | | mask | | id | | opacity | | transform | | display | | pointerEvents | | vectorEffect | Description | Type | Default | Required | Platform | | :----------------------------------------------------------: | :---------: | :-------: | :------: | :------: | 设置填充区域颜色 | string | '#000' | No | All | 设置填充区域透明度 | number | 1 | No | All | 设置填充规则 | number | 1 | No | All | 设置裁剪规则 | string | 'evenodd' | No | All | 指定、关联一条裁剪路径 | string | 'none' | No | All | 设置边框颜色，不设置时，默认没有边框 | string | none | No | All | 设置边框宽度 | number | 1 | No | All | 边框透明度 | number | 1 | No | All | 用来描边的点划线的图案范式 | number | none | No | All | 指定了 dash 模式到路径开始的距离 | number | 1 | No | All | 设置路径两端的形状 | string | butt | No | All | 指明路径的转角处使用的形状 | string | miter | No | All | 对斜接长度和 stroke-width 的比率设置极限值 | number | 4 | No | All | 指明绘制对象时要使用的矢量效果 | string | none | No | All | 设置位移 | numberArray | 0,0 | No | All | 设置 x 轴位移 | number | 0 | No | All | 设置 y 轴位移 | number | 0 | No | All | 更改一个元素变形的原点 | numberArray | 0,0 | No | All | | 更改一个元素变形的原点 x 坐标（单独使用无效，需配合其他属性如 rotation 使用） | number | 0 | No | All | | 更改一个元素变形的原点 y 坐标（单独使用无效，需配合其他属性如 rotation 使用） | number | 0 | No | All | 定义缩放大小 | numberArray | 1，1 | No | All | 定义 x 轴缩放大小 | number | 1 | No | All | 定义 y 轴缩放大小 | number | 1 | No | All | 设置旋转角度 | number | 0，0 | No | All | 标识一个 x 轴坐标 | number | 0 | No | All | 标识一个 y 轴坐标 | number | 0 | No | All | 定义应用于元素及其子元素的变换规则列表 | string | - | No | All | 指定路径所有顶点的路标样式 | string | - | No | All | 指定路径起点所采用的路标样式 | string | - | No | All | 指定路径中间顶点所采用的路标样式 | string | - | No | All | 指定路径终点所采用的路标样式 | string | - | No | All | 给元素指定使用 Mask 元素实现遮罩效果 | string | - | No | All | 设置节点 id | string | - | No | All | 设置透明度 | number | 1 | No | All | 定义应用于元素及其子元素的变换规则列表 | string | - | No | All | 控制元素展示的方式 | string | block | No | All | 设置元素如何响应点击事件 | string | | No | All | 指明绘制对象时要使用的矢量效果 | Int | 0 | No | All |

FontProps 组件属性 HarmonyOS 侧支持情况

遗留问题

[ ] isPointInFill 判断点位坐标是否在fill上未实现
[ ] isPointInStroke 判断点位坐标是否在stroke上未实现
[ ] getTotalLength 获取总path的长度未实现
[ ] getPointAtLength 获取点位坐标在path上的信息未实现
[ ] getBBox 获取组件的边界信息未实现
[ ] getCTM 获取相对于父组件的matrix矩阵信息未实现
[ ] getScreenCTM 获取组件的matrix矩阵信息未实现
[ ] getRawResource 获取android中的资源文件未实现
[ ] foreignObject 该组件允许svg使用外部组件未实现
[ ] filter 该组件可以为 SVG 图形添加各种视觉效果未实现
[ ] TextPath 功能未完全实现
[ ] Text,TSpan组件的rotate,fontFamily,wordSpacing属性未实现

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme