ios - 在drawRect内绘制透明的UIBezierPath线
<p><p>我正在尝试在 drawRect 方法中实现透明路径。这是我创建的简单代码:</p>
<pre><code>override func drawRect(rect: CGRect) {
let clippingPath = UIBezierPath()
UIColor.whiteColor().set();
clippingPath.moveToPoint(CGPoint(x: 10, y: CGRectGetHeight(self.bounds) / 2))
clippingPath.addLineToPoint(CGPoint(x: CGRectGetWidth(self.bounds) - 10, y: CGRectGetHeight(self.bounds) / 2))
clippingPath.lineWidth = 6
clippingPath.lineCapStyle = .Round
clippingPath.stroke()
}
</code></pre>
<p>结果如下:</p>
<p> <a href="/image/2vEgN.png" rel="noreferrer noopener nofollow"><img src="/image/2vEgN.png" alt="enter image description here"/></a> </p>
<p>有没有办法让背景保持实心但路径线透明。如果我将第二行更改为 <code>UIColor.clearColor().set()</code> 似乎什么也没发生，我只会得到一个完整的纯色背景色(在这种情况下为黑色。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p><strong>您想用 <code>kCGBlendModeDestinationOut</code> 的混合模式(和纯色笔触)绘制路径。</strong></p>
<p> <a href="https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CGContext/#//apple_ref/c/tdef/CGBlendMode" rel="noreferrer noopener nofollow">According to the docs</a> ，此混合模式执行以下操作:</p>
<blockquote>
<p><strong>R = D*(1 - Sa)</strong></p>
</blockquote>
<p>在哪里...</p>
<ul>
<li><p>R 是预乘结果。</p></li>
<li><p>S 是源颜色，包括 alpha</p></li>
<li><p>D 是目标颜色，包括 alpha</p></li>
<li><p>Ra、Sa 和 Da 是 R、S 和 D 的 alpha 分量</p></li>
</ul>
<p><strong>这样，当与纯色笔触一起使用时，绘制的路径将是“透明的”。</strong></p>
<p><code>clearColor</code> 对您不起作用的原因是因为默认混合模式是 <em>additive</em>，因此生成的颜色不会受到绘制带有 alpha 的颜色的影响<code>0</code> 在它上面。另一方面，<code>DestinationOut</code> 是<em>减法</em>。</p>
<p><strong>因此您需要执行以下操作:</strong></p>
<pre><code>override func drawRect(rect: CGRect) {
let clippingPath = UIBezierPath()
let context = UIGraphicsGetCurrentContext() // get your current context
// draw your background color
UIColor.greenColor().set();
CGContextFillRect(context, bounds)
CGContextSaveGState(context) // save the current state
CGContextSetBlendMode(context, .DestinationOut) // change blend mode to DestinationOut (R = D * (1-Sa))
// do 'transparent' drawing
UIColor.whiteColor().set();
clippingPath.moveToPoint(CGPoint(x: 10, y: CGRectGetHeight(self.bounds) / 2))
clippingPath.addLineToPoint(CGPoint(x: CGRectGetWidth(self.bounds) - 10, y: CGRectGetHeight(self.bounds) / 2))
clippingPath.lineWidth = 6
clippingPath.lineCapStyle = .Round
clippingPath.stroke()
CGContextRestoreGState(context) // restore state of context
// do further drawing if needed
}
</code></pre>
<p><strong>注意:</strong></p>
<p>您必须将 View 的 <code>opaque</code> 属性设置为 <code>false</code> 才能正常工作，否则 UIKit 将假定它具有不透明的内容。例如:</p>
<pre><code>override init(frame: CGRect) {
super.init(frame: frame)
opaque = false
}
</code></pre></p>
<p style="font-size: 20px;">关于ios - 在drawRect内绘制透明的UIBezierPath线，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/35724906/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/35724906/
</a>
</p>
页:
[1]