应用实例二：分数的意义演示器

知识点：理解单位“1”的含义，认识分数单位，理解分数与除法的关系。
功能：学生可以通过拖动滑块将一个单位圆或单位线段平均分成任意份数（分母），并选择其中几份（分子），应用动态生成对应的分数图形，并展示分数的读写、分数单位以及分数与除法的关系式。

// FractionMeaningDemo.ets

interface PartItem {
  filled: boolean
}

@Entry
@Component
struct FractionMeaningDemo {
  @State denominator: number = 4;
  @State numerator: number = 3;
  @State parts: PartItem[] = [];

  aboutToAppear() {
    this.updateParts();
  }

  build() {
    Column({ space: 20 }) {
      Text('分数的意义演示')
        .fontSize(26)

      // 图形展示
      Stack() {
        // 绘制单位圆或单位线段
        Circle()
          .width(200)
          .height(200)
          .fill('#F0F0F0')

        // 绘制分割线和填充部分
        ForEach(this.parts, (part: PartItem, index: number) => {
          Path()
            .width(200)
            .height(200)
            .commands(`M 100 100 L ${100 + 100 * Math.cos((index / this.denominator) * 2 * Math.PI)} ${100 + 100 * Math.sin((index / this.denominator) * 2 * Math.PI)} A 100 100 0 ${this.denominator > 2 ? '1' : '0'} 1 ${100 + 100 * Math.cos(((index + 1) / this.denominator) * 2 * Math.PI)} ${100 + 100 * Math.sin(((index + 1) / this.denominator) * 2 * Math.PI)} Z`)
            .fill(part.filled ? '#E91E63' : '#FFFFFF')
            .stroke('#999')
            .strokeWidth(1)
        })
      }
      .width(200)
      .height(200)

      // 控制区
      Row({ space: 15 }) {
        Column() {
          Text('分母(总份数)').fontSize(14)
          Slider({ value: this.denominator, min: 1, max: 12, step: 1 })
            .width(120)
            .onChange((value: number) => {
              this.denominator = value;
              this.updateParts();
            })
          Text(this.denominator.toString()).fontSize(18)
        }
        Column() {
          Text('分子(取几份)').fontSize(14)
          Slider({ value: this.numerator, min: 0, max: this.denominator, step: 1 })
            .width(120)
            .onChange((value: number) => {
              this.numerator = value;
              this.updateParts();
            })
          Text(this.numerator.toString()).fontSize(18)
        }
      }

      // 结果展示
      Column({ space: 10 }) {
        Text(`分数: ${this.numerator}/${this.denominator}`).fontSize(22)
        Text(`读作: ${this.numerator}分之${this.denominator}`).fontSize(18)
        Text(`分数单位: 1/${this.denominator}`).fontSize(18)
        Text(`与除法关系: ${this.numerator} ÷ ${this.denominator} = ${this.numerator}/${this.denominator}`).fontSize(18)
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
      .padding({ left: 30, right: 30 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding(15)
  }

  private updateParts() {
    this.parts = [];
    for (let i = 0; i < this.denominator; i++) {
      this.parts.push({ filled: i < this.numerator });
    }
  }
}