一、ART组件
- Surface 一个矩形可渲染的区域，是其他元素的容器
- Group 可容纳多个形状、文本和其他的分组
- Shape 形状，可填充
- Text 文本
二、属性
1、Surface
- width 渲染区域的宽
- height 渲染区域的高
2、Shape
- d - 定义绘制路径
- stroke - 描边颜色
- strokeWidth - 描边宽度
- strokeDash - 虚线
[width1, space, width1, space1, ...]width: 线条宽度；space：线条间隔 - fill - 填充颜色
3、Text
- funt - 字体样式，定义字体、大小、是否加粗 如:
bold 35px Heiti SC
4、Path
- moveTo(x, y) - 移动到坐标（x, y）
- lineTo(x, y) - 连线到（x, y）
- arc() - 绘制弧线
arc(x, y, radius)x：起点和终点X横坐标；y：起点和终点X纵坐标；radius：圆的半径 - close() - 封闭空间
示例
export default class ARTDemo extends React.Component {
render () {
// 矩形路径
const RectPath = new Path()
.moveTo(1, 1)
.lineTo(1, 99)
.lineTo(99, 99)
.lineTo(99, 1)
.close();
// 圆形路径
const CirclePath = new Path()
.moveTo(50, 1)
.arc(0, 99, 25)
.arc(0, -99, 25)
.close();
return (
<View style={{flex: 1}}>
{* 线条 *}
<Surface width={100} height={20} style={{marginVertical: 20}}>
{* 直线 *}
<Shape d={new Path().moveTo(1, 1).lineTo(100, 1)} stroke="#000000" strokeWidth={1} />
{* 虚线1 *}
<Shape d={new Path().moveTo(1, 10).lineTo(100, 10)} stroke="#000000" strokeWidth={1} strokeDash={[10, 5]}/>
{* 虚线2 *}
<Shape d={new Path().moveTo(1, 20).lineTo(100, 20)} stroke="#000000" strokeWidth={1} strokeDash={[20, 15]}/>
</Surface>
{* 矩形 *}
<Surface width={100} height={100}>
<Shape d={RectPath} stroke="#000000" fill="#892265" strokeWidth={1} />
</Surface>
{* 圆形 *}
<Surface width={100} height={100} style={{marginVertical: 20}}>
<Shape d={CirclePath} stroke="#000000" strokeWidth={1}/>
</Surface>
{* 文字 *}
<Surface width={120} height={100}>
<Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC">Mouse</Text>
</Surface>
{* Group多组件 *}
<Surface width={100} height={100} style={{marginVertical: 20}}>
<Group>
<Shape d={RectPath} stroke="#000000" fill="#000000" strokeWidth={1} />
<Shape d={CirclePath} stroke="#FFFFFF" fill="#FFFFFF" strokeWidth={1} />
<Text stroke="red" font="bold 30px Heiti SC">Mouse</Text>
</Group>
</Surface>
{* 使用SVG *}
<Surface
width={18}
height={12}>
<Group scale={0.03}>
<Shape
fill='#00bea9'
d='M494,52c-13-13-33-13-46,0L176,324L62,211c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10L494,99C507,86,507,65,494,52z'/>
</Group>
</Surface>
<Surface width={60} height={60}>
<Group scale={0.03}>
<Shape
fill='#00bea9'
d='M512 874.666667a362.666667 362.666667 0 1 1 0-725.333334 362.666667 362.666667 0 0 1 0 725.333334z m0-42.666667a320 320 0 1 0 0-640 320 320 0 0 0 0 640z'/>
</Group>
</Surface>
</View>
)
}
}
备注
使用 SVG 中的路径时，需要注意绘制的内容可能超过可视区域，使用 <Group scale={0.03}> 缩放一下才可以看见绘制的图形