I am working on a timeline view. I am drawing a line in the centre of my icon and drawing a circle with fill colour. But the problem is that when I draw the circle, it is always on the top of the icon. Now the icon is not showing. I tried zposition of the layers. Here is what I tried
override func draw(_ rect: CGRect) {
if let anchor = anchorView(){
let centreRelativeToTableView = anchor.superview!.convert(anchor.center, to: self)
// print("Anchor x origin : \(anchor.frame.size.origin.x)")
timelinePoint.position = CGPoint(x: centreRelativeToTableView.x , y: centreRelativeToTableView.y/2)
timeline.start = CGPoint(x: centreRelativeToTableView.x , y: 0)
timeline.middle = CGPoint(x: timeline.start.x, y: anchor.frame.origin.y)
timeline.end = CGPoint(x: timeline.start.x, y: self.bounds.size.height)
timeline.draw(view: self.contentView)
let circlePath = UIBezierPath(arcCenter: CGPoint(x: anchor.center.x,y: anchor.center.y - 20), radius: CGFloat(20), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.cgPath
//change the fill color
shapeLayer.fillColor = UIColor.randomFlat.cgColor
// shapeLayer.fillColor = UIColor.clear.cgColor
//you can change the stroke color
shapeLayer.strokeColor = UIColor.white.cgColor
//you can change the line width
shapeLayer.lineWidth = 5
shapeLayer.zPosition = 0
anchor.alpha = 1
//Set Anchor Z position
anchor.layer.zPosition = 2
shapeLayer.zPosition = 1
anchor.layer.addSublayer(shapeLayer)
// Setting icon to layer
/*let imageLayer = CALayer()
imageLayer.contents = newImage
anchor.layer.addSublayer(imageLayer)*/
// timelinePoint.draw(view: self.contentView)
}else{
print("this should not happen")
}
}
-------
I want to draw my icon with white tint on top of the circle. Please help me
Using addSublayer will add the new layer on top, which will cover everything else added before.
If you know which layer your icon is at, you can instead use insertSublayer(at:) to place it under your icon
Alternatively you can create another UIView with the exact frame of the icon in storyboard and place it lower in the hierarchy so whatever your draw ends up under.
Related
I've to create triangle with some border that fit's into another view. But the problem is, Once I set stroke then the Triangle is bigger than the container. So, I decided to calculate the inner triangle size
After applied border we'll have two triangle like Homothetic Transformation. I just want to calculate the size of the small triangle. So, the border will be fit into the container.
I tried to set it up, but I can't get it done for triangle. Because of the inner triangle center is not in the container center.
Please note that this is first try with equilateral Triangle.
Originally I want solve with same solution with any shape of Polygons.
I attached full demo xcode project at here.
Please help me to solve this problem. Thank you...
ShapeView.swift
import UIKit
class ShapeView: UIView {
var path: CGPath? {
didSet{
setNeedsDisplay(bounds)
}
}
var cornerRadius: CGFloat = .zero
var borderWidth: CGFloat{
set{
shapeLayer.lineWidth = newValue
makeTriangle()
}
get{
return shapeLayer.lineWidth
}
}
var borderColor: UIColor{
set{
shapeLayer.strokeColor = newValue.cgColor
}
get{
return UIColor(cgColor: shapeLayer.strokeColor ?? UIColor.clear.cgColor)
}
}
var background: UIColor{
set{
shapeLayer.fillColor = newValue.cgColor
setNeedsDisplay(bounds)
}
get{
return UIColor(cgColor: shapeLayer.fillColor ?? UIColor.clear.cgColor)
}
}
private lazy var shapeLayer: CAShapeLayer = {
let shapeLayer = CAShapeLayer()
shapeLayer.lineWidth = .zero
layer.addSublayer(shapeLayer)
return shapeLayer
}()
func makeTriangle(){
// Homothetic Transformation
// https://math.stackexchange.com/questions/3952129/calculate-bounds-of-the-inner-rectangle-of-the-polygon-based-on-its-constant-bo
// https://stackoverflow.com/questions/65315093/cashapelayer-stroke-issue
let lineWidth: CGFloat = borderWidth/2
let size = (frame.width)-lineWidth
let rect = CGRect(x: lineWidth, y: lineWidth , width:size, height: size)
var cornerRadius: CGFloat = self.cornerRadius-lineWidth
cornerRadius = max(cornerRadius, 0)
let path = CGMutablePath()
path.move(to: CGPoint(x: rect.width/2.0, y: lineWidth))
path.addLine(to: CGPoint(x: lineWidth, y: rect.height - lineWidth))
path.addLine(to: CGPoint(x: rect.width - lineWidth, y: rect.height - lineWidth))
path.closeSubpath()
self.path = path
}
override func draw(_ rect: CGRect) {
super.draw(rect)
guard let path = path else{
return
}
shapeLayer.path = path
}
}
Current Out:
Note that the expressions for the coordinates of the bounds of the inner triangle in the Math.SE post that you linked is not very useful here, because that post assumes an equilateral triangle. However, your triangle is not equilateral. Its base has the same length as its height. The view that it is in is a square after all.
After doing some trigonometry, I've found that the top of the inner triangle's bounding rect is insetted by lineWidth divided by sin(atan(0.5)). The bottom is insetted by lineWidth, obviously. And since the inner bounding rect also has to be a square, the left and right insets are both half of the sum of the top and bottom insets.
Here is a GeoGebra screenshot illustrating where sin(atan(0.5)) comes from (I'm rather bad with GeoGebra, so please forgive the mess):
The right half of the outer triangle has a base that is half of its height, so beta = atan(0.5). Then consider the triangle E'EA2, and notice that sin(beta) = lineWidth / EE', and EE' is the top inset that we want.
// makeTriangle
let lineWidth: CGFloat = borderWidth / 2
let top = lineWidth / sin(atan(0.5))
let bottom = lineWidth
let horizontal = (top + bottom) / 2
let rect = bounds.inset(by:
UIEdgeInsets(
top: top,
left: horizontal,
bottom: bottom,
right: horizontal
)
)
let path = CGMutablePath()
path.move(to: CGPoint(x: rect.midX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
path.closeSubpath()()
self.path = path
Now the outer triangle should fit neatly inside the square. But note that by default, CALayer property changes are animated, and the outer triangle could exceed the bounds of the square if you are sliding the slider too quickly, and the animations can't keep up. You can disable the animations by wrapping the code that sets CALayer properties into a CATransaction, and setDisableActions(true). For example in the setter of borderWidth:
set{
CATransaction.begin()
CATransaction.setDisableActions(true)
shapeLayer.lineWidth = newValue
makeTriangle()
CATransaction.commit()
}
Basically I'am very new to Swift 2 and have created a circle with a stroke and white background using below code, then I got a circle something like this:
func getDynamicItemQty() -> UIImage {
let View = UIView(frame: CGRectMake(0,0,200,200))
let circlePath =
UIBezierPath(arcCenter: CGPoint(x: 100,y: 100), radius: CGFloat(90), startAngle: CGFloat(9.4), endAngle:CGFloat(0), clockwise: false)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.CGPath
//shapeLayer.fillRule = kCAFillRuleEvenOdd
//change the fill color
shapeLayer.fillColor = UIColor.brownColor().CGColor
//you can change the stroke color
shapeLayer.strokeColor = UIColor.blueColor().CGColor
//you can change the line width
shapeLayer.lineWidth = 10
View.layer.addSublayer(shapeLayer)
return UIImage.renderUIViewToImage(View)
}
However, how can we draw circles that is partly filled horizontally in Swift 2? I mean circles which are filled, for example, from the bottom to the top according to the percentage specified in Swift code.
Here is a preview of what we need:
A view and a shape layer are definitely the wrang appraoch. You should take a look at UIGraphicsBeginImageContextWithOptions or for iOS 10 or newer UIGraphicsImageRenderer. For your problem: You should draw your circle twice. Something like that:
let size = CGSize(width: 200.0, height: 200.0)
UIGraphicsBeginImageContextWithOptions(size, true, 0)
let circlePath =
UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: CGFloat(90), startAngle: CGFloat(9.4), endAngle:CGFloat(0), clockwise: false)
UIColor.white.fill()
UIRectFill(origin: CGPoint.zero, size: size)
// Drawing the background with a clipping
UIGraphicsPushContext(UIGraphicsGetCurrentContext())
UIColor(...).setFill()
UIRectClip(CGRect(x: 0.0, y:10.0 + 180.0 * (1.0 - percentage), width:size.width, height:size.height))
circlePath.fill()
// leave the subcontext to discard the clipping
UIGraphicsPopContext()
UIColor(...).setStroke()
circlePath.lineWidth = 10.0
circlePath.stroke()
// Keep the fruits of our labour
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
I have created a stack of circle UIViews(Circles inside a circle)using CAShapeLayer.
Now I want to add shadows for every circle. It should be a drop shadow around the each circles. So I did like this.
func setCircleShadow(circle:Circle)
{
circle.layer.shadowColor=UIColor.init(colorLiteralRed: 0.0/255, green: 0.0/255, blue: 0.0/255, alpha: 0.14).cgColor
circle.layer.shadowOffset = CGSize.init(width: circle.frame.size.width, height: circle.frame.size.height)
circle.layer.shadowOpacity = 1.0
circle.layer.shadowRadius = 6.0
circle.layer.masksToBounds = false
}
In my UIViewController I am calling this method in this way.
for addedcircle in circleStack
{
self.view.addSubview(addedcircle)
let deco=CircleDeco()
deco.setCircleShadow(circle: addedcircle)
}
But my shadows are not visible around the UIViews. Please show me whats the error with my code.
UPDATE
Circle class draw method calls this and create circles
func drawCircle()
{
let circlePath = UIBezierPath(arcCenter: CGPoint.init(x: RDcircleEnum.circleCenterX.getValues(), y: RDcircleEnum.circleCenterY.getValues()), radius: CGFloat(self.innerCircleRadius), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.cgPath
//change the fill color
shapeLayer.fillColor = UIColor.blue.cgColor
//you can change the stroke color
shapeLayer.strokeColor = UIColor.red.cgColor
//you can change the line width
shapeLayer.lineWidth = 3.0
shapeLayer.path = circlePath.cgPath
self.layer.mask = shapeLayer
}
This is how to call above method
open func setupCirclestack(parentFrame:CGRect)->[Circle]
{
var arrayCircles = Array<Any>()
let arrayColor=[UIColor.green,UIColor.blue,UIColor.red,UIColor.purple,UIColor.orange]
var currentCircleRadius = CGFloat((UIScreen.main.bounds.size.width-60)/2)
for i in 0..<CircleValues.sharedInstance.numberOfCircles-1
{
let circle=self.getInnerCircle(currentFrame: parentFrame) as! Circle
circle.backgroundColor=UIColor.white//arrayColor[i]
circle.clipsToBounds=false
arrayCircles.append(circle)
circle.innerCircleRadius = currentCircleRadius
currentCircleRadius = currentCircleRadius - 20
print("New Radius------\(circle.innerCircleRadius)")
}
Then in my view controller I am adding these circles using a for loop
Check your views for "clipToBounds". Maybe it's true. switch it to false in each your views.
view.clipToBounds = false
this parameter cuts all oust of view-bounds
The following is a image for which the the code does not align the centre of the UIView , white color.
CAShapeLayer *layer = [CAShapeLayer layer];
layer.anchorPoint=CGPointMake(0.5, 0.5);
layer.path=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 75.0, 75.0)].CGPath;
layer.fillColor =[UIColor redColor].CGColor;
[self.shapeView.layer addSublayer:layer];
anchorPoint is not for setting the position of CAShapeLayer, use position instead.
let layer = CAShapeLayer()
layer.borderColor = UIColor.blackColor().CGColor
layer.borderWidth = 100
layer.bounds = CGRectMake(0, 0, 50, 50)
layer.position = myView.center
layer.fillColor = UIColor.redColor().CGColor
view.layer.addSublayer(layer)
Edit
Sorry for such a rough answer before, the code above may not work as you want, here is the correct answer I just come out. A important thing to note is: How you draw the oval path did effect the position of your CAShapeLayer
let layer = CAShapeLayer()
myView.layer.addSublayer(layer)
layer.fillColor = UIColor.redColor().CGColor
layer.anchorPoint = CGPointMake(0.5, 0.5)
layer.position = CGPointMake(myView.layer.bounds.midX, myView.layer.bounds.midY)
layer.path = UIBezierPath(ovalInRect: CGRectMake(-75.0 / 2, -75.0 / 2, 75.0, 75.0)).CGPath
From Apple Document,
The oval path is created in a clockwise direction (relative to the default
coordinate system)
In other word, the oval path is drawn from the edge instead of the center, so you must take into accound the radius of the oval you are drawing. In your case, you need to do this:
layer.path = UIBezierPath(ovalInRect: CGRectMake(-75.0 / 2, -75.0 / 2, 75.0, 75.0)).CGPath
Now we ensure that the center of drawn path is equal to the center of CAShapeLayer. Then we can use position property to move the CAShapeLayer as we want. The image below could help you understand.
CAShapeLayer *layer = [CAShapeLayer layer];
layer.anchorPoint=CGPointMake(0.5, 0.5);
layer.path=[UIBezierPath bezierPathWithOvalInRect:CGRectMake((self.shapeView.frame.size.width/2)-37.5, (self.shapeView.frame.size.height/2)-37.5, 75.0, 75.0)].CGPath;
//37.5 means width & height divided by 2
layer.fillColor =[UIColor redColor].CGColor;
[self.shapeView.layer addSublayer:layer];
For those still have issue with centering this approach worked for me:
1- Set the shape layer frame equal to parent view frame.
shapeLayer.frame = view.frame
2- remove the shape layer position property.
// shapeLayer.position = CGPoint(x: ,y: )
3- set x and y value of your bezier path equal to zero.
UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: self.width, height:
self.height))
Only these should be enough, get rid of the rest.
======
If that didn't work, then try this one:
#IBDesignable class YourView: UIView {
private var shapeLayer: CAShapeLayer!
override func draw(_ rect: CGRect) {
self.shapeLayer = CAShapeLayer()
self.shapeLayer.path = bezierPath.cgPath
self.shapeLayer.fillColor = UIColor.blue.cgColor
let bezierPathHeight = self.bezierPath.cgPath.boundingBox.height
let bezierPathWidth = self.bezierPath.cgPath.boundingBox.width
self.shapeLayer.setAffineTransform(CGAffineTransform.init(translationX: self.bounds.width / bezierPathWidth, y: self.bounds.height / bezierPathHeight))
self.shapeLayer.setAffineTransform(CGAffineTransform.init(scaleX: self.bounds.width / bezierPathHeight, y: self.bounds.height / bezierPathHeight))
self.layer.addSublayer(self.shapeLayer)
}
I've encounter same case like this. The final resolution is shapeLayer.needsDisplayOnBoundsChange = true and update CAShapeLayer frame in layoutSubviews, CenteredAlignShapeView can adjust when using Auto Layout.
class CenteredAlignShapeView: UIView {
public let dot = CAShapeLayer()
init() {
super.init(frame: .zero)
dot.needsDisplayOnBoundsChange = true
layer.insertSublayer(dot, at: 0)
dot.fillColor = UIColor.red.cgColor
}
override func layoutSubviews() {
super.layoutSubviews()
dot.frame = bounds
let circlePath = UIBezierPath(arcCenter: CGPoint(x: bounds.width/2, y: bounds.height/2), radius: 4, startAngle: 0, endAngle: CGFloat.pi*2, clockwise: true)
dot.path = circlePath.cgPath
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
I am having trouble trying to center my oval programmatically currently I have this code
func setupLayers(){
let oval = CAShapeLayer()
oval.frame = CGRectMake(137.5, 283.5, 100, 100)
oval.path = ovalPath().CGPath;
self.layer.addSublayer(oval)
layers["oval"] = oval
resetLayerPropertiesForLayerIdentifiers(nil)
}
This code is able to center the oval in an iPhone 6 and 6s, but I want it to be able to be centered in all devices.
I have tried this code too:
func drawCircle(size: CGFloat) {
let circleShape = CAShapeLayer()
circleShape.path = UIBezierPath(ovalInRect: CGRectMake(-size/2, -size/2, size, size)).CGPath
circleShape.fillColor = UIColor.blueColor().CGColor
circleShape.strokeColor = UIColor.redColor().CGColor
circleShape.lineWidth = 1
circleShape.frame.origin = view.center
circleShape.name = "circleShape"
view.layer.addSublayer(circleShape)
}
drawCircle(100)
You need to set the layer's anchorPoint to be its center.
oval.anchorPoint = CGPoint(x: 0.5, y: 0.5)
Then you can set position of layer as the center of view:
oval.position = self.center