当前位置：首页 > news >正文

如何扩展ZLPhotoBrowser：自定义编辑工具和效果终极指南

news 2026/5/24 17:39:29

如何扩展ZLPhotoBrowser：自定义编辑工具和效果终极指南

【免费下载链接】ZLPhotoBrowserWechat-like image picker. Support select photos, videos, gif and livePhoto. Support edit image and crop video. 微信样式的图片选择器，支持预览/相册内拍照及录视频、拖拽/滑动选择，编辑图片/视频，支持多语言国际化等功能;项目地址: https://gitcode.com/gh_mirrors/zl/ZLPhotoBrowser

ZLPhotoBrowser是一款微信样式的图片选择器，支持预览、相册内拍照及录视频、拖拽/滑动选择，编辑图片/视频，支持多语言国际化等功能。本指南将带你快速掌握如何为其扩展自定义编辑工具和效果，让你的图片处理功能更加强大。

了解ZLPhotoBrowser的编辑架构

ZLPhotoBrowser的编辑功能主要集中在Sources/Edit/目录下，包含了图片编辑、视频编辑、滤镜处理等核心模块。其中：

ZLEditorManager.swift：管理编辑操作的状态和历史记录
ZLEditImageViewController.swift：图片编辑界面控制器
ZLFilter.swift：内置滤镜实现
ZLEditToolCells.swift：编辑工具按钮定义

通过这些模块的协作，ZLPhotoBrowser实现了完整的图片编辑功能，包括裁剪、滤镜、调整等常用工具。

自定义滤镜效果的实现步骤

1. 创建滤镜类

首先，我们需要创建一个自定义滤镜类，继承自NSObject，并实现图片处理方法。可以参考项目中的Example/Example/ZLCustomFilter.swift文件：

class ZLCustomFilter: NSObject { class func hazeRemovalFilter(image: UIImage) -> UIImage { // 实现滤镜逻辑 var ci = image.ciImage if ci == nil, let cg = image.cgImage { ci = CIImage(cgImage: cg) } guard let ciImage = ci else { return image } let filter = HazeRemovalFilter() filter.inputImage = ciImage guard let outputCIImage = filter.outputImage else { return image } let context = CIContext() guard let cgImage = context.createCGImage(outputCIImage, from: outputCIImage.extent) else { return image } return UIImage(cgImage: cgImage) } }

2. 实现Core Image滤镜

接下来，实现具体的Core Image滤镜逻辑。在ZLCustomFilter.swift中，我们定义了一个HazeRemovalFilter类，继承自CIFilter：

class HazeRemovalFilter: CIFilter { var inputImage: CIImage! var inputColor: CIColor! = CIColor(red: 0.7, green: 0.9, blue: 1.0) var inputDistance: Float! = 0.2 var inputSlope: Float! = 0.0 var hazeRemovalKernel: CIKernel! override init() { // 初始化自定义滤镜内核 let code: String = """ kernel vec4 myHazeRemovalKernel( sampler src, __color color, float distance, float slope) { vec4 t; float d; d = destCoord().y * slope + distance; t = unpremultiply(sample(src, samplerCoord(src))); t = (t - d * color) / (1.0 - d); return premultiply(t); } """ self.hazeRemovalKernel = CIKernel(source: code) super.init() } // 实现输出图像计算 override var outputImage: CIImage? { // 滤镜处理逻辑 } }

3. 注册自定义滤镜

创建好滤镜后，需要将其注册到ZLPhotoBrowser的编辑配置中。在视图控制器中，通过ZLPhotoConfiguration的editImageConfiguration属性添加自定义滤镜：

ZLPhotoConfiguration.default().editImageConfiguration.filters = [ .normal, .process, ZLFilter(name: "Haze Removal", applier: ZLCustomFilter.hazeRemovalFilter) ]

这样，自定义滤镜就会出现在编辑界面的滤镜选择栏中。

添加自定义编辑工具

1. 定义工具按钮

在ZLEditToolCells.swift中，我们可以看到系统工具按钮的定义。要添加自定义工具，需要创建新的工具类型并定义其图标：

enum ZLEditTool: Int { case crop case filter case adjust // 添加自定义工具 case myCustomTool } // 在工具按钮配置中添加 case .myCustomTool: icon.image = .zl.getImage("zl_my_custom_tool") icon.highlightedImage = .zl.getImage("zl_my_custom_tool_selected")

2. 实现工具交互逻辑

在ZLEditImageViewController.swift中，添加自定义工具的交互逻辑：

private func myCustomToolBtnClick() { // 自定义工具的交互逻辑 selectedTool = .myCustomTool // 显示自定义工具的控制面板 }

3. 添加工具面板

根据需要创建自定义工具的控制面板，并在选中工具时显示：

private func setupCustomToolPanel() { // 创建自定义工具的控制面板 let customPanel = UIView(frame: CGRect(x: 0, y: 0, width: view.width, height: 200)) customPanel.backgroundColor = .black // 添加控制面板的子视图和交互 bottomShadowView.addSubview(customPanel) customPanel.isHidden = true self.customToolPanel = customPanel }