自动旋转的太极图

淩亂°似流年 2022-07-14 12:12 142阅读 0赞

首先我们先看一个效果图

![Center][]

首先创建一个工程

![Center 1][]

创建一个继承自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的设计就完成了，下面就是进行真正的实力化这个对象了。

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

[Center]: /images/20220714/409f667f52b643c5914fc08d294f9800.png
[Center 1]: /images/20220714/018e1331a7fe4daf87eecc534f621074.png