Need help with AxcDrawPath_Tool?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

axclogo
441 Stars 65 Forks MIT License 26 Commits 2 Opened issues

Description

AxcAEKit系列拆分出来的一个贝塞尔曲线绘制工具,以科技风为主,动画为辅

Services available

!
?

Need anything else?

Contributors list

# 156,099
Objecti...
C
26 commits

AxcDrawPath_Tool

language Build Status MIT License Platform CocoaPods Axc

AxcAE_DrawPath

简介:

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 

功能介绍

  • [x] 原生的贝塞尔支持
  • [x] 自定义Layer动画等
  • [x] 支持并不依赖其他三方库
  • [x] 轻量级

成品绘制示例

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版本;

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.