应用实例十:确定起跑线模拟器

知识点:综合运用圆的知识解决实际问题(确定跑道起跑线)。
功能:展示400米标准跑道模型。学生可以拖动滑块改变跑道的宽度,应用自动计算相邻跑道的长度差。通过分析数据,学生发现“相邻跑道长度差 = 2 × 跑道宽 × π”,从而理解为什么外圈起跑线要前移。
在这里插入图片描述

// StartingLineSimulator.ets
@Entry
@Component
struct StartingLineSimulator {
  @State laneWidth: number = 1.22; // 跑道宽
  @State radius: number = 36.5; // 弯道半径
  @State straightLength: number = 84.39; // 直道长
  @State laneDiff: number = 7.66; // 长度差

  build() {
    Column({ space: 20 }) {
      Text('确定起跑线模拟器')
        .fontSize(26)

      // 跑道示意图
      Stack() {
        // 绘制同心圆模拟跑道
        Circle().width(150).height(150).stroke('#999').strokeWidth(1).fill('none')
        Circle().width(150 + this.laneWidth * 10).height(150 + this.laneWidth * 10).stroke('#2196F3').strokeWidth(3).fill('none')
      }
      .height(200)

      Row({ space: 10 }) {
        Text('跑道宽度:')
        Slider({ value: this.laneWidth, min: 1, max: 2, step: 0.01 })
          .width(150)
          .onChange((value: number) => {
            this.laneWidth = value;
            this.calculateDiff();
          })
        Text(`${this.laneWidth.toFixed(2)}`)
      }

      Column({ space: 10 }) {
        Text(`第一圈弯道半径: ${this.radius}`)
        Text(`第二圈弯道半径: ${(this.radius + this.laneWidth).toFixed(2)}`)
        Text(`相邻跑道长度差: ${this.laneDiff.toFixed(2)}`)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#E91E63')
      }
      .alignItems(HorizontalAlign.Start)
      .padding(20)
      .backgroundColor('#F5F5F5')
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .padding(20)
  }

  calculateDiff() {
    // 周长差 = 2π(R2 - R1) = 2π * laneWidth
    this.laneDiff = 2 * 3.14159 * this.laneWidth;
  }
}
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