绘制自定义的图形
来源:互联网 发布:ubuntu格式化u盘 ext4 编辑:程序博客网 时间:2024/05/21 08:35
首先,在你的应用中想绘制图形的区域加一个NSView(OS X)或UIView(IOS)的子类。并建好对应的Cocoa或Cocoa Touch文件,它们也应是NSView(OS X)或UIView(IOS)的子类。一定要记得将文件和StoryBoard里的视图关联起来。
接下来在文件里复写drawRect(dirtyRect: NSRect)。这个函数只接受一个脏矩形作为参数,这是这个视图中真正需要更新的区域,如果这个视图的一部分被遮盖住,那么传给这个矩形的参数也会随之减小。
还有一点要注意,在OX S中(0,0)在左下角,IOS(0,0)在左上角。
你的绘制动作都在这个函数里完成即可。下面是几个例子,这些例子在OS X App中完成,IOS中会有微小的差异:
//第一个例子:简单的矩形//NSColor.blueColor().setFill()//let path = NSBezierPath(rect: self.bounds)//path.fill()//第二个例子:带描边的圆角矩形//let pathRect = NSInsetRect(self.bounds, 1, 1)//这个方法在不改变此矩形的中心点的情况下在x,y方向收窄规定的像素点//let path = NSBezierPath(roundedRect: pathRect, xRadius: 10, yRadius: 10)//path.lineWidth = 4//NSColor.blueColor().setFill()//NSColor.greenColor().setStroke()//path.fill()//path.stroke()////path.fill()//绘制操作都是按顺序执行的,如果在stroke后执行fill则fill会盖住一点stroke//第三个例子:自定义路径//let bezierPath = NSBezierPath()//let drawingRect = NSInsetRect(self.bounds, self.bounds.size.width * 0.05, self.bounds.height * 0.05)////得到需要的点//let topLeft = CGPointMake(CGRectGetMinX(drawingRect),CGRectGetMaxY(drawingRect))//let topRight = CGPointMake(CGRectGetMaxX(drawingRect),CGRectGetMaxY(drawingRect))//let bottomLeft = CGPointMake(CGRectGetMinX(drawingRect),CGRectGetMinY(drawingRect))//let bottomRight = CGPointMake(CGRectGetMaxX(drawingRect),CGRectGetMinY(drawingRect))//let center = CGPointMake(CGRectGetMidX(drawingRect),CGRectGetMidY(drawingRect))//bezierPath.moveToPoint(topLeft)//bezierPath.lineToPoint(topRight)//bezierPath.lineToPoint(bottomLeft)//bezierPath.curveToPoint(bottomRight, controlPoint1: center, controlPoint2: center)//bezierPath.closePath()//NSColor.blueColor().setFill()//NSColor.greenColor().setStroke()//bezierPath.fill()//bezierPath.stroke()//第四个例子:多条子路径//let bezierPath = NSBezierPath()//let squareRect = CGRectInset(dirtyRect, dirtyRect.size.width * 0.45, dirtyRect.size.height * 0.05)//let circleRect = CGRectInset(dirtyRect, dirtyRect.size.width * 0.3, dirtyRect.size.height * 0.3)//let cornerRadius : CGFloat = 20//let circlePath = NSBezierPath(ovalInRect: circleRect)//let squarePath = NSBezierPath(roundedRect: squareRect, xRadius: cornerRadius, yRadius: cornerRadius)//bezierPath.appendBezierPath(circlePath)//bezierPath.appendBezierPath(squarePath)//NSColor.blueColor().setFill()//bezierPath.fill()
同样可以绘制带阴影的图形:
//第五个例子:绘制带阴影的图像let drawingRect = CGRectInset(dirtyRect, dirtyRect.size.width * 0.1, dirtyRect.size.height * 0.1)let cornerRadius:CGFloat = 20let beizerPath = NSBezierPath(roundedRect: drawingRect, xRadius: cornerRadius, yRadius: cornerRadius)//这个方法保存了图形上下文,比如描边和填充颜色,是否设置了阴影等NSGraphicsContext.saveGraphicsState()let shadow = NSShadow()shadow.shadowColor = NSColor.blueColor()shadow.shadowOffset = NSSize(width: 3, height: -3)shadow.shadowBlurRadius = 10shadow.set()//一旦设置好阴影,则绘制的所有图形都带阴影 NSColor.redColor().setFill()beizerPath.fill()//取回刚才保存的上下文,在这之间的改变上下文的设置就被覆盖了。NSGraphicsContext.restoreGraphicsState()
在IOS中绘制阴影有些不同。
设置阴影使用CGContextSetShadowWithColor方法,这个方法接收当前上下文设置以及三个阴影参数作为变量。这就需要在设置前获取上下文状态,使用UIGraphicsGetCurrentContext。保存和恢复上下文状态也有不同,使用CGContextSaveGState,CGContextRestoreGState。
在OS X中绘制带有渐变的图形和在IOS中绘制有较大的差别。首先是OS X,在OS X中比较简单:
//第六个例子:渐变let drawingRect = CGRectInset(dirtyRect, dirtyRect.size.width * 0.1, dirtyRect.size.height * 0.1)let cornerRadius:CGFloat = 20let beizerPath = NSBezierPath(roundedRect: drawingRect, xRadius: cornerRadius, yRadius: cornerRadius)let startColor = NSColor.blackColor()let endColor = NSColor.whiteColor()let gradient = NSGradient(startingColor: startColor, endingColor: endColor)gradient?.drawInBezierPath(beizerPath, angle: 90)
IOS中渐变的绘制则比较复杂:
let colorSpace = CGColorSpaceCreateDeviceRGB()let context = UIGraphicsGetCurrentContext()let gradientStartColor = UIColor(red: 0.1, green: 0.1, blue: 0.8, alpha: 1)let gradientEndColor = UIColor(red: 1, green: 0.6, blue: 0.8, alpha: 1)let gradientColors : CFArray = [gradientStartColor.CGColor,gradientEndColor.CGColor]let grandientLocations :[CGFloat] = [0.0,1.0]let gradient = CGGradientCreateWithColors(colorSpace, gradientColors, grandientLocations)let pathRect = CGRectInset(self.bounds, 20, 20)let topPoint = CGPointMake(self.bounds.size.width/2, 20)let bottomPoint = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2 - 20)let roundRectanglePath = UIBezierPath(roundedRect: pathRect, cornerRadius: 4)CGContextSaveGState(context)roundRectanglePath.addClip()CGContextDrawLinearGradient(context, gradient, bottomPoint, topPoint, CGGradientDrawingOptions.DrawsAfterEndLocation)CGContextRestoreGState(context)
绘制变换后的图形:
通过修改CTM矩阵可以影响绘制过程从而达到平移,旋转,缩放,倾斜等效果
//第七个例子:变换let drawingRect = CGRectInset(dirtyRect, dirtyRect.size.width * 0.1, dirtyRect.size.height * 0.1)let cornerRadius:CGFloat = 20let rotationTransform = CGAffineTransformMakeRotation(CGFloat(M_PI) / 4.0)let beizerPath = NSBezierPath(roundedRect: drawingRect, xRadius: cornerRadius, yRadius: cornerRadius)let context = NSGraphicsContext.currentContext()?.CGContextCGContextSaveGState(context)CGContextConcatCTM(context, rotationTransform)NSColor.redColor().setFill()beizerPath.fill()CGContextRestoreGState(context)
0 0
- 绘制自定义的图形
- 自定义view--绘制图形
- UIBezierPath+CAShapeLayer 绘制自定义图形
- 自定义View绘制各种图形
- 使用matplotlib绘制自定义图形
- GMap 自定义Marker以及规则图形的绘制
- 自定义VIEW(学习笔记三)-基本图形的绘制
- 自定义View学习笔记04—Canvas的绘制图形
- 自定义View绘制图形一(绘制静态图形)
- 图形的绘制
- 图形的绘制
- 真实感图形的绘制
- 基本图形的绘制
- 手动图形的绘制
- 图形的绘制
- 基本的图形绘制
- 图形控件的绘制
- ArcGIS Mobile 自定义MapGraphicLayer绘制图形
- Linux 文件读写笔记
- Codeforces Gym 100589F Count Ways(DP+组合数学)
- Java 数据库 第一章 关系型数据库
- Shell基础(一)基本功能
- 【论文笔记】Applications of Graph Theory in Computer Science
- 绘制自定义的图形
- tomcat server.xml配置crossContext 实现多应用中session共享
- Java 数据库 第一章
- Java 数据库 第二章 管理数据库和表
- 【面经】Morgan Stanley IT简易面经
- Java 数据库 第三章 数据库完整性
- 1.程序,进程,文档,内存,外存-讲义大纲
- Java 数据库 第四章 使用DML语句更改数据
- hdoj 3068最长回文【Manacher】