模板版本：v0.2.2

[!TIP] Gitee 地址

安装与使用

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

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

npm

npm install @tuya-oh/art

yarn

yarn add @tuya-oh/art

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

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

// @flow
import React from 'react';
import {StyleSheet, Dimensions} from 'react-native';
import {
  Surface,
  Shape,
  Group
} from '@react-native-community/art';

const HEART_SHAPE = 
'M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z';

const App = () => {
  return (
    const surfaceDimensions = Dimensions.get('window').width;

    return (
      <Surface
        width={surfaceDimensions}
        height={surfaceDimensions / 2}
        style={styles.surface}>
        <Group
          x={surfaceDimensions / 2 - 50}
          y={surfaceDimensions / 4 - 50}
          visible={true}>
          <Shape
            d={HEART_SHAPE}
            strokeWidth={5}
            stroke={'#00ff00'}
            visible={true}
          />
        </Group>
      </Surface>
    );
  );
};

export default App;

const styles = StyleSheet.create({
  surface: {
    backgroundColor: 'black',
  }
});

Link

本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照 @react-native-oh-tpl/react-native-svg 进行引入

约束与限制

兼容性

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

此库依赖于react-native-svg库，详情见请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@react-native-oh-tpl/react-native-svg****

属性

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

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

Surface：绘图元素容器

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :----- | -------------- | -------------------- | -------- | -------- | ----------------- | | width | 盒子的宽 | number | N | All | yes | | height | 盒子的高 | number | N | All | yes | | style | 自定义容器样式 | View.PropTypes.Style | N | All | yes |

Group：多个图形和文本元素组合在一起

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-------- | ---------------------------- | --------- | -------- | -------- | ----------------- | | visible | 透明度 | number | N | All | yes | | opacity | 透明度 | boolean | N | All | yes | | x | x轴位移 | number | N | All | yes | | y | y轴位移 | number | N | All | yes | | transform | 几何变换（平移、旋转、缩放） | Transform | N | All | yes | | clipping | 路径裁剪（需配合 Path 对象） | Path | N | N | no |

Text：文本

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------- | ------------------------------------------------------------ | ------------------------ | -------- | -------- | ----------------- | | font | 属性的值是一个字符串，格式为 "font-weight font-size font-family" | string | N | All | yes | | alignment | 用于控制文本的对齐方式 | string | N | All | yes | | fill | 用于控制文本的颜色 | string | LinearGradient | N | All | yes | | stroke | 设置文本的描边颜色 | string | N | All | yes | | strokeWidth | 设置描边的宽度（单位为像素） | number | N | All | yes | | strokeCap | 设置描边端点的样式。(主要用于Shape组件，Text组件没有效果) | butt | square | round | N | N | no | | strokeDash | 设置描边的虚线样式 | Array | N | All | yes | | strokeJoin | 设置描边连接处的样式。 | bevel | miter | round | N | All | yes | | opacity | 透明度 | number | N | All | yes | | scaleX | x轴缩放比例 | number | N | All | yes | | scaleY | y轴缩放比例 | number | N | All | yes | | scale | 缩放比例 | number | N | All | yes | | visible | 是否可见 | boolean | N | All | yes | | x | x轴位移 | number | N | All | yes | | y | y轴位移 | number | N | All | yes |

Shape：绘制矢量图形，支持自定义路径

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------- | --------------------------------------------------------- | ------------------------ | -------- | -------- | ----------------- | | d | SVG格式的字符串 或者new Path()的对象 | string | Path | N | All | yes | | fill | 用于控制文本的颜色 | string | LinearGradient | N | All | yes | | stroke | 设置文本的描边颜色 | string | N | All | yes | | strokeWidth | 设置描边的宽度（单位为像素） | number | N | All | yes | | strokeCap | 设置描边端点的样式。(主要用于Shape组件，Text组件没有效果) | butt | square | round | N | All | yes | | strokeDash | 设置描边的虚线样式 | Array | N | All | yes | | strokeJoin | 设置描边连接处的样式。 | bevel | miter | round | N | All | yes | | opacity | 透明度 | number | N | All | yes | | scaleX | x轴缩放比例 | number | N | All | yes | | scaleY | y轴缩放比例 | number | N | All | yes | | scale | 缩放比例 | number | N | All | yes | | visible | 是否可见 | boolean | N | All | yes | | x | x轴位移 | number | N | All | yes | | y | y轴位移 | number | N | All | yes |

