鸿蒙应用开发技术-Shape图形显示

Shape图形显示

Shape是绘制组件的父组件，可以用来绘制矩形、圆形、椭圆、直线、折线、直线、多边形、路径等。父组件中会描述所有绘制组件均支持的通用属性。

1. 矩形（Rect）*

`//1.绘制矩形
Row({ space: 10 }) {
//1.1 普通矩形
Rect({ width: 100, height: 50 })
.fill(Color.Pink)
.stroke(Color.Red)
.strokeWidth(3)
.fillOpacity(0.5)

  //1.2 圆角矩形
Rect({ width: 100, height: 50 })
.fill(Color.Pink)
.stroke(Color.Red)
.strokeWidth(3)
.fillOpacity(0.5)
.radius(20)

  //1.3 异形圆角矩形
Rect({ width: 100, height: 50 })
.fill(Color.Pink)
.stroke(Color.Red)
.strokeWidth(4)
.radius([[40, 40], [20, 20], [40, 40], [20, 20]])
}`

2. 圆形（Circle）

 

//2.绘制圆形
Row({ space: 10 }) {
//2.1 圆形
Circle({ width: 100, height: 100 })
.fill(Color.Pink)//填充颜色
.stroke(Color.Red)//外边框颜色
.strokeWidth(2) //外边框厚度

  //2.2 虚线圆形
Circle({ width: 100, height: 100 })
.fill(Color.Pink)
.stroke(Color.Red)
.strokeWidth(2)
.strokeDashArray([10, 10]) //[线长度,间隔长度]
}

3. 椭圆（ Ellipse）

 

//3.绘制椭圆
Row({ space: 10 }) {
//3.1 实现椭圆
Ellipse({ width: 150, height: 100 })
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
//3.2 虚线椭圆
Ellipse({ width: 100, height: 150 })
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
}

4. 多边形（ Polygon）

 

//4.绘制多边形：以多边形外边框矩形左上角为原点[0,0],建立坐标系
Row({ space: 10 }) {
//4.1 绘制三角形
Polygon({ width: 100, height: 100 })
.points([[0, 0], [50, 100], [100, 0]])
.fill(Color.Green)

  //4.2 绘制四边形
Polygon()
.width(100)
.height(100)
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
.fillOpacity(0)
.strokeWidth(5)
.stroke(Color.Blue)

  //4.3 绘制五边形
Polygon()
.width(100)
.height(100)
.points([[0, 50], [20, 100], [80, 100], [100, 50],[50, 0]])
.fill(Color.Red)
.fillOpacity(0.6)
}

5. 直线（Path）

 

//5.绘线
Column({space:10}){
//5.1 实直线
Line({width:300,height:30})
.startPoint([0, 0]) //起点
.endPoint([300, 0]) //终点
.stroke(Color.Black)
.strokeWidth(10)

  //5.2 虚线
Line({width:300,height:30})
.startPoint([0, 0])  //起点
.endPoint([300, 0])  //终点
.stroke(Color.Black)
.strokeWidth(10)
.strokeDashArray([10,20,30])  //设置虚线间隔[线长10,白长20,线长30]
}