谈谈iOS标尺的实现

挺长时间没有撰写技术文章了，今天给大家介绍的虽然不是常用到的标尺demo，但是从这个demo中我们可以学习到别人的绘图是怎么实现的。。。

和以往一样，首先我要强调的是思路。

1.我们要考虑标尺中长短线段不一的实现，还有数字的显示.

先上代码：

(.h)

#import

typedefNS_ENUM(NSUInteger, RulerDirection) {

RulerDirectionHorizontal, //横向

RulerDirectionVertical, //纵向

};

typedefNS_ENUM(NSUInteger, RulerFace) {

RulerFace_up_left,//横向朝上，纵向朝左

RulerFace_down_right,//横向朝下，纵向朝右

};

typedef struct LineColor {

CGFloat R;

CGFloat G;

CGFloat B;

} CustomeColor;

//c 函数构造结构体

CustomeColorcustomColorMake(CGFloatR,CGFloatG,CGFloatB);

typedef void(^Handler)(void);

@interfaceRullerView :UIView

/**

长刻度的长度默认 fit(24)

@property (nonatomic,assign) float h_height;

/**

短刻度的长度默认 fit(12)

@property (nonatomic,assign) float m_height;

/**

标尺显示的最小值,默认 0

@property (nonatomic,assign) NSInteger lockMin;

/**

标尺显示的最大值，默认 360

@property (nonatomic,assign) NSInteger lockMax;

/**

一个刻度代表的值是多少，默认 1

@property (nonatomic,assign) NSInteger unitValue;

/**

默认横向滚动

@property (nonatomic,assign) RulerDirection rulerDirection;

/**

默认朝上，朝左

@property (nonatomic,assign) RulerFace rulerFace;

/**

是否显示刻度值

@property (nonatomic,assign)BOOL isShowRulerValue;

/**

标尺数字颜色

@property (nonatomic,strong) UIColor *txtColor;//标尺上数字的颜色

/**

标尺线的颜色

@property (nonatomic) CustomeColor lineColor;//标尺线的颜色

/**

指针位置，默认居中

@property (nonatomic,assign) CGRect pointerFrame;

/**

标尺视图的背景颜色默认白色

@property(nonatomic,strong)UIColor*rulerBackgroundColor;

- (void)drawRuler:(Handler)block;

#pragma 自定义的宏

//屏幕尺寸

#define cy_ScreenW [UIScreen mainScreen].bounds.size.width

#define cy_ScreenH [UIScreen mainScreen].bounds.size.height

//视图尺寸

#define cy_selfWidth self.bounds.size.width

#define cy_selfHeight self.bounds.size.height

//px宏除2

#define cy_px(value) (value)/2.0

//按宽度适配

#define cy_fit(value) (cy_px(value))*cy_ScreenW/375.0

// RGB颜色转换（16进制->10进制）

#define UIColorFromRGB(rgbValue)\

[UIColor colorWithRed:((float)((rgbValue &0xFF0000) >>16))/255.0\

green:((float)((rgbValue &0xFF00) >>8))/255.0\

blue:((float)(rgbValue &0xFF))/255.0\

alpha:1.0]

@end

(.m)

#import "RullerView.h"

@interface RullerView()

{

float_unitPX;//标尺单位长度

float_coarseness;//标尺粗

float_num_height;//数字高度

float_num_top;//数字头部位置

float_mark_bottom;//刻度尾部位置

float_short_mark_top;//短刻度头部位置

float_long_mark_top;//长刻度头部位置

}

@end

@implementation RullerView

- (instancetype)initWithFrame:(CGRect)frame {

self= [superinitWithFrame:frame];

if(self) {

}

return self;

}

- (void)start {

self.backgroundColor = _rulerBackgroundColor?_rulerBackgroundColor:[UIColor whiteColor];

_unitPX=cy_fit(14);

_coarseness = cy_fit(1);

_num_height = cy_fit(24);

_txtColor = UIColorFromRGB(0xDDDDDD);

_lineColor = customColorMake(221, 221, 221);

if (_rulerDirection == RulerDirectionHorizontal) {

if (_rulerFace == RulerFace_up_left) {

_mark_bottom=cy_selfHeight/2.0;

_short_mark_top = _mark_bottom-_m_height;

_long_mark_top = _mark_bottom-_h_height;

_num_top=_mark_bottom+cy_fit(10);

// _long_mark_top-_num_height-cy_fit(10);

}else if (_rulerFace == RulerFace_down_right) {

_mark_bottom=cy_selfHeight/2.0;

_short_mark_top = _mark_bottom+_m_height;

_long_mark_top = _mark_bottom+_h_height;

_num_top = _long_mark_top+_num_height-cy_fit(10);

}else{

NSAssert(NO,@"error");

}

}else if (_rulerDirection == RulerDirectionVertical) {

if (_rulerFace == RulerFace_up_left) {

_mark_bottom=cy_selfWidth/2.0;

_short_mark_top = _mark_bottom-_m_height;

_long_mark_top = _mark_bottom-_h_height;

_num_top = _long_mark_top-_unitPX*8+cy_fit(10);

}else if (_rulerFace == RulerFace_down_right) {

_mark_bottom=cy_selfWidth/2.0;

_short_mark_top = _mark_bottom+_m_height;

_long_mark_top = _mark_bottom+_h_height;

_num_top = _long_mark_top-cy_fit(10);

}else{

NSAssert(NO,@"error");

}

}else{

NSAssert(NO,@"error");

}

- (void)drawRuler:(Handler)block {

[selfstart];

if(block) {

block();

}

[self setNeedsDisplay];

}

//绘制方法

- (void)drawRect:(CGRect)rect {

[superdrawRect:rect];

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetRGBStrokeColor(context,self.lineColor.R,self.lineColor.G,self.lineColor.B,1.0);

CGContextSetLineWidth(context, _coarseness);

//画轴

CGPointaPoints[2];//X轴

if (_rulerDirection == RulerDirectionHorizontal) {

aPoints[0] =CGPointMake(0,_mark_bottom);//起始点

aPoints[1] =CGPointMake(cy_selfWidth,_mark_bottom);//终点

}else if (_rulerDirection == RulerDirectionVertical) {

aPoints[0] =CGPointMake(_mark_bottom,0);//起始点

aPoints[1] =CGPointMake(_mark_bottom,cy_selfHeight);//终点

}else{

NSAssert(NO,@"error");

}

CGContextAddLines(context, aPoints,2);//添加线

CGContextDrawPath(context, kCGPathStroke); //根据坐标绘制路径

//画刻度

for (NSInteger i=_lockMin/_unitValue; i<(_lockMax/_unitValue+1); i++) {

CGContextSetRGBStrokeColor(context,self.lineColor.R,self.lineColor.G,self.lineColor.B,1.0);

CGContextSetLineWidth(context, _coarseness);

CGPointaPoints[2];//X轴

if (_rulerDirection == RulerDirectionHorizontal) {

aPoints[0] =CGPointMake(_pointerFrame.origin.x+_pointerFrame.size.width/2.0+_unitPX*i, i%10==0?_long_mark_top:_short_mark_top);//起始点

aPoints[1] =CGPointMake(_pointerFrame.origin.x+_pointerFrame.size.width/2.0+_unitPX*i, _mark_bottom);//终点

}else if (_rulerDirection == RulerDirectionVertical) {

aPoints[0] =CGPointMake(i%10==0?_long_mark_top:_short_mark_top,_pointerFrame.origin.y+_pointerFrame.size.height/2.0+_unitPX*i);//起始点

aPoints[1] =CGPointMake(_mark_bottom,_pointerFrame.origin.y+_pointerFrame.size.height/2.0+_unitPX*i);//终点

}else{

NSAssert(NO,@"error");

}

CGContextAddLines(context, aPoints,2);//添加线

CGContextDrawPath(context, kCGPathStroke); //根据坐标绘制路径

if(_isShowRulerValue&& i%10==0) {

NSMutableParagraphStyle *textStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];

textStyle.lineBreakMode = NSLineBreakByWordWrapping;

textStyle.alignment = NSTextAlignmentCenter;

UIFont *font = [UIFont systemFontOfSize:_num_height];

NSDictionary *attributes = @{NSForegroundColorAttributeName:self.txtColor,NSFontAttributeName:font, NSParagraphStyleAttributeName:textStyle};

if (_rulerDirection == RulerDirectionHorizontal) {

[@(i*_unitValue).stringValue drawInRect:CGRectMake(_pointerFrame.origin.x+_pointerFrame.size.width/2.0+_unitPX*(i-4), _num_top, _unitPX*8, _num_height) withAttributes:attributes];

}else if (_rulerDirection == RulerDirectionVertical) {

[@(i*_unitValue).stringValue drawInRect:CGRectMake(_num_top, _pointerFrame.origin.y+_pointerFrame.size.height/2.0+_unitPX*(i-1), _unitPX*8, _num_height) withAttributes:attributes];

}else{

NSAssert(NO,@"error");

}

//c 函数构造结构体

CustomeColorcustomColorMake(CGFloatR,CGFloatG,CGFloatB) {

CustomeColorl;l.R= R/255.0;l.G= G/255.0;l.B= B/255.0;returnl;

}

@end

这里面着重强调的两个点：一个是自定义标尺绘图视图类要暴露一个绘图回调block给外面。