ClippingRectangle：裁剪组件（暂不支持）

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :----- | ----------- | ------ | -------- | -------- | ----------------- | | width | 宽度 | number | N | N | N | | height | 高度 | number | N | N | N | | x | x轴位移 | number | N | N | N | | y | y轴位移 | number | N | N | N |

Pattern：定义图案，可作为图形的填充或创建重复的视觉效果（暂不支持）

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :----- | ------------ | ------ | -------- | -------- | ----------------- | | url | 填充路径地址 | string | N | N | no | | width | 宽度 | number | N | N | no | | height | 高度 | number | N | N | no | | x | x轴位移 | number | N | N | no | | y | y轴位移 | number | N | N | no |

Path：路径绘制

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :----------- | ---------------------- | ---- | -------- | -------- | ----------------- | | move | 相对坐标移动 | | N | All | yes | | moveTo | 绝对坐标移动 | | N | All | yes | | line | 相对坐标绘制直线 | | N | All | yes | | lineTo | 绝对坐标绘制直线 | | N | All | yes | | curve | 相对坐标绘制贝塞尔曲线 | | N | All | yes | | curveTo | 绝对坐标绘制贝塞尔曲线 | | N | All | yes | | arc | 相对坐标绘制弧线 | | N | All | yes | | arcTo | 绝对坐标绘制弧线 | | N | All | yes | | counterArc | 相对坐标绘制弧线 | | N | All | yes | | counterArcTo | 绝对坐标绘制弧线 | | N | All | yes | | close | 闭合路线 | | N | All | yes | | reset | 重置路径 | | N | All | yes | | initialize | 克隆Path相关路径 | | N | All | yes |

LinearGradient：线性渐变填充

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---- | -------------------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | | stops | 渐变的颜色停止点数组 | type GradientStops = {[key: string]: ColorType} |Array; | N | All | yes | | x1 | 渐变起始点的 x 坐标 | number | N | All | yes | | y1 | 渐变起始点的 y 坐标 | number | N | All | yes | | x2 | 渐变结束点的 x 坐标 | number | N | All | yes | | y2 | 渐变结束点的 y 坐标 | number | N | All | yes |

RadialGradient：径向渐变填充

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :---- | -------------------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | | stops | 渐变的颜色停止点数组 | type GradientStops = {[key: string]: ColorType} |Array; | N | N | yes | | fx | 渐变焦点的 x 坐标 | number | N | N | yes | | fy | 渐变焦点的 y 坐标 | number | N | N | yes | | rx | 渐变外环的 x 半径 | number | N | N | yes | | ry | 渐变外环的 y 半径 | number | N | N | yes | | cx | 渐变中心点的 x 坐标 | number | N | N | yes | | cy | 渐变中心点的 y 坐标 | number | N | N | yes |

Transform：图形进行变换操作

| Name | Description | Type | Required | Platform | HarmonyOS Support | | :-------- | -------------------------------- | ------ | -------- | -------- | ----------------- | | xx | X轴方向的缩放因子。 | number | N | All | yes | | yx | Y轴方向的倾斜因子（相对于X轴）。 | number | N | All | yes | | xy | X轴方向的倾斜因子（相对于Y轴）。 | number | N | All | yes | | yy | Y轴方向的缩放因子。 | number | N | All | yes | | x | X轴方向的平移距离。 | number | N | All | yes | | y | Y轴方向的平移距离。 | number | N | All | yes | | transform | 用法与new Transform(...arg) 一致 | number | N | All | yes | | translate | 沿X | Y轴的平移距离。 | number | N | All | yes | | move | 与translate用法一致 | number | N | All | yes | | moveTo | 与translate用法一致 | number | N | All | yes | | scale | 缩放比例。 | number | N | All | yes | | rotate | 旋转 | number | N | All | yes | | rotateTo | 与rotate用法一致 | number | N | All | yes |

遗留问题

其他

开源协议

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