web-dev-qa-db-ja.com

ベジエ曲線をグラデーションカラーで塗りつぶす方法

カスタムUIView draw(_ rect: CGRect)関数内にUIBezierPathがあります。パスをグラデーションカラーで塗りつぶします。どうすれば私にそれを行うことができるのか、誰でも私に案内してください。

クリップをグラデーションカラーで塗りつぶし、パスを黒色でストロークする必要があります。

SO問題を解決しないいくつかの投稿があります。例 Swift：ベジエパスに沿った勾配（CALayersを使用） この投稿は、レイヤーはUIViewにありますが、UIBezierPathにはありません。

NB：私はSwift-3に取り組んでいます

iosuiviewswift3core-graphicsdraw
10
Sazzad Hissain Khan

あなたのこの質問に答えるために、

カスタムUIView draw（_ rect：CGRect）関数内にUIBezierPathがあります。パスをグラデーションカラーで塗りつぶします。

楕円形のパスがあるとしましょう

let path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 100, height: 100))

グラデーションを作成するには、

let gradient = CAGradientLayer()
gradient.frame = path.bounds
gradient.colors = [UIColor.Magenta.cgColor, UIColor.cyan.cgColor]

グラデーション用のマスクレイヤーが必要です。

let shapeMask = CAShapeLayer()
shapeMask.path = path.cgPath

次に、このshapeLayerをmaskレイヤーのgradientとして設定し、viewのレイヤーにsubLayerとして追加します

gradient.mask = shapeMask
yourCustomView.layer.addSublayer(gradient)

pdateストロークでベースレイヤーを作成し、グラデーションレイヤーを作成する前に追加します。

let shape = CAShapeLayer()
shape.path = path.cgPath
shape.lineWidth = 2.0
shape.strokeColor = UIColor.black.cgColor
self.view.layer.addSublayer(shape)

let gradient = CAGradientLayer()
gradient.frame = path.bounds
gradient.colors = [UIColor.Magenta.cgColor, UIColor.cyan.cgColor]

let shapeMask = CAShapeLayer()
shapeMask.path = path.cgPath
gradient.mask = shapeMask

self.view.layer.addSublayer(gradient)
24
Matt

これは、CALayerクラスを使用せずに、Core Graphicsで直接実行できます。 bezierPath.addClip()を使用して、ベジエ曲線をクリッピング領域として設定します。後続の描画コマンドは、その領域にマスクされます。

私はこのラッパー関数を私のプロジェクトの1つで使用しています。

func drawLinearGradient(inside path:UIBezierPath, start:CGPoint, end:CGPoint, colors:[UIColor])
{
    guard let ctx = UIGraphicsGetCurrentContext() else { return }

    ctx.saveGState()
    defer { ctx.restoreGState() } // clean up graphics state changes when the method returns

    path.addClip() // use the path as the clipping region

    let cgColors = colors.map({ $0.cgColor })
    guard let gradient = CGGradient(colorsSpace: nil, colors: cgColors as CFArray, locations: nil)
        else { return }

    ctx.drawLinearGradient(gradient, start: start, end: end, options: [])
}
11
Robin Stewart