How to reference BezierPath in a UIView - ios

I am trying to detect Taps inside BezierPaths in a UIView and have found many references to the containsPoint method. However I cannot seem to find how to actually reference the BezierPaths from my ViewController.
I have set up:
class func drawSA(frame targetFrame: CGRect = CGRect(x: 0, y: 0, width: 69, height: 107), resizing: ResizingBehavior = .aspectFit, SACountries: [String: ViewController.CountryStruct])
{
let myPath = UIBezierPath()
myPath.move(to: CGPoint(x: 32.24, y: 8.61))
myPath.addLine(to: CGPoint(x: 31.99, y: 8.29))
myPath.addLine(to: CGPoint(x: 31.78, y: 8.19))
myPath.close()
}
The Beziers are drawn in this function, called by:
override func draw(_ rect: CGRect)
In the main ViewController, I have the following function for detecting a Tap on the UIView:
#objc func SATap(sender: UITapGestureRecognizer)
{
let location = sender.location(in: self.SAView)
// how do I call containsPoint from here?
}
How do I call containsPoint from here?
The bezierPaths are drawn correctly at runtime.

As the Paths are created in a Class Function within a separate Class, I cannot save them to the View directly.
I solved this by putting the UIBezierPaths into a Dictionary and then return the Dictionary. An Array would work too, but this way I can access specific Paths easily.
class func drawSA(frame targetFrame: CGRect = CGRect(x: 0, y: 0, width: 71, height: 120), resizing: ResizingBehavior = .aspectFit, SACountries: [String: ViewController.CountryStruct]) -> ([String: UIBezierPath])
{
var Paths = [String: UIBezierPath]()
let myPath = UIBezierPath()
myPath.move(to: CGPoint(x: 32.24, y: 8.61))
myPath.addLine(to: CGPoint(x: 31.99, y: 8.29))
myPath.addLine(to: CGPoint(x: 31.78, y: 8.19))
myPath.close()
Paths["mP"] = myPath
let myPath2 = UIBezierPath()
myPath2.move(to: CGPoint(x: 32.24, y: 8.61))
myPath2.addLine(to: CGPoint(x: 31.99, y: 8.29))
myPath2.addLine(to: CGPoint(x: 31.78, y: 8.19))
myPath2.close()
Paths["mP2"] = myPath2
return Paths
}
I then used View.addLayer to create Layers in the View and added the Layer.name property to each Layer when creating them with a For In Loop on the Dictionary:
for path in Paths.keys.sorted()
{
self.layer.addSublayer(CreateLayer(path)) // The Function simply creates a CAShapeLayer
}
I then used the Dictionary in the Gesture Function:
#objc func ATap(sender: UITapGestureRecognizer)
{
let location = sender.location(in: self.SAView)
// You need to Scale Location if your CAShapeLayers are Scaled
for path in SAView.Paths
{
let value = path.value
value.contains(location)
if value.contains(location)
{
for (index, layer) in SAView.layer.sublayers!.enumerated()
{
if layer.name == path.key
{
// Do something when specific layer is Tapped
}
}
}
}
}
There may well be better ways of doing this, but it's all working and performs well.

Related

How to erase a custom shape ( not A rectangle ) in CGContext

