Ios 如何使用CALayer创建渐变周长
我已经尝试了一段时间,使用CAGradientLayer来制作这个 最初,我尝试使用.colors属性创建渐变背景,但这只是背景填充。尝试这种方法,我尝试在里面添加另一个有黑色背景的CALayer,但是我永远无法获得正确的半径,它会在圆角处创建一条不同厚度的线 有没有更好的方法来创建带有渐变的圆形矩形边框?CALayer不会实现这一点吗?我应该转到UIBezierPath还是CGContextRef 失败尝试的代码:Ios 如何使用CALayer创建渐变周长,ios,calayer,gradient,rounded-corners,Ios,Calayer,Gradient,Rounded Corners,我已经尝试了一段时间,使用CAGradientLayer来制作这个 最初,我尝试使用.colors属性创建渐变背景,但这只是背景填充。尝试这种方法,我尝试在里面添加另一个有黑色背景的CALayer,但是我永远无法获得正确的半径,它会在圆角处创建一条不同厚度的线 有没有更好的方法来创建带有渐变的圆形矩形边框?CALayer不会实现这一点吗?我应该转到UIBezierPath还是CGContextRef 失败尝试的代码: UIView *view = [[UIView alloc]initWithF
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(12*twelthWidth - squareCentre.x - squareSize.width, squareCentre.y, squareSize.width, squareSize.height)];
// Create the rounded layer, and mask it using the rounded mask layer
CAGradientLayer *roundedLayer = [CAGradientLayer layer];
[roundedLayer setFrame:view.bounds];
roundedLayer.cornerRadius = view.bounds.size.width/5;
roundedLayer.masksToBounds = YES;
roundedLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor], (id)[[UIColor blueColor] CGColor], nil];
roundedLayer.borderWidth = 4;
roundedLayer.borderColor = [UIColor clearColor].CGColor;
// Add these two layers as sublayers to the view
int BorderWidth = 5;
CALayer *solidColour = [CALayer layer];
solidColour.cornerRadius = view.bounds.size.width/5;
solidColour.masksToBounds = YES;
solidColour.backgroundColor = [UIColor blackColor].CGColor;
[solidColour setFrame:CGRectMake(BorderWidth, BorderWidth, roundedLayer.bounds.size.width - 2*BorderWidth, roundedLayer.bounds.size.height - 2*BorderWidth)];
[view.layer insertSublayer:roundedLayer atIndex:0];
[view.layer insertSublayer:solidColour above:roundedLayer];
[self.view addSubview:view];
产生:
这样一来,角落就不对了。是否我需要为第二层计算不同的半径
编辑
将纯色的半径设置为solidColor.bounds.size.width/5后,它仍然不正确-它在拐角处变得太薄
您看到的问题是因为内外角半径相同。这就是导致线条厚度变化的原因。这幅插图突出了这个问题(即使您没有使用CSS,问题仍然是一样的): 解决方案是将内径计算为:
innerRadis = outerRadius - lineThickness
如本图所示:
不要使用视图边界来设置实体层的
角半径
,而是在将其设置为正确的插入值后使用层的帧值:
solidColour.masksToBounds = YES;
solidColour.backgroundColor = [UIColor blackColor].CGColor;
[solidColour setFrame:CGRectMake(BorderWidth, BorderWidth, roundedLayer.bounds.size.width - 2*BorderWidth, roundedLayer.bounds.size.height - 2*BorderWidth)];
solidColour.cornerRadius = solidColour.frame.size.width/5;
[view.layer insertSublayer:roundedLayer atIndex:0];
[view.layer insertSublayer:solidColour above:roundedLayer];
如果您使用swift,为了方便起见,我得到了下图
let v = yourUIVIEW
let outerRadius:CGFloat = 60
let borderWidth:CGFloat = 8;
let roundedLayer = CAGradientLayer()
roundedLayer.frame = v.bounds
roundedLayer.cornerRadius = outerRadius
roundedLayer.masksToBounds = true
roundedLayer.endPoint = CGPoint(x: 1 , y: 0.5)
roundedLayer.colors = [ UIColor.redColor().CGColor, UIColor.blueColor()!.CGColor]
let innerRadius = outerRadius - borderWidth
//Solid layer
let solidLayer = CALayer()
solidLayer.masksToBounds = true
solidLayer.backgroundColor = UIColor.whiteColor().CGColor
solidLayer.cornerRadius = innerRadius
solidLayer.frame = CGRect(x: borderWidth, y: borderWidth, width: roundedLayer.bounds.width - 2*borderWidth, height:roundedLayer.bounds.height - 2*borderWidth )
v.layer.insertSublayer(roundedLayer, atIndex: 0)
v.layer.insertSublayer(solidLayer, above: roundedLayer)
显示您尝试的代码和最近的屏幕截图好的,现在可以了。@Wain,添加了代码。设置帧后,您是否尝试将角半径设置为
solidcolor.bounds.size.width/5
?@Wain,它看起来更好,但角部太薄了。