#星光不负 码向未来# 鸿蒙开发实战：几何图形绘制全流程解析与落地指南 原创 精华

Shape(value?: PixelMap)

Shape() {​
  Rect().width(300).height(50)​
}

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

Circle({ width: 150, height: 150 })

viewPort{ 
  x?: number | string,    // 视口左上角x坐标（默认0）
  y?: number | string,    // 视口左上角y坐标（默认0）
  width?: number | string,// 视口宽度（默认0）
  height?: number | string// 视口高度（默认0）
}

// 定义两个viewport配置：小视口（用于放大）、大视口（用于缩小）
class tmp{
  x:number = 0
  y:number = 0
  width:number = 75  // 小视口：宽高75px
  height:number = 75
}
let viep:tmp = new tmp()
class tmp1{
  x:number = 0
  y:number = 0
  width:number = 300 // 大视口：宽高300px
  height:number = 300
}
let viep1:tmp1 = new tmp1()
// 1. 原始尺寸：直接绘制宽高75px的圆
Text('原始尺寸Circle组件')
Circle({width: 75, height: 75}).fill('#E87361')
// 2. 对比放大与缩小效果（组件宽高均为150px）
Row({space:10}) {
  Column() {
    Text('shape内放大的Circle组件')
    Shape() {
      Rect().width('100%').height('100%').fill('#0097D4') // 填充视口的矩形
      Circle({width: 75, height: 75}).fill('#E87361')     // 原始尺寸的圆
    }
    .viewPort(viep)       // 绑定小视口（75px）
    .width(150).height(150)// 组件尺寸150px（视口放大2倍）
    .backgroundColor('#F5DC62')
  }
  Column() {
    Text('Shape内缩小的Circle组件')
    Shape() {
      Rect().width('100%').height('100%').fill('#BDDB69') // 填充视口的矩形
      Circle({width: 75, height: 75}).fill('#E87361')     // 原始尺寸的圆
    }
    .viewPort(viep1)      // 绑定大视口（300px）
    .width(150).height(150)// 组件尺寸150px（视口缩小2倍）
    .backgroundColor('#F5DC62')
  }
}

class tmp{
  x:number = 0
  y:number = 0
  width:number = 300 // 视口尺寸与组件尺寸一致
  height:number = 300
}
let viep:tmp = new tmp()
Shape() {
  Rect().width("100%").height("100%").fill("#0097D4") // 填充整个视口
  Circle({ width: 150, height: 150 }).fill("#E87361")  // 圆直径150px（居中显示）
}
.viewPort(viep)
.width(300).height(300)
.backgroundColor("#F5DC62")

class tmp1{
  x:number = -150 // x轴向左偏移150px（等效图形向右平移150px）
  y:number = -150 // y轴向上偏移150px（等效图形向下平移150px）
  width:number = 300
  height:number = 300
}
let viep1:tmp1 = new tmp1()
Shape() {
  Rect().width("100%").height("100%").fill("#0097D4") // 填充平移后的视口
  Circle({ width: 150, height: 150 }).fill("#E87361")  // 圆随视口平移
}
.viewPort(viep1)
.width(300).height(300)
.backgroundColor("#F5DC62")

@Entry
@Component
struct ShapeExample {
  build() {
    Column({ space: 10 }) {
      Shape() {
        // 路径指令：M（起点）→ L（直线）→ Z（闭合），绘制梯形
        Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
      }
      .viewPort({ x: -80, y: -5, width: 500, height: 300 }) // 调整视口适配路径
      .fill(0x317AF7)                                       // 填充色：蓝色
      .stroke(Color.Red)                                    // 边框色：红色
      .strokeWidth(3)                                       // 边框宽：3px
      .strokeLineJoin(LineJoinStyle.Miter)                  // 拐角样式：尖角
      .strokeMiterLimit(5)                                  // 斜接比值上限：5
    }.width('100%').margin({ top: 15 })
  }
}

@Entry
@Component
struct CircleExample {
  build() {
    Column({ space: 10 }) {
      // 1. 实心圆：直径150px（宽高一致）
      Circle({ width: 150, height: 150 })
        .fill('#E87361') // 填充色：红色（默认无填充，此处手动设置）
      // 2. 虚线圆环：直径150px（以短边为准），无填充
      Circle()
        .width(150).height(200)       // 宽150px（短边），直径取150px
        .fillOpacity(0)               // 填充透明度0（完全透明，仅显示边框）
        .strokeWidth(3)               // 边框宽3px
        .stroke(Color.Red)            // 边框色：红色
        .strokeDashArray([1, 2])      // 虚线样式：1px实线+2px空白
    }.width('100%')
  }
}