如何使用OpenGL ES在iOS SDK中绘制黑色边缘?
请参阅下面附图,如何在不使用遮蔽的情况下在黑色边缘内进行涂漆[例如 – 如果我们想要在盖子内部绘制,我们需要使用刷子工具填充盖子]。
我们已经使用泛洪填充算法实现了桶工具。
参考[图4]这种类型的图纸是错误的,所以我们只需要在黑色边缘内绘制参考[图像2]和[图像3]。
我们需要在iOS SDK中实现这一点,
我已经尝试过这两种方式 –
-
我记录了特定区域的坐标,它太滞后了,内存泄漏就在那里。 这不是一个好方法
-
我必须在后台使用桶工具(泛洪填充算法)填充特定区域,然后尝试匹配触摸点的颜色。 它也没有提供完美的输出。
[图片1]
[图片2]
[图3]
[图4]
有几种可能的方法。 例如,可以使用纯矢量方法。 但是,单个图纸的转换可能非常耗时。
更务实的方法可以如下:
途径
您可以定义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, 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()
如果应用程序中有许多绘图,可以考虑使图像的背景以编程方式透明(例如,通过使白色像素透明)。 取决于用例。