How can we fill a shape layer with image in iOS using swift 4 ? I have tried using below. I got an Black background. Here self is a Shapelayer where i am going to set an Image
let image = UIImage(named: "ACVResources.bundle/temp.png")!
let imageLayer = CALayer()
imageLayer.contents = UIImage(named: "image")?.cgImage // Assign your image
imageLayer.frame = self.frame
imageLayer.mask = self
self.masksToBounds = true
self.setNeedsDisplay()
First, you have to add CALayer(imageLayer) that fill your view after that you need to set that your view.layer mask your shapeLayer.
I give you an example:
let customView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 500))
customView.backgroundColor = .red
view.addSubview(customView)
let imageLayer = CALayer()
let image = UIImage(named: "pxl.jpeg")
imageLayer.contents = image?.cgImage
imageLayer.frame = customView.frame
customView.layer.addSublayer(imageLayer)
let shape = CAShapeLayer()
let path = UIBezierPath()
path.move(to: CGPoint(x: customView.frame.size.width / 2, y: 50))
path.addLine(to: CGPoint(x: customView.frame.size.width, y: customView.frame.size.height / 2))
path.addLine(to: CGPoint(x: 0, y: customView.frame.size.height / 2))
path.close()
shape.path = path.cgPath
customView.layer.mask = shape
screenshot of that code
Related
I want draw diagonal view.
This is my code.
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let path = UIBezierPath()
path.move(to: CGPoint.zero)
path.addLine(to: CGPoint(x: 50, y: 50))
let view = UIView(frame: CGRect(x: 100, y: 100, width: 50, height: 50))
view.backgroundColor = UIColor.blue
let mask = CAShapeLayer()
mask.frame = view.bounds
mask.path = path.cgPath
mask.strokeColor = UIColor.orange.cgColor
mask.lineWidth = 25
view.layer.mask = mask
self.view.addSubview(view)
}
I set strokeColor to orange. But color is blue backgroundColor
Why does this happen?
Here is the code snippet:
let path = UIBezierPath()
path.move(to: CGPoint.zero)
path.addLine(to: CGPoint(x: 50, y: 50))
let view = UIView(frame: CGRect(x: 100, y: 100, width: 50, height: 50))
view.backgroundColor = UIColor.green
let diagonal = CAShapeLayer()
diagonal.frame = view.bounds
diagonal.path = path.cgPath
diagonal.strokeColor = UIColor.orange.cgColor
diagonal.lineWidth = 15
diagonal.backgroundColor = UIColor.blue.cgColor
// view.layer.mask = mask
view.layer.addSublayer(diagonal)
self.view.addSubview(view)
This results in:
I am trying to set the contentGravity variable of a CALayer but I am not quite sure how to do this. I have tried the following without success:
var layer = CAShapeLayer.init()
layer.contentGravity = .resizeAspectFill // This is not recognised
My UIImageView presents the image taken from the camera of the phone. I then use the Vision Framework to detect rectangles, which return the four corner coordinates of the detected rectangle. I then draw the rectangle in the layer of the UIImageView. The content mode of the UIIMageView is 'Aspect Fill'. My rectangle is currently misaligned and i think it has to do with the contentGravity of the layer. Please see image below:
Rectangle drawn into CAShapelayer:
let rec = UIBezierPath.init()
rec.move(to: CGPoint.init(x: topLeft.x, y: topLeft.y))
rec.addLine(to: CGPoint.init(x: topRight.x, y: topRight.y))
rec.addLine(to: CGPoint.init(x: bottomRight.x, y: bottomRight.y))
rec.addLine(to: CGPoint.init(x: bottomLeft.x, y: bottomLeft.y))
rec.close()
self.layer.opacity = 0.4
self.layer.path = rec.cgPath
self.layer.lineWidth = 5
self.layer.strokeColor = UIColor.yellow.cgColor
self.layer.frame = self.imgPreViewOutlet.bounds
self.imgPreViewOutlet.layer.addSublayer(self.layer)
image show misaligned rectangle drawn in the layer of UIImageView
There is no purpose in setting the content gravity of a CAShapeLayer, as it will in no way affect how the shape is drawn. Content gravity is meaningful only for a layer with content, e.g. a CGImage that is drawn into its contents property.
Here's an example where contentsGravity matters; same image, same layer size, different content gravity:
override func viewDidLoad() {
super.viewDidLoad()
do {
let layer = CALayer()
layer.frame = CGRect(x: 100, y: 100, width: 250, height: 200)
layer.contents = UIImage(named:"smiley")!.cgImage
layer.borderWidth = 1
self.view.layer.addSublayer(layer)
layer.contentsGravity = .center
}
do {
let layer = CALayer()
layer.frame = CGRect(x: 100, y: 300, width: 250, height: 200)
layer.contents = UIImage(named:"smiley")!.cgImage
layer.borderWidth = 1
self.view.layer.addSublayer(layer)
layer.contentsGravity = .resize
}
}
But if we try exactly the same thing with a shape layer, the content gravity makes no difference:
override func viewDidLoad() {
super.viewDidLoad()
do {
let layer = CAShapeLayer()
layer.frame = CGRect(x: 100, y: 100, width: 250, height: 200)
layer.path = CGPath(rect: CGRect(x: 0, y: 0, width: 20, height: 20), transform: nil)
layer.borderWidth = 1
self.view.layer.addSublayer(layer)
layer.contentsGravity = .center
}
do {
let layer = CAShapeLayer()
layer.frame = CGRect(x: 100, y: 300, width: 250, height: 200)
layer.path = CGPath(rect: CGRect(x: 0, y: 0, width: 20, height: 20), transform: nil)
layer.borderWidth = 1
self.view.layer.addSublayer(layer)
layer.contentsGravity = .resize
}
}
I am creating an overlay of blurredView with a clear rectangle cutout in the middle. My code so far has achieved the opposite, ie a clearView with a blur cutout in the middle instead.
I have adapted my steps from the following posts, I appreciate if anyone could point me in the right direction.
Swift mask of circle layer over UIView
CALayer with transparent hole in it
let blurView = UIVisualEffectView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height))
blurView.effect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let scanLayer = CAShapeLayer()
scanLayer.path = CGPath(rect: scanRect, transform: nil)
view.addSubview(blurView)
blurView.layer.addSublayer(scanLayer)
blurView.layer.mask = scanLayer
You can do it like this
let scanLayer = CAShapeLayer()
let scanRect = CGRect.init(x: 100, y: 100, width: 200, height: 100)
let outerPath = UIBezierPath(rect: scanRect)
let superlayerPath = UIBezierPath.init(rect: blurView.frame)
outerPath.usesEvenOddFillRule = true
outerPath.append(superlayerPath)
scanLayer.path = outerPath.cgPath
scanLayer.fillRule = kCAFillRuleEvenOdd
scanLayer.fillColor = UIColor.black.cgColor
view.addSubview(blurView)
blurView.layer.mask = scanLayer
Any idea on how to fill all the paths in here. What is currently happening is that I draw a rectangle path on my view then add small circles in between but it seems that if the circle and rectangle intersects, the white fill color is showing. What I would want is show still the gradient layer. Any help? My current code is below.
func addGradientLayer() {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
let startColor = UIColor.create(withHexOrName: OurPayStatesViewUX.GradientColorStart)
let endColor = UIColor.create(withHexOrName: OurPayStatesViewUX.GradientColorEnd)
gradientLayer.colors = [startColor.CGColor, endColor.CGColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
layer.insertSublayer(gradientLayer, atIndex: 0)
}
func createOverlay(view: UIView, circleLocations: [CGPoint]) {
maskLayer?.removeFromSuperlayer()
let radius: CGFloat = view.frame.height/2
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: view.bounds.size.width, height: view.bounds.size.height), cornerRadius: 0)
for i in circleLocations {
// Create a circle path in each of the state views
let circlePath = UIBezierPath(roundedRect: CGRect(x: i.x, y: i.y, width: 2 * radius, height: 2 * radius), cornerRadius: radius)
path.appendPath(circlePath)
}
let rect = createRectangle(startPointX: 0, endPointX: view.bounds.size.width)
path.appendPath(rect)
path.usesEvenOddFillRule = true
let fillLayer = CAShapeLayer()
fillLayer.path = path.CGPath
fillLayer.fillRule = kCAFillRuleEvenOdd
fillLayer.fillColor = backgroundColor?.CGColor ?? UIColor.whiteColor().CGColor
fillLayer.opacity = 1
maskLayer = fillLayer
layer.addSublayer(fillLayer)
}
func createRectangle(startPointX startPointX: CGFloat, endPointX: CGFloat) -> UIBezierPath {
let rectHeight: CGFloat = 6
let path = UIBezierPath(rect: CGRect(x: startPointX, y: frame.height/2 - rectHeight/2, width: endPointX - startPointX, height: rectHeight))
return path
}
I want to hav this kind of animation in my app, a case where an arrow shape such that when clicked it transforms into a mark.
This is what i have at present using the code below
func handleTransform(){
let arrowPath = UIBezierPath()
arrowPath.move(to: CGPoint(x: 50, y: 0))
arrowPath.addLine(to: CGPoint(x: 25, y: 75))
arrowPath.addLine(to: CGPoint(x: 25, y: 75))
arrowPath.addLine(to: CGPoint(x: 25, y: 45))
arrowPath.addLine(to: CGPoint(x: 25, y: 35))
arrowPath.close()
let progressLines = CAShapeLayer()
progressLines.path = arrowPath.cgPath
progressLines.strokeColor = UIColor.black.cgColor
progressLines.fillColor = UIColor.clear.cgColor
progressLines.lineWidth = 10.0
progressLines.lineCap = kCALineCapRound
self.view.layer.addSublayer(progressLines)
let animateStrokeEnd = CABasicAnimation(keyPath: "strokeEnd")
animateStrokeEnd.duration = 3.0
animateStrokeEnd.fromValue = 0.0
animateStrokeEnd.toValue = 1.0
progressLines.add(animateStrokeEnd, forKey: "animate stroke end animation")
}
the flow is illustrated in the images bellow
On click of this image
It transform to this image
I have been able t solve, i did a switch image with animation