I want to create on the edge of every side of the rectangle a small circle instead of only corner.
I make a label that set :
exampleLabel.layer.borderWidth = 2.0
exampleLabel.layer.borderColor = UIColor.black.cgColor
So to get something like this shape :
You can also draw in each corner a circle.
let circle = UIView(frame: CGRect(x: -2.5, y: -2.5, width: 5.0, height: 5.0))
circle.layer.cornerRadius = 2.5
circle.backgroundColor = UIColor.black
self.exampleLabel.addSubview(circle)
this is a circle in the left top corner. You can do it also for left bottom/right top/ right bottom.
You can play with the position by the x and y value
Let me know if this is what you want
Related
I have attached the image. I want create corner radius of UIView. Please look image https://i.stack.imgur.com/AkUuO.png
Hope this helps:
let redBox = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
redBox.backgroundColor = .red
redBox.layer.cornerRadius = 25
redBox.layer.maskedCorners = [.layerMaxXMaxYCorner]
Looks like a similar question asked here: How to set cornerRadius for only top-left and top-right corner of a UIView?
I have a child view controller whose view has been added as a subview on the parent view. I want to scale this by 1.1x from its top left corner. I tried doing this:
override func viewDidLoad() {
self.view.layer.anchorPoint = CGPoint(x: 0, y: 0)
}
func scaleMyView() {
self.view.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
}
But that seems to re-centre the view over it's top left corner and then scale.
After reading some answers on here, I then tried setting the position of the view's layer like this:
let center = self.view.frame.origin
self.view.layer.anchorPoint = CGPoint(x: 0, y: 0)
self.view.layer.position = center
But that moves the view somewhere to the center of the screen. How can I just make it scale from its top left corner without it moving in the parent view??
You're exactly right and extremely close. To change where a transform is anchored, you need to change the layer's anchor point. But when you do that, you need to change the layer's position to compensate, or the layer will move.
Let self.v be the view we want to transform:
let lay = self.v.layer
let p = lay.frame.origin
lay.anchorPoint = CGPoint(x: 0, y: 0)
lay.position = p
lay.setAffineTransform(CGAffineTransform(scaleX: 1.1, y: 1.1))
Good afternoon,
How do i achieve something like this in swift 3?
circle with blurred drop shadow beneath
The center of the shadow is about 30px from the bottom of the circle. I have tried using the shadow trick but i wasn't able to squish the shadow. I also tried using a picture from photoshop but the blur becomes nasty when scaled up.
let rect = CGRect(x: 0, y: midView.frame.minY, width: (midView.bounds.width), height: 20.0)
let elipticalPath = UIBezierPath(ovalIn: rect).cgPath
let maskLayer = CAGradientLayer()
maskLayer.frame = midView.bounds
maskLayer.shadowRadius = 15
maskLayer.shadowPath = elipticalPath
maskLayer.shadowOpacity = 0.7
maskLayer.shadowOffset = CGSize.zero
maskLayer.shadowColor = UIColor.gray.cgColor
midView.layer.addSublayer(maskLayer)
I'm trying to determine the right scaling factor for my node tree to make it fit exactly in my presentation rectangle, so I'm trying to find the smallest bounding rectangle around all my nodes. Apple's docs say that calculateAccumulatedFrame "Calculates a rectangle in the parent’s coordinate system that contains the content of the node and all of its descendants." That sounds like what I need, but it's not giving me the tight fit that I expect. My complete playground code is:
import SpriteKit
import PlaygroundSupport
let view:SKView = SKView(frame: CGRect(x: 0, y: 0, width: 800, height: 800))
PlaygroundPage.current.liveView = view
let scene:SKScene = SKScene(size: CGSize(width: 1000, height: 800))
scene.scaleMode = SKSceneScaleMode.aspectFill
view.presentScene(scene)
let yellowBox = SKSpriteNode(color: .yellow, size:CGSize(width: 300, height: 300))
yellowBox.position = CGPoint(x: 400, y: 500)
yellowBox.zRotation = CGFloat.pi / 10
scene.addChild(yellowBox)
let greenCircle = SKShapeNode(circleOfRadius: 100)
greenCircle.fillColor = .green
greenCircle.position = CGPoint(x: 300, y: 50)
greenCircle.frame
yellowBox.addChild(greenCircle)
let uberFrame = yellowBox.calculateAccumulatedFrame()
let blueBox = SKShapeNode(rect: uberFrame)
blueBox.strokeColor = .blue
blueBox.lineWidth = 2
scene.addChild(blueBox)
And the results are:
The left and bottom edges of the blue rectangle look good, but why are there gaps between the blue rectangle and the green circle on the top and right?
The notion "frame" does funny things when you add a transform. The bounding box around the box and circle is a rectangle. You have rotated that rectangle. Therefore its corners stick out. The accumulated frame embraces that rotated rectangle, including the sticking-out corners. It does not magically hug the drawn appearance of the nodes (e.g. the circle).
I tried to draw a circle flipped vertically by its center. (Flipping a circle by its center looks same so that I can check visually). But the drawn position is entirely wrong. I expect that the fill has to be occurred entirely inside the stroked region
circleRect = CGRect(x:100, y:100, width:100, height: 100)
override func draw(_ dirtyRect: CGRect) {
let ctx = NSGraphicsContext.current()!.cgContext
if(drawCircle) {
let path = getOvalPath(circleRect) //returns a oval cgpath for the rect, here the rect is a square so it gives a circle
//stroked without flipping
ctx.addPath(path)
ctx.setStrokeColor(CGColor.black)
ctx.strokePath()
//filled with flipping
ctx.saveGState
ctx.translateBy(x: 0, y: circleRect.size.height)
ctx.scaleBy(x: 1, y: -1)
ctx.addPath(path)
ctx.setFillColor(fillColor)
ctx.fillPath()
ctx.restoreGState()
}
drawCircle = true
setNeedsDisplay(circleRect)
Your circle's center is at (100, 100). Consider the effects of your transforms on that point:
var point = CGPoint(x: 100, y: 100)
// point = (100, 100)
point = point.applying(CGAffineTransform(scaleX: 1, y: -1))
// point = (100, -100)
point = point.applying(CGAffineTransform(translationX: 0, y: 100))
// point = (100, 0)
So your transforms move the center of the circle.
You're thinking about “flipping” the y axis, moving it from the bottom left corner of some “canvas” to the top left corner. Your circle will stay put if it is centered vertically on that canvas. Your canvas's height is implicitly defined by the y translation you apply, which is 100. So your canvas has height 100, which means the circle's center would need to be at y = 100/2 = 50 to stay put.
Since your circle's center is at y = 100, you need to use a canvas height of 2*100 = 200 to make the circle stay put.