Currently I am having a small issue. The code below will output an triangle shaped layer on top of my tableViewHeader but I want to reverse the cut direction of the bazier path.
Code:
let cutDirection = UIBezierPath()
cutDirection.move(to: CGPoint(x: 0, y: 0))
cutDirection.addLine(to: CGPoint(x: headerRect.width, y: 0))
cutDirection.addLine(to: CGPoint(x: headerRect.width, y: headerRect.height))
cutDirection.addLine(to: CGPoint(x: 0, y: headerRect.height - headerCut))
newHeaderLayer.path = cutDirection.cgPath
Outputs:
Result I am looking for:
Thanks for any help!
Kevin.
Try this:
let cutDirection = UIBezierPath()
cutDirection.move(to: CGPoint(x: 0, y: 0))
cutDirection.addLine(to: CGPoint(x: headerRect.width, y: 0))
cutDirection.addLine(to: CGPoint(x: headerRect.width, y: headerRect.height - headerCut))
cutDirection.addLine(to: CGPoint(x: 0, y: headerRect.height))
newHeaderLayer.path = cutDirection.cgPath
If I follow this correctly you should swap the following:
cutDirection.addLine(to: CGPoint(x: headerRect.width, y: headerRect.height))
cutDirection.addLine(to: CGPoint(x: 0, y: headerRect.height - headerCut))
To:
cutDirection.addLine(to: CGPoint(x: 0, y: headerRect.height - headerCut))
cutDirection.addLine(to: CGPoint(x: headerRect.width, y: headerRect.height))
Fixed it by doing it the old school way: On Paper!
Solution:
let cutDirection = UIBezierPath()
cutDirection.move(to: CGPoint(x: 0, y: 0))
cutDirection.addLine(to: CGPoint(x: headerRect.width, y: 0))
cutDirection.addLine(to: CGPoint(x: headerRect.width, y: headerRect.height - headerCut))
cutDirection.addLine(to: CGPoint(x: 0, y: headerRect.height))
cutDirection.close()
newHeaderLayer.path = cutDirection.cgPath
Related
Wave curved (upside) tabbar behind the center raised button. İ have created a customised class for tabbar by using reference of "https://medium.com/#philipp307/draw-a-custom-ios-tabbar-shape-27d298a7f4fa" But actually İ need to create a Wave Curved in the center of tab bar. İ have tried to play around with Bézier curve but not getting an exact behind the central button. I don't need a dip of it. İ need it behind (upside wave) my custom code and images attached.
func createPath() -> CGPath {
let height: CGFloat = 37.0
let path = UIBezierPath()
let centerWidth = self.frame.width / 2
path.move(to: CGPoint(x: 0, y: 0)) // start top left
path.addLine(to: CGPoint(x: (centerWidth - height * 2), y: 0)) // the beginning of the trough
// first curve down
path.addCurve(to: CGPoint(x: centerWidth, y: height),
controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 35, y: height))
// second curve up
path.addCurve(to: CGPoint(x: (centerWidth + height * 2), y: 0),
controlPoint1: CGPoint(x: centerWidth + 35, y: height), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))
// complete the rect
path.addLine(to: CGPoint(x: self.frame.width, y: 0))
path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
path.addLine(to: CGPoint(x: 0, y: self.frame.height))
path.close()
return path.cgPath
}
tabbar design
how to create this 2D look
How to I create this.
Thanks a lot.
Try this
class TwoDView : UIView {
public var xDiff : CGFloat = 5.0
public var yDiff : CGFloat = 5.0
override func draw(_ rect: CGRect) {
let ctx = UIGraphicsGetCurrentContext()
ctx?.move(to: CGPoint(x: 0, y: rect.height - yDiff))
ctx?.addLines(between: [
CGPoint(x: rect.width - xDiff, y: rect.height - yDiff),
CGPoint(x: rect.width, y: rect.height),
CGPoint(x: xDiff, y: rect.height),
CGPoint(x: 0, y: rect.height - yDiff)
])
ctx?.setFillColor(UIColor.black.cgColor)
ctx?.fillPath()
ctx?.move(to: CGPoint(x: rect.width - xDiff, y: 0))
ctx?.addLines(between: [
CGPoint(x: rect.width, y: yDiff),
CGPoint(x: rect.width, y: rect.height),
CGPoint(x: rect.width - xDiff, y: rect.height - yDiff),
CGPoint(x: rect.width - xDiff, y: 0)
])
ctx?.setFillColor(UIColor.gray.cgColor)
ctx?.fillPath()
UIImage(named: "Image")?.draw(in: CGRect(x: 0, y: 0, width: rect.width - xDiff, height: rect.height - yDiff))
}
}
i have a problem while drawing curve:
strokePath = UIBezierPath()
strokePath.move(to: CGPoint(x:curveWidth / 2.0 - headerWidth, y: headerHeight))
strokePath.addLine(to: CGPoint(x: 0, y: headerHeight))
strokePath.addCurve(to: CGPoint(x: curveRadius, y: headerHeight - curveRadius),
controlPoint1: CGPoint(x: degree, y: headerHeight),
controlPoint2: CGPoint(x: curveRadius, y: headerHeight - curveRadius))
strokePath.addLine(to: CGPoint(x: curveWidth - curveRadius, y: curveRadius))
strokePath.addCurve(to: CGPoint(x: curveWidth, y: 0),
controlPoint1: CGPoint(x: curveWidth - curveRadius + curveRadius * 0.25, y: 0),
controlPoint2: CGPoint(x: curveWidth, y: 0))
strokePath.addLine(to: CGPoint(x: self.frame.size.width, y: 0.0))
strokeLayer.path = strokePath.cgPath
strokeLayer.strokeColor = uiConfig.color.misc.tabGrayBorder.cgColor
strokeLayer.fillColor = UIColor.clear.cgColor
strokeLayer.lineWidth = 0.5
self.layer.addSublayer(strokeLayer)
and i have unexpectable result:
curve is bold than the line, have somebody idea why it happened and how it fixing?
sorry, its my mistake after review many lines of code i find active "Clip to bounds" property of one of my parent view
Here's what I want to do:
with help UIBezierPath i want draw mask like on this link
// Create an image context containing the original UIImage.
let maskWithHole = CAShapeLayer()
let biggerRect = CGRect(x: 0, y: 0, width: withSize.width, height: withSize.height)
let maskPath = UIBezierPath() //UIBezierPath(roundedRect: toRectArray.first!, cornerRadius: 40)
maskPath.move(to: CGPoint(x: biggerRect.minX, y: biggerRect.minY))
maskPath.addLine(to: CGPoint(x: biggerRect.minX, y: biggerRect.maxY))
maskPath.addLine(to: CGPoint(x: biggerRect.maxX, y: biggerRect.maxY))
maskPath.addLine(to: CGPoint(x: biggerRect.maxX, y: biggerRect.minY))
maskPath.addLine(to: CGPoint(x: biggerRect.minX, y: biggerRect.minY))
let smallerRect = CGRect(x: 10, y: 10, width: withSize.width - 10, height: withSize.height - 10)
maskPath.move(to: CGPoint(x: smallerRect.minX, y: smallerRect.minY))
maskPath.addLine(to: CGPoint(x: smallerRect.minX, y: smallerRect.maxY))
maskPath.addLine(to: CGPoint(x: smallerRect.maxX, y: smallerRect.maxY))
maskPath.addLine(to: CGPoint(x: smallerRect.maxX, y: smallerRect.minY))
maskPath.addLine(to: CGPoint(x: smallerRect.minX, y: smallerRect.minY))
maskWithHole.path = maskPath.cgPath
maskWithHole.fillRule = kCAFillRuleEvenOdd
maskWithHole.fillColor = UIColor.orange.cgColor
maskWithHole.opacity = 1.0
it's work i cut inside content of image but want round rect inside when cut like link image.
I have an application with some buttons. I want to create a arc shape button like the following image
How can I do it? I use the following code to achieve this.
button.layer.cornerRadius = button.bounds.size.height
and
button.layer.cornerRadius = 0.5*button.bounds.size.height
I also tried this with the using of width
button.layer.cornerRadius = button.bounds.size.width
and
button.layer.cornerRadius = 0.5*button.bounds.size.width
How can I do it? Please someone help me to solve this.
To create arc shape you need to use UIBezierPath
please read apple's UIBezierPath_class Document.
They have mention method for create arc shape.
Creates and returns a new UIBezierPath object initialized with an arc of a circle.
For constructing the path
Appends an arc to the receiver’s path.
You can also Refer Core Graphics Tutorial Part 1 With Example and search with arc keyword on browser you will redirect to arc shape on the page.
Another image posted by #Jack in above comments and asked help, here is the image:
I couldn't answer him as comment, so pasting my playground here instead.
let shapeView = UIView(frame: CGRect(x: 0, y: 0, width: 360, height: 60))
let shapeSize = shapeView.frame.size
shapeView.backgroundColor = UIColor.white
let path = CGMutablePath()
path.move(to: CGPoint.zero)
let curveWidthOneFourth = shapeSize.width / 4
let curveHeight = shapeSize.height * 0.2
path.addCurve(to: CGPoint(x: curveWidthOneFourth * 2, y: curveHeight), control1: .zero, control2: CGPoint(x: curveWidthOneFourth, y: curveHeight))
path.addCurve(to: CGPoint(x: shapeSize.width, y: 0), control1: CGPoint(x: curveWidthOneFourth * 3, y: curveHeight), control2: CGPoint(x: shapeSize.width, y: 0))
path.addLine(to: CGPoint(x: shapeSize.width, y: shapeSize.height))
path.addLine(to: CGPoint(x: 0, y: shapeSize.height))
path.addLine(to: CGPoint.zero)
And add our path to a view's layer:
let layer = CAShapeLayer()
layer.path = path
layer.fillColor = UIColor.red.cgColor
shapeView.layer.addSublayer(layer)
Encountered a similar task today, I used CGMutableShape instead of UIBezierPath because I was required to animation the shape.
Anyways, to understand the shape I divided the shape into 6 parts (lines & curves):
Base UIView to draw our shape in
let shapeView = UIView(frame: CGRect(x: 16, y: 16, width: 100, height: 44))
shapeView.backgroundColor = UIColor.lightGray
self.view.addSubview(shapeView)
Actual shape and its path
let path = CGMutablePath()
path.move(to: CGPoint(x: 10, y: 0)) // Move path to beginning of part-1
// Draw above divided parts
path.addLine(to: CGPoint(x: 90, y: 0)) // Part-1
path.addCurve(to: CGPoint(x: 95, y: 22), control1: CGPoint(x: 93, y: 6.6), control2: CGPoint(x: 95, y: 14)) // Part-2
path.addCurve(to: CGPoint(x: 90, y: 44), control1: CGPoint(x: 95, y: 30), control2: CGPoint(x: 93, y: 37)) // Part-3
path.addLine(to: CGPoint(x: 10, y: 44)) // Part-4
path.addCurve(to: CGPoint(x: 5, y: 22), control1: CGPoint(x: 7, y: 37), control2: CGPoint(x: 5, y: 30)) // Part-5
path.addCurve(to: CGPoint(x: 10, y: 0), control1: CGPoint(x: 5, y: 14), control2: CGPoint(x: 6, y: 6.6)) // Part-6
let arcLayer = CAShapeLayer()
arcLayer.path = path
arcLayer.fillColor = UIColor.gray.cgColor
shapeView.layer.insertSublayer(arcLayer, at: 0)