I'm trying to achieve that effect like scratch lottery in iOS. The basic effect is achieved by using clear(_rect: CGRect), but how to erase a custom shape rather than a rectangle?
Here is my code
class ImageMaskView: UIView {
var image = UIImage(named: "maskL")
var line = [CGPoint ]()
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else {return}
image?.draw(at: CGPoint(x: 0, y: 300))
// erase
line.forEach { (position) in
// print(position)
let rect = CGRect(x: position.x,y:position.y,width:50,height:50)
context.clear(rect)
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let position = touches.first?.location(in: nil) else{return }
print(position)
line.append(position)
setNeedsDisplay()
}
}
Maybe I can build a custom function clear? Anyway, I would appreciate it if you can give me some advice
Have you tried UIBezierPath? You definitely can use UIBezierPath to build the custom shape. But I'm not 100% sure how to clear instead of draw this path in context. Try something like this:
let starPath: UIBezierPath = UIBezierPath()
starPath.move(to: CGPoint(x: 45.25, y: 0))
starPath.addLine(to: CGPoint(x: 61.13, y: 23))
starPath.addLine(to: CGPoint(x: 88.29, y: 30.75))
starPath.addLine(to: CGPoint(x: 70.95, y: 52.71))
starPath.addLine(to: CGPoint(x: 71.85, y: 80.5))
starPath.addLine(to: CGPoint(x: 45.25, y: 71.07))
starPath.addLine(to: CGPoint(x: 18.65, y: 80.5))
starPath.addLine(to: CGPoint(x: 19.55, y: 52.71))
starPath.addLine(to: CGPoint(x: 2.21, y: 0.75))
starPath.addLine(to: CGPoint(x: 29.37, y: 23))
starPath.close();
context.setBlendMode(.destinationOut)
context.setFillColor(UIColor.clear.cgColor)
starPath.fill()
Also, don't forget to set opaque of your view to false.

How to subtract the intersection of UIBezierPath A&B from A?

Suppose we have two UIBezierPaths, path1 and path2... (that have already been defined relative to view bounds at runtime and already exist as properties of the same view).
We want to get a new path of type UIBezierPath, path3, that is the result of subtracting path2 from path1:
The way this is done (as seen here) is to do this:
path1.append(path2.reversing())
BUT, that only seems to work for circumstances where path1 fully encompasses path2.
For example, consider the case where there is only a partial intersection -- path1 does not fully encompass path2. This is what happens if we apply the same method as above:
In Android, the answer is:
path1.op(path2, Path.Op.DIFFERENCE);
So... is there an equivalent simple operation in IOS?
If not, is there a function that could be written as:
func returnPath2CutOutOfPath1(path1: UIBezierPath, path2: UiBezierPath) -> UIBezierPath {
// the mystery lies within these here parts. :)
}
There is no direct way to get the differences of UIBezierPaths as a new path on iOS.
Testcase
private func path2() -> UIBezierPath {
return UIBezierPath(rect: CGRect(x: 100, y: 50, width: 200, height: 200))
}
private func path1() -> UIBezierPath {
return UIBezierPath(rect: CGRect(x: 50, y: 100, width: 200, height: 200))
}
Starting point: to simply show which path represents what: path 1 is yellow and path 2 is green:
Possiblity 1
You have probably already seen this possibility: In the link you mentioned in your question, there is also a clever solution if you only have to perform a fill operation.
The code was taken from this answer (from the link you posted) https://stackoverflow.com/a/8860341 - only converted to Swift:
func fillDifference(path2: UIBezierPath, path1: UIBezierPath) {
let clipPath = UIBezierPath.init(rect: .infinite)
clipPath.append(path2)
clipPath.usesEvenOddFillRule = true
UIGraphicsGetCurrentContext()?.saveGState()
clipPath.addClip()
path1.fill()
UIGraphicsGetCurrentContext()?.restoreGState()
}
So this fills a path, but does not return a UIBezierPath, which means that you cannot apply outlines, backgrounds, contour widths, etc., because the result is not a UIBezierPath.
It looks like this:
Possiblity 2
You can use a third-party library, e.g. one from an author named Adam Wulf here: https://github.com/adamwulf/ClippingBezier.
The library is written in Objective-C, but can be called from Swift.
In Swift, it would look like this:
override func draw(_ rect: CGRect) {
let result = self.path1().difference(with: self.path2())
for p in result ?? [] {
p.stroke()
}
}
If you want to use this library, you have to note a small hint: in Other Linker Flags in the project settings, as described by the readme, "-ObjC++ -lstdc++" must be added, otherwise it would be built without complaints, but would silently not load the frameworks and eventually crash, since the UIBEzierPath categories are not found.
The result looks like this:
So this would actually give your desired result, but you would have to use a 3rd party library.
I have achieved you desired solution, but I have created code for static view of size 200x200.
Let me show you what I have tried and tell me how useful for you.
First of all, I have create class of custom view where I have wrote code to draw view. See the following code:
class MyCustomView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
func setup() {
// Create a CAShapeLayer
let shapeLayer = CAShapeLayer()
let path1 = self.path1()
let path2 = self.path2()
// Append path2 to path1
path1.append(path2.reversing())
// Set true of Even Odd Fill Rule
path1.usesEvenOddFillRule = true
// Call this method to add clip in path
path1.addClip()
shapeLayer.path = path1.cgPath
// Apply other properties related to the path
shapeLayer.strokeColor = UIColor.blue.cgColor
shapeLayer.fillColor = UIColor.black.cgColor
shapeLayer.lineWidth = 1.0
shapeLayer.position = CGPoint(x: 0, y: 0)
// Add the new layer to our custom view
self.layer.addSublayer(shapeLayer)
}
//-----------------------------------------------------
// This is static code as I have already told you first.
// Create First UIBezierPath,
func path1() -> UIBezierPath {
let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 0, y: 200))
path.addLine(to: CGPoint(x: 200, y: 200))
path.addLine(to: CGPoint(x: 200, y: 0))
path.close()
return path
}
// Create Second UIBezierPath
func path2() -> UIBezierPath {
let path = UIBezierPath()
path.move(to: CGPoint(x: 50, y: -50))
path.addLine(to: CGPoint(x: 50, y: 150))
path.addLine(to: CGPoint(x: 250, y: 150))
path.addLine(to: CGPoint(x: 250, y: -50))
path.close()
return path
}
}
This custom class code will create share layer with your actual result as you have described in figure 4.
Now to use this class I have create instance of above class with fixed height & width.
override func viewDidLoad() {
super.viewDidLoad()
// Create a new UIView and add it to the view controller
let myView = MyCustomView()
// Must set clipsToBounds true to remove extra layer which are display out side of view as like your **actual** result in figure 4.
myView.clipsToBounds = true
myView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
myView.backgroundColor = UIColor.orange
view.addSubview(myView)
}
This will display view as follow which is your desired result.
I hope this will help you, let me know still if you have any query.

