#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析7：实现图像特效 原创

// 从常量文件中引入面板背景颜色和按钮背景颜色常量
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)
          .height(25)
        Text('反色效果').fontSize(20).foregroundColor('#FFFFFF')
          .onClick(() => {
            this.invertValue = !this.invertValue;
          })
      }

      // 棕褐色效果
      Row() {
        Checkbox({ name: 'checkbox4' })
          .selectedColor(0x39a2db)
          .select(this.sepiaValue)
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .onChange((value: boolean) => {
              this.sepiaValue = value;
          })
          .width(25)
          .height(25)
        Text('棕褐色效果').fontSize(20).foregroundColor('#FFFFFF')
          .onClick(() => {
            this.sepiaValue = !this.sepiaValue;
          })
      }

      // 亮度效果
      Row() {
        Checkbox({ name: 'checkbox5' })
          .selectedColor(0x39a2db)
          .select(this.brightnessValue)
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .onChange((value: boolean) => {
            this.brightnessValue = value;
          })
          .width(25)
          .height(25)
        Text('亮度效果').fontSize(20).foregroundColor('#FFFFFF')
          .onClick(() => {
            this.brightnessValue = !this.brightnessValue;
          })
      }

      // 锐化效果
      Row() {
        Checkbox({ name: 'checkbox6' })
          .selectedColor(0x39a2db)
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .onChange((value: boolean) => {
            this.sharpenValue = value;
          })
          .select(this.sharpenValue)
          .width(25)
          .height(25)
        Text('锐化效果').fontSize(20).foregroundColor('#FFFFFF')
          .onClick(() => {
            this.sharpenValue = !this.sharpenValue;
          })
      }

      // 浮雕效果
      Row() {
        Checkbox({ name: 'checkbox7' })
          .selectedColor(0x39a2db)
          .select(this.embossValue)
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .onChange((value: boolean) => {
            this.embossValue = value;
          })
          .width(25)
          .height(25)
        Text('浮雕效果').fontSize(20).foregroundColor('#FFFFFF')
          .onClick(() => {
            this.embossValue = !this.embossValue;
          })
      }

      // 创建一个“确定”按钮，当用户点击时，收集所有选中的特效并通过回调函数传递出去
      Button({ type: ButtonType.Normal }) {
        Text('确定')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
      }
      .borderRadius(5) // 设置按钮的圆角半径
      .width('100%') // 设置按钮宽度
      .height(30) // 设置按钮高度
      .margin({bottom:10, top:10}) // 设置按钮的上下边距
      .onClick(() => {
        let effects: string[] = [];

 // 创建一个数组用于存储选中的特效
        
        // 根据每个复选框的状态，将相应的特效名称添加到数组中
        if (this.grayValue) {
          effects.push('gray');
        }
        if (this.blurValue) {
          effects.push('blur');
        }
        if (this.invertValue) {
          effects.push('invert');
        }
        if (this.sepiaValue) {
          effects.push('sepia');
        }
        if (this.brightnessValue) {
          effects.push('brightness');
        }
        if (this.sharpenValue) {
          effects.push('sharpen');
        }
        if (this.embossValue) {
          effects.push('emboss');
        }

        // 如果effectSelected回调函数存在，则调用该函数并传递选中的特效
        if (this.effectSelected) {
          this.effectSelected(effects);
        }
      })
    }
    // 设置Column组件的背景颜色和边框属性
    .backgroundColor(PANEL_BACKGROUND_COLOR)
    .border({ width: 0, color: '#000000', radius: 10 })
    .width('100%') // 设置宽度
    .height('100%') // 设置高度
    .padding({top:10,left:10,right:10}) // 设置内边距
    .alignItems(HorizontalAlign.Start) // 设置子元素的水平对齐方式
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.

import { PANEL_BACKGROUND_COLOR, PANEL_BUTTON_BACKGROUND_COLOR } from '../common/const'
import { DocumentSize, DocumentSizes } from '../data/Documents'
import EntryAbility from '../entryability/EntryAbility'
import {documentExists, createDocumentDir} from '../common/common'
1.
2.
3.
4.

@Entry
@Component
export struct Effects {
1.
2.
3.

  effectSelected?: (effects: string[]) => void
  rootPath: string = EntryAbility.rootPath;
  @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 = '';
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

