如何用傾斜漸變填充CAShapeLayer？

問：如何用傾斜漸變填充CAShapeLayer？

如何填充漸變和對 45度角CAShapeLayer()？

例如，在圖像1，下面的代碼繪製一個正方形，填充層藍（UIColor.blueColor().CGColor）。

但是，如何用梯度在圖像填充它以45度角從藍色到紅色像2（即UIColor.blueColor().CGColor到UIColor.redColor().CGColor）？

代碼：

let path = UIBezierPath() 
path.moveToPoint(CGPoint(x: 0, y: 0)) 
path.addLineToPoint(CGPoint(x: 0, y: 100)) 
path.addLineToPoint(CGPoint(x: 100, y: 100)) 
path.addLineToPoint(CGPoint(x: 100, y: 0)) 
path.closePath() 

let shape = CAShapeLayer() 
shape.path = path.CGPath 
shape.fillColor = UIColor.blueColor().CGColor

來源

2016-12-07 user4806509

爲什麼不使用CAGradientLayer具有startPoint和endPoint性能。

你可以這樣做：

import UIKit 
import PlaygroundSupport 

let frame = CGRect(x: 0, y: 0, width: 100, height: 100) 
let view = UIView(frame: frame) 

PlaygroundPage.current.liveView = view 

let path = UIBezierPath(ovalIn: frame) 

let shape = CAShapeLayer() 
shape.frame = frame 
shape.path = path.cgPath 
shape.fillColor = UIColor.blue.cgColor 

let gradient = CAGradientLayer() 
gradient.frame = frame 
gradient.colors = [UIColor.blue.cgColor, 
        UIColor.red.cgColor] 
gradient.startPoint = CGPoint(x: 0, y: 1) 
gradient.endPoint = CGPoint(x: 1, y: 0) 
gradient.mask = shape 

view.layer.addSublayer(gradient)

注：添加了貝塞爾路徑轉了一圈，因爲它會沒有面罩爲方形工作。

來源

2016-12-07 14:20:26 Alistra

我喜歡操場屏幕截圖顯示代碼加上生成的圖像。很好的觸摸（投票。）爲什麼不提供操場的整個代碼，但？通過這種方式，讀者可以通過簡單的複製粘貼和失效重現您的運行代碼。 –

我曾考慮過這個問題，但我認爲這是針對應用的，只是提供了要粘貼到應用中的部分。 – Alistra

請記住，SO帖子不僅僅是最初的SO有用。其他人（像我）會來，並希望與您發佈的代碼一起工作/學習。我認爲「很酷，一個帶有漸變層的工作場地，添加旋轉漸變的旋轉動畫會很有趣......」但是你的代碼是一個圖像，而不是文本。我沒有像那麼多打字一樣掉下來，所以修補的衝動死了。 –

我認爲這是

shape.startPoint = CGPoint(x: 1.0, y: 0.0) 
shape.endPoint = CGPoint(x: 0.0, y: 1.0)

，這是在右下到左上第二顏色的第一顏色。如果你想在右上和第二顏色的第一顏色左下角，那麼你應該有

shape.startPoint = CGPoint(x: 1.0, y: 1.0) 
shape.endPoint = CGPoint(x: 0.0, y: 0.0)

在左上角，第二色彩的第一色彩在右下

shape.startPoint = NSMakePoint(x: 0.0, y: 1.0) 
shape.endPoint = NSMakePoint(x: 1.0, y: 0.0)

左下第一色，右上第二色

shape.startPoint = CGPoint(x: 0.0, y: 0.0) 
shape.endPoint = CGPoint(x: 1.0, y: 1.0)

來源

2016-12-07 14:23:38

如何用傾斜漸變填充CAShapeLayer？

回答

相關問題