2D绘图
四层框架:
上层的可以用下层的,越下层功能越多,并且越简单
- Cocoa touch Layer
- Media Layer
- Core Service Layer 服务层
- Core OS layer 核心系统层
Core Animation
一.设置圆形的按键
CALayer 显示
let btn = UIButton(type: .System)
btn.frame = CGRect(x: 100, y: 100, width: 50, height: 50)
self.view.addSubview(btn)
btn.backgroundColor = UIColor.cyanColor()
btn.layer.cornerRadius = 25//倒圆角,倒脚半径25
btn.layer.borderColor = UIColor.blueColor().CGColor
btn.layer.borderWidth = 1 //设置边框大小才会生效(默认边框长度为0)
btn.layer.shadowColor = UIColor.blackColor().CGColor
btn.layer.shadowOffset = CGSize(width: 1, height: 1)
btn.layer.shadowOpacity = 0.7 //设置透明度 默认是0
二.UIView绘图
绘制的三种方法:
- CGContextStrokePath(context)
- CGContextFillPath(context)
- CGContextDrawPath(context, mode: CGPathDrawingMode)
CGPathDrawingMode:
public enum CGPathDrawingMode : Int32 {
case Fill
case EOFill
case Stroke
case FillStroke 非零环绕数
case EOFillStroke 奇偶环绕数EO even-odd
}
//填充和绘制边框模式
绘图前获取当前绘图环境(上下文)
let context = UIGraphicsGetCurrentContext()
绘图环境设置了,就一直会有效,可以用SaveGstate与RestoreGstate去保存与恢复
1.绘制线
绘图过程:
** MoveToPoint - AddlineToPoint - StrokePath **
CGContextMoveToPoint(cxt, 0, 0)
CGContextAddLineToPoint(cxt, 50, 50)
CGContextAddLineToPoint(cxt, 0, 100)
let cgp = CGPoint(x: 50, y: 0)
CGContextAddLineToPoint(cxt,cgp.x, cgp.y)
//设置了当前绘图环境的任何画图工具的东西,都一直会有效
UIColor.cyanColor().setStroke()//设置线的颜色
CGContextSetLineWidth(cxt, 5)//设置线的宽度
CGContextSetLineCap(cxt, .Round)//设置线两段的头
CGContextSetLineJoin(cxt, .Round)//设置连接处
CGContextStrokePath(cxt)
CGContextMoveToPoint(cxt, 90, 0)
CGContextAddLineToPoint(cxt, 100, 100)
CGContextSetLineDash(cxt, 0, [2,3], 2) //设置虚线, 1.偏移量, 2.虚线重复的像素, 3.数组里面的个数
CGContextStrokePath(cxt)
CGContextMoveToPoint(cxt, 50, 60)
CGContextAddLineToPoint(cxt, 50,100)
CGContextStrokePath(cxt)
2.绘制矩形
//设置填充颜色
UIColor.redColor().setFill()
//绘制矩形
CGContextAddRect(context, CGRect(x: 0, y: 0, width: 150, height: 50))
CGContextDrawPath(context, .FillStroke)
//填充方式-非零环绕数,奇偶环绕数(Even-odd)
//CGContextStrokePath(context) 只绘制边框
//CGContextFillPath(context) 只填充
3.绘制圆弧
//绘制弧线
//1.
CGContextAddArc(context, 150, 150, 50, 0, CGFloat(M_PI/3), 0)
//2.
CGContextMoveToPoint(context, 150,200)
CGContextAddArcToPoint(context, 200, 200, 300, 400, 150)
CGContextStrokePath(context)//绘图
4.贝兹曲线(贝赛尔曲线)
//贝兹曲线(贝赛尔曲线)
let context = UIGraphicsGetCurrentContext()
//二次方的需要三个点
CGContextMoveToPoint(context, 100, 100)//第一个点
CGContextAddQuadCurveToPoint(context, 150, 0, 300, 100)//设置第二第三个点
//三次方的需要四个点
//二次方的终点是第一个点
CGContextAddCurveToPoint(context, 350, 50, 380, 80, 400, 100)//设置第二个点,第三个点,地四个点
CGContextStrokePath(context)
5.绘制网格,利于观察图形
let context = UIGraphicsGetCurrentContext()
//绘制网格
var y: CGFloat = 50
while y < self.bounds.size.height {
//2. 开始，设置绘制起点
CGContextMoveToPoint(context, 0, y)
//3. 往上下文上添加图形
CGContextAddLineToPoint(context, self.bounds.size.width, y)
y += 50
}
var x: CGFloat = 50
while x < self.bounds.size.width {
//2. 开始，设置绘制起点
CGContextMoveToPoint(context, x, 0)
//3. 往上下文上添加图形
CGContextAddLineToPoint(context, x, self.bounds.size.height)
x += 50
}
CGContextSaveGState(context)//保存绘图状态
UIColor.cyanColor().setStroke()
CGContextSetLineDash(context, 0, [2,2], 2)
CGContextStrokePath(context)
CGContextRestoreGState(context)//恢复保存时候的绘图状态
//Graph plot chart pie bar