  build() {
    Column() {
1.
2.

      Row() {
        Checkbox({ name: 'checkbox1' })
          .selectedColor(0x39a2db)
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .select(this.grayValue)
          .onChange((value: boolean) => {
             this.grayValue = value;
          })
          .width(25)
          .height(25)
        Text('灰度效果').fontSize(20).foregroundColor('#FFFFFF')
          .onClick(()=>{
            this.grayValue = !this.grayValue;
          })
      }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

      Button({ type: ButtonType.Normal }) {
        Text('确定')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
      }
      .borderRadius(5)
      .width('100%')
      .height(30)
      .margin({bottom:10, top:10})
      .onClick(() => {
        let effects: string[] = [];
        if (this.grayValue) {
          effects.push('gray');
        }
        if (this.blurValue) {
          effects.push('blur');
        }
        if (this.invertValue) {
          effects.push('invert');
        }
        if (this.sepiaValue) {
          effects.push('sepia');
        }
        if (this.brightnessValue) {
          effects.push('brightness');
        }
        if (this.sharpenValue) {
          effects.push('sharpen');
        }
        if (this.embossValue) {
          effects.push('emboss');
        }
        if (this.effectSelected) {
          this.effectSelected(effects);
        }
      })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

    }.backgroundColor(PANEL_BACKGROUND_COLOR)
    .border({ width: 0, color: '#000000', radius: 10 })
    .width('100%')
    .height('100%')
    .padding({top:10,left:10,right:10})
    .alignItems(HorizontalAlign.Start)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.

  effectSelected(effects: string[]) {
    this.controller1.runJavaScript(`applyImageEffects(${JSON.stringify(effects)})`)
    this.toggleEffectsPanel();
  }
1.
2.
3.
4.

function applyImageEffects(effects) {
    const activeObject = canvas.getActiveObject();
    var img;

    // 检查是否选中了对象，并且这个对象是否为图片
    if (activeObject && activeObject.type === 'image') {

        img = activeObject;

        return new Promise((resolve) => {
            effects.forEach((effect) => {
                switch (effect) {
                    case "gray":

                        img.filters.push(new fabric.Image.filters.Grayscale());
                        // 灰度效果
                        break;
                    case "blur":
                        img.filters.push(new fabric.Image.filters.Blur({ blur: 0.5 })); // 模糊效果
                        break;
                    case "invert":
                        img.filters.push(new fabric.Image.filters.Invert()); // 反色效果
                        break;
                    case "sepia":
                        img.filters.push(new fabric.Image.filters.Sepia()); // 棕褐色效果
                        break;
                    case "brightness":
                        img.filters.push(
                            new fabric.Image.filters.Brightness({ brightness: 0.2 })
                        ); // 亮度效果
                        break;
                    case "sharpen":
                    // 锐化效果，通过一个简单的3x3卷积矩阵
                        img.filters.push(
                            new fabric.Image.filters.Convolute({
                                matrix: [0, -1, 0, -1, 5, -1, 0, -1, 0],
                            })
                        ); // 锐化效果
                        break;
                    case "emboss":
                    // 浮雕效果，通过另一个卷积矩阵实现
                        img.filters.push(
                            new fabric.Image.filters.Convolute({
                                matrix: [
                                    1,
                                    1,
                                    1,
                                    1,
                                    0.7,
                                    -1, // 这个矩阵值可根据需要调整以获得不同的浮雕效果
                                    -1,
                                    -1,
                                    -1,
                                ],
                            })
                        ); // 浮雕效果
                        break;
                // 可以继续添加更多效果
                }
            });
            img.applyFilters();
            resolve();
            canvas.requestRenderAll();
        });
    } else {

        return
    }

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.

img.filters.push(new fabric.Image.filters.Grayscale());
// 应用灰度效果后，图像中的所有颜色都会被去除，图像变成黑白色调。
1.
2.

img.filters.push(new fabric.Image.filters.Blur({ blur: 0.5 }));
// `blur` 参数的值越大，图像越模糊。这里的值0.5表示适度的模糊效果。
1.
2.

img.filters.push(new fabric.Image.filters.Invert());
// 应用反色效果后，图像会呈现出相反的颜色，形成类似负片的视觉效果。
1.
2.

img.filters.push(new fabric.Image.filters.Sepia());
// 应用棕褐色效果后，图像将带有复古的棕褐色调，给人一种怀旧感。
1.
2.

img.filters.push(new fabric.Image.filters.Brightness({ brightness: 0.2 }));
// 这里的 `brightness` 参数为 0.2，使图像整体变亮。值范围通常为 [-1, 1]，其中负值变暗，正值变亮。
1.
2.

img.filters.push(new fabric.Image.filters.Convolute({
    matrix: [0, -1, 0, -1, 5, -1, 0, -1, 0],
}));
// 锐化效果使用的卷积矩阵突出图像的边缘，使图像看起来更清晰。
1.
2.
3.
4.

img.filters.push(new fabric.Image.filters.Convolute({
    matrix: [1, 1, 1, 1, 0.7, -1, -1, -1, -1],
}));
// 浮雕效果使用的卷积矩阵创造了光照和阴影的错觉，使图像呈现出浮雕的效果。
1.
2.
3.
4.

img.applyFilters(); 
canvas.requestRenderAll();
1.
2.