# Shape 绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。 1、绘制组件使用Shape作为父组件，实现类似SVG的效果。 2、绘制组件单独使用，用于在页面上绘制指定的图形。 ## 子组件可以包含子组件。 ## 接口 Shape\(target?: PixelMap\) - 参数

参数名	参数类型	必填	默认值	参数描述
target	PixelMap	否	null	绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。

## 属性

参数名称	参数类型	默认值	必填	参数描述
viewPort	{ x: Length, y: Length, width: Length, height: Length }	-	是	形状的视口。
fill	Color	Black	否	填充颜色。
stroke	Color	-	否	边框颜色。
strokeDashArray	Array<Length>	[]	否	设置边框的间隙。
strokeDashOffset	Length	0	否	边框绘制起点的偏移量。
strokeLineCap	LineCapStyle	Butt	否	路径端点绘制样式。
strokeLineJoin	LineJoinStyle	Miter	否	边框拐角绘制样式。
strokeMiterLimit	number	4	否	锐角绘制成斜角的极限值。
strokeOpacity	number	1	否	设置边框的不透明度。
strokeWidth	Length	1	否	设置边框的宽度。
antiAlias	boolean	true	否	是否开启抗锯齿。

- LineJoinStyle枚举说明

名称	描述
Bevel	使用斜角连接路径段。
Miter	使用尖角连接路径段。
Round	使用圆角连接路径段。

## 示例 ``` @Entry @Component struct ShapeExample { build() { Column({ space: 5 }) { Text('basic').fontSize(9).fontColor(0xCCCCCC).width(320) // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) // 在Shape的(-2, 118)点绘制一个 300 * 10 线段,颜色0x317Af7,边框颜色黑色,宽度4,间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) Shape() { Rect().width(300).height(50) Ellipse().width(300).height(50).offset({ x: 0, y: 60 }) Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 }) } .viewPort({ x: -2, y: -2, width: 304, height: 124 }) .fill(0x317Af7).stroke(Color.Black).strokeWidth(4) .strokeDashArray([20]).strokeDashOffset(10).strokeLineCap(LineCapStyle.Round) .strokeLineJoin(LineJoinStyle.Round).antiAlias(true) // 在Shape的(-1, -1)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度2 Shape() { Rect().width(300).height(50) }.viewPort({ x: -1, y: -1, width: 302, height: 52 }).fill(0x317Af7).stroke(Color.Black).strokeWidth(2) Text('border').fontSize(9).fontColor(0xCCCCCC).width(320) // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') }.viewPort({ x: 0, y: -5, width: 300, height: 10 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]) // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } .viewPort({ x: 0, y: -5, width: 300, height: 10 }) .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeDashOffset(10) // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,透明度0.5 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') }.viewPort({ x: 0, y: -5, width: 300, height: 10 }).stroke(0xEE8443).strokeWidth(10).strokeOpacity(0.5) // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10,尖端样式圆角 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } .viewPort({ x: 0, y: -5, width: 300, height: 10 }) .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeLineCap(LineCapStyle.Round) // 在Shape的(-5, -5)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框宽度10,边框颜色0xEE8443,拐角样式圆角 Shape() { Rect().width(300).height(50) } .viewPort({ x: -5, y: -5, width: 310, height: 60 }) .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10).strokeLineJoin(LineJoinStyle.Round) Shape() { Path().width(300).height(60).commands('M0 0 L400 0 L400 200 Z') } .viewPort({ x: -80, y: -5, width: 310, height: 100 }) .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10) .strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5) }.width('100%').margin({ top: 15 }) } } ``` ![](figures/shape.gif)