How to draw an arrow inside a disk?

991 views Asked by At

I would like to draw an arrow inside a plain disk. Or more precisely, I would like to remove the shape of an arrow from a disk (we could see through the disk where the arrow is drawn), like this one:

enter image description here

How can I achieve this?

UPDATE:

So far I have drawn a disk and an arrow using the following code:

// Disk
var ovalPath = UIBezierPath(ovalInRect: CGRectMake(95, 62, 23, 23))
color2.setFill()
ovalPath.fill()


// Arrow
var bezierPath = UIBezierPath()
bezierPath.moveToPoint(CGPointMake(95.5, 75.5))
bezierPath.addLineToPoint(CGPointMake(106.5, 65.5))
bezierPath.addLineToPoint(CGPointMake(117.5, 75.5))
color3.setStroke()
bezierPath.lineWidth = 1
bezierPath.stroke()

But it's not what I'm looking for as the arrow is on top of the disk, so obviously I cannot see what's behind the disk.

2

There are 2 answers

7
duan On BEST ANSWER

I think there is no need to draw such complicated shape with code, you can use .png assets to replace.

But if you still want to draw it. Here is what I did with CALayer in Xcode6.3 Playground

import UIKit
import XCPlayground

let sequence = [
CGPointMake(56, 22),
CGPointMake(104, 78),
CGPointMake(99, 82),
CGPointMake(57, 30),
CGPointMake(16, 82),
CGPointMake(11, 78)
]


let diskLayer = CAShapeLayer()
var ovalPath = UIBezierPath(rect: CGRectMake(0, 0, 120, 120))
diskLayer.path = ovalPath.CGPath
diskLayer.fillColor = UIColor.redColor().CGColor

let arrowLayer = CAShapeLayer()
let arrowPath = CGPathCreateMutable()
CGPathMoveToPoint(arrowPath, nil, 11,78)
CGPathAddLines(arrowPath, nil, sequence, 6)
CGPathAddEllipseInRect(arrowPath, nil, CGRectMake(0, 0, 120, 120))


arrowLayer.path = arrowPath
arrowLayer.fillRule = kCAFillRuleEvenOdd
diskLayer.mask = arrowLayer


var view = UIView(frame: CGRectMake(0, 0, 120, 120))
view.layer.addSublayer(diskLayer)


XCPShowView("sample view", view)

enter image description here

Use mask, you would get the transparent arrow.

Try it yourself~

0
Shripada On

You need to fill your arrow with blending. Try this for your arrow drawing-

// Arrow
var bezierPath = UIBezierPath()
bezierPath.moveToPoint(CGPointMake(95.5, 75.5))
bezierPath.addLineToPoint(CGPointMake(106.5, 65.5))
bezierPath.addLineToPoint(CGPointMake(117.5, 75.5))
UIColor.whiteColor().setFill()
bezierPath.fillWithBlendMode(kCGBlendModeSourceIn, alpha:1)