I want to crop my UIView to the semi-circle and that will support all iPhone devices. Here, we can't set height and width to fix. I am using a multiplier.
Here is some of the SO answer I checked.
How to crop the UIView as semi circle?
Draw a semi-circle button iOS
It's work but for the fix height and width not with multiplier and I am targeting universal devices.
Below is the image for semicircle UIView.
Thanks in advance.
I have just modified the circle code from this link code. The problem is in the original code it used the initial frame when again layoutSubviews method called at that time semiCirleLayer == nil this condition is prevented from the update bezier path.
class SemiCirleView: UIView {
var semiCirleLayer: CAShapeLayer = CAShapeLayer()
override func layoutSubviews() {
super.layoutSubviews()
let arcCenter = CGPoint(x: bounds.size.width / 2, y: bounds.size.height)
let circleRadius = bounds.size.width / 2
let circlePath = UIBezierPath(arcCenter: arcCenter, radius: circleRadius, startAngle: CGFloat.pi, endAngle: CGFloat.pi * 2, clockwise: true)
semiCirleLayer.path = circlePath.cgPath
semiCirleLayer.fillColor = UIColor.red.cgColor
semiCirleLayer.name = "RedCircleLayer"
if !(layer.sublayers?.contains(where: {$0.name == "RedCircleLayer"}) ?? false) {
layer.addSublayer(semiCirleLayer)
}
// Make the view color transparent
backgroundColor = UIColor.clear
}
}
Related
I am creating a simple timer app and want to resize the timer circle to the size of the view with the rounded corners. The timer path is added within the background views class.
On my iPhone XS Max, it looks like this:
But, on the iPhone SE simulator, it looks like this:
How can I ensure the timer circles resize correctly?
This is my code for the sizing of the circle paths:
private func addTimerCircle() {
let translateAmount = -(CGFloat.pi/2)
let circlePath = UIBezierPath(arcCenter: CGPoint.zero, radius: (self.frame.width - 64)/2, startAngle: translateAmount, endAngle: (2*CGFloat.pi)+translateAmount, clockwise: true)
addTrackLayer(withPath: circlePath)
}
private func addTrackLayer(withPath circlePath: UIBezierPath) {
let trackLayer = CAShapeLayer()
trackLayer.path = circlePath.cgPath
trackLayer.strokeColor = UIColor.red.withAlphaComponent(0.5).cgColor
trackLayer.lineWidth = 10
trackLayer.position = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2)
trackLayer.fillColor = UIColor.clear.cgColor
layer.addSublayer(trackLayer)
}
Why does the circlePath not resize based on frame.width on the different screen sizes?
Thanks for any help!
View controller views are loaded with the size they have in Interface Builder, and once they are added to the hierarchy the view is resized to the actual size.
I'm guessing you're calling addTimerCircle() on viewDidLoad(), which happens before the final sizing is applied.
You could override viewDidLayoutSubviews(), which will be called when the view size changes, and add/update the shape there, but my suggestion would be to subclass UIView, add the shape layer as a property, and update it's frame on layoutSubviews.
I'm working with 2 UIBezierPath to create a rectangle and a semicircle shape. It works fine but I am not able to fill the intersection with color.
That's my drawCircle and my addPaths functions:
private func drawCircle(selectedPosition: SelectionRangePosition, currentMonth: Bool) {
circleView.layer.sublayers = nil
let radius = contentView.bounds.height/2
let arcCenter = CGPoint(x: ceil(contentView.bounds.width/2), y: ceil(contentView.bounds.height/2))
let circlePath = UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: .pi/2, endAngle: .pi * 3/2, clockwise: selectedPosition == .left)
let semiCircleLayerPath = UIBezierPath()
let semiCircleLayer = CAShapeLayer()
semiCircleLayer.fillColor = UIColor.tealish.cgColor
circleView.layer.addSublayer(semiCircleLayer)
switch (selectedPosition, currentMonth) {
case (.left, true):
let rectanglePath = UIBezierPath(rect: CGRect(x: contentView.bounds.width / 2, y: 0, width: ceil(contentView.bounds.width / 2), height: contentView.bounds.height))
addPaths(semiCircleLayerPath, rectanglePath, circlePath, semiCircleLayer)
case (.middle, true):
backgroundColor = .tealish
case (.right, true):
// Note: The + 10 is just to overlap the shapes and test if the filling works
let rectanglePath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: ceil(contentView.bounds.width / 2) + 10, height: contentView.bounds.height))
addPaths(semiCircleLayerPath, rectanglePath, circlePath, semiCircleLayer)
default:
backgroundColor = .clear
}
}
private func addPaths(_ semiCircleLayerPath: UIBezierPath, _ rectanglePath: UIBezierPath, _ circlePath: UIBezierPath, _ semiCircleLayer: CAShapeLayer) {
semiCircleLayerPath.append(circlePath)
semiCircleLayerPath.append(rectanglePath)
semiCircleLayer.path = semiCircleLayerPath.cgPath
}
The problem is that the semicircle path and the rectangle path are being added in opposite directions. This is a function of the way the Cocoa API adds them, unfortunately; in your case, it means that the intersection has a "wrap count" of 0.
Fortunately, there is an easy fix: create separate paths for the semicircle and the rectangle. When fill them both individually, you should get your desired result.
Unfortunately, this will mean that you can't use layer drawing only: you will want to use the drawRect method to draw the background.
If your dates are separate UILabels, you can skip this rendering & path filling problem entirely by dropping a UIView as a child of the calendar, under the labels holding the dates; give it a background color & rounded corners (using layer.cornerRadius as usual). That'll take care of your rounded rect for you.
I want to create a smooth progress bar for a to-do list. I used a circle (CGMutablePath) that masks the gray area and there's an obvious arc-like artifact. Not only that but there's also an artifact on the right side of the bar.
Note: I tried to rasterize the layers to no avail.
What causes iOS to do this and how can I smooth this out or get rid of it?
private var circleMask: CAShapeLayer = CAShapeLayer()
override func layoutSubviews() {
super.layoutSubviews()
backgroundColor = GradientColor(.leftToRight, frame: self.bounds, colors: GradientFlatRed())
layer.cornerRadius = bounds.height / 2
plainProgressBar.layer.cornerRadius = layer.cornerRadius
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale
plainProgressBar.layer.shouldRasterize = true
plainProgressBar.layer.rasterizationScale = UIScreen.main.scale
createMask()
}
private func createMask() {
let path = CGMutablePath()
path.addArc(center: CGPoint(x: bounds.origin.x+25/2, y: bounds.origin.y+25/2), radius: 25/2, startAngle: 0, endAngle: CGFloat(Double.pi*2), clockwise: false)
path.addRect(bounds)
circleMask.path = path
circleMask.backgroundColor = plainMeterColor.cgColor
circleMask.fillRule = kCAFillRuleEvenOdd
plainProgressBar.layer.mask = circleMask
}
The issue is clearly an error in composition of the antialiased edges.
Knee-jerk question: do you have an atypical blend mode set?
Easiest solution: don't use path.addArc and path.addRect to generate two completely distinct shapes. Just use one of the init(roundedRect:... methods and set a corner radius of half your height, stretching the total path beyond the available space to the left to create a hard edge.
Or, if that doesn't appear, construct the path manually as a move, addLine(to:, addArc of only half a circle, then a final addLine(to: and a close. E.g. (thoroughly untested, especially re: start and end angles and clockwise versus anticlockwise versus iOS's upside-down coordinate system)
private func createMask() {
let path = CGMutablePath()
path.move(to: CGPoint(x: 0, y:0))
path.addLine(to: CGPoint(x: bounds.origin.x+25/2, y: 0))
path.addArc(center: CGPoint(x: bounds.origin.x+25/2, y: bounds.origin.y+25/2), radius: 25/2, startAngle: CGFloat(Double.pi/2.0), endAngle: CGFloat(Double.pi*3.0/2.0), clockwise: false)
path.addLine(to: CGPoint(x: 0, y: 25))
path.close()
...
I would like to add a path in an UIView and i am doing like this :
let Circle = UIBezierPath(arcCenter: CGPoint(x: InterfaceView.bounds.size.width/2, y: InterfaceView.bounds.size.height/2), radius: 10, startAngle: 0, endAngle: CGFloat(M_PI*2), clockwise: true)
let Layer = CAShapeLayer()
Layer.path = Circle.CGPath
Layer.strokeColor = UIColor.redColor().CGColor
Layer.lineWidth = 1.0
InterfaceView.layer.addSublayer(Layer)
That's work on iPhone 6 and 6S but when the screen is tiny or bigger, the circle doesn't have a good position :
iPhone 6S :
iPhone 5S :
Maybe an idea why ?
Thanks
You probably draw the path at a moment where the autolayout constraints didn't kick in yet, so the drawing is made relative to the design-time view frame.
Two possible solutions:
1) Draw the circle in a subview that is centered in the full view with autolayout constraints and always has the same size.
2) Redraw your path on any size change in viewDidLayoutSubviews.
Probably you should use center parameter. I test this on different screen sizes and circle is directly on the middle of screen.
let Circle = UIBezierPath(arcCenter: self.view.center, radius: 10, startAngle: 0, endAngle: CGFloat(M_PI*2), clockwise: true)
let Layer = CAShapeLayer()
Layer.path = Circle.CGPath
Layer.strokeColor = UIColor.redColor().CGColor
Layer.lineWidth = 1.0
self.view.layer.addSublayer(Layer)
I'm trying to add an animation to my UIBezierPath, but I want to keep the hard edges my current fillPath is creating, here's a screenshot of what the result should look like:
I did manage to get one animation working correctly using a slightly modified version of this code:
// create an object that represents how the curve
// should be presented on the screen
let progressLine = CAShapeLayer()
progressLine.path = ovalPath.CGPath
progressLine.strokeColor = UIColor.blueColor().CGColor
progressLine.fillColor = UIColor.clearColor().CGColor
progressLine.lineWidth = 10.0
progressLine.lineCap = kCALineCapRound
// add the curve to the screen
self.view.layer.addSublayer(progressLine)
// create a basic animation that animates the value 'strokeEnd'
// from 0.0 to 1.0 over 3.0 seconds
let animateStrokeEnd = CABasicAnimation(keyPath: "strokeEnd")
animateStrokeEnd.duration = 3.0
animateStrokeEnd.fromValue = 0.0
animateStrokeEnd.toValue = 1.0
// add the animation
progressLine.addAnimation(animateStrokeEnd, forKey: "animate stroke end animation")
The above code is from: http://mathewsanders.com/animations-in-swift-part-two/
It did work, but the stroke it created was rounded.
The only examples/tutorials and other questions I could find on this matter, was using CAShapes. I'm currently not using CAShapes or layers. (I don't know if that's needed to make an animation work with this, but I figure I'd ask)
Here's my current code (without any animation). To draw my little circle chart.
class CircleChart: UIView {
var percentFill: Float = 99.00 {
didSet {
// Double check that it's less or equal to 100 %
if percentFill <= maxPercent {
//the view needs to be refreshed
setNeedsDisplay()
}
}
}
var fillColor: UIColor = UIColor.formulaBlueColor()
var chartColor: UIColor = UIColor.formulaLightGrayColor()
override func drawRect(rect: CGRect) {
// Define the center.
let center = CGPoint(x:bounds.width/2, y: bounds.height/2)
// Define the radius
let radius: CGFloat = max(bounds.width, bounds.height)
// Define the width of the circle
let arcWidth: CGFloat = 10
// Define starting and ending angles (currently unused)
let startAngle: CGFloat = degreesToRadians(-90)
let endAngle: CGFloat = degreesToRadians(270)
// 5
var path = UIBezierPath(arcCenter: center,
radius: bounds.width/2 - arcWidth/2,
startAngle: startAngle,
endAngle: endAngle,
clockwise: true)
// 6
path.lineWidth = arcWidth
chartColor.setStroke()
path.stroke()
//Draw the fill-part
//calculate the arc for each per percent
let arcLengthPerPercent = degreesToRadians(360/100)
//then multiply out by the actual percent
let fillEndAngle = arcLengthPerPercent * CGFloat(percentFill) + startAngle
//2 - draw the outer arc
var fillPath = UIBezierPath(arcCenter: center,
radius: bounds.width/2 - arcWidth/2,
startAngle: startAngle,
endAngle: fillEndAngle,
clockwise: true)
//3 - draw the inner arc
fillPath.addArcWithCenter(center,
radius: bounds.width/2 - arcWidth/2,
startAngle: fillEndAngle,
endAngle: startAngle,
clockwise: false)
//4 - close the path
fillPath.closePath()
fillColor.setStroke()
fillPath.lineWidth = arcWidth
fillPath.stroke()
}
}
What would be the best way to animate the fillPath? Or do I need to redo everything in CAShapes and layers, to make it work?
Any help would be greatly appreciated.
If you want it square, why are you using progressLine.lineCap = kCALineCapRound? Just delete that line, and you'll get the default butt end (kCALineCapButt).