@Entry
@Component
struct DrawShapSimple {

//有7种绘制类型，分别为Circle（圆形）、Ellipse（椭圆形）、Line（直线）、Polyline（折线）、Polygon（多边形）、Path（路径）、Rect（矩形）。
  build() {

    Column({space:10}) {

      Row() {
        // 创建一个宽高都为150的shape组件，背景色为黄色，一个宽高都为300的viewport。用一个蓝色的矩形来填充viewport，在viewport中绘制一个直径为75的圆。
        //设定Shape的viewPort为viewport
        Shape() {
          Rect().width('100%').height('100%').fill('#0097D4')
          Circle({width: 75, height: 75}).fill('#E87361')
        }
        .viewPort(viewport)//viewport宽高300*300
        .width(150)        //Shape宽高150*150
        .height(150)
        .backgroundColor('#F5DC62')
        .margin(10)

        //设定Shape的viewPort为viewport1
        Shape() {
          Rect().width('100%').height('100%').fill('#0097D4')
          Circle({width: 75, height: 75}).fill('#E87361')
        }
        .viewPort(viewport1)
        .width(150)
        .height(150)
        .backgroundColor('#F5DC62')
        .margin(10)
      }

      Row() {
        //通过fill可以设置组件填充区域颜色。
        Path()
          .width(100)
          .height(100)
          .commands('M150 0 L300 300 L0 300 Z')
          .fill("#E87361")
          .margin(10)
        //通过stroke可以设置组件边框颜色。
        Path()
          .width(100)
          .height(100)
          .fillOpacity(0)
          .commands('M150 0 L300 300 L0 300 Z')
          .stroke(Color.Red)
          .margin(10)
        //通过strokeOpacity可以设置边框透明度。
        Path()
          .width(100)
          .height(100)
          .fillOpacity(0)
          .commands('M150 0 L300 300 L0 300 Z')
          .stroke(Color.Red)
          .strokeWidth(10)
          .strokeOpacity(0.2)
      }
      Row() {
        //通过strokeLineJoin可以设置线条拐角绘制样式。拐角绘制样式分为Bevel(使用斜角连接路径段)、Miter(使用尖角连接路径段)、Round(使用圆角连接路径段)。
        Polyline()
          .width(100)
          .height(100)
          .fillOpacity(0)
          .stroke(Color.Red)
          .strokeWidth(8)
          .points([[20, 0], [0, 100], [100, 90]])
            // 设置折线拐角处为圆弧
          .strokeLineJoin(LineJoinStyle.Round)
          .margin(10)

        //通过strokeMiterLimit设置斜接长度与边框宽度比值的极限值。
        //斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。strokeMiterLimit取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。
        Polyline()
          .width(100)
          .height(100)
          .fillOpacity(0)
          .stroke(Color.Red)
          .strokeWidth(10)
          .points([[20, 0], [20, 100], [100, 100]])
            // 设置折线拐角处为尖角
          .strokeLineJoin(LineJoinStyle.Miter)
            // 设置斜接长度与线宽的比值
          .strokeMiterLimit(1/Math.sin(45))
          .margin(10)

        Polyline()
          .width(100)
          .height(100)
          .fillOpacity(0)
          .stroke(Color.Red)
          .strokeWidth(10)
          .points([[20, 0], [20, 100], [100, 100]])
          .strokeLineJoin(LineJoinStyle.Miter)
          .strokeMiterLimit(1.42)
          .margin(10)
      }

      Row() {
        //通过antiAlias设置是否开启抗锯齿，默认值为true（开启抗锯齿）。
        //开启抗锯齿
        Circle()
          .width(150)
          .height(150)
          .fillOpacity(0)
          .strokeWidth(5)
          .stroke(Color.Black)
          .margin(10)
        //关闭抗锯齿
        Circle()
          .width(150)
          .height(150)
          .fillOpacity(0)
          .strokeWidth(5)
          .stroke(Color.Black)
          .antiAlias(false)
          .margin(10)
      }
      Row() {
        //在Shape的(-80, -5)点绘制一个封闭路径，填充颜色0x317AF7，线条宽度10，边框颜色红色，拐角样式锐角（默认值）。
        Shape() {
          Path().width(160).height(60).commands('M0 0 L400 0 L400 150 Z')
        }
        .viewPort({ x: -30, y: -5, width: 150, height: 150 })
        .fill(0x317AF7)
        .stroke(Color.Red)
        .strokeWidth(3)
        .strokeLineJoin(LineJoinStyle.Miter)
        .strokeMiterLimit(5)
        .backgroundColor('#F5DC62')
        .margin(10)

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

    }.justifyContent(FlexAlign.Center)

  }
}

//定义形状视口viewport，用于指定用户空间中的一个矩形，该矩形映射到为关联的SVG元素建立的视区边界。
//viewport属性的值包含x、y、width和height四个可选参数，x和y表示视区的左上角坐标，width和height表示其尺寸。
class tmp{
  x:number = 0
  y:number = 0
  width:number = 300
  height:number = 300
}
let viewport:tmp = new tmp()
class tmp1{
  x:number = -150
  y:number = -150
  width:number = 300
  height:number = 300
}
let viewport1:tmp1 = new tmp1()