PixelEngine 0.2.3

PixelEngine 0.2.3

×

由 muukii 维护。

PixelEngine 0.2.3

  • 由
  • muukii

Pixel - Engine • Editor

CocoaPods FOSSA Status 引擎

CocoaPods 编辑器

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

在生产中

特性

目前接受实现这些特性的 PR。

性能

  • ✈️相当不错
  • 🚀飞快（🌀有人能帮帮忙吗？）

调整

  • 裁剪
  • 拉直（🌀有人能帮帮忙吗？）
  • 透视（🌀有人能帮帮忙吗？）

滤镜

预设

  • 颜色立方体（查找表）
    • 强度

⚠️目前，Pixel 不包含 LUT。演示应用程序有示例 LUT。

还有一篇有趣的文章

编辑

  • 亮度
  • 对比度
  • 饱和度
  • 高光
  • 阴影
  • 温度
  • 高斯模糊
  • 渐晕
  • 颜色（阴影 / 高光）
  • 褪色
  • 锐化
  • 清晰度
  • 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)

添加颜色立方滤镜

我们可以使用 LUT (查找表) 与 CIColorCubeFilter。

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。

使用覆盖自定义内置控制界面

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

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

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

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

这就像使用自定义 Cell 在 UICollectionView 中一样。如果您有任何更好的想法，请告诉我们。💡。此外，内置 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