使用CAShapeLayer与UIBezierPath画出想要的图形
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形
步骤:
1、新建UIBezierPath对象bezierPath
2、新建CAShapeLayer对象caShapeLayer
3、将bezierPath的CGPath赋值给caShapeLayer的path,即caShapeLayer.path = bezierPath.CGPath
4、把caShapeLayer添加到某个显示该图形的layer中
下面的小例子是一个环形的progress代码,有具体的使用方法
.h文件:
- #import <QuartzCore/QuartzCore.h>
- #import <UIKit/UIKit.h>
- @interface KACircleProgressView : UIView {
- CAShapeLayer *_trackLayer;
- UIBezierPath *_trackPath;
- CAShapeLayer *_progressLayer;
- UIBezierPath *_progressPath;
- }
- @property (nonatomic, strong) UIColor *trackColor;
- @property (nonatomic, strong) UIColor *progressColor;
- @property (nonatomic) float progress;//0~1之间的数
- @property (nonatomic) float progressWidth;
- - (void)setProgress:(float)progress animated:(BOOL)animated;
- @end
.m文件
- #import "KACircleProgressView.h"
- @implementation KACircleProgressView
- - (id)initWithFrame:(CGRect)frame
- {
- self = [super initWithFrame:frame];
- if (self) {
- // Initialization code
- _trackLayer = [CAShapeLayer new];
- [self.layer addSublayer:_trackLayer];
- _trackLayer.fillColor = nil;
- _trackLayer.frame = self.bounds;
- _progressLayer = [CAShapeLayer new];
- [self.layer addSublayer:_progressLayer];
- _progressLayer.fillColor = nil;
- _progressLayer.lineCap = kCALineCapRound;
- _progressLayer.frame = self.bounds;
- //默认5
- self.progressWidth = 5;
- }
- return self;
- }
- - (void)setTrack
- {
- _trackPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;
- _trackLayer.path = _trackPath.CGPath;
- }
- - (void)setProgress
- {
- _progressPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * _progress - M_PI_2 clockwise:YES];
- _progressLayer.path = _progressPath.CGPath;
- }
- - (void)setProgressWidth:(float)progressWidth
- {
- _progressWidth = progressWidth;
- _trackLayer.lineWidth = _progressWidth;
- _progressLayer.lineWidth = _progressWidth;
- [self setTrack];
- [self setProgress];
- }
- - (void)setTrackColor:(UIColor *)trackColor
- {
- _trackLayer.strokeColor = trackColor.CGColor;
- }
- - (void)setProgressColor:(UIColor *)progressColor
- {
- _progressLayer.strokeColor = progressColor.CGColor;
- }
- - (void)setProgress:(float)progress
- {
- _progress = progress;
- [self setProgress];
- }
- - (void)setProgress:(float)progress animated:(BOOL)animated
- {
- }
- /*
- // Only override drawRect: if you perform custom drawing.
- // An empty implementation adversely affects performance during animation.
- - (void)drawRect:(CGRect)rect
- {
- // Drawing code
- }
- */
- @end
使用:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- // Do any additional setup after loading the view, typically from a nib.
- KACircleProgressView *progress = [[KACircleProgressView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
- [self.view addSubview:progress];
- progress.trackColor = [UIColor blackColor];
- progress.progressColor = [UIColor orangeColor];
- progress.progress = .7;
- progress.progressWidth = 10;
- }
最后上一张效果图:
使用CAShapeLayer与UIBezierPath画出想要的图形的更多相关文章
- 使用CAShapeLayer的path属性与UIBezierPath画出扫描框
1.CAShapeLayer CAShapeLayer具有path属性,(是CGPath对象),可以使用这个属性与UIBezierPath画出想要的图形.该子类根据其fill color和stroke ...
- 使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button
通常我们使用系统自带的UIButton时,一般都是Rect矩形形式的,或则美工给出一张半圆弧的按钮,如图为一张半圆加三角形的按钮,而此时,如果给按钮添加点击事件时,响应事件依然为矩形区域,不符合我们的 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- CSS画出的各种形状图
利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...
- iOS关于CAShapeLayer与UIBezierPath的知识内容
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...
- CAShapeLayer(UIBezierPath)、CAGradientLayer绘制动态小车
看到一个大神写的代码,引用过来让大家看看! // 1.CAShapeLayer是一种特殊的层,可以在上面渲染图形. // 2.CAShapeLayer继承自CALayer,可使用CALayer的所 ...
- H5坦克大战之【画出坦克】
今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...
随机推荐
- Demo学习: Basic jQuery
UniGUI是一套基于ExtJS的Delphi的WEB框架,它是使用ExtPascal来转化到ExtJS,ExtJS是一个跨浏览器的JavaScript库,因此UniGUI发布出来的程序可以在各种浏览 ...
- WPF-控件-层级控件-Menu-嵌套结构
<?xml version="1.0" encoding="utf-8" ?> <Data xmlns=""> &l ...
- Android中解析JSON形式的数据
1.JSON(JavaScript Object Notation) 定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式, ...
- str_replace使用array替换
<?php //替换采集等通过url参数传值 function admin_ff_url_repalce($xmlurl,$order='asc'){ if($order=='asc'){ re ...
- kendo ui template的用法
kendo ui template的用法: Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的H ...
- std::function赋值的几种方法
定义: #include <functional> std::function<void(const QString&)> myPrintFunction; 函数指针 ...
- bnuoj 33656 J. C.S.I.: P15(图形搜索题)
http://www.bnuoj.com/bnuoj/problem_show.php?pid=33656 [题解]:暴力搜索题 [code]: #include <iostream> # ...
- Careercup - Facebook面试题 - 5412018236424192
2014-05-01 01:32 题目链接 原题: Given a linked list where apart from the next pointer, every node also has ...
- Windows 10 响应式设计和设备友好的开发
使用Effective pixels有效像素设计UI 什么是缩放像素和Effective有效像素: 当你的应用程序运行在Windows的设备,系统用一个算法控制的规范,字体,和其他UI元素显示在屏幕上 ...
- 用MSBuild和Jenkins搭建持续集成环境 - 转
http://www.infoq.com/cn/articles/MSBuild-1 http://www.infoq.com/cn/articles/MSBuild-2 MSBuild是在.NET ...