HarmonyOS7 图片滤镜工作台实战：Image 滤镜 不只是会用，还要用得顺手

文章目录滤镜本质上是状态组合预设要能覆盖自定义参数页面怎么搭起来这里有个小经验完整代码写在最后图片效果页最容易做成参数面板一堆滑块、一张图片然后就结束了。这个案例稍微好一点它把预设滤镜、自定义调参和ImageFit填充模式放在同一个工作台里读起来更接近真实图片编辑功能。滤镜本质上是状态组合页面里的grayscaleVal、blurVal、brightnessVal、saturateVal、contrastVal、opacityVal分别绑定到预览图的对应属性。用户点预设或拖动滑块本质都是修改这些状态。所以滤镜不是一个神秘能力而是一组视觉参数的组合。理解这一点后预设滤镜就很好写黑白、柔焦、复古、高亮本质只是给同一组参数赋不同值。预设要能覆盖自定义参数FilterPreset_up7i把每个预设的参数集中起来。点击预设时applyPreset()会一次性更新所有滤镜状态并把selectedFilter设成当前预设 ID。这样做比在点击事件里零散写一堆赋值更清楚也方便后面新增预设。关键代码如下applyPreset(preset:FilterPreset_up7i){this.selectedFilterpreset.idthis.grayscaleValpreset.grayscalethis.blurValpreset.blurthis.brightnessValpreset.brightnessthis.saturateValpreset.saturatethis.contrastValpreset.contrastthis.opacityValpreset.opacity}这类函数建议保持短小输入和输出都清楚。后面如果要接接口、接本地数据库改动点也会集中一些。页面怎么搭起来ImageFilterStudioPage仍然是一个标准的EntryComponent页面。外层一般用Column承接整页再把可滚动内容放进Scroll里面根据业务模块继续拆Row、Column、ForEach。我建议你照着代码看的时候先找这些标题一、预设滤镜效果、二、自定义滤镜参数、三、ImageFit 填充模式。它们基本就是页面的骨架。骨架看懂了再看每个模块里的事件回调理解成本会低很多。这里有个小经验图片滤镜参数要给用户可预期的反馈预设和自定义最好分开。完整代码下面是整理后的完整代码入口组件名已经换成和当前场景匹配的名字放进自己的页面目录后可以按项目路由规则接入。// Image 图片滤镜与特效interfaceFilterPreset_up7i{id:numbername:stringgrayscale:numberblur:numberbrightness:numbersaturate:numbercontrast:numberopacity:number}EntryComponentstruct ImageFilterStudioPage{StateselectedFilter:number0StategrayscaleVal:number0StateblurVal:number0StatebrightnessVal:number1StatesaturateVal:number1StatecontrastVal:number1StateopacityVal:number1StateselectedFit:ImageFitImageFit.CoverStateisShowCustom:booleanfalseprivatepresets:FilterPreset_up7i[][{id:0,name:原图,grayscale:0,blur:0,brightness:1,saturate:1,contrast:1,opacity:1},{id:1,name:黑白,grayscale:1,blur:0,brightness:1,saturate:0,contrast:1,opacity:1},{id:2,name:柔焦,grayscale:0,blur:2,brightness:1.1,saturate:1,contrast:0.9,opacity:1},{id:3,name:复古,grayscale:0.3,blur:0,brightness:0.9,saturate:0.7,contrast:1.2,opacity:1},{id:4,name:高亮,grayscale:0,blur:0,brightness:1.5,saturate:1.2,contrast:1,opacity:1},{id:5,name:半透,grayscale:0,blur:0,brightness:1,saturate:1,contrast:1,opacity:0.5},]privatefitModes:ImageFit[][ImageFit.Cover,ImageFit.Contain,ImageFit.Fill,ImageFit.ScaleDown,ImageFit.None]privatefitNames:string[][Cover,Contain,Fill,ScaleDown,None]applyPreset(preset:FilterPreset_up7i){this.selectedFilterpreset.idthis.grayscaleValpreset.grayscalethis.blurValpreset.blurthis.brightnessValpreset.brightnessthis.saturateValpreset.saturatethis.contrastValpreset.contrastthis.opacityValpreset.opacity}build(){Scroll(){Column({space:0}){// 标题Text(Image 滤镜与特效).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%).padding({left:20,right:20,top:20,bottom:4})Text(grayscale / blur / brightness / opacity 等图片效果).fontSize(13).fontColor(#6B7280).width(100%).padding({left:20,right:20,bottom:16})// 预览区模拟图片用渐变色块Stack(){Column(){Flex({wrap:FlexWrap.Wrap}){ForEach([#FF6B6B,#4ECDC4,#45B7D1,#96CEB4,#FFEAA7,#DDA0DD,#98D8C8,#F7DC6F,#BB8FCE,#85C1E9,#82E0AA,#F0B27A],(clr:string){Text().width(25%).height(80).backgroundColor(clr)},(clr:string)clr)}.width(100%)}.width(100%).height(200).grayscale(this.grayscaleVal).blur(this.blurVal).brightness(this.brightnessVal).saturate(this.saturateVal).contrast(this.contrastVal).opacity(this.opacityVal).borderRadius(12).clip(true).backgroundColor(#F3F4F6)// 当前滤镜标签Text(this.presets.find(pp.idthis.selectedFilter)?.name??自定义).fontSize(12).fontColor(Color.White).backgroundColor(rgba(0,0,0,0.5)).padding({left:10,right:10,top:4,bottom:4}).borderRadius(12).offset({x:0,y:0})}.width(calc(100% - 40vp)).margin({left:20,right:20,bottom:12})// 预设滤镜选择Column({space:10}){Text(一、预设滤镜效果).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Row({space:8}){ForEach(this.presets,(preset:FilterPreset_up7i){Column({space:4}){// 小预览Column().width(52).height(40).backgroundColor(#4ECDC4).borderRadius(8).grayscale(preset.grayscale).blur(preset.blur).brightness(preset.brightness).opacity(preset.opacity).borderWidth(this.selectedFilterpreset.id?2:0).borderColor(#2563EB)Text(preset.name).fontSize(11).fontColor(this.selectedFilterpreset.id?#2563EB:#6B7280).fontWeight(this.selectedFilterpreset.id?FontWeight.Bold:FontWeight.Normal)}.alignItems(HorizontalAlign.Center).onClick(()this.applyPreset(preset))},(preset:FilterPreset_up7i)preset.id.toString())}.width(100%).justifyContent(FlexAlign.SpaceBetween).padding({top:8,bottom:8,left:4,right:4}).backgroundColor(#F9FAFB).borderRadius(10)}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 自定义滤镜参数Column({space:10}){Row(){Text(二、自定义滤镜参数).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).layoutWeight(1)Text(this.isShowCustom?收起 ↑:展开 ↓).fontSize(13).fontColor(#2563EB).onClick((){this.isShowCustom!this.isShowCustom})}.width(100%)if(this.isShowCustom){Column({space:10}){// 灰度Row({space:8}){Text(灰度).fontSize(13).fontColor(#6B7280).width(44)Slider({value:this.grayscaleVal*100,min:0,max:100,step:5}).layoutWeight(1).selectedColor(#374151).trackColor(#E5E7EB).onChange((v:number){this.grayscaleValv/100this.selectedFilter-1})Text((this.grayscaleVal*100).toFixed(0)%).fontSize(12).fontColor(#374151).width(36)}.alignItems(VerticalAlign.Center)// 模糊Row({space:8}){Text(模糊).fontSize(13).fontColor(#6B7280).width(44)Slider({value:this.blurVal,min:0,max:20,step:1}).layoutWeight(1).selectedColor(#2563EB).trackColor(#E5E7EB).onChange((v:number){this.blurValvthis.selectedFilter-1})Text(this.blurVal.toFixed(0)).fontSize(12).fontColor(#2563EB).width(36)}.alignItems(VerticalAlign.Center)// 亮度Row({space:8}){Text(亮度).fontSize(13).fontColor(#6B7280).width(44)Slider({value:this.brightnessVal*100,min:0,max:200,step:5}).layoutWeight(1).selectedColor(#D97706).trackColor(#E5E7EB).onChange((v:number){this.brightnessValv/100this.selectedFilter-1})Text((this.brightnessVal*100).toFixed(0)%).fontSize(12).fontColor(#D97706).width(36)}.alignItems(VerticalAlign.Center)// 不透明度Row({space:8}){Text(透明).fontSize(13).fontColor(#6B7280).width(44)Slider({value:this.opacityVal*100,min:0,max:100,step:5}).layoutWeight(1).selectedColor(#7C3AED).trackColor(#E5E7EB).onChange((v:number){this.opacityValv/100this.selectedFilter-1})Text((this.opacityVal*100).toFixed(0)%).fontSize(12).fontColor(#7C3AED).width(36)}.alignItems(VerticalAlign.Center)}}}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// ImageFit 展示Column({space:10}){Text(三、ImageFit 填充模式).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.SpaceBetween}){ForEach(this.fitModes,(fit:ImageFit,idx:number){Column({space:4}){Row().width(90).height(70).backgroundColor(this.selectedFitfit?#2563EB:#E5E7EB).borderRadius(8).clip(true)Text(this.fitNames[idx]).fontSize(11).fontColor(this.selectedFitfit?#2563EB:#6B7280).fontWeight(this.selectedFitfit?FontWeight.Bold:FontWeight.Normal)}.alignItems(HorizontalAlign.Center).margin({bottom:8}).onClick((){this.selectedFitfit})},(fit:ImageFit)fit.toString())}.width(100%)}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:24})}}.width(100%).height(100%).backgroundColor(#FFFFFF)}}写在最后这个例子不复杂但很适合反复看。很多 ArkUI 页面写不顺其实不是组件不会用而是状态、结构和反馈没有放在一起设计。