AxcDrawPath_Tool
简介:
AxcDrawPath_Tool是一个快速贝塞尔曲线绘制工具,其中有现成的图案API可供直接调用,返回对象为 UIBezierPath 。
也是从AxcAEKit中拆分出来的一个组件,主要负责绘制计算。
AxcAE系列的组件都以科技风为主,动画为辅,在实际使用中并无太多价值,仅仅是因为爱好而制作的一套专攻科技风类型的工具组件;
AxcDrawPath_Tool对象说明
AxcDrawPath 是通过类方法,传入参数,进行计算点位,返回UIBezierPath对象的工具类。其中所有涉及到角度参数全为弧度,如M_PI直接传180度即可,其中默认起始角全为-90度;
AxcPolarAxis 是一个极坐标转换对象,传入角度或弧度以及起始点和距离即可获得CGPoint坐标点;
AxcCAAnimation 是一部分动画的简易封装,这个对象做的不是很完善,但是基础动画够用;
======= 喜欢的给个Star支持一下,O(∩_∩)O谢谢 =======
框架支持
最低支持:iOS 8.0 IDE:Xcode 10.0 及以上版本
使用/安装
- 第一种:手动
- 1.找到包含:
AxcCAAnimation.h.m
、
AxcDrawDefine.h
、
AxcDrawPath.h.m
、
AxcPolarAxis.h.m
、
AxcDrawPathTool.h
的AxcDrawPathPackage
文件夹; - 2.直接把
AxcDrawPathPackage
文件夹拖入到您的工程中; - 3.导入
"AxcDrawPathTool.h"
- 第二种:Cocoapods
- 1.在Podfile 中添加
pod 'AxcDrawPath_Tool'
- 2.执行
pod setup
- 3.执行
pod install
或pod update
- 4.导入
#import <AxcDrawPathTool.h>
功能介绍
- 原生的贝塞尔支持
- 自定义Layer动画等
- 支持并不依赖其他三方库
- 轻量级
成品绘制示例
AE瞄具类组件
AE进度类组件
AE/网易云音乐- 鲸云音效 - 可视化圆形频谱组件
AE/网易云音乐- 鲸云音效 - 可视化圆形频谱组件2
有了这个更多好玩酷炫的组件都可以自己绘制啦!
意见和定制
如果您在使用中有好的需求及建议,或者遇到什么bug,欢迎随时issue,我会及时的回复
另外,支持定制图案哦,谁有好看的图案可以联系我,issue/邮箱都可以。
每5个定制图案更新一个版本,并且我会在代码中注释该图案的提供者;支持侵删
AxcDrawPath示例部分预览
线段绘制
示例代码:
// 先设置需要绘制的点位
NSMutableArray *drawPoints = @[[NSValue valueWithCGPoint:CGPointMake(10, 10)],
[NSValue valueWithCGPoint:CGPointMake(200, 10)],
[NSNull null], // 代表上个点位和下个点位不需要连接,只要不是 NSValue 类型的都会判断为断点
[NSValue valueWithCGPoint:CGPointMake(10, 30)],
[NSValue valueWithCGPoint:CGPointMake(200, 30)],
[NSNull null] // 断点
].mutableCopy;
// 示例完毕,后边就直接循环创建吧
for (int i = 0 ; i < 20; i ++) {
[drawPoints addObject:[NSValue valueWithCGPoint:CGPointMake(10, i * 10 + 50)]];
[drawPoints addObject:[NSValue valueWithCGPoint:CGPointMake(200, i * 10 + 50)]];
[drawPoints addObject:[NSNull null]]; // 断点
}
// 创建绘制动作路径
UIBezierPath *bezierPath = [AxcDrawPath AxcDrawLineArray:drawPoints // 绘制的点位
clockwise:YES]; // 是否顺序绘制
折线绘制
示例代码:
/// 线段2
NSMutableArray *points_1 = @[].mutableCopy;
for (int i = 0 ; i < 3; i ++) { // 折线个数
for (int j = 0; j < 5 ; j ++) { // 折个数
int width_ = width; int height_ = height;
[points_1 addObject:[NSValue valueWithCGPoint:CGPointMake(arc4random()%width_ + 10, arc4random()%height_ + 10)]];
}
[points_1 addObject:[NSNull null]]; // 断点
}
// 创建绘制动作路径
UIBezierPath *bezierPath = [AxcDrawPath AxcDrawLineArray:points_1 // 绘制的点位
clockwise:YES]; // 是否顺序绘制
刻度绘制
示例代码:
UIBezierPath *bezierPath = [AxcDrawPath AxcDrawScaleStartPoint:CGPointMake(20, 100)
count:5 // 大刻度个数
groupCount:10 // 组内个数
bigScaleHeight:30 // 大刻度高度
smallScaleHeight:20 // 小刻度高度
spacing:5 // 刻度间距
upward:NO // 是否朝上
sequence:YES]; // 顺序绘制
平行四边形绘制
示例代码:
UIBezierPath *bezierPath = [AxcDrawPath AxcDrawParallelogramRect:CGRectMake(10, 10,width, height)
offset:CGPointMake(20, 0)
clockwise:NO]
辐射圆绘制
示例代码:
UIBezierPath *bezierPath = [AxcDrawPath AxcDrawCircularRadiationCenter:CGPointMake(200, 200) // 圆心
radius:50 // a半径
lineHeights:arr // 每条线的长度
outside:YES // 向外辐射?
startAngle:-90 // 起始角
openingAngle:0 // 开合角
clockwise:YES]; // 顺时针绘制?
开角辐射圆绘制
示例代码:
UIBezierPath *bezierPath = [AxcDrawPath AxcDrawCircularRadiationCenter:CGPointMake(200, 200) // 圆心
radius:50 // a半径
lineHeights:arr // 每条线的长度
outside:YES // 向外辐射?
startAngle:-90 // 起始角
openingAngle:90 // 开合角
clockwise:YES]; // 顺时针绘制?
向内辐射圆绘制
示例代码:
[AxcDrawPath AxcDrawCircularRadiationCenter:arcCenter // 圆心
radius:arcRadius // 半径
lineHeights:lineHeights // 每条线长度
outside:NO]
内外辐射圆绘制
示例代码:
for (int i = 0; i < 80; i ++){
CGFloat value = arc4random()%20 + 5;
if (arc4random()%2) value = -value;
[lineHeights addObject:@(value)];
}
[AxcDrawPath AxcDrawCircularRadiationCenter:arcCenter // 圆心
radius:arcRadius/2 // 半径
lineHeights:lineHeights // 每条线长度
outside:YES]
递增开角辐射圆绘制
示例代码:
for (int i = 0; i < 50; i ++) [lineHeights addObject:@(i)];
[AxcDrawPath AxcDrawCircularRadiationCenter:arcCenter // 圆心
radius:arcRadius/2 // 半径
lineHeights:lineHeights // 每条线长度
outside:YES // 向外绘制
startAngle:-90 // d起始角
openingAngle:90]
多圆弧绘制
示例代码:
[AxcDrawPath AxcDrawCircularArcCenter:arcCenter // 中心
radius:arcRadius // 半径
count:5 // 圆弧个数
radian:30 // 圆弧弧度
startAngle:-90-15]
多圆弧首尾相连绘制
示例代码:
[AxcDrawPath AxcDrawCircularArcCenter:arcCenter // 中心
radius:arcRadius // 半径
count:3 // 圆弧个数
radian:30 // 圆弧弧度
startAngle:-90-15
openingAngle:0
connection:YES]
圆周箭头绘制
示例代码:
[AxcDrawPath AxcDrawPointArrowCenter:arcCenter // 圆心
radius:arcRadius // 半径
arrowRadius:10 // 箭头高度/向心半径差
arrowRadian:20 // 箭头圆弧角度
arrowCount:9]
圆周箭头绘制 - 箭头底部圆弧闭合
示例代码:
[AxcDrawPath AxcDrawPointArrowCenter:arcCenter // 圆心
radius:arcRadius // 半径
arrowRadius:10 // 箭头高度/向心半径差
arrowRadian:20 // 箭头圆弧角度
arrowCount:9 // 箭头个数
connections:YES // 是否形成闭合圆?
arcConnections:YES // 是否使用圆弧作为连接边?
outSide:NO // 箭头向外
startAngle:-90-(20/2.f) // 起始角
openingAngle:0 // 开合角
clockwise:YES]
圆周箭头绘制 - 箭头底部圆弧闭合 - 箭头向外
示例代码:
[AxcDrawPath AxcDrawPointArrowCenter:arcCenter // 圆心
radius:arcRadius // 半径
arrowRadius:10 // 箭头高度/向心半径差
arrowRadian:20 // 箭头圆弧角度
arrowCount:6 // 箭头个数
connections:YES // 是否形成闭合圆?
arcConnections:YES // 是否使用圆弧作为连接边?
outSide:YES // 箭头向外
startAngle:-90-(20/2.f) // 起始角
openingAngle:0 // 开合角
clockwise:YES]
圆周箭头绘制 - 箭头底部直线闭合 - 箭头向外
示例代码:
[AxcDrawPath AxcDrawPointArrowCenter:arcCenter // 圆心
radius:arcRadius/2 // 半径
arrowRadius:10 // 箭头高度/向心半径差
arrowRadian:20 // 箭头圆弧角度
arrowCount:10 // 箭头个数
connections:YES // 是否形成闭合圆?
arcConnections:NO // 是否使用圆弧作为连接边?
outSide:YES // 箭头向外
startAngle:-90-(20/2.f) // 起始角
openingAngle:0 // 开合角
clockwise:YES]
圆周箭头绘制 - 箭头底部直线闭合 - 箭头向内
示例代码:
[AxcDrawPath AxcDrawPointArrowCenter:arcCenter // 圆心
radius:arcRadius // 半径
arrowRadius:10 // 箭头高度/向心半径差
arrowRadian:20 // 箭头圆弧角度
arrowCount:10 // 箭头个数
connections:YES // 是否形成闭合圆?
arcConnections:NO // 是否使用圆弧作为连接边?
outSide:NO // 箭头向外
startAngle:-90-(20/2.f) // 起始角
openingAngle:0 // 开合角
clockwise:YES]
圆周梯形绘制
示例代码:
[AxcDrawPath AxcDrawTrapezoidalBlockArcRingCenter:arcCenter // 中心
outsideRadius:arcRadius // 外圆半径
blockRadius:10 // 块半径
blockCount:6 // 块个数
angleSpacing:10 // 间距角度
startAngle:-115 ]
圆周块状圆弧绘制
示例代码:
[AxcDrawPath AxcDrawBlockArcRingCenter:arcCenter // 绘制中心
outsideRadius:arcRadius // 外圆半径
blockRadius:10 // 环块距离外部距离
blockCount:6 // 环块个数
angleSpacing:10 // 环块间距弧度
startAngle:185 // 起始角弧度
openingAngle:0]
圆周块状箭头绘制 - 逆时针
示例代码:
[AxcDrawPath AxcDrawArrowBlockArcRingCenter:arcCenter // 中心
outsideRadius:arcRadius // 外圆半径
blockRadius:20 // 箭头半径
blockCount:6 // 块个数
angleSpacing:10 // 角度间距
arrowAngle:10 // 箭头相对伸出角度
startAngle:-90 // 起始角度
openingAngle:0 // 开合角度
clockwise:NO]
圆周块状箭头绘制 - 顺时针
示例代码:
[AxcDrawPath AxcDrawArrowBlockArcRingCenter:arcCenter // 中心
outsideRadius:arcRadius // 外圆半径
blockRadius:20 // 箭头半径
blockCount:6 // 块个数
angleSpacing:10 // 角度间距
arrowAngle:10 // 箭头相对伸出角度
startAngle:-90 // 起始角度
openingAngle:0 // 开合角度
clockwise:YES]
更新日志
● 1.0.0:首发;
● 1.0.1:发布CocoaPods版本;