HarmonyOS APP实战-画图APP - 第1篇准备开发环境与创建项目你随手拿起一根手指在屏幕上画一个圆理想中的画图APP应该像纸笔一样直觉点一下画矩形拖拽出自由线条换颜色、调粗细全在指尖。我们要开发的正是这样一款基于HarmonyOS原生图形能力的画图APP它将覆盖形状绘制、手绘、颜色调节、文字添加、图像特效、撤销重做、导出保存等完整功能链。第1篇的首要任务是搭建开发环境、创建项目骨架为后续的所有绘制能力铺好跑道。2. 核心实现2.1 基础配置 — 安装DevEco Studio并创建项目首先从华为开发者官网下载并安装DevEco Studio。安装完成后打开选择“Create Project”模板选择“Empty Ability”包名设为com.example.drawappCompile 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}fromkit.ArkUI;// 窗口上下文import*asdrawingfromohos.graphics.drawing;// 绘制模块具体Canvas、Path等将在后续文章使用// 全局变量绘制上下文exportclassDrawContext{// 用于Canvas绑定的本地绘制上下文由页面中Canvas创建publicstaticcontext2d:CanvasRenderingContext2D|nullnull;// 当前绘制的画笔后续由drawing模块创建publicstaticcurrentPen:drawing.Pen|nullnull;// 当前绘图路径用于自由画笔publicstaticcurrentPath:drawing.Path|nullnull;// 窗口对象用于获取屏幕density等publicstaticwindow:window.Window|nullnull;}关键点说明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.tsimport{AbilityConstant,UIAbility,Want}fromkit.AbilityKit;import{hilog}fromkit.PerformanceAnalysisKit;import{window}fromkit.ArkUI;import*asdrawingfromohos.graphics.drawing;// 导入绘制模块import{DrawContext}from./GlobalDraw;// 引入全局变量exportdefaultclassEntryAbilityextendsUIAbility{// 在Ability创建时初始化全局变量onCreate(want:Want,launchParam:AbilityConstant.LaunchParam):void{hilog.info(0x0000,DrawAppAbility,onCreate);// 保存窗口对象用于后续计算DPI等DrawContext.windowthis.context.getApplicationContext().getWindow()aswindow.Window;// 此处可预创建drawing模块的默认画笔后续第3篇详解// DrawContext.currentPen new drawing.Pen();hilog.info(0x0000,DrawAppAbility,GlobalDraw initialized);}// 窗口创建时设置内容onWindowStageCreate(windowStage:window.WindowStage):void{// 加载主页面IndexwindowStage.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.etsimport{Canvas,CanvasRenderingContext2D}fromkit.ArkUI;import*asdrawingfromohos.graphics.drawing;// 导入drawing模块虽未直接使用但后续需要import{DrawContext}from../entryability/GlobalDraw;EntryComponentstruct Index{// 创建一个Canvas渲染上下文用于绘制图形privatesettings:RenderingContextSettingsnewRenderingContextSettings(true);privatecontext:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings);aboutToAppear():void{// 将Canvas上下文存入全局以便其他模块如绘制工具类访问DrawContext.context2dthis.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组件和相关的渲染上下文。从此所有绘制能力都有了可以依附的画布。下一篇将聚焦主页面布局与基础交互设计顶部工具栏形状切换、颜色、粗细和底部颜色选择栏让画布真正可交互。