How to draw at the centre of a subview

I want to draw an arrow at the center of a SubView which is created by
{let arrowView = ArrowView()
arrowView.frame = CGRect(x: selectButton.frame.minX, y: selectButton.frame.maxY, width: selectButton.frame.width, height: processButton.frame.minY - selectButton.frame.maxY)
arrowView.backgroundColor = UIColor.white
arrowView.viewWithTag(100)
view.addSubview(arrowView)
} //these codes are in the view controller
To draw the arrow in the subview I use the
let arrowPath = UIBezierPath.bezierPathWithArrowFromPoint(startPoint: startPoint, endPoint: endPoint, tailWidth: 4, headWidth: 8, headLength: 6)
// the error occurs here
override func draw(_ rect: CGRect) {
let fillColor = UIColor.white
fillColor.setFill()
arrowPath.lineWidth = 1.0
let strokeColor = UIColor.blue
strokeColor.setStroke()
arrowPath.stroke()
arrowPath.fill()
//these codes are in the subclass of UIView
Since I want to draw the arrow at the center of the subview,
I define the startPoint and the endPoint as
private var startPoint: CGPoint {
return CGPoint(x: bounds.midX, y: bounds.minY)
}
private var endPoint: CGPoint {
return CGPoint(x: bounds.midX, y: bounds.maxY)
}
//try to find the point at the centre of Subview
However, this code does not compile and the error says:
Cannot use instance member 'startPoint' within property initializer; property initializers run before 'self' is available
Edit:
I would like to know how the get the bounds of a subview created by code.
I try the "bounds" variable but get the above error.
arrowPath.center = CGPoint(x:arrowView.frame.size.width/2, y: arrowView.frame.size.height/2)
arrowView.addSubview(arrowPath)

How to convert image view to custom shape (swift3)

I am trying to convert the a single imageview to output in the in the object on the right. This is a very similar question to How to make imageview with different shape in swift. However that was in swift2. I tried it and it does not seem to work in swift3.
Try like this:
extension UIImageView {
func addMask(_ bezierPath: UIBezierPath) {
let pathMask = CAShapeLayer()
pathMask.path = bezierPath.cgPath
layer.mask = pathMask
}
}
Testing playground:
let myPicture = UIImage(data: try! Data(contentsOf: URL(string:"http://i.stack.imgur.com/Xs4RX.jpg")!))!
let iv = UIImageView(image: myPicture)
let bezierPath = UIBezierPath()
bezierPath.move(to: iv.center)
bezierPath.addLine(to: CGPoint(x: iv.frame.maxX, y: 0))
bezierPath.addLine(to: CGPoint(x: iv.frame.maxX, y: iv.frame.maxY))
bezierPath.addLine(to: CGPoint(x: 0, y: iv.frame.maxY))
bezierPath.addLine(to: .zero)
bezierPath.close()
iv.addMask(bezierPath)

Create a Diagonal Custom UIView in Swift

I am working on designing custom UIimageview in swift. I want to create a UIimageview using beizerpath similar to this
The coding should be in swift.
Any help is appreciated. Thanks
Create a CAShapeLayer and supply it a path and a fillColor:
#IBDesignable
public class AngleView: UIView {
#IBInspectable public var fillColor: UIColor = .blue { didSet { setNeedsLayout() } }
var points: [CGPoint] = [
.zero,
CGPoint(x: 1, y: 0),
CGPoint(x: 1, y: 1),
CGPoint(x: 0, y: 0.5)
] { didSet { setNeedsLayout() } }
private lazy var shapeLayer: CAShapeLayer = {
let _shapeLayer = CAShapeLayer()
self.layer.insertSublayer(_shapeLayer, at: 0)
return _shapeLayer
}()
override public func layoutSubviews() {
shapeLayer.fillColor = fillColor.cgColor
guard points.count > 2 else {
shapeLayer.path = nil
return
}
let path = UIBezierPath()
path.move(to: convert(relativePoint: points[0]))
for point in points.dropFirst() {
path.addLine(to: convert(relativePoint: point))
}
path.close()
shapeLayer.path = path.cgPath
}
private func convert(relativePoint point: CGPoint) -> CGPoint {
return CGPoint(x: point.x * bounds.width + bounds.origin.x, y: point.y * bounds.height + bounds.origin.y)
}
}
Now, I made this designable (so if you put it in a separate framework target, you can add this view right in your storyboard and see it rendered there). It still works if you're not using storyboards. It just can be convenient to do so:
I also used relative coordinates (with values ranging from zero to one) and have a method to convert those to actual coordinates, but you can hard code your coordinates if you want. But using this as values from zero to one, you have an angular view that can participate in auto-layout without needing to worry about changing specific coordinate values.
Finally, minor things that might seem trivial, but I construct the path in layoutSubviews: That way, as the view changes size (whether via auto-layout or programmatic changes), the view will be correctly re-rendered. Likewise, by using didSet for fillColor and points, if you change either of those, the view will be re-rendered for you.
Feel free to change this as you see fit, but hopefully this illustrates the basic idea of just having a CAShapeLayer with a custom path.
If you use insertSublayer, you can then combine this with other subviews of the AngleView, e.g.:
I'm using something like this and it worked fine, you can add any thing you want to the view
import UIKit
class CustomView: UIView {
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
// Get Height and Width
let layerHeight = layer.frame.height
let layerWidth = layer.frame.width
// Create Path
let bezierPath = UIBezierPath()
// Points
let pointA = CGPoint(x: 0, y: 0)
let pointB = CGPoint(x: layerWidth, y: 0)
let pointC = CGPoint(x: layerWidth, y: layerHeight)
let pointD = CGPoint(x: 0, y: layerHeight*2/3)
// Draw the path
bezierPath.move(to: pointA)
bezierPath.addLine(to: pointB)
bezierPath.addLine(to: pointC)
bezierPath.addLine(to: pointD)
bezierPath.close()
// Mask to Path
let shapeLayer = CAShapeLayer()
shapeLayer.path = bezierPath.cgPath
layer.mask = shapeLayer
}
}

Resources