鸿蒙HarmonyOS（模糊图片的实现过程及触摸事件onTouch的使用方法）_harmonyos 触摸事件

• 本次开发中，需要使用到以下 ：

        1. 模糊相关的接口

        2. onTouch触摸事件

• 下面将进行模糊相关接口的介绍：

接口 说明 backdropBlur 为当前组件添加背景模糊效果，入参为模糊半径 blur         为当前组件添加内容模糊效果，入参为模糊半径 backgroundBlurStyle 为当前组件添加背景模糊效果，入参为模糊样式 foregroundBlurStyle 为当前组件添加内容模糊效果，入参为模糊样式 motionBlur 为当前组件添加由缩放大小或位移变化引起的运动过程中的动态模糊效果，入参为模糊半径或锚点坐标。

• 下面将进行onTouch触摸事件的讲解：

        onTouch

           格式：onTouch(event: (event: TouchEvent) => void): T

           说明：

参数名 类型 必填 说明 event TouchEvent 是 获得TouchEvent对象

                      T：返回当前组件

           TouchEvent对象说明： 

名称 类型 描述 type TouchType

触摸事件的类型。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

touches Array

全部手指信息。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

changedTouches Array

当前发生变化的手指信息。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

stopPropagation () => void

阻塞事件冒泡。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

preventDefault12+ () => void

阻止默认事件。

说明： 该接口仅支持部分组件使用，当前支持组件：Hyperlink。暂不支持异步调用和提供Modifier接口。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

                注意：

                TouchType下又包含以下几种：

名称 说明 Down 手指按下时触发。 Up 手指抬起时触发。 Move 手指按压态在屏幕上移动时触发。 Cancel 触摸事件取消时触发。

•         详细的可以通过下面链接进行查看

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-events-touch-V5#touchobject%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8Ehttps://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-events-touch-V5#touchobject%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

• 接下来就是对模糊不同接口的使用：

        1.  使用backdropBlur为组件添加背景模糊

           backdropBlur的主要作用是对内容的背景进行相关操作

          效果如下：

           

           代码如下：

@Entry@Componentstruct Index{ build() { Column({ space: 10 }) { Text(\'backdropBlur\') .width(\'90%\') .height(\'90%\') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .backdropBlur(10)// 对背景进行模糊，括号里面的值就代表模糊程度 .backgroundImage($r(\'app.media.fengjing\')) //这里更换成自己的图片 .backgroundImageSize({ width: 400, height: 300 }) } .width(\'100%\') .height(\'50%\') .margin({ top: 20 }) }}

      2.  使用blur为组件添加内容模糊

        blur的主要作用跟backdropBlur恰恰相反，它是对内容的进行模糊操作

        注意：blur和backdropBlur不要搞混。一个是对内容操作，一个是对内容背景操作

        效果如下： 

        

        代码如下：

@Entry@Componentstruct Index{ @State radius: number =0 @State text : string = \'\'; @State y:string = \'手指不在屏幕上了\'; aboutToAppear(): void { this.text =\"按住屏幕上下滑动\\n\" + \"当前手指所在y轴位置，\" + this.y + \"\\n\" + \"当前图片模糊程度为：\"+this.radius } build() { Column() { Text(this.text) .height(200) .fontSize(20) .fontWeight(FontWeight.Bold) Image($r(\'app.media.fengjing\')) .width(\'100%\') .height(\'100%\') .objectFit(ImageFit.Cover) .blur(this.radius) //这里通过调用定义好的radius，进行数据的实时刷新 }.height(\'100%\') .width(\'100%\') //使用onTouch触摸事件进行监听，渲染 .onTouch((event?: TouchEvent) => { if (event) { if (event.type === TouchType.Move) { // 直接获取原始y坐标数值并保留两位小数 const rawY = event.touches[0].y; this.y = rawY.toFixed(2); // y坐标显示两位小数 this.radius = Number((rawY / 10).toFixed(2)); // 计算并保留两位小数 } if (event.type === TouchType.Up) { this.radius = 0; // 重置为数值0 this.y = \'手指离开屏幕\'; } } this.text = \"按住屏幕上下滑动\\n\" + \"当前手指所在y轴位置：\" + this.y + \"\\n当前图片模糊程度为：\" + this.radius.toFixed(2); }) }}

 其他的接口就不进行一一演示了，详细的请点击下面的链接进行查看：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-blur-effect#%E4%BD%BF%E7%94%A8backdropblur%E4%B8%BA%E7%BB%84%E4%BB%B6%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E6%A8%A1%E7%B3%8Ahttps://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-blur-effect#%E4%BD%BF%E7%94%A8backdropblur%E4%B8%BA%E7%BB%84%E4%BB%B6%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E6%A8%A1%E7%B3%8A

如果能获取到大家的关注，那我会继续努力，谢谢大家的浏览观看！