HarmonyOS APP实战-画图APP - 第5篇：画笔属性调节

HarmonyOS APP实战-画图APP - 第5篇颜色、粗细与透明度控制1. 开篇上一篇我们实现了触摸手绘功能核心产出了PenManager模块和PaintComponent页面。PenManager通过touchEvent回调收集触摸点构建Path对象再利用CanvasRenderingContext2D.drawPath()将其绘制到画布上。读者跟随步骤已经可以让手指在屏幕上自由涂鸦了。然而手绘功能还有一个关键短板绘制出的线条颜色固定为黑色、粗细固定为3px、透明度固定为100%。这样的笔触过于单调无法满足实际绘画需求。本篇将聚焦于画笔属性调节通过颜色选择器、粗细滑块和透明度滑块三个UI组件让用户能够实时调整画笔效果。我们将把这些属性绑定到Pen对象上确保每次绘制都使用最新的参数。2. 核心实现实现画笔属性调节需要三个步骤首先创建一个画笔属性配置管理器PenSettings用于存储和更新颜色、粗细、透明度其次设计颜色选择器ColorPicker组件让用户可以从预设色板中选色最后实现粗细和透明度的滑块组件Slider。所有修改都会立即反应在下一笔绘制中。2.1 基础配置导入模块与状态管理在画图APP中我们需要导入ohos.graphics.drawing模块中的Pen类以及状态管理接口用于跨组件通信。// utils/PenSettings.ets// 画笔属性管理器采用单例模式全局共享同一份配置import{Pen}fromohos.graphics.drawing;classPenSettings{privatestaticinstance:PenSettingsnewPenSettings();// 当前选中的颜色十六进制格式默认黑色publiccurrentColor:string#FF000000;// 当前画笔粗细单位px默认3publiccurrentWidth:number3;// 当前透明度范围0-255默认255完全不透明publiccurrentAlpha:number255;privateconstructor(){}staticgetInstance():PenSettings{returnPenSettings.instance;}// 应用当前设置到传入的Pen对象applyToPen(pen:Pen):void{// 解析颜色字符串为整数例如#FF0000 - 0xFF0000constcolorIntparseInt(this.currentColor.substring(1),16);// 透明度与颜色合并完成ARGB组合constargbColor(this.currentAlpha24)|(colorInt0x00FFFFFF);pen.setColor(argbColor);pen.setStrokeWidth(this.currentWidth);pen.setAlpha(this.currentAlpha);}// 更新颜色并触发画布重绘通过回调setColor(color:string):void{this.currentColorcolor;this.onSettingsChanged?.();}setWidth(width:number):void{this.currentWidthwidth;this.onSettingsChanged?.();}setAlpha(alpha:number):void{this.currentAlphaalpha;this.onSettingsChanged?.();}// 设置变更回调用于通知画布重新绘制onSettingsChanged:(()void)|nullnull;}exportdefaultPenSettings;关键点说明使用单例模式确保整个APP共享同一份画笔配置避免重复创建。applyToPen方法接收一个Pen实例将当前颜色、粗细、透明度一次性应用到该笔上。颜色处理时需要注意透明度要与颜色值合并为ARGB格式。setColor等方法通过回调机制通知外部如画布组件重新绘制这样才能在调整滑块后立即看到预览效果。API参考自ohos.graphics.drawing.Pen其中setColor/setStrokeWidth/setAlpha是官方提供的标准方法。2.2 色彩选择组件 ColorPickerColorPicker 组件提供一个预设颜色网格用户点击某个色块后更新 PenSettings 中的颜色值。// components/ColorPicker.ets// 颜色选择器组件展示预设色板供用户点击选择importPenSettingsfrom../utils/PenSettings;Componentexportstruct ColorPicker{StateprivateselectedColor:string#FF000000;// 预设颜色数组涵盖常见绘画色彩privatecolors:string[][#FF000000,#FFFFFFFF,#FFFF0000,#FF00FF00,#FF0000FF,#FFFFFF00,#FFFF00FF,#FF00FFFF,#FF808080,#FFC0C0C0,#FF800000,#FF008000,#FF000080,#FF808000,#FF800080,#FF008080,#FFE0B0FF,#FFFFC0CB,#FFA52A2A,#FF000000];build(){Column(){// 标题Text(颜色选择).fontSize(14).fontWeight(FontWeight.Bold).width(100%).textAlign(TextAlign.Start).margin({bottom:6});// 颜色网格每行5个Grid(){ForEach(this.colors,(color:string){GridItem(){Stack(){// 色块方块Rect().width(36).height(36).borderRadius(6).fill(color).border({width:this.selectedColorcolor?3:1,color:this.selectedColorcolor?#FF007AFF:#FFCCCCCC}).onClick((){this.selectedColorcolor;PenSettings.getInstance().setColor(color);});// 如果是当前选中颜色显示选中标记if(this.selectedColorcolor){Text(✓).fontSize(18).fontColor(#FF007AFF).fontWeight(FontWeight.Bold);}}.justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).width(40).height(40)}})}.columnsTemplate(1fr 1fr 1fr 1fr 1fr).rowsTemplate(1fr 1fr 1fr 1fr).width(100%).maxHeight(200).columnsGap(8).rowsGap(8)}.padding(12).backgroundColor(#FFF8F8F8).borderRadius(12)}}关键点说明颜色值采用#AARRGGBB格式其中AA部分在预设颜色中固定为FF不透明实际透明度由 PenSettings 中的currentAlpha控制。选中颜色的色块会有蓝色边框和勾选标记提供清晰的视觉反馈。点击色块时调用PenSettings.getInstance().setColor(color)该操作会触发回调通知画布应用新颜色。色板只是预设颜色后续我们可以扩展为自定义色盘例如使用色相环选择。2.3 粗细与透明度调节滑块 Slider使用原生Slider组件分别控制画笔粗细1-20px和透明度0-255。// components/BrushSlider.ets// 画笔粗细和透明度滑块组件支持滑动调节importPenSettingsfrom../utils/PenSettings;Componentexportstruct BrushSlider{// 当前画笔粗细StateprivatebrushWidth:number3;// 当前透明度StateprivatebrushAlpha:number255;build(){Column({space:16}){// 粗细调节Column(){Row(){Text(粗细).fontSize(14).fontWeight(FontWeight.Medium);Text(${this.brushWidth}px).fontSize(12).fontColor(#FF666666).margin({left:8});}.width(100%).justifyContent(FlexAlign.Start);Slider({value:this.brushWidth,min:1,max:20,step:1,style:SliderStyle.OutSet}).width(100%).showTips(true).showSteps(false).onChange((value:number){this.brushWidthvalue;PenSettings.getInstance().setWidth(value);});}// 透明度调节Column(){Row(){Text(透明度).fontSize(14).fontWeight(FontWeight.Medium);Text(${Math.round(this.brushAlpha/255*100)}%).fontSize(12).fontColor(#FF666666).margin({left:8});}.width(100%).justifyContent(FlexAlign.Start);Slider({value:this.brushAlpha,min:0,max:255,step:1,style:SliderStyle.OutSet}).width(100%).showTips(true).showSteps(false).onChange((value:number){this.brushAlphavalue;PenSettings.getInstance().setAlpha(value);});}}.padding(12).backgroundColor(#FFF8F8F8).borderRadius(12)}}关键点说明粗细范围设置为1-20px步长1px可以满足从细线到粗笔的绘画需求。透明度范围0-255对应0%-100%不透明右侧显示百分比以便用户理解。Slider的showTips属性设为true滑动时会显示当前数值的工具提示。每次滑动都调用 PenSettings 的setWidth/setAlpha方法同时传递给其绑定的回调。2.4 将设置组件集成到主画布页面最后将上述组件组合到画图APP的主页面中并确保每次绘制时使用 PenSettings 中的最新配置。// pages/PaintPage.ets// 画图APP主页面集成颜色选择器、滑块和画布区域importPenSettingsfrom../utils/PenSettings;import{ColorPicker}from../components/ColorPicker;import{BrushSlider}from../components/BrushSlider;importdrawingfromohos.graphics.drawing;EntryComponentstruct PaintPage{privatecanvasContext:CanvasRenderingContext2D;privatesettings:PenSettingsPenSettings.getInstance();StateprivatecurrentTool:stringpen;// pen | rect | circle// 当前正在使用的Pen对象privatedrawingPen:drawing.Pennewdrawing.Pen();aboutToAppear():void{// 注册设置变更回调每次颜色/粗细/透明度变化时更新当前Penthis.settings.onSettingsChanged(){this.settings.applyToPen(this.drawingPen);};// 初始化时应用默认设置this.settings.applyToPen(this.drawingPen);}build(){Column(){// 顶部工具栏Row(){Button(画笔).onClick((){this.currentToolpen;})Button(矩形).onClick((){this.currentToolrect;})Button(圆形).onClick((){this.currentToolcircle;})}.padding(8).width(100%).justifyContent(FlexAlign.SpaceEvenly)// 中间画布区域Canvas(this.canvasContext).width(100%).layoutWeight(1).backgroundColor(#FFFFFFFF)// 底部设置区颜色选择 粗细/透明度Column({space:12}){ColorPicker()BrushSlider()}.padding(8).width(100%).backgroundColor(#FFF0F0F0)}.width(100%).height(100%)}}关键点说明aboutToAppear中注册了 PenSettings 的回调onSettingsChanged当颜色、粗细或透明度改变时自动调用applyToPen更新this.drawingPen。在实际绘制场景中如触摸移动的回调需要确保使用的是this.drawingPen而不是临时创建的 Pen 对象这样才能应用最新的设置。底部布局同时包含 ColorPicker 和 BrushSlider用户可以在绘画过程中随时调整参数。3. 运行验证完成上述代码后运行APP应观察到以下效果底部出现颜色选择器网格默认选中第一个黑色色块。点击其他颜色如红色 #FFFF0000画布的下一笔线条会变为红色。粗细滑块滑动时数值显示从1px到20px释放后下一笔线条会使用新粗细。透明度滑块从0%到100%滑动时工具提示显示百分比笔画会呈现不同程度的半透明效果。所有调节即时生效不需要重启或重新初始化画布。4. 小结与预告本篇产出了三个核心模块PenSettings画笔属性管理器、ColorPicker颜色选择器、BrushSlider粗细与透明度滑块。这些组件被集成到主画布页面中实现了画笔参数的实时调节让用户能画出不同颜色、粗细和透明度的线条。这个功能是画图APP用户体验的关键提升点也是后续实现形状绘制、文字添加等功能的基础。下一篇「切换绘制模式与交互反馈」将实现矩形、圆形和自由画笔三种绘制模式的切换优化UI反馈让用户清晰知道当前处于哪种绘制状态为后续的图形绘制做铺垫。