-Make a hollow scanner through the Uibezierpath

Today in the company's code to see by UIBezierPath drawing Calayer and then realize the hollow square, it is very interesting, simple record UIBezierPath this thing.

A line

We customize a bezierview to inherit from UIView, and override it to drawRect implement the drawing operation.

UIView {    override func drawRect(rect: CGRect) {        super.drawRect(rect);        var myBezier = UIBezierPath()        myBezier.moveToPoint(CGPoint(x: 100, y: 100)) myBezier.addLineToPoint(CGPoint(x: 200, y: 100)) UIColor.orangeColor().setStroke() myBezier.stroke() }}

Two lines

That is moveToPoint , first and then once again addLineToPoint :

Import Uikitclass Bezierview:UIView {override func DrawRect (rect:CGRect) {Super. DrawRect (Rect); var mybezier = Uibezierpath () mybezier. moveToPoint (cgpoint (x: y: +) ) Mybezier. Addlinetopoint (cgpoint (x: $ , y: 100) ) Mybezier. moveToPoint (cgpoint (x: y: $ )) Mybezier. Addlinetopoint (cgpoint (x:   uicolor. Orangecolor (). Setstroke () Mybezier. Stroke ()}}   

a circle

We can draw an arc by using the following method:

var bezier1 = UIBezierPath()bezier1.addArcWithCenter(CGPointMake(100, 300), radius: 50, startAngle: 0, endAngle: 1.0, clockwise: true)bezier1.stroke()

Where the startAngle positive direction of the x-axis is the starting point, it clockwise is used to mark whether it is in a clockwise direction.

Add a Box

strokeis the draw line, fill is filled. So the solid circle can be painted like this:

UIColor.redColor().setFill()UIColor.greenColor().setStroke()var bezier2 = UIBezierPath()bezier2.addArcWithCenter(CGPointMake(100, 300), radius: 50, startAngle: 0, endAngle: 20, clockwise: true)bezier2.lineWidth = 10bezier2.stroke()bezier2.fill()

Hollow Circle

Actually saw Uibezierpath is because of the company's project with this realization of a transparent square in the middle of the black mask, used in the QR code scan. Next, try making a black mask, then a transparent square in the middle.

First look at mask the usage:

import UIKitclass ViewController: UIViewController {    override func viewDidLoad() { super.viewDidLoad() var path = UIBezierPath() path.addArcWithCenter(view.center, radius: 100, startAngle: 0, endAngle: CGFloat(M_PI), clockwise: true) path.closePath() var mask = CAShapeLayer() mask.path = path.CGPath view.layer.mask = mask }}

Next we can simply achieve the following hollow effect:

Import UIKitClassViewcontroller:Uiviewcontroller {Override FuncViewdidload() {super.viewdidload ()let ImageView = Uiimageview (Image:uiimage (named:  "Avatar")) Imageview.center = View.center View.addsubview (imageView) let Masklayer = CALayer () Masklayer.frame = View.frame Masklayer.backgroundcolor = Uicolor.blackcolor (). Cgcolor masklayer.opacity = 0.6 View.layer.addSublayer (Masklayer) let rectsize = cgfloat (100) let Shapelayer = Cashapelayer () shapelayer.frame = View.layer.frame var path = Uibezierpath (rect : CGRectMake ((view.frame.width-rectsize)/2, (view.frame.height-rectsize)/2, Rectsize, Rectsize)" Path.appendpath (Uibezierpath (rect:view.layer.frame)) Shapelayer.path = path. Cgpath Shapelayer.fillrule = kcafillruleevenodd masklayer.mask = shapelayer}}       

A simple record fillRule , it has two kinds of values:

• Kcafillrulenonzero, non-zero. According to this rule, to determine whether a point in the graph, from the point of a ray in any direction, and then detect the ray and graphics path intersection. Counting from 0 onwards, the path passes from left to right through the ray and the count is 1, and the right-to-left pass through the ray counts minus 1. After the result of the count, if the result is 0, the point is considered to be outside the graph, otherwise it is considered internal.

• Kcafillruleevenodd, odd and even. According to this rule, to determine whether a point is within the graph, a ray from that point in any direction, and then detect the number of points of intersection of the Ray and the graphics path. If the result is odd then the point is considered to be inside, and the even number is considered to be the point outside.

-Make a hollow scanner through the Uibezierpath