如何使用OpenGL ES在iOS SDK中绘制黑色边缘？

Question

请参阅下面附图，如何在不使用遮蔽的情况下在黑色边缘内进行涂漆[例如 - 如果我们想要在盖子内部绘制，我们需要使用刷子工具填充盖子]。

我们已经使用泛洪填充算法实现了桶工具。

参考[图4]这种类型的图纸是错误的，所以我们只需要在黑色边缘内绘制参考[图像2]和[图像3]。

我们需要在iOS SDK中实现这一点，

我已经尝试过这两种方式 -

1. 我记录了特定区域的坐标，它滞后太多，内存泄漏就在那里。 这不是一个好方法

2. 我必须在后台使用桶工具（泛洪填充算法）填充特定区域，然后尝试匹配触摸点的颜色。 它也没有提供完美的输出。

[图片1]

[图片2]

[图3]

[图片4]

Answer 1

有几种可能的方法。 例如，可以使用纯矢量方法。 但是，单个图纸的转换可能非常耗时。

更务实的方法可以如下：

途径

您可以定义Bézier路径列表（UIBezierPath），每个路径描述可以独立绘制的区域。

Bézier路径有两个目的：

• 确定中风已经开始的区域
• 限制用户绘图到此区域

如何在黑色线条内完美绘制

如果使给定图形的背景透明，则可以在黑色线条图下方剪切创建用户的绘图操作。 这意味着Bézier路径不一定非常完美，只需要足够准确。

图层/裁剪

那么步骤将是：

• 最初显示给定的图纸
• 确定用户开始绘制的Bézier路径
• 剪辑确定Bézier路径
• 用剪辑绘制用户笔划
• 在给定的透明线条图上绘制

快速演示

这是一个简短的演示，用于显示当用户使用描述的绘图顺序在剪切的Bézier路径中开始绘制时的外观（请参阅下面的代码片段）：

代码片段

示例bezier路径

bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: 55.94, y: 60.19))
bezierPath.addCurve(to: CGPoint(x: 50.32, y: 94.09), controlPoint1: CGPoint(x: 56.92, y: 59.69), controlPoint2: CGPoint(x: 55.25, y: 73.99))
bezierPath.addCurve(to: CGPoint(x: 48.81, y: 115.93), controlPoint1: CGPoint(x: 46.9, y: 107.97), controlPoint2: CGPoint(x: 49.09, y: 115.33))
bezierPath.addCurve(to: CGPoint(x: 74.36, y: 146.45), controlPoint1: CGPoint(x: 50.56, y: 127.4), controlPoint2: CGPoint(x: 60.85, y: 141.06))
bezierPath.addCurve(to: CGPoint(x: 119.11, y: 126.29), controlPoint1: CGPoint(x: 93.52, y: 141.34), controlPoint2: CGPoint(x: 107.61, y: 134.31))
bezierPath.addCurve(to: CGPoint(x: 223.27, y: 93.88), controlPoint1: CGPoint(x: 150.33, y: 112.49), controlPoint2: CGPoint(x: 183.59, y: 100.44))
bezierPath.addCurve(to: CGPoint(x: 300.41, y: 69.01), controlPoint1: CGPoint(x: 250.68, y: 87.71), controlPoint2: CGPoint(x: 276.22, y: 79.2))
bezierPath.addCurve(to: CGPoint(x: 297.23, y: 59.69), controlPoint1: CGPoint(x: 301.38, y: 65.82), controlPoint2: CGPoint(x: 300.22, y: 62.01))
bezierPath.addCurve(to: CGPoint(x: 212.85, y: 38.3), controlPoint1: CGPoint(x: 290.2, y: 62.67), controlPoint2: CGPoint(x: 256.59, y: 52.37))
bezierPath.addCurve(to: CGPoint(x: 137.05, y: 37.2), controlPoint1: CGPoint(x: 191.43, y: 31.36), controlPoint2: CGPoint(x: 158.26, y: 29.92))
bezierPath.addCurve(to: CGPoint(x: 100.74, y: 48.08), controlPoint1: CGPoint(x: 126.18, y: 40.93), controlPoint2: CGPoint(x: 111.78, y: 44.75))
bezierPath.addCurve(to: CGPoint(x: 55.94, y: 60.19), controlPoint1: CGPoint(x: 86.15, y: 52.48), controlPoint2: CGPoint(x: 70.56, y: 56.69))
bezierPath.close()

剪辑到路径

self.currentBezierPath.addClip()

确定触摸是否在封闭的贝塞尔曲线路径内开始

假设self是一个自定义视图，可以编写如下内容：

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    ...
    let point = touch.location(in: self)
    ...
    let inside = bezierPath.contains(point)
    ...

绘制transparaent绘图

首先必须使图纸的背景透明。 然后可以将图形存储为支持透明度的格式，例如.png。

context.saveGState()
context.scaleBy(x: 1, y: -1)
context.translateBy(x: 0, y: -oOV7Impng.size.height)
context.draw(oOV7Impng.cgImage!, in: CGRect(x: 0, y: 0, width: oOV7Impng.size.width, height: oOV7Impng.size.height))
context.restoreGState()

如果应用程序中有许多绘图，可以考虑使图像的背景以编程方式透明（例如，通过使白色像素透明）。 取决于用例。