自动旋转的太极图

首先我们先看一个效果图

首先创建一个工程

创建一个继承自UIview的类TaijiView然后再.h文件中创建两个变量

NSTimer *timer//主要用来实现定时器

float  currentIndex;//后面的话可以控制转动的速度

下面我们就来实现.m中的内容

首先我们来看这里有一个重写的初始化的方法

-(id)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        currentIndex = 0.0;
        self.backgroundColor=[UIColor clearColor];
        //创建定时器
        _timer = [NSTimer scheduledTimerWithTimeInterval:1.0f/32.0f target:self selector:@selector(updateSpotlight) userInfo:nil repeats:YES];
    }
    return self;
}

我们可以看到这里对于大小的指定,将颜色设置为透明的,这样的话有利于我们后续的添加视图上的控件,初始化一个定时器;


下面我们就来实现以下这个图形的编辑

用到一个drawRect的函数

-(void)drawRect:(CGRect)rect{
    float x = self.frame.size.width/2;
    float y = self.frame.size.height/2;
    float radius = self.frame.size.width/2;
    //判断当前视图的宽度是否大于高度(按照小的那个来)
    if (self.frame.size.width>self.frame.size.height) {
        radius = self.frame.size.height/2;
    }
    float runAngle = M_PI*currentIndex;//定义旋转的角度
    //判断
    if (runAngle>=2*M_PI) {
        runAngle-=2*M_PI;
    }
    CGContextRef context = UIGraphicsGetCurrentContext();//创建上下文
    CGColorRef whiteColor = [[UIColor colorWithRed:1 green:1 blue:1 alpha:1] CGColor];
    CGColorRef blackColor = [[UIColor colorWithRed:0 green:0 blue:0 alpha:1] CGColor];
    
    
    //绘制半个白色的圆
    CGContextSetFillColor(context, CGColorGetComponents(whiteColor));
    CGContextAddArc(context, x, y, radius, 0+runAngle, M_PI+runAngle, 0);
    CGContextClosePath(context);
    CGContextFillPath(context);

这里给出的是前半部分的代码首先我们看到初始化了三个变量。这里我们知道要确定一个圆的话我们首先要知道它的圆心和半径,这样我们就可以理解这些变量的含义;

//在黑色的半圆上面绘制一个白色的小半圆
    CGContextSetFillColor(context, CGColorGetComponents(whiteColor));
    CGContextAddArc(context, x+radius/2*cos(runAngle), y+radius/2*sin(runAngle), radius/2, M_PI+runAngle, M_PI*2+runAngle, 0);
    CGContextClosePath(context);
    CGContextFillPath(context);
    //在白色的半圆上面绘制一个黑色的小半圆
    CGContextSetFillColor(context, CGColorGetComponents(blackColor));
    CGContextAddArc(context, x-radius/2*cos(runAngle), y-radius/2*sin(runAngle), radius/2, 0+runAngle, M_PI+runAngle, 0);
    CGContextClosePath(context);
    CGContextFillPath(context);
    
    //设置白色的线
    CGContextSetStrokeColorWithColor(context, whiteColor);
    CGContextMoveToPoint(context, x+radius*cos(runAngle), y+radius*sin(runAngle));
    
    CGContextMoveToPoint(context, x, y);
    CGContextStrokePath(context);
    //设置黑色的线
    CGContextSetStrokeColorWithColor(context, blackColor);
    CGContextMoveToPoint(context, x-radius*cos(runAngle), y-radius*sin(runAngle));
    
    CGContextMoveToPoint(context, x, y);
    CGContextStrokePath(context);
    
    //绘制白色的圆
    CGContextSetFillColor(context, CGColorGetComponents(whiteColor));
    CGContextAddArc(context, x-radius/2*cos(runAngle), y-radius/2*sin(runAngle), radius/4, 0, M_PI*2, 0);
    CGContextClosePath(context);
    CGContextFillPath(context);
    //绘制黑色的圆
    CGContextSetFillColor(context, CGColorGetComponents(blackColor));
    CGContextAddArc(context, x+radius/2*cos(runAngle), y+radius/2*sin(runAngle), radius/4, 0, M_PI*2, 0);
    CGContextClosePath(context);
    CGContextFillPath(context);
}

后半的代码就是实现我们的整个的页面的布局的方式,建议大家的做的过程中简单的在画板上实现以下这个功能毕竟这个东西不是随便写的东西。这里有一点是要简单的说明以下,我们这里所说的上下文就是为了体现在实现布局的时候的那个结构。

typedef struct CGContext *CGContextRef;

可以看到,这个是一个结构体的变量,所以说在使用的时候要对这个变量的意思做一个简单的了解从而达到知其然,知其所以然的目的。

到这里我们的这个view的设计就完成了,下面就是进行真正的实力化这个对象了。

这里我就不在多说了,关于这个方面的事情我会在后续的博客上面对这个方面的知识做一个自我的补充


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nihui123

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值