【鸿蒙实战开发】图像特效实现

本文会详细介绍如何在画布中为插入的外部图片添加特效，添加特效的界面如下图所示：

特效可以叠加使用（可以多选）。
这个窗口耨是使用Effects组件实现的，代码和详细解释如下：

这段 ArkTS 代码实现了一个用于应用各种图像特效的用户界面。界面包含多个复选框供用户选择不同的特效，并通过点击“确定”按钮将选择的特效应用。效果如您提供的图片所示。

代码的实现过程

• 引入依赖：

  • 首先引入一些常量和实用函数，如面板背景颜色、按钮背景颜色，以及文档相关的工具函数。

• 组件定义：

  • 使用 @Entry 和 @Component 装饰器定义了一个名为 Effects 的组件。这是一个入口组件，可以在 ArkTS 中直接展示。

• 状态变量：

  • 使用 @State 定义了一些布尔类型的状态变量（如 grayValue、blurValue 等），这些变量用于存储用户是否选择了某个特效。

• 构建用户界面：

  • build 方法定义了组件的布局和UI元素，使用多个 Row 和 Column 布局来排列复选框、文本和按钮。

• 复选框组件：

  • 每个复选框 (Checkbox) 对应一个图像特效，如“灰度效果”、“模糊效果”等。通过 select 和 onChange 方法，将复选框的状态与相应的状态变量绑定，确保用户选择能够实时反映在状态变量中。

• 文本组件：

  • 每个复选框旁边都有一个 Text 组件，显示特效名称。点击 Text 组件时，会切换相应的复选框状态。

• 确定按钮：

  • 一个按钮组件位于页面的底部，点击“确定”按钮时，会检查每个复选框的状态，将选中的特效名称添加到 effects 数组中，并通过回调函数 effectSelected 传递这些特效。

详细代码注释

// 从常量文件中引入面板背景颜色和按钮背景颜色常量
import { PANEL_BACKGROUND_COLOR, PANEL_BUTTON_BACKGROUND_COLOR } from '../common/const'

// 引入文档尺寸和文档处理相关的函数和常量
import { DocumentSize, DocumentSizes } from '../data/Documents'

// 引入EntryAbility模块，处理入口相关的能力
import EntryAbility from '../entryability/EntryAbility'

// 引入常用的工具函数，用于处理文档目录相关的操作
import {documentExists, createDocumentDir} from '../common/common'

// 使用@Entry装饰器，标记这个组件为入口组件
@Entry

// 使用@Component装饰器，定义一个组件Effects
@Component
export struct Effects {

  // 定义一个可选的回调函数，当用户选择了特效时调用，传递选中的特效数组
  effectSelected?: (effects: string[]) => void

  // 定义一个字符串类型的根路径变量，初始化为EntryAbility模块提供的根路径
  rootPath: string = EntryAbility.rootPath;

  // 使用@State定义多个布尔类型的状态变量，用于跟踪每个特效复选框的选择状态
  @State grayValue: boolean = false;
  @State blurValue: boolean = false;
  @State invertValue: boolean = false;
  @State sepiaValue: boolean = false;
  @State brightnessValue: boolean = false;
  @State sharpenValue: boolean = false;
  @State embossValue: boolean = false;

  // 定义一个字符串类型的状态变量，表示格式名称（在这里暂未使用）
  @State formatName: string = '';

  // build方法用于构建用户界面
  build() {
    // 创建一个Column组件，用于垂直排列子组件
    Column() {

      // 创建一个Row组件，包含一个复选框和文本，表示灰度效果选项
      Row() {
        // 创建一个复选框组件
        Checkbox({ name: 'checkbox1' })
          .selectedColor(0x39a2db) // 设置复选框选中时的颜色
          .shape(CheckBoxShape.ROUNDED_SQUARE) // 设置复选框的形状为圆角矩形
          .select(this.grayValue) // 将复选框的选中状态与grayValue变量绑定
          .onChange((value: boolean) => { // 设置复选框状态变化时的回调函数
             this.grayValue = value; // 更新状态变量的值
          })
          .width(25) // 设置复选框的宽度
          .height(25) // 设置复选框的高度

        // 创建一个文本组件，显示“灰度效果”字样
        Text('灰度效果').fontSize(20).foregroundColor('#FFFFFF') // 设置字体大小和颜色
          .onClick(() => { // 设置点击事件
            this.grayValue = !this.grayValue; // 点击文本时，切换复选框的状态
          })
      }

      // 接下来的几个Row组件都是类似的结构，只是复选框和文本对应不同的特效
      // 模糊效果
      Row() {
        Checkbox({ name: 'checkbox2' })
          .selectedColor(0x39a2db)
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .select(this.blurValue)
          .onChange((value: boolean) => {
            this.blurValue = value;
          })
          .width(25)
          .height(25)
        Text('模糊效果').fontSize(20).foregroundColor('#FFFFFF')
          .onClick(() => {
            this.blurValue = !this.blurValue;
          })
      }

      // 反色效果
      Row() {
        Checkbox({ name: 'checkbox3' })
          .selectedColor(0x39a2db)
          .select(this.invertValue)
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .onChange((value: boolean) => {
            this.invertValue = value;
          })
          .width(25)