@tuya-oh/art

模板版本：v0.2.2

@react-native-community/art

[!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) ，请自由地享受和参与开源。