鸿蒙原生应用实战（十）ArkUI 涂鸦画板：Canvas 绘图 + 颜色选择 + 笔画管理 + 导出

🎨 鸿蒙原生应用实战（十）ArkUI 涂鸦画板：Canvas 绘图 + 颜色选择 + 笔画管理 + 导出

博主说：从儿童涂鸦到专业绘图，画板应用覆盖了各种用户群体。今天我们用 ArkUI 的 Canvas 2D API，从零实现一个支持自由手绘、颜色切换、笔画粗细、撤销重做、导出图片的完整涂鸦画板。

📱 应用场景

⚙️ 运行环境要求

🛠️ 实战：从零搭建涂鸦画板

Step 1：画板核心架构

触摸事件 (PanGesture) ↓ 记录轨迹点 路径列表 (paths: PathData[]) ↓ 逐个绘制到 Canvas 画布渲染 ↓ 撤销: 删除最后一条路径 重做: 恢复删除的路径 清除: 清空所有路径 导出: ImagePacker 编码为图片

Step 2：完整代码

// pages/Index.ets — 涂鸦画板importimagefrom'@ohos.multimedia.image';importfileIofrom'@ohos.file.fs';interfacePoint{x:number;y:number;}interfaceStrokeData{points:Point[];// 轨迹点color:string;// 颜色width:number;// 粗细opacity:number;// 透明度}@Entry@Componentstruct DoodlePad{privatectx!:CanvasRenderingContext2D;@Statestrokes:StrokeData[]=[];@StateundoneStrokes:StrokeData[]=[];@StatecurrentColor:string='#007AFF';@StatecurrentWidth:number=4;@StatecurrentOpacity:number=1;@StatecurrentPoints:Point[]=[];@StateisDrawing:boolean=false;@StatebrushType:'pen'|'marker'|'eraser'='pen';@StatecanvasWidth:number=360;@StatecanvasHeight:number=500;privatecolors:string[]=['#FF3B30','#FF9500','#FFCC00','#34C759','#007AFF','#5856D6','#AF52DE','#000000','#888888','#FFFFFF'];privatewidths:number[]=[2,4,8,12,20];privatecanvasUpdateId:number=0;// ======== 开始绘制 ========onDrawStart(event:GestureEvent){this.isDrawing=true;constx=event.fingerInfo[0]?.x||0;consty=event.fingerInfo[0]?.y||0;this.currentPoints=[{x,y}];// 绘制起点this.ctx.beginPath();this.ctx.arc(x,y,this.currentWidth/2,0,Math.PI*2);this.ctx.fillStyle=this.brushType==='eraser'?'#FFFFFF':this.currentColor;this.ctx.fill();}// ======== 绘制中 ========onDrawMove(event:GestureEvent){if(!this.isDrawing)return;constx=event.fingerInfo[0]?.x||0;consty=event.fingerInfo[0]?.y||0;this.currentPoints.push({x,y});constprev=this.currentPoints[this.currentPoints.length-2];if(!prev)return;this.ctx.beginPath();this.ctx.moveTo(prev.x,prev.y);this.ctx.lineTo(x,y);this.ctx.strokeStyle=this.brushType==='eraser'?'#FFFFFF':this.currentColor;this.ctx.lineWidth=this.currentWidth;this.ctx.lineCap='round';this.ctx.lineJoin='round';this.ctx.globalAlpha=this.brushType==='eraser'?1:this.currentOpacity;this.ctx.stroke();this.ctx.globalAlpha=1;}// ======== 结束绘制 ========onDrawEnd(){if(this.currentPoints.length<2)return;this.strokes.push({points:[...this.currentPoints],color:this.brushType==='eraser'?'#FFFFFF':this.currentColor,width:this.currentWidth,opacity:this.brushType==='eraser'?1:this.currentOpacity});this.currentPoints=[];this.isDrawing=false;this.undoneStrokes=[];// 新笔画清除重做栈}// ======== 撤销 ========undo(){if(this.strokes.length===0)return;constlast=this.strokes.pop()!;this.undoneStrokes.push(last);this.redrawAll();}// ======== 重做 ========redo(){if(this.undoneStrokes.length===0)return;conststroke=this.undoneStrokes.pop()!;this.strokes.push(stroke);this.redrawAll();}// ======== 清除全部 ========clearAll(){this.undoneStrokes.push(...this.strokes);this.strokes=[];this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);}// ======== 重绘所有笔画 ========redrawAll(){this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);for(conststrokeofthis.strokes){if(stroke.points.length<2)continue;this.ctx.beginPath();this.ctx.moveTo(stroke.points[0].x,stroke.points[0].y);for(leti=1;i<stroke.points.length;i++){this.ctx.lineTo(stroke.points[i].x,stroke.points[i].y);}this.ctx.strokeStyle=stroke.color;this.ctx.lineWidth=stroke.width;this.ctx.lineCap='round';this.ctx.lineJoin='round';this.ctx.globalAlpha=stroke.opacity;this.ctx.stroke();this.ctx.globalAlpha=1;}}// ======== 导出图片 ========asyncexportImage(){try{// Canvas 转 PixelMapconstpixelMap=awaitthis.ctx.getPixelMap(0,0,this.canvasWidth,this.canvasHeight);constpacker=image.createImagePacker();constpacked=awaitpacker.packing(pixelMap,{format:'image/png',quality:100});constpath=getContext(this).filesDir+`/doodle_${Date.now()}.png`;constfile=fileIo.openSync(path,fileIo.OpenMode.CREATE|fileIo.OpenMode.READ_WRITE);fileIo.writeSync(file.fd,packed.data);fileIo.closeSync(file);AlertDialog.show({message:`✅ 已保存到:${path}`});}catch(err){AlertDialog.show({message:'导出失败: '+JSON.stringify(err)});}}// ======== UI 构建 ========build(){Column(){// 顶部工具栏Row(){Button('↩').fontSize(18).backgroundColor('transparent').fontColor('#333').onClick(()=>{this.undo();})Button('↪').fontSize(18).backgroundColor('transparent').fontColor('#333').onClick(()=>{this.redo();})Button('🗑️').fontSize(16).backgroundColor('transparent').fontColor('#FF3B30').onClick(()=>{this.clearAll();})Text('🎨').fontSize(20)Button('📤').fontSize(16).backgroundColor('transparent').fontColor('#007AFF').onClick(()=>{this.exportImage();})}.width('100%').justifyContent(FlexAlign.SpaceEvenly).padding(8).backgroundColor('#F8F9FA')// 画布Canvas(this.ctx).width(this.canvasWidth).height(this.canvasHeight).backgroundColor('#FFFFFF').border({width:1,color:'#E0E0E0'}).gesture(PanGesture({distance:1}).onActionStart((e)=>{this.onDrawStart(e);}).onActionUpdate((e)=>{this.onDrawMove(e);}).onActionEnd(()=>{this.onDrawEnd();}))// 颜色选择器Row(){ForEach(this.colors,(color:string)=>{Circle().width(28).height(28).fill(color).stroke(this.currentColor===color?'#333':'transparent').strokeWidth(3).onClick(()=>{this.currentColor=color;this.brushType='pen';})})}.width('100%').justifyContent(FlexAlign.Center).gap(6).padding(8)// 粗细 + 透明度Row(){ForEach(this.widths,(w:number)=>{Circle().width(Math.max(16,w*2)).height(Math.max(16,w*2)).fill(this.currentWidth===w?this.currentColor:'#ddd').onClick(()=>{this.currentWidth=w;})})Text('🖊️').fontSize(20).onClick(()=>{this.brushType='pen';})Text('🖌️').fontSize(20).onClick(()=>{this.brushType='marker';this.currentWidth=12;})Text('🧹').fontSize(20).onClick(()=>{this.brushType='eraser';this.currentWidth=20;})}.width('100%').justifyContent(FlexAlign.Center).gap(8).padding({bottom:8})}.width('100%').height('100%').backgroundColor('#fff')}}

官方文档：HarmonyOS 应用开发文档

• 开发者社区：华为开发者论坛
• 欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net/