HarmonyOS APP实战-画图APP - 第4篇：自由画笔绘制

HarmonyOS APP实战-画图APP - 第4篇实现触摸手绘功能1. 开篇第3篇我们完成了基本形状绘制模块。通过监听触摸事件获取起始点和结束点利用CanvasRenderingContext2D的drawRect绘制矩形、绘制约束比例的drawRect绘制正方形、以及drawCircle绘制圆形。这些形状绘制依赖两个触控点确定形状边界是离散操作。本篇要实现的是连续绘制——触摸手绘。用户手指在屏幕上滑动时轨迹会实时呈现为连续线条。核心思路是在onTouch事件的TouchType.MOVE阶段不断收集触摸点坐标构造Path对象再通过drawPath绘制。同时处理多点触摸轨迹分离和基本压感反馈。最后将所有手绘逻辑封装成BrushDrawer类并集成到DrawingCanvas组件中。2. 核心实现2.1 基础配置 – 导入模块与类型声明手绘功能依赖Canvas的Path绘制能力。我们需要导入Canvas相关模块并定义触摸点数据结构。// BrushTypes.ets —— 手绘数据类型定义import{Path2D}fromohos.graphics.drawing;/** * 单个触摸点的数据 */exportinterfaceTouchPoint{x:number;// 横坐标y:number;// 纵坐标pressure?:number;// 压力值可选部分设备支持fingerId:number;// 手指ID用于多点触摸轨迹分离}/** * 一条完整手绘笔画的描述 */exportinterfaceStroke{path:Path2D;// 构造成的Path对象penColor:string;// 画笔颜色penWidth:number;// 画笔粗细opacity:number;// 透明度segmentCount:number;// 路径段数用于性能监控}关键点说明Path2D来自ohos.graphics.drawing是ArkGraphics 2D提供的高效路径对象支持moveTo、lineTo、arc等操作。fingerId用于区分不同手指的轨迹实现多点触摸时每条手指的笔迹独立。pressure是可选属性只有支持压感的设备才会填充该值。2.2 核心逻辑 – 触摸事件处理生成Path这一部分是手绘的核心在TouchType.MOVE事件中连续构建Path在TouchType.UP时完成一条笔画。// BrushDrawer.ets —— 画笔绘制器核心逻辑import{Path2D}fromohos.graphics.drawing;import{TouchPoint,Stroke}from./BrushTypes;exportclassBrushDrawer{privatecurrentStroke:Stroke|nullnull;// 当前正在绘制中的笔画privatetouchBuffer:Mapnumber,TouchPointnewMap();// 手指ID - 最近触摸点用于轨迹插值/** * 开始一条新笔画 * param point 起点触摸点 * param color 当前画笔颜色 * param width 当前画笔粗细 * param opacity 当前透明度 */publicbeginStroke(point:TouchPoint,color:string,width:number,opacity:number):void{constpathnewPath2D();// 使用moveTo设置起始点path.moveTo(point.x,point.y);this.currentStroke{path:path,penColor:color,penWidth:width,opacity:opacity,segmentCount:0};// 缓存该手指的最新触摸点this.touchBuffer.set(point.fingerId,point);}/** * 延续笔画添加新触摸点到路径中 * param point 新的触摸点 */publiccontinueStroke(point:TouchPoint):void{if(!this.currentStroke){return;// 没有活跃笔画忽略}// 检查手指ID是否一致多点触摸下只处理同一手指的轨迹constlastPointthis.touchBuffer.get(point.fingerId);if(!lastPoint){// 如果是新手指跳过应该由beginStroke开始return;}// 使用lineTo从上一个点连线到新点this.currentStroke.path.lineTo(point.x,point.y);this.currentStroke.segmentCount;// 更新缓存this.touchBuffer.set(point.fingerId,point);}/** * 结束当前笔画返回Stroke对象 */publicendStroke():Stroke|null{conststrokethis.currentStroke;if(stroke){this.currentStrokenull;// 清除该手指的缓存constfingerIdthis.touchBuffer.size0?this.touchBuffer.keys().next().value:undefined;if(fingerId!undefined){this.touchBuffer.delete(fingerId);}}returnstroke;}/** * 绘制当前进行中的笔画到画布上 * param ctx CanvasRenderingContext2D */publicdrawCurrentStroke(ctx:CanvasRenderingContext2D):void{if(!this.currentStroke){return;}// 保存画布状态ctx.save();// 应用画笔属性ctx.strokeStylethis.currentStroke.penColor;ctx.lineWidththis.currentStroke.penWidth;ctx.globalAlphathis.currentStroke.opacity;ctx.lineCapround;// 圆角端点让线条更自然ctx.lineJoinround;// 圆角连接// --- 压感支持如果存在---// 从touchBuffer中获取最近点的压力值动态调整线宽constlastTouchesArray.from(this.touchBuffer.values());if(lastTouches.length0lastTouches[0].pressure!undefined){constpressurelastTouches[0].pressure!;// 压力范围通常0~1映射到线宽范围constminWidth1;constmaxWidththis.currentStroke.penWidth*2;ctx.lineWidthminWidth(maxWidth-minWidth)*Math.min(pressure,1);}// 使用drawPath绘制路径ctx.drawPath(this.currentStroke.path);// 恢复画布状态ctx.restore();}/** * 清空当前绘制状态撤销时调用 */publicreset():void{this.currentStrokenull;this.touchBuffer.clear();}}关键点说明Path2D的moveTo和lineTo方法用于构建连续线段轨迹这比逐段绘制更高效。drawPath(ctx)是核心API直接在画布上渲染路径。压感支持通过pressure属性读取触摸事件的压力值动态调整lineWidth。压力值范围一般为0~1。lineCap和lineJoin设置为round使手绘线条端点和拐角更平滑自然。2.3 完整模块 – 可运行的DrawingCanvas组件将上述BrushDrawer集成到自定义组件中成为APP中实际使用的画布区域。// DrawingCanvas.ets —— 画布组件集成手绘功能import{Path2D}fromohos.graphics.drawing;import{TouchPoint,Stroke}from./BrushTypes;import{BrushDrawer}from./BrushDrawer;Componentexportstruct DrawingCanvas{// 画布上下文privatecanvasContext:CanvasRenderingContext2DnewCanvasRenderingContext2D();// 画笔属性后续由外部传入或控制ProppenColor:string#000000;ProppenWidth:number5;ProppenOpacity:number1.0;// 所有已完成笔画的列表用于重绘和撤销Statestrokes:Stroke[][];// 手绘绘制器实例privatebrushDrawer:BrushDrawernewBrushDrawer();// 当前是否处于手绘模式PropisFreeDrawMode:booleantrue;/** * 画布的触摸事件处理器 */privatehandleCanvasTouch(event:TouchEvent):void{if(!this.isFreeDrawMode){return;// 非手绘模式不处理触摸绘制}consttouchevent.touches[0];// 取第一个触摸点后续支持多点consttouchPoint:TouchPoint{x:touch.x,y:touch.y,fingerId:touch.fingerId,pressure:0.5// 模拟压力值真实设备可用 touch.pressure};switch(event.type){caseTouchType.Down:// 开始一条新笔画this.brushDrawer.beginStroke(touchPoint,this.penColor,this.penWidth,this.penOpacity);break;caseTouchType.Move:// 延续笔画连续绘制this.brushDrawer.continueStroke(touchPoint);// 立即重绘画布以显示最新轨迹this.redrawCanvas();break;caseTouchType.Up:caseTouchType.Cancel:// 结束当前笔画保存到已完成列表constcompletedStrokethis.brushDrawer.endStroke();if(completedStroke){this.strokes.push(completedStroke);}this.redrawCanvas();break;default:break;}}/** * 重绘画布先绘制所有已完成笔画再绘制进行中的笔画 */privateredrawCanvas():void{constctxthis.canvasContext;// 清空画布保留背景色ctx.clearRect(0,0,ctx.width,ctx.height);// 绘制纯白背景后续在颜色篇中可自定义ctx.fillStyle#FFFFFF;ctx.rect(0,0,ctx.width,ctx.height);ctx.fill();// 绘制所有已完成笔画for(conststrokeofthis.strokes){this.drawStroke(ctx,stroke);}// 绘制当前进行中的笔画实时显示手指轨迹this.brushDrawer.drawCurrentStroke(ctx);}/** * 绘制一条已完成的Stroke */privatedrawStroke(ctx:CanvasRenderingContext2D,stroke:Stroke):void{ctx.save();ctx.strokeStylestroke.penColor;ctx.lineWidthstroke.penWidth;ctx.globalAlphastroke.opacity;ctx.lineCapround;ctx.lineJoinround;ctx.drawPath(stroke.path);ctx.restore();}build(){Canvas(this.canvasContext).width(100%).height(100%).backgroundColor(#FFFFFF).onTouch((event){this.handleCanvasTouch(event);})}// 生命周期组件挂载后初始化画布尺寸aboutToAppear():void{// 给CanvasRenderingContext2D设置宽高从父组件或固定值this.canvasContext.width720;this.canvasContext.height1280;}}关键点说明触摸事件中TouchType.Down创建新PathTouchType.Move不断追加线段TouchType.Up完成笔画并归档。strokes数组以State装饰当笔画完成时自动触发UI刷新。drawStroke与drawCurrentStroke都使用drawPathAPI确保绘制方式统一。画布背景色先用白色填充后续在颜色控制篇中可改为用户自定义背景色。3. 运行验证将DrawingCanvas放置在主界面中间区域并提供切换绘制模式的开关。运行效果触摸屏幕并滑动手指轨迹实时显示为一条黑色细线。手指抬起后线条保留再次触摸绘制新轨迹。多指触摸时需硬件支持每只手指的轨迹互相独立不会交叉干扰。移动过程中线条平滑无卡顿或断点。在模拟器中压感数据不可用线宽始终为设置值。真机上启用touch.pressure后轻触线细重压线粗表现自然。4. 小结与预告本篇实现了画图APP最核心的交互功能——触摸手绘。我们封装了BrushDrawer类管理路径生成在DrawingCanvas组件中通过drawPathAPI实时绘制轨迹。核心产出包括TouchPoint和Stroke数据类型BrushDrawer类的三个核心方法beginStroke、continueStroke、endStroke可运行的DrawingCanvas组件集成手绘与历史笔画管理目前画笔始终是黑色、5px宽、不透明。第5篇「颜色、粗细与透明度控制」将实现底部颜色选择栏预设色盘 自由色选择粗细滑块实时调整线宽透明度滑块控制笔画透明度所有属性绑定到手绘模块让用户自由定制画笔风格