鸿蒙界面开发——组件（8）：图形绘制

绘制几何图形——父组件Shape

绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。
1、绘制组件使用Shape作为父组件，实现类似SVG的效果。
2、绘制组件单独使用，用于在页面上绘制指定的图形。

Shape(value?: PixelMap)
value	PixelMap	否	绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。

子组件包含Rect、Path、Circle、Ellipse、Polyline、Polygon、Image、Text、Column、Row、Shape子组件。

Shape属性

除支持通用属性外，还支持以下属性：

1. viewPort(value: { x?: number | string; y?: number | string; width?: number | string; height?: number | string })设置形状的视口。
   viewport具体用法：

• 通过形状视口对图形进行放大与缩小。

class tmp{
  x:number = 0
  y:number = 0
  width:number = 75
  height:number = 75
}
let viep:tmp = new tmp()
// 创建一个宽高都为150的shape组件，背景色为黄色，一个宽高都为75的viewport。用一个蓝色的矩形来填充viewport，在viewport中绘制一个直径为75的圆。
// 绘制结束，viewport会根据组件宽高放大两倍
Text('shape内放大的Circle组件')
Shape() {
  Rect().width('100%').height('100%').fill('#0097D4')
  Circle({width: 75, height: 75}).fill('#E87361')
}
.viewPort(viep)
.width(150)
.height(150)
.backgroundColor('#F5DC62')

2. fill(value: ResourceColor)设置填充区域颜色。异常值按照默认值处理。
3. fillOpacity(value: number | string | Resource)设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。
4. stroke(value: ResourceColor)设置边框颜色，不设置时，默认没有边框。异常值不会绘制边框。
5. strokeDashArray(value: Array)设置边框间隙。异常值按照默认值处理。
6. strokeDashOffset(value: number | string)设置边框绘制起点的偏移量。异常值按照默认值处理。
7. strokeLineCap(value: LineCapStyle)设置边框端点绘制样式。
   LineCapStyle名称 描述

• Butt 线条两端为平行线，不额外扩展。
• Round 在线条两端延伸半个圆，直径等于线宽。
• Square 在线条两端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。

8. strokeLineJoin(value: LineJoinStyle)设置边框拐角绘制样式。
   LineJoinStyle名称 描述

• Bevel 使用斜角连接路径段。
• Miter 使用尖角连接路径段。
• Round 使用圆角连接路径段。

9. strokeMiterLimit(value: number | string)设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。该属性的合法值范围应当大于等于1.0，当取值范围在[0,1)时按1.0处理，其余异常值按默认值处理。
10. strokeOpacity(value: number | string | Resource)设置边框透明度。
11. strokeWidth(value: number | string)设置边框宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。默认值：1。边框大图形内部就会小，但也会撑大整个图形结构，不清楚是按照什么样子的一个比例。
12. antiAlias(value: boolean)设置是否开启抗锯齿效果。默认值：true。
13. mesh(value: Array, column: number, row: number)设置mesh效果。

绘制组件使用Shape作为父组件，实现类似SVG的效果。
绘制组件也可单独使用，用于在页面上绘制指定的图形。

绘制圆形的组件

Circle(value?: CircleOptions)

CircleOptions对象说明：

width	string | number	否	宽度。默认值：0异常值按照默认值处理。
height	string | number	否	高度。默认值：0异常值按照默认值处理。

// 绘制一个直径为150的圆
Circle({ width: 150, height: 150 })
// 绘制一个直径为150、线条为红色虚线的圆环（宽高设置不一致时以短边为直径）
Circle()
  .width(150)
  .height(200)
  .fillOpacity(0)
  .strokeWidth(3)
  .stroke(Color.Red)
  .strokeDashArray([1, 2])

属性同Shape

椭圆绘制组件

Ellipse(options?: {width?: string | number, height?: string | number})

宽高参数同Circle；属性同Circle；

直线绘制组件

Line(value?: {width?: string | number, height?: string | number})

startPoint(value: Array)设置直线起点坐标点（相对坐标），异常值按照默认值处理。
endPoint(value: Array)设置直线终点坐标点（相对坐标），异常值按照默认值处理。

 // 线条绘制的起止点坐标均是相对于Line组件本身绘制区域的坐标
Line()
   .width(200)
   .height(150)
   .startPoint([0, 0])
   .endPoint([50, 100])
   .stroke(Color.Black)
   .backgroundColor('#F5F5F5')

折线绘制组件

Polyline(value?: {width?: string | number, height?: string | number})

points(value: Array)设置折线经过坐标点列表。异常值按照默认值处理。

// 在 100 * 100 的矩形框中绘制一段折线，起点(0, 0)，经过(20,60)，到达终点(100, 100)
Polyline({ width: 100, height: 100 })
  .points([[0, 0], [20, 60], [100, 100]])
  .fillOpacity(0)
  .stroke(Color.Blue)
  .strokeWidth(3)

多边形绘制组件

Polygon(value?: {width?: string | number, height?: string | number})

// 在 100 * 100 的矩形框中绘制一个四边形，起点(0, 0)，经过(0, 100)和(100, 100)，终点(100, 0)
Polygon().width(100).height(100)
  .points([[0, 0], [0, 100], [100, 100], [100, 0]])
  .fillOpacity(0)
  .strokeWidth(5)
  .stroke(Color.Blue)

路径绘制组件

根据绘制路径生成封闭的自定义形状。

Path(value?: { width?: number | string; height?: number | string; commands?: string })

commands支持的绘制命令如下：

1. M moveto （x y） 在给定的 (x, y) 坐标处开始一个新的子路径。例如，M 0 0 表示将（0, 0）点作为新子路径的起始点。
2. L lineto （x y） 从当前点到给定的 (x, y) 坐标画一条直线，该坐标成为新的当前点。例如，L 50 50 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。
3. H horizontal lineto x 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，H 50 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。
4. V vertical lineto y 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，V 50 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。
5. C curveto (x1 y1 x2 y2 x y) 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，C100 100 250 100 250 200 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。
6. S smooth curveto (x2 y2 x y) (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，C100 100 250 100 250 200 S400 300 400 200第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。
7. Q quadratic Belzier curve (x1 y1 x y) 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，Q400 50 600 300 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。
8. T smooth quadratic Belzier curveto (x y) 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，Q400 50 600 300 T1000 300第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。
9. A elliptical Arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) 从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。
10. Z closepath none 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。
    属性：
    commands(value: string)设置路径绘制的命令字符串，注意单位为px。

 Path()
   .width('210px')
   .height('310px')
   .commands('M0 100 A30 20 20 0 0 200 100 Z')
   .fillOpacity(0)
   .stroke(Color.Black)
   .strokeWidth(3)

矩形绘制组件

Rect(value?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} |{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})

radiusWidth(value: number | string)设置圆角的宽度，仅设置宽时宽高一致。
radiusHeight(value: number | string)设置圆角的高度，仅设置高时宽高一致。
radius(value: number | string | Array<string | number>)设置圆角半径大小。

// 绘制90% * 50矩形, 左上圆角宽高40,右上圆角宽高20,右下圆角宽高40,左下圆角宽高20
Rect({ width: '90%', height: 80 })
  .radius([[40, 40], [20, 20], [40, 40], [20, 20]])
  .fill(Color.Pink)