IOS UIButton 长按画圆

学习了一下动画,顺便写下按钮的扩展,在长按按钮的时候,在按钮上画一个圆圈;

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比大箐山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式大箐山网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖大箐山地区。费用合理售后完善，10年实体公司更值得信赖。

动画使用

或者

扩展源码:

iOS 绘制颜色渐变圆环 --- 值得一看

iOS 绘制颜色渐变圆环

本文主要介绍一种绘制颜色渐变的进度圆环. 先上效果图:

实现思路:

CAShapeLayer+UIBezierPath+CAGradientLayer

UIBezierPath 用来绘制圆环路径;

CAShapeLayer 根据UIBezierPath绘制的曲线路径渲染出图形, 利用GPU渲染节省内存,提高性能;

CAGradientLayer 用来绘制颜色渐变的图层, 最后添加到view的layer用来展示;

步骤:

先创建一个UIView, 在其内部实现圆环的绘制.

@property (strong, nonatomic)UIView                *bgview;

_bgview = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 250, 250)];

_bgview.backgroundColor = [UIColor grayColor];

[self.view addSubview:_bgview];

Paste_Image.png

2.绘制背景圆环, 并将其添加到view的layer层上.

//创建背景圆环

CAShapeLayer*trackLayer = [CAShapeLayerlayer];

trackLayer.frame=self.bounds;

//清空填充色

trackLayer.fillColor= [UIColorclearColor].CGColor;

//设置画笔颜色 即圆环背景色

trackLayer.strokeColor=  [UIColorcolorWithRed:170/255.0green:210/255.0blue:254/255.0alpha:1].CGColor;trackLayer.lineWidth=20;

//设置画笔路径

UIBezierPath*path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(self.frame.size.width/2.0,self.frame.size.height/2.0) radius:self.frame.size.width/2.0-10startAngle:- M_PI_2 endAngle:-M_PI_2 + M_PI *2clockwise:YES];

//path 决定layer将被渲染成何种形状

trackLayer.path= path.CGPath;

[self.layeraddSublayer:trackLayer];

Paste_Image.png

3. 使用CAGradientLayer 绘制渐变的背景色

由于CAShapeLayer不能顺着弧线进行渐变只能指定两个点之间进行渐变, 所以四种颜色的渐变只能是将view分成四个小的部分, 分别实现两种颜色间的渐变. 最后在组合在一起, 形成四种颜色的渐变.

CGFloat width = _bgview.frame.size.width;

CGFloat height = _bgview.frame.size.height;

CALayer *gradientLayer = [CALayer layer];

gradientLayer.frame = self.bgview.bounds;

CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];

gradientLayer1.frame = CGRectMake(width/2.0, 0, width/2.0,  height/2.0);

gradientLayer1.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor orangeColor].CGColor];

//startPoint和endPoint属性，他们决定了渐变的方向。这两个参数是以单位坐标系进行的定义，所以左上角坐标是{0, 0}，右下角坐标是{1, 1}

//startPoint和pointEnd 分别指定颜色变换的起始位置和结束位置.

//当开始和结束的点的x值相同时, 颜色渐变的方向为纵向变化

//当开始和结束的点的y值相同时, 颜色渐变的方向为横向变化

//其余的 颜色沿着对角线方向变化

gradientLayer1.startPoint = CGPointMake(0.2, 0);

gradientLayer1.endPoint = CGPointMake(0.8, 1);

[gradientLayer addSublayer:gradientLayer1];

CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];

gradientLayer2.frame = CGRectMake(width/2.0, width/2.0, width/2.0,  height/2.0);

