✅ 背景介绍

远程教学已成为现代教育的重要形式。传统视频会议虽提供了音画能力，但缺乏强交互性和“低延迟协作”。HarmonyOS 的分布式特性使得我们可以构建一个远程协同教学系统原型，实现：

• 多设备实时共享白板内容；

• 同步语音讲解信息；

• 支持“老师在手机上写、学生在平板上看+听”体验。

---

🧱 实战目标

• 构建支持触控绘图的白板；

• 实时同步绘图轨迹到其他设备；

• 实时发送语音讲解信息（模拟为文字）；

• 实现教师端主导、学生端被动同步。

---

🧑‍💻 核心技术模块（HarmonyOS 5.0.0）

模块	用途
CanvasRenderingContext2D	绘图渲染
TouchGesture	捕捉笔迹轨迹
distributedKVStore	分布式轨迹同步与讲解文本同步
dataChange	接收远端绘图与讲解更新

---

🧑‍🏫 步骤一：数据结构设计

interface DrawAction {
  id: string;
  x: number;
  y: number;
  isEnd: boolean;
}

interface TeachingPacket {
  draw?: DrawAction;
  voiceNote?: string;
}

---

🧾 步骤二：白板组件 + 同步逻辑（教师端）

@Component
struct TeacherBoard {
  private ctx?: CanvasRenderingContext2D;

  build() {
    Column({ space: 10 }) {
      Text('📖 教学白板').fontSize(18)

      Canvas(this.drawCanvas)
        .width('100%').height(400)
        .backgroundColor('#fff')
        .onTouch(event => this.onTouch(event))

      TextInput({ placeholder: '输入讲解内容（模拟语音）', text: '' })
        .onChange(v => this.sendVoice(v))
    }.padding(20)
  }

  private drawCanvas(ctx: CanvasRenderingContext2D) {
    this.ctx = ctx;
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, ctx.width, ctx.height);
  }

  private onTouch(event: TouchEvent) {
    if (!event.touches || event.touches.length === 0) return;
    const t = event.touches[0];
    const action: DrawAction = {
      id: `draw_${Date.now()}`,
      x: t.x,
      y: t.y,
      isEnd: event.type === TouchType.Up
    };
    this.ctx?.lineTo(t.x, t.y);
    this.ctx?.stroke();

    // 分布式同步
    kvStore.put(`draw_${Date.now()}`, JSON.stringify({ draw: action }));
  }

  private async sendVoice(text: string) {
    await kvStore.put(`voice_${Date.now()}`, JSON.stringify({ voiceNote: text }));
  }
}

---

🧑‍🎓 步骤三：学生端接收组件

@Component
struct StudentBoard {
  private ctx?: CanvasRenderingContext2D;
  private voiceNote: string = '';

  async aboutToAppear() {
    const context = getContext(this);
    await initTeachingKVStore(context);
  }

  build() {
    Column({ space: 10 }) {
      Text('👨‍🎓 学生端观看').fontSize(18)

      Canvas((ctx) => this.ctx = ctx)
        .width('100%').height(400)
        .backgroundColor('#fff')

      Text(`🗣️ 老师讲解：${this.voiceNote}`).fontSize(16).margin({ top: 10 })
    }.padding(20)
  }

  private async initTeachingKVStore(context: Context) {
    const kvManager = distributedKVStore.createKVManager({
      context,
      bundleName: 'com.example.remoteclass',
      userInfo: {
        userId: '0',
        userType: distributedKVStore.UserType.SAME_USER_ID
      }
    });

    const store = await kvManager.getKVStore({
      storeId: 'TeachingStore',
      storeType: distributedKVStore.KVStoreType.SINGLE_VERSION,
      syncPolicy: distributedKVStore.SyncPolicy.IMMEDIATE
    });

    store.on('dataChange', distributedKVStore.SubscribeType.SUBSCRIBE_TYPE_REMOTE, (change) => {
      change.insertEntries.forEach((entry) => {
        const packet = JSON.parse(entry.value) as TeachingPacket;
        if (packet.draw && this.ctx) {
          const d = packet.draw;
          this.ctx.lineTo(d.x, d.y);
          if (d.isEnd) this.ctx.beginPath(); // 分段绘制
          this.ctx.stroke();
        }
        if (packet.voiceNote) {
          this.voiceNote = packet.voiceNote;
        }
      });
    });
  }
}

---

⚠️ 常见问题与调试建议

问题	原因	解决方法
同步延迟大	KVStore 同步策略未设为 IMMEDIATE	设置 SyncPolicy.IMMEDIATE
语音数据未收到	数据写入为新 key，监听不刷新	可使用统一 key 或改为列表记录并聚合处理
白板不更新	Canvas ctx 获取失败或未刷新	确保在绘制前 ctx 有效并调用 invalidate()

---

📦 权限配置建议（config.json）

"reqPermissions": [
  { "name": "ohos.permission.DISTRIBUTED_DATASYNC" }
]

---

🚀 拓展方向建议

• 接入真实语音模块 + 音频同步；

• 多学生协同观看，支持举手发言；

• 教师端录制教学并自动回放；

• AI 助教自动生成讲义摘要；

• 实现跨设备“画+讲+提问”闭环。

---

✅ 小结

本篇实现了一个结合绘图协同 + 语音同步的远程教学系统原型，完整覆盖了 HarmonyOS 分布式能力在教育场景下的落地方式，是构建“鸿蒙原生教育工具”的核心模块基础。