附录C 实战3：多设备协作白板应用开发

本实战项目通过开发一个多设备协作白板应用，探索鸿蒙分布式能力的实际应用。用户可以在多个设备上实时协作绘制白板内容，通过鸿蒙的分布式软总线实现数据同步。

1. 项目概述

1.1 项目目标

开发一个支持以下功能的协作白板应用：

  • 实时绘制：支持画笔、颜色选择和橡皮擦功能。
  • 多设备同步：绘图内容可以在多个设备之间实时同步。
  • 历史记录：支持撤销、重做以及清空画板。

1.2 技术要点

  • 鸿蒙分布式软总线：实现多设备实时数据通信。
  • Canvas组件：实现白板绘制功能。
  • 事件处理：实现用户交互，如手势绘制、清空画板。

2. 功能设计

2.1 功能模块

  1. 绘图模块：绘制线条，支持多种颜色和笔刷大小。
  2. 同步模块：将绘图数据实时同步到其他设备。
  3. 控制模块：支持撤销、重做和清空画板。

2.2 数据结构设计

绘图操作以指令的形式记录，便于同步和操作回退。

  • LineData：每条线的数据结构。

    {
  "id": "unique-line-id",
  "points": [
    { "x": 10, "y": 15 },
    { "x": 20, "y": 25 }
  ],
  "color": "#FF0000",
  "width": 5
}

  • SyncPacket：同步数据包。

      {
    "type": "DRAW",
    "data": { /* LineData */ }
  }

3. UI设计

3.1 主界面布局

白板应用的主界面分为三个部分：

  1. 画布区域：用于绘制内容。
  2. 工具栏：选择画笔、颜色、橡皮擦等。
  3. 控制按钮：撤销、重做和清空。
<column>
    <canvas id="whiteboard" @touch="onDraw"></canvas>
    <row>
        <button @click="setTool('pen')">Pen</button>
        <button @click="setTool('eraser')">Eraser</button>
        <button @click="clearBoard()">Clear</button>
    </row>
    <row>
        <button @click="undo()">Undo</button>
        <button @click="redo()">Redo</button>
    </row>
</column>

4. 核心功能实现

4.1 绘图功能

绘制线条并更新画布内容：

export default {
  data: {
    tool: 'pen',
    lines: [],
    currentLine: null
  },
  methods: {
    onDraw(event) {
      const { tool } = this;
      if (tool === 'pen') {
        this.currentLine = this.currentLine || { points: [], color: '#000', width: 2 };
        this.currentLine.points.push({ x: event.x, y: event.y });
        this.updateCanvas();
      }
    },
    updateCanvas() {
      const canvas = this.$refs.whiteboard;
      const ctx = canvas.getContext('2d');
      this.lines.forEach((line) => {
        ctx.beginPath();
        ctx.strokeStyle = line.color;
        ctx.lineWidth = line.width;
        line.points.forEach((point, index) => {
          if (index === 0) ctx.moveTo(point.x, point.y);
          else ctx.lineTo(point.x, point.y);
        });
        ctx.stroke();
      });
    }
  }
};

4.2 数据同步

通过鸿蒙分布式软总线同步绘图数据：

import distributedBus from '@ohos.distributedBus';

export default {
  methods: {
    syncLine(line) {
      distributedBus.publish('drawEvent', { type: 'DRAW', data: line });
    },
    onLineReceived(event) {
      if (event.type === 'DRAW') {
        this.lines.push(event.data);
        this.updateCanvas();
      }
    }
  },
  onInit() {
    distributedBus.subscribe('drawEvent', this.onLineReceived);
  }
};

4.3 撤销与重做

通过栈管理操作记录：

export default {
  data: {
    undoStack: [],
    redoStack: []
  },
  methods: {
    undo() {
      if (this.lines.length > 0) {
        const lastLine = this.lines.pop();
        this.undoStack.push(lastLine);
        this.updateCanvas();
      }
    },
    redo() {
      if (this.undoStack.length > 0) {
        const lastUndo = this.undoStack.pop();
        this.lines.push(lastUndo);
        this.updateCanvas();
      }
    }
  }
};

5. 项目总结

本项目通过白板应用开发，学习了以下技术：

  1. 鸿蒙系统的分布式软总线实现多设备实时同步。
  2. 使用Canvas组件实现绘图功能。
  3. 基于事件处理与数据结构优化用户体验。

通过此项目，开发者可以进一步理解鸿蒙系统在多设备协作场景中的开发流程，掌握同步通信与实时交互的核心技术，为未来复杂项目奠定基础。

Last Updated::