请选择 进入手机版 | 继续访问电脑版

技术控

    今日:0| 主题:61300
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Drawing Shapes with Core Graphics Tutorial

[复制链接]
年华离路 发表于 2016-10-6 15:42:55
347 2
Core Graphics is an API included in both Cocoa and Cocoa Touch. It allows you to draw graphic objects on the graphic destination. In this tutorial we will draw some basic shapes such as a rectangle or a circle. This tutorial is made with Xcode 8 and built for iOS 10.
  Open Xcode and create a new Single View Application.
     

Drawing Shapes with Core Graphics Tutorial

Drawing Shapes with Core Graphics Tutorial-1-技术控-following,inspector,iPhone,included,selected
     Choose Next. For product name, use IOS10DrawShapesTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.
     

Drawing Shapes with Core Graphics Tutorial

Drawing Shapes with Core Graphics Tutorial-2-技术控-following,inspector,iPhone,included,selected
     Go to the Storyboard and drag a Horizontal Stack View from the Object Library to the top section of the main View. Go to the Attributes inspector and in the Stack View section and change the Distributon type to Fill Equally. Drag 3 buttons from the Object Library to the Stack View and give them the following names: Rectangle, Lines and Circle. Select the Stack View and Select the Pin button from the Auto Layout button on the bottom-right of the Storyboard and fill in the following values. Select Add 3 Constraints.
     

Drawing Shapes with Core Graphics Tutorial

Drawing Shapes with Core Graphics Tutorial-3-技术控-following,inspector,iPhone,included,selected
    The Storyboard will look like this.
     

Drawing Shapes with Core Graphics Tutorial

Drawing Shapes with Core Graphics Tutorial-4-技术控-following,inspector,iPhone,included,selected
    Select each button and go to the Attributes Inspector. In the View section give the button from left to right a tag of 0,1 and 2. The tag field is needed later on so we will know which button is pressed.
     

Drawing Shapes with Core Graphics Tutorial

Drawing Shapes with Core Graphics Tutorial-5-技术控-following,inspector,iPhone,included,selected
     Open The Assistant Editor and make sure the ViewController.swift file is visible. Ctrl And Drag from the "Lines" button to the ViewController class and create the following Action
     

Drawing Shapes with Core Graphics Tutorial

Drawing Shapes with Core Graphics Tutorial-6-技术控-following,inspector,iPhone,included,selected
    Select the other buttons and Ctrl and drag to the IBAction method inside the ViewController class. Pressing each button will execute the IBAction method.
   The drawing will take place inside a custom View. Add a New File to the project. Choose File -> New File -> iOS -> Cocoa Touch Class. Name the class ShapeView and make it a subclass of UIView.
     

Drawing Shapes with Core Graphics Tutorial

Drawing Shapes with Core Graphics Tutorial-7-技术控-following,inspector,iPhone,included,selected
     Go to the ShapeView.swift file and add the following property.
  1. var currentShapeType: Int = 0
复制代码
The currentShapeType property is used to choose the right method to draw the corresponding object. Next add the following init methods
  1. init(frame: CGRect, shape: Int) {
  2.     super.init(frame: frame)
  3.     self.currentShapeType = shape
  4. }
  5. required init?(coder aDecoder: NSCoder) {
  6.     fatalError("init(coder:) has not been implemented")
  7. }
复制代码
When the custom view is initialised, the tag field is given which determines the shape type. the drawRect method is where the custom drawing takes place.
  1. override func draw(_ rect: CGRect) {
  2.     switch currentShapeType {
  3.       case 0: drawLines()
  4.       case 1: drawRectangle()
  5.       case 2: drawCircle()
  6.       default: print("default")
  7.     }
  8. }
复制代码
Next, implement the drawing methods
  1. func drawLines() {
  2.     //1
  3.     guard let ctx = UIGraphicsGetCurrentContext() else { return }
  4.             
  5.     //2
  6.     ctx.beginPath()
  7.     ctx.move(to: CGPoint(x: 20.0, y: 20.0))
  8.     ctx.addLine(to: CGPoint(x: 250.0, y: 100.0))
  9.     ctx.addLine(to: CGPoint(x: 100.0, y: 200.0))
  10.     ctx.setLineWidth(5)
  11.             
  12.     //3
  13.     ctx.closePath()
  14.     ctx.strokePath()
  15. }
  16.         
  17. func drawRectangle() {
  18.     let center = CGPoint(x: self.frame.size.width / 2.0, y: self.frame.size.height / 2.0)
  19.     let rectangleWidth:CGFloat = 100.0
  20.     let rectangleHeight:CGFloat = 100.0
  21.             
  22.     guard let ctx = UIGraphicsGetCurrentContext() else { return }
  23.             
  24.     //4
  25.     ctx.addRect(CGRect(x: center.x - (0.5 * rectangleWidth), y: center.y - (0.5 * rectangleHeight), width: rectangleWidth, height: rectangleHeight))
  26.     ctx.setLineWidth(10)
  27.     ctx.setStrokeColor(UIColor.gray.cgColor)
  28.     ctx.strokePath()
  29.             
  30.     //5
  31.     ctx.setFillColor(UIColor.green.cgColor)
  32.             
  33.     ctx.addRect(CGRect(x: center.x - (0.5 * rectangleWidth), y: center.y - (0.5 * rectangleHeight), width: rectangleWidth, height: rectangleHeight))
  34.             
  35.     ctx.fillPath()
  36. }
  37.         
  38. func drawCircle() {
  39.     let center = CGPoint(x: self.frame.size.width / 2.0, y: self.frame.size.height / 2.0);
  40.             
  41.     guard let ctx = UIGraphicsGetCurrentContext() else { return }
  42.             ctx.beginPath()
  43.             
  44.     //6
  45.     ctx.setLineWidth(5)
  46.             
  47.     let x:CGFloat = center.x
  48.     let y:CGFloat = center.y
  49.     let radius: CGFloat = 100.0
  50.     let endAngle: CGFloat = CGFloat(2 * M_PI)
  51.             
  52.     ctx.addArc(center: CGPoint(x: x,y: y), radius: radius, startAngle: 0, endAngle: endAngle, clockwise: true)
  53.             
  54.     ctx.strokePath()
  55. }
复制代码
   
       
  • The Graphic Context is your graphic destination. If you want to draw on a view, the view is your Graphic Context. We need to get a reference  to the Graphics Context.   
  • A path is a set of lines, arcs and curves you can draw on the current graphic context to build complex objects. Here we draw some lines and set the line width to 5.   
  • The path is closed and drawn to the graphics context.   
  • With CGContextAddRect a rectangle is drawn. the outline stroke color is gray.   
  • Here the same rectangle is defined, with a fill color of green   
  • With CGContextAddArc a circle is drawn   
   Next, implement the buttonPressed method in the ViewController.swift file
   
  1. @IBAction func buttonPressed(_ sender: AnyObject) {
  2.     let myView = ShapeView(frame: CGRect(x: 25, y: 200, width: 280, height: 250), shape: sender.tag)
  3.     myView.backgroundColor = UIColor.cyan
  4.     view.addSubview(myView)
  5. }
复制代码
  Build and Runand click on each button to draw the different shapes.
     

Drawing Shapes with Core Graphics Tutorial

Drawing Shapes with Core Graphics Tutorial-8-技术控-following,inspector,iPhone,included,selected
     You can download the source code of the IOS10DrawShapesTutorial at the ioscreator repository on Github .
淡雅1 发表于 2016-10-31 14:20:54
回复不是我的目的!
回复 支持 反对

使用道具 举报

孤丝 发表于 2016-11-5 12:24:58
顶起年华离路
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表