PixelEditor 0.2.3

PixelEditor 0.2.3

×

由 muukii 维护。

 
依赖项
PixelEngine~> 0.2.2
TransitionPatch~> 1.0.0
 

PixelEditor 0.2.3

  • 作者
  • muukii

Pixel - 引擎 • 编辑器

CocoaPods FOSSA Status 引擎

CocoaPods 编辑器

使用 CoreImage 的图像编辑器和引擎

投入使用

功能

目前正在接受实现这些功能的 PR。

性能

  • ✈️相当好
  • 🚀飞快（🌀有人能帮我们吗？！)

调整

  • 裁剪
  • 拉直（🌀有人能帮我们吗？！)
  • 透视（🌀有人能帮我们吗？！)

滤镜

预设

  • 调色板（查找表）
    • 强度

⚠️目前，Pixel不包含查找表。演示应用程序包含示例查找表。

还有一篇有趣的文章。

编辑

  • 亮度
  • 对比度
  • 饱和度
  • 高光
  • 阴影
  • 色温
  • 高斯模糊
  • 晕影
  • 颜色（阴影/高光）
  • fade（渐变）
  • 锐化
  • 清晰度
  • HLS（《🌀有人能帮我们吗？！)

其他

需求

  • Swift 4.2 (Xcode10+)
  • iOS 10+

快速开始

Demo.app 包含示例代码。请查看 Sources/Demo/EditorViewController.swift。

创建 PixelEditViewController 实例

let image: UIImage

let controller = PixelEditViewController(image: image)

显示

  • 及以上为模态显示

⚠️当前我们需要用 UINavigationController 来包裹控制器。因为， PixelEditViewController 需要使用 UINavigationBar。

let controller: PixelEditViewController

let navigationController = UINavigationController(rootViewController: controller)

self.present(navigationController, animated: true, completion: nil)
  • 以推送方式显示

我们可以在 UINavigationController 中推送控制器。

let controller: PixelEditViewController
self.navigationController.push(controller, animated: true)

设置代理

PixelEditViewController 有一个名为 PixelEditViewControllerDelegate 的委托协议。

public protocol PixelEditViewControllerDelegate : class {
  func pixelEditViewController(_ controller: PixelEditViewController, didEndEditing editingStack: SquareEditingStack)
  func pixelEditViewControllerDidCancelEditing(in controller: PixelEditViewController)
}

💡PixelEditViewController 不知道如何自行关闭或弹出。因此，我们需要在外部控制 PixelEditViewController。

基本原理如下，建议在代理的方法中实现关闭或弹出的操作。

extension EditorViewController : PixelEditViewControllerDelegate {

  func pixelEditViewController(_ controller: PixelEditViewController, didEndEditing editingStack: SquareEditingStack) {

    self.navigationController?.popToViewController(self, animated: true)
  }

  func pixelEditViewControllerDidCancelEditing(in controller: PixelEditViewController) {
  
    self.navigationController?.popToViewController(self, animated: true)
  }

}

渲染图像

let editingStack: SquareEditingStack

let image = editingStack.makeRenderer().render(resolution: .full)

恢复编辑

我们可以将当前的编辑视为从PixelEditViewController.editingStack中获取的EditingStack的实例。

如果我们希望在关闭PixelEditViewController后恢复编辑，我们可以使用这个方法。

let editingStack = controller.editingStack
// close editor

// and then when show editor again
let controller = PixelEditViewController(editingStack: editingStack)

添加颜色立方滤镜

我们可以使用CIColorCubeFilter与LUT（查找表）。

LUT像这样（维度为64）

import PixelEngine

let lutImage: UIImage

let filter = FilterColorCube(
  name: "Filter Name",
  identifier: "Filter Identifier",
  lutImage: lutImage,
  dimension: 64
)

let storage = ColorCubeStorage(filters: [filter])
let controller = PixelEditViewController(image: image, colorCubeStorage: storage)

此外，如果不指定colorCubeStorage，请使用default。

// set
ColorCubeStorage.default.filters = filters

// get
ColorCubeStorage.default.filters

自定义控制UI

我们可以自定义控件区域的UI。

使用覆盖自定义内置控制UI

在PixelEditor中有一个Options结构。我们可以创建适合我们用例的选项。

因此，如果我们需要更改曝光控制，请覆盖ExposureControlBase类。然后将该类设置到Options中。

var options = Options.default
options.classes.control.brightnessControl = MyExposureControl.self

let picker = PixelEditViewController(image: image, options: options)

这就像在UICollectionView中使用自定义Cell。如果您有更好的想法，请告诉我们。💡，并且内置UI可能需要暴露一些属性以便从子类中进行自定义。

自定义整个控制UI

我们还可以自定义整个UI。

覆盖options.classes.control.rootControl，然后从头构建UI。

例如，如果您不需要滤镜部分而只需要编辑模式，则可能需要创建如下控件

final class EditRootControl : RootControlBase {

   private let containerView = UIView()

   public let colorCubeControl: ColorCubeControlBase

   public lazy var editView = context.options.classes.control.editMenuControl.init(context: context)

   // MARK: - Initializers

   public required init(context: PixelEditContext, colorCubeControl: ColorCubeControlBase) {

       self.colorCubeControl = colorCubeControl

       super.init(context: context, colorCubeControl: colorCubeControl)

       backgroundColor = Style.default.control.backgroundColor

       layout: do {

           addSubview(containerView)

           containerView.translatesAutoresizingMaskIntoConstraints = false

           NSLayoutConstraint.activate([

               containerView.topAnchor.constraint(equalTo: containerView.superview!.topAnchor),
               containerView.leftAnchor.constraint(equalTo: containerView.superview!.leftAnchor),
               containerView.rightAnchor.constraint(equalTo: containerView.superview!.rightAnchor),
               containerView.bottomAnchor.constraint(equalTo: containerView.superview!.bottomAnchor)
           ])
       }
   }

   // MARK: - Functions

   override func didMoveToSuperview() {
       super.didMoveToSuperview()

       if superview != nil {
           editView.frame = containerView.bounds
           editView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

           containerView.addSubview(editView)
       }
   }
}

然后这样使用它

var options = Options.default
options.classes.control.rootControl = EditRootControl.self

let picker = PixelEditViewController(image: image, options: options)

过滤器中的编辑菜单

如果您的应用中不需要某些编辑选项，您可以选择要忽略的编辑选项。

var options = Options.default
options.classes.control.ignoredEditMenu = [.saturation, .gaussianBlur]
let controller = PixelEditViewController.init(image: UIImage(named: "large")!, options: options)

本地化

UI中的字符串可以使用L10n进行本地化。

import PixelEditor

PixelEditor.L10n.done = "保存"

// or
PixelEditor.L10n.done = NSLocalizedString...

安装

CocoaPods

Pixel可以通过CocoaPods使用。安装它，只需将以下行添加到您的Podfile中：

pod 'PixelEngine'
pod 'PixelEditor'

Carthage

对于Carthage，将以下内容添加到您的Cartfile中：

github "muukii/Pixel"

贡献

如果您需要更多功能，请打开问题或提交PR！Muukii可能不知道如何实现它们，所以您的PR将非常有帮助。

开发

要开发Pixel，请使用以下代码设置开发环境。

$ pod install
$ open Pixel.xcworkspace

作者

Muukii ([email protected])

许可证

Pixel遵循MIT许可证。更多信息请参阅LICENSE文件。

FOSSA Status