HarmonyOS APP实战-画图APP - 第1篇：环境搭建与项目初始化

HarmonyOS APP实战-画图APP - 第1篇：准备开发环境与创建项目

你随手拿起一根手指在屏幕上画一个圆，理想中的画图APP应该像纸笔一样直觉：点一下画矩形，拖拽出自由线条，换颜色、调粗细全在指尖。我们要开发的正是这样一款基于HarmonyOS原生图形能力的画图APP，它将覆盖形状绘制、手绘、颜色调节、文字添加、图像特效、撤销重做、导出保存等完整功能链。第1篇的首要任务是搭建开发环境、创建项目骨架，为后续的所有绘制能力铺好跑道。

---

2. 核心实现

2.1 基础配置 --- 安装DevEco Studio并创建项目

首先，从华为开发者官网下载并安装DevEco Studio 。安装完成后打开，选择"Create Project"，模板选择"Empty Ability"，包名设为com.example.drawapp，Compile SDK选最新的API 12（或你本地SDK支持的最新版本）。

项目创建后，目录结构如下（关键部分）：

• entry/src/main/ets/entryability/EntryAbility.ts --- 应用入口
• entry/src/main/ets/pages/Index.ets --- 主页面
• build-profile.json5 --- 项目构建配置
• oh-package.json5 --- 包管理文件

接下来，在build-profile.json5中确认compileSdk和目标设备类型（建议先选Phone，后续可扩展Tablet）。

// build-profile.json5 (示例关键字段)
{
  "apiType": "stageMode",
  "compileSdkVersion": "12",
  "products": [
    {
      "name": "default",
      "targetDevices": ["phone"],
      "signingConfig": "default"
    }
  ]
}

关键点说明

• compileSdkVersion决定了可使用的API级别，这里设为12对应HarmonyOS 5.0（具体版本以实际SDK为准），可保证@ohos.graphics.drawing模块正常导入。
• 项目必须使用stageMode，否则后续Ability生命周期管理会有差异。

---

2.2 核心逻辑 --- 导入@ohos.graphics.drawing并初始化全局绘制上下文

画图APP的核心绘制能力依赖于ArkGraphics 2D 中的@ohos.graphics.drawing模块（详见文档"图形绘制与显示"章节）。我们将在EntryAbility中预先导入该模块，并声明一个全局变量用于后续共享绘制状态。

// entry/src/main/ets/entryability/GlobalDraw.ts
// 全局绘制状态管理，为后续形状、画笔等提供统一上下文
import { window } from '@kit.ArkUI';  // 窗口上下文
import * as drawing from '@ohos.graphics.drawing'; // 绘制模块，具体Canvas、Path等将在后续文章使用

// 全局变量：绘制上下文
export class DrawContext {
  // 用于Canvas绑定的本地绘制上下文（由页面中Canvas创建）
  public static context2d: CanvasRenderingContext2D | null = null;
  // 当前绘制的画笔（后续由drawing模块创建）
  public static currentPen: drawing.Pen | null = null;
  // 当前绘图路径（用于自由画笔）
  public static currentPath: drawing.Path | null = null;
  // 窗口对象，用于获取屏幕density等
  public static window: window.Window | null = null;
}

关键点说明

• @ohos.graphics.drawing 是系统图形库，无需在oh-package.json5中额外声明依赖。
• CanvasRenderingContext2D 来自@kit.ArkUI，是Canvas组件的标准渲染上下文，我们将其与drawing模块配合使用：drawing模块提供高级画笔、路径对象，而普通形状仍可用Context2D完成。
• 全局变量集中管理，方便后续各页面、自定义组件访问，避免重复初始化。

---

2.3 完整模块 --- EntryAbility与主页面骨架

2.3.1 EntryAbility（应用入口）

// entry/src/main/ets/entryability/EntryAbility.ts
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import * as drawing from '@ohos.graphics.drawing'; // 导入绘制模块
import { DrawContext } from './GlobalDraw'; // 引入全局变量

export default class EntryAbility extends UIAbility {
  // 在Ability创建时初始化全局变量
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'DrawAppAbility', 'onCreate');
    // 保存窗口对象（用于后续计算DPI等）
    DrawContext.window = this.context.getApplicationContext().getWindow() as window.Window;
    // 此处可预创建drawing模块的默认画笔（后续第3篇详解）
    // DrawContext.currentPen = new drawing.Pen();
    hilog.info(0x0000, 'DrawAppAbility', 'GlobalDraw initialized');
  }

  // 窗口创建时设置内容
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // 加载主页面Index
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'DrawAppAbility', 'Failed to load content', JSON.stringify(err));
        return;
      }
      hilog.info(0x0000, 'DrawAppAbility', 'Succeeded in loading content');
    });
  }

  // 其他生命周期方法（onDestroy等）省略
}

关键点说明

• UIAbility是HarmonyOS stage模型下的能力入口，对应传统Android的Activity。
• 在onCreate中先获取窗口对象，后续用于屏幕密度计算。
• loadContent指定了首屏页面为pages/Index，这个页面将在下一步编写。

---

2.3.2 主页面 Index.ets（画布容器）

// entry/src/main/ets/pages/Index.ets
import { Canvas, CanvasRenderingContext2D } from '@kit.ArkUI';
import * as drawing from '@ohos.graphics.drawing'; // 导入drawing模块（虽未直接使用，但后续需要）
import { DrawContext } from '../entryability/GlobalDraw';

@Entry
@Component
struct Index {
  // 创建一个Canvas渲染上下文，用于绘制图形
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  aboutToAppear(): void {
    // 将Canvas上下文存入全局，以便其他模块（如绘制工具类）访问
    DrawContext.context2d = this.context;
    // 提示：后续使用drawing模块创建画笔时，需要将Context2D传入或绑定
  }

  build() {
    Column() {
      // 占位：顶部工具栏将在下一篇开发
      Row() {
        Text('画图APP - 开发中')
          .fontSize(18)
          .fontColor('#333')
      }
      .width('100%')
      .height(50)
      .backgroundColor('#f0f0f0')
      .padding({ left: 16 })

      // 核心画布区域，占据剩余空间
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffffff')
        .onReady(() => {
          // Canvas准备完成后的回调，可在此进行初始化绘制（如绘制背景网格）
          this.context.fillStyle = '#ffffff';
          this.context.fillRect(0, 0, this.context.width, this.context.height);
          hilog.info(0x0000, 'IndexPage', 'Canvas ready');
        })
    }
    .width('100%')
    .height('100%')
  }
}

关键点说明

• Canvas组件是HarmonyOS提供的原生画布，通过绑定CanvasRenderingContext2D获得绘制能力。
• 我们并没有直接在Index中使用drawing模块的方法，因为drawing模块更多用于高级绘制（如自定义Path、Pen的复合效果）。但在aboutToAppear中导入并引用，确保模块已加载。
• 全局变量DrawContext.context2d在此被赋值，后续所有绘制工具类可直接引用，避免重复创建上下文。

---

3. 运行验证

在DevEco Studio中连接真机或启动模拟器，点击运行按钮。预期效果：

• 应用启动后显示一个白色全屏页面，顶部有一行浅灰色工具栏（占位文字"画图APP - 开发中"），其余区域为空白画布。
• 查看HiLog日志（过滤DrawAppAbility），应看到onCreate和onWindowStageCreate的输出，说明Ability正常启动。
• 若使用开发者选项中的"显示布局边界"，可看到Canvas组件占据整个屏幕（顶部工具栏除外）。

---

4. 小结与预告

本篇完成了画图APP的基石搭建：

• 配置了HarmonyOS开发环境并创建项目。
• 在EntryAbility中导入了@ohos.graphics.drawing模块，并设计了全局状态管理类DrawContext。
• 编写了主页面Index.ets，包含一个可用的Canvas组件和相关的渲染上下文。

从此，所有绘制能力都有了可以依附的画布。下一篇将聚焦主页面布局与基础交互，设计顶部工具栏（形状切换、颜色、粗细）和底部颜色选择栏，让画布真正可交互。