gradientLayer2.colors = @[(__bridge id)[UIColor orangeColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor];

[gradientLayer2 setLocations:@[@0.3, @0.8,@1]];

gradientLayer2.startPoint = CGPointMake(0, 0);

gradientLayer2.endPoint = CGPointMake(0, 1);

[gradientLayer addSublayer:gradientLayer2];

CAGradientLayer *gradientLayer3 = [CAGradientLayer layer];

gradientLayer3.frame = CGRectMake(0, width/2.0, width/2.0,  height/2.0);

gradientLayer3.colors = @[(__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor];

gradientLayer3.startPoint = CGPointMake(0.5, 1);

gradientLayer3.endPoint = CGPointMake(0.5, 0);

[gradientLayer addSublayer:gradientLayer3];

CAGradientLayer *gradientLayer4 = [CAGradientLayer layer];

gradientLayer4.frame = CGRectMake(0, 0, width/2.0,  height/2.0);

gradientLayer4.colors = @[(__bridge id)[UIColor greenColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];

gradientLayer4.startPoint = CGPointMake(0.5, 1);

gradientLayer4.endPoint = CGPointMake(0.5, 0);

[gradientLayer addSublayer:gradientLayer4];

[self.bgview.layer addSublayer:gradientLayer];

4. 将颜色图层切成圆环

@property (nonatomic, strong) CAShapeLayer *progressLayer;

_progressLayer = [CAShapeLayer layer];

_progressLayer.frame = self.bounds;

_progressLayer.fillColor = [UIColor clearColor].CGColor;

_progressLayer.strokeColor  = [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor;

_progressLayer.lineWidth = 20;

_progressLayer.path = path.CGPath;

gradientLayer.mask = _progressLayer;

Paste_Image.png

5. 利用locations 属性调整颜色空间

根据上面的运行结果可以看出底部的颜色交接的地方有颜色的断层. 主要是第三部分底部的黄色区域较小导致的. 可以利用locations数组进行微调.

默认情况下，这些颜色在空间上均匀地被渲染，但是我们可以用locations属性来调整空间。locations属性是一个浮点数值的数组(以NSNumber包装)。这些浮点数定义了colors属性中每个不同颜色的位置，同样的，也是以单位坐标系进行标定。0.0代表着渐变的开始，1.0代表着结束。

[gradientLayer2 setLocations:@[@0.3, @0.8]];

Paste_Image.png

ios cgpathcreatemutablet怎么画圆

快捷键c,就可以画了，然后藻用同样的方式画个圆，按s（打开捕捉）移动位置就可以叠加上了。

在ios程序中画一个 圆环随着里面的数据变化 并且圆环的颜色有所变化，实在是画bu出来。谢谢了

你可以考虑分层,上面时一层蒙板,把下面的圆环盖住,下面的圆环是完整的圆环,有渐变效果.

然后,根据数据,蒙版层变短即可.

ios开发怎么设置view的四个角为圆角

第一种方法:通过设置layer的属性

最简单的一种,但是很影响性能,一般在正常的开发中使用很少.

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];

//只需要设置layer层的两个属性

//设置圆角

imageView.layer.cornerRadius = imageView.frame.size.width / 2;

//将多余的部分切掉

imageView.layer.masksToBounds = YES;

[self.view addSubview:imageView];

第二种方法:使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];

imageView.image = [UIImage imageNamed:@"1"];

//开始对imageView进行画图

UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, [UIScreen mainScreen].scale);

//使用贝塞尔曲线画出一个圆形图

[[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];

[imageView drawRect:imageView.bounds];

imageView.image = UIGraphicsGetImageFromCurrentImageContext();

//结束画图

UIGraphicsEndImageContext();

[self.view addSubview:imageView];

第三种方法:使用CAShapeLayer和UIBezierPath设置圆角

首先需要导入AVFoundation/AVFoundation.h

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];

imageView.image = [UIImage imageNamed:@"1"];

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imageView.bounds.size];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];

//设置大小

maskLayer.frame = imageView.bounds;

//设置图形样子

maskLayer.path = maskPath.CGPath;

imageView.layer.mask = maskLayer;

[self.view addSubview:imageView];

}

这三种方法中第三种最好，对内存的消耗最少啊，而且渲染快速