@ohmi/art

模板版本：v0.2.2

@ohmi/art

[!TIP] Gitee 地址

介绍

该项目基于react-native-svg开发。

安装与使用

npm

npm install @ohmi/art

yarn

yarn add @ohmi/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-svg-capi 进行引入

属性

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

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

Surface：绘图元素容器（组件）

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
width	string | number	0	盒子的宽，支持百分比		否	All	是
height	number	0	盒子的高，不支持百分比		否	All	是

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

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
width	number	0			否	N	否
height	number	0			否	N	否

Text：文本（组件）

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
font	string		属性的值是一个字符串，格式为 "font-weight font-size font-family"	1.font-weight：只支持 normal 和 bold，不支持其他样式（如 italic）。 2.font-size 的单位是像素（px），不能使用其他单位（如 % 或 em）。 3.font-family 必须是系统支持的字体或已导入的自定义字体。	否	All	是
alignment	string	left	用于控制文本的对齐方式	1.left：文本将从指定的（0,0） 坐标开始，向左对齐。 2.center：文本将从指定的（0,0） 坐标开始，居中对齐。 3.right：文本将从指定的 （0,0） 坐标开始，向右对齐。	否	All	是
fill	string | LinearGradient | RadialGradient		用于控制文本的颜色	如 #000,red,LinearGradient 注：0.61上的RadialGradient对象不生效，0.72上修复了这个bug，可以生效	否	All	是
stroke	string		设置文本的描边颜色		否	All	是
strokeWidth	number	1	设置描边的宽度（单位为像素）		否	All	是
strokeCap	string	round	设置描边端点的样式。	1.butt：描边端点是平的。 2.square：描边端点是方形的。 3.round：描边端点是圆形的。 注：需要搭配strokeDash使用才可以看出效果	否	All	是
strokeDash	Array		设置描边的虚线样式	例如：[10, 5] 表示绘制 10 像素的实线，然后绘制 5 像素的空白，如此循环。	否	All	是
strokeJoin	string	miter	设置描边连接处的样式。	1.bevel：连接处是斜面的。 2.miter：连接处是尖锐的。 3.round：连接处是圆形的。	否	All	是

Path：路径绘制（类）

方法名称	参数	描述	说明	支持平台	HarmonyOS 支持	HarmonyOS 支持
move	dx:x 轴方向的偏移量 dy:y 轴方向的偏移量	相对坐标移动	将路径的起点从当前位置沿着 x 轴和 y 轴方向移动偏移量 dx 和 dy。	All	是	是
moveTo	x：移动到的目标 x 坐标。 y：移动到的目标 y 坐标。	绝对坐标移动	将路径的起点移动到指定的绝对坐标 (x, y)。	All	是	是
line	dx:x 轴方向的距离 dy:y 轴方向的距离	相对坐标绘制直线	从当前路径的起点绘制一条直线，移动距离为 dx 和 dy。	All	是	是
lineTo	x：绘制到的目标 x 坐标。 y：绘制到的目标 y 坐标。	绝对坐标绘制直线	从当前路径的起点绘制一条直线到指定的坐标	All	是	是
curve	c1x (number): 第一个控制点的 x 坐标。 c1y (number): 第一个控制点的 y 坐标。 c2x (number): 第二个控制点的 x 坐标。 c2y (number): 第二个控制点的 y 坐标。 ex (number): 结束点的 x 坐标（相对于当前点的偏移量）。 ey (number): 结束点的 y 坐标（相对于当前点的偏移量）	相对坐标绘制贝塞尔曲线	curve 方法使用相对坐标来指定结束点的位置，即结束点的坐标是相对于当前点的偏移量。 2个参数：(dx, dy) 绘制一条直线，从当前点到 (当前点 + dx, 当前点 + dy)。 3个参数：(c1x, c1y, ex) 绘制一条二次贝塞尔曲线，使用一个控制点。 ex = ex,ey = 整个坐标系y 0 4个参数：(c1x, c1y, ex, ey) 绘制一条二次贝塞尔曲线，使用一个控制点。 5个参数：(c1x, c1y, c2x, c2y, ex) 绘制一条三次贝塞尔曲线，使用俩个控制点。ex = ex,ey = 整个坐标系y 0 6个参数：(c1x, c1y, c2x, c2y, ex, ey) 绘制一条三次贝塞尔曲线，使用俩个控制点。 注：curve使用1个参数会报错	All	是	是
curveTo	c1x (number): 第一个控制点的 x 坐标。 c1y (number): 第一个控制点的 y 坐标。 c2x (number): 第二个控制点的 x 坐标。 c2y (number): 第二个控制点的 y 坐标。 ex (number): 结束点的 x 坐标（绝对坐标）。 ey (number): 结束点的 y 坐标（绝对坐标）	绝对坐标绘制贝塞尔曲线	curveTo 方法使用绝对坐标来指定结束点的位置，即结束点的坐标是相对于整个坐标系的。 2个参数：(dx, dy) 绘制一条直线，从当前点到 (整个坐标系的dx, 整个坐标系的dy)。 4个参数：(c1x, c1y, ex, ey) 绘制一条二次贝塞尔曲线，使用一个控制点。 6个参数：(c1x, c1y, c2x, c2y, ex, ey) 绘制一条三次贝塞尔曲线，使用俩个控制点。 注：curveTo使用1个参数，3个参数或5个参数会报错	All	是	是
arc	x (number): 终点的 x 坐标，相对于当前点的偏移量。 y (number): 终点的 y 坐标，相对于当前点的偏移量。 rx (number): 圆弧在 x 轴方向的半径。 ry (number): 圆弧在 y 轴方向的半径。 outer (boolean): 是否为外侧弧线。（若两点间的圆心角超过 180 度，设置 outer=true 会绘制较长的弧，false则绘制小弧） counterClockwise (boolean): 是否逆时针绘制弧线。true 表示逆时针，false 表示顺时针。 rotation (number): 旋转角度。	相对坐标绘制弧线	使用一个参数会报错	All	是	是
arcTo	x (number): 终点的 x 坐标，相对于整个坐标系的值。 y (number): 终点的 y 坐标，相对于整个坐标系的值。 rx (number): 圆弧在 x 轴方向的半径。 ry (number): 圆弧在 y 轴方向的半径。 outer (boolean): 是否为外侧弧线。（若两点间的圆心角超过 180 度，设置 outer=true 会绘制较长的弧，false则绘制小弧） counterClockwise (boolean): 是否逆时针绘制弧线。true 表示逆时针，false 表示顺时针。 rotation (number): 旋转角度。	绝对坐标绘制弧线	使用一个参数会报错	All	是	是
counterArc	x (number): 终点的 x 坐标，相对于当前点的偏移量。 y (number): 终点的 y 坐标，相对于当前点的偏移量。 rx (number): 圆弧在 x 轴方向的半径。 ry (number): 圆弧在 y 轴方向的半径。 outer (boolean): 是否为外侧弧线。（若两点间的圆心角超过 180 度，设置 outer=true 会绘制较长的弧，false则绘制小弧）	相对坐标绘制弧线	counterArc: function(x, y, rx, ry, outer){ return this.arc(x, y, rx, ry, outer, true); } 经过观察源码，发现只是将arc的第六个参数counterClockwise使用逆时针进行使用而已，且只有5个参数值，用法与效果与arc5个参数效果一致	All	是	是
counterArcTo	x (number): 终点的 x 坐标，相对于整个坐标系的值。 y (number): 终点的 y 坐标，相对于整个坐标系的值。 rx (number): 圆弧在 x 轴方向的半径。 ry (number): 圆弧在 y 轴方向的半径。 outer (boolean): 是否为外侧弧线。（若两点间的圆心角超过 180 度，设置 outer=true 会绘制较长的弧，false则绘制小弧）	绝对坐标绘制弧线	counterArcTo: function(x, y, rx, ry, outer){ return this.arcTo(x, y, rx, ry, outer, true); } 经过观察源码，发现只是将arc的第六个参数counterClockwise使用逆时针进行使用而已，且只有5个参数值，用法与效果与arcTo5个参数效果一致	All	是	是
close	无	闭合路线		All	是	是
reset	无	重置路径		All	是	是
initialize	Path对象	克隆Path相关路径		All	是	是

Shape：创建和渲染矢量图形（组件）

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
d	string | Path对象		SVG格式的字符串 或者new Path()的对象		否	All	是
height	number		盒子的高。 不知道有啥用，源码上有这个属性，但显示的内容，大小是根据d这个属性来决定的		否	All	是
width	number		盒子的高。 不知道有啥用，源码上有这个属性，但显示的内容，大小是根据d这个属性来决定的		否	All	是
fill	string | LinearGradient | RadialGradient		用于控制文本的颜色	如 #000,red,LinearGradient 注：0.61上的RadialGradient对象不生效，0.72上修复了这个bug，可以生效	否	All	是
stroke	string		设置文本的描边颜色		否	All	是
strokeWidth	number	1	设置描边的宽度（单位为像素）		否	All	是
strokeCap	string	round	设置描边端点的样式。	1.butt：描边端点是平的。 2.square：描边端点是方形的。 3.round：描边端点是圆形的。	否	All	是
strokeDash	Array		设置描边的虚线样式	例如：[10, 5] 表示绘制 10 像素的实线，然后绘制 5 像素的空白，如此循环。	否	All	是
strokeJoin	string	miter	设置描边连接处的样式。	1.bevel：连接处是斜面的。 2.miter：连接处是尖锐的。 3.round：连接处是圆形的。	否	All	是

ClippingRectangle：图形裁剪（组件）0.61不支持

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
width	number	0	盒子的宽		否	N	否
height	number	0	盒子的高		否	N	否

LinearGradient：线性渐变填充（构造函数，下列是参数列表）

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
stops	type GradientStops = {[key: string]: ColorType} | Array;		渐变的颜色停止点数组		否	All	是
x1	number		渐变起始点的 x 坐标		否	All	是
y1	number		渐变起始点的 y 坐标		否	All	是
x2	number		渐变结束点的 x 坐标		否	All	是
y2	number		渐变结束点的 y 坐标		否	All	是

RadialGradient：径向渐变填充（构造函数，下列是参数列表）0.61没有效果

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
stops	type GradientStops = {[key: string]: ColorType} | Array;		渐变的颜色停止点数组		否	N	是
fx	number	0.5	渐变焦点的 x 坐标		否	N	是
fy	number	0.5	渐变焦点的 y 坐标		否	N	是
rx	number	0.5	渐变外环的 x 半径		否	N	是
ry	number	0.5	渐变外环的 y 半径		否	N	是
cx	number	0.5	渐变中心点的 x 坐标		否	N	是
cy	number	0.5	渐变中心点的 y 坐标		否	N	是

Transform：图形进行变换操作（构造函数，下列是参数列表）

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
xx	number	1	X轴方向的缩放因子。		否	All	是
yx	number	0	Y轴方向的倾斜因子（相对于X轴）。		否	All	是
xy	number	0	X轴方向的倾斜因子（相对于Y轴）。		否	All	是
yy	number	1	Y轴方向的缩放因子。		否	All	是
x	number	0	X轴方向的平移距离。		否	All	是
y	number	0	Y轴方向的平移距离。
方法名称	参数	描述	说明		是否必需	支持平台	HarmonyOS 支持
transform	xx yx xy yy x y	用法与new Transform(...arg) 一致			否	All	是
translate	x y	沿X | Y轴的平移距离。	正值向右移动，负值向左移动。		否	All	是
move	x y	与translate用法一致			否	All	是
moveTo	x y	与translate用法一致			否	All	是
scale	xx yy	缩放比例。	大于1表示放大，小于1表示缩小。		否	All	是
rotate	deg 旋转角度 x 旋转的中心点x轴 y 旋转的中心点y轴				否	All	是
rotateTo	deg 旋转角度 x 旋转的中心点x轴 y 旋转的中心点y轴	与rotate用法一致			否	All	是

公共属性：Common props 组件属性 HarmonyOS 侧支持情况（Surface与ClippingRectangle不生效，shadow系列的属性仅对Text和Shape组件生效）

属性名称	类型	默认值	描述	说明	是否必需	支持平台	HarmonyOS 支持
opacity	number	1	透明度（0-1）		否	All	是
originX	number	0	原点 X 坐标	需搭配rotation使用	否	All	是
originY	number	0	原点 Y 坐标	需搭配rotation使用	否	All	是
rotation	number	0	旋转角度		否	All	是
scaleX	number	1	X 轴方向的缩放比例		否	All	是
scaleY	number	1	Y 轴方向的缩放比例		否	All	是
scale	number	1	统一缩放比例（同时影响 X 轴和 Y 轴）		否	All	是
x	number	0	横坐标位移		否	All	是
y	number	0	纵坐标位移		否	All	是
visible	boolean	true	是否可见		否	All	是
shadowColor	string	#000	设置阴影的颜色		否	All	是
shadowOffset	object	{ x: 0, y: 0 }	设置阴影的偏移量	包含 x 和 y 两个属性，分别表示水平和垂直方向的偏移量。	否	All	是
shadowOpacity	number	1	设置阴影的透明度		否	All	是
shadowRadius	number	0	设置阴影的模糊半径，值越大阴影越模糊。	目前72上面这个属性不生效（OS底层暂时不支持）	否		否