图像上类似 Snapchat 的文字答案

【问题标题】：Snapchat-like text on image图像上类似 Snapchat 的文字
【发布时间】：2015-12-22 15:06:46
【问题描述】：

我一直在尝试在图像上实现类似 Snapchat 的编辑文本。到目前为止，我所做的是在 UIImageView 的中心实现一个 UILabel，并向这个 UILabel 添加了 3 个手势：UIPanGestureRecognizer、UIPinchGestureRecognizer 和 UIRotationGestureRecognizer。

我已经成功实现了 Pan 方法，但是我很难让 Pinch + Rotation 像他们一样平滑，我得到了可怕的结果 T_T

你们觉得这是怎么做的？这涉及到哪些组件以及如果您有任何阅读/观看材料可以用来完成此操作。

谢谢:)

编辑：

这些是我实现的处理捏合和旋转的方法：

func handlePinch(recognizer: UIPinchGestureRecognizer) {
    if let view = recognizer.view as? UILabel {
        view.transform = CGAffineTransformScale(view.transform, recognizer.scale, recognizer.scale)
    }
}

func handleRotate(recognizer: UIRotationGestureRecognizer) {
    if let view = recognizer.view as? UILabel {
        view.transform = CGAffineTransformRotate(view.transform, recognizer.rotation)
    }
}

我实施的捏合如何工作的预览视频： https://drive.google.com/file/d/0B-AVM51jxsvUY2RUUHdWbGo5QlU/view?usp=sharing

【问题讨论】：

显示如何进行旋转的代码
@Mr.T 嗨，我编辑了我的帖子并添加了这些。谢谢！ :)
您面临的问题是什么？
@Mr.T 首先，它不像 Snapchat 那样流畅。此外，当我按比例缩放时，它会以非常激进的方式放大/缩小太多。其次，我想知道 Snapchat 使用了哪些组件来实现此功能。

标签： ios swift uigesturerecognizer

【解决方案1】：

找到了一个解决方案，显然我在 Rotation & Pinch 中需要做的就是始终重置视图的旋转/缩放。例如，将我的识别器.scale 设置为 1.0，将识别器旋转设置为 0.0。

这是我的代码示例：

func handlePan(recognizer: UIPanGestureRecognizer) {
    let translation = recognizer.translationInView(view)
    if let view = recognizer.view {
        view.center = CGPoint(x:view.center.x + translation.x,
            y:view.center.y + translation.y)
    }
    recognizer.setTranslation(CGPointZero, inView: view)
}

func handlePinch(recognizer: UIPinchGestureRecognizer) {
    if let view = recognizer.view as? UILabel {
        let pinchScale: CGFloat = recognizer.scale
        view.transform = CGAffineTransformScale(view.transform, pinchScale, pinchScale)
        recognizer.scale = 1.0
    }
}

func handleRotate(recognizer: UIRotationGestureRecognizer) {
    if let view = recognizer.view as? UILabel {
        let rotation: CGFloat = recognizer.rotation
        view.transform = CGAffineTransformRotate(view.transform, rotation)
        recognizer.rotation = 0.0
    }
}

【讨论】：

【解决方案2】：

对于“它以非常激进的方式放大/缩小太多”：

您需要根据自己的需要处理捏合手势比例值。

从您的识别器方法中，您得到的比例值为：

    var pinchScale: CGFloat = recogniser.scale

您需要根据需要修改此值，例如将其减少 /10 或 /100，并在标签转换中使用此值，而不是使用 pangesture 比例。

【讨论】：

【解决方案3】：

您遇到的问题是您的代码采用当前转换并基于当前“移动”添加另一个转换，因此您在单个手势移动时累积更改（实际上是复合更改）。

保留用于旋转、缩放和移动的实例变量，更新每个手势识别器动作中的相关变量（您还需要在每个手势开始时存储每个动作的状态，以便应用增量到初始状态），并使用这三个变量从头开始创建转换。转换创建当然应该分解为一个单独的函数，因为您将多次使用它。

【讨论】：

【解决方案4】：

我不确定这是否正是您正在寻找的（我从未使用过 snapchat），但这可能会给您一些想法

https://github.com/danielinoa/DIImageView

我不确定这个有捏合手势，但我不完全确定你的意思是如何使用它。

这是该项目的演示： https://www.cocoacontrols.com/controls/diimageview

一般来说，我建议您每次尝试实现类似的东西时检查 cocoacontrols。通常有可靠的示例可以帮助您入门，有时，您会准确找到所需的内容。

【讨论】：