绘制自定义的图形

来源:互联网 发布: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
原创粉丝点击