How would I mask CALayer with shadow, so that the shadow is only outside the path? I don't want shadow behind a transparent view.
shadowLayer.shadowOffset = CGSizeMake(x, y);
shadowLayer.shadowRadius = radius;
shadowLayer.shadowOpacity = opacity;
shadowLayer.shadowColor = color.CGColor;
shadowLayer.shadowPath = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;
Thank you.
I will answer my own question. Adding a new shadow layer for view. This should work for any shadowPath, if set correctly.
float radius = 8;
float opacity = 0.5f;
float x = 4;
float y = 6;
UIColor *color = [UIColor blackColor];
// Shadow layer
CALayer *shadowLayer = [CALayer layer];
shadowLayer.shadowOffset = CGSizeMake(x, y);
shadowLayer.shadowRadius = radius;
shadowLayer.shadowOpacity = opacity;
shadowLayer.shadowColor = color.CGColor;
shadowLayer.shadowPath = [UIBezierPath bezierPathWithRect:view.frame].CGPath; // Or any other path
// Shadow mask frame
CGRect frame = CGRectInset(view.layer.frame, -2*radius, -2*radius);
frame = CGRectOffset(frame, x, y);
// Translate shadowLayer shadow path to mask layer's coordinate system
CGAffineTransform trans = CGAffineTransformMakeTranslation(-view.frame.origin.x-x+2*radius,
-view.frame.origin.y-y+2*radius);
// Mask path
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, nil, (CGRect){.origin={0,0}, .size=frame.size});
CGPathAddPath(path, &trans, shadowLayer.shadowPath);
CGPathCloseSubpath(path);
// Mask layer
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = frame;
maskLayer.fillRule = kCAFillRuleEvenOdd;
maskLayer.path = path;
shadowLayer.mask = maskLayer;
[view.layer.superlayer insertSublayer:shadowLayer below:view.layer];
ssteinberg's answer helped me in iOS 10.2 and Swift 3. I was able to use his answer with a UIVisualEffectView to create a beautiful blur but also with a shadow. Converted to Swift 3 here:
let shadowLayer = CALayer()
let mutablePath = CGMutablePath()
let maskLayer = CAShapeLayer()
let xOffset = CGFloat(4)
let yOffset = CGFloat(6)
let shadowOffset = CGSize(width: xOffset, height: yOffset)
let shadowOpacity = Float(0.5)
let shadowRadius = CGFloat(8)
let shadowPath = UIBezierPath(rect: frame).cgPath
let shadowColor = UIColor.black
let shadowFrame = frame.insetBy(dx: -2 * shadowRadius, dy: -2 * shadowRadius).offsetBy(dx: xOffset, dy: yOffset)
let shadowRect = CGRect(origin: .zero, size: shadowFrame.size)
let shadowTransform = CGAffineTransform(translationX: -frame.origin.x - xOffset + 2 * shadowRadius, y: -frame.origin.y - yOffset + 2 * shadowRadius)
shadowLayer.shadowOffset = shadowOffset
shadowLayer.shadowOpacity = shadowOpacity
shadowLayer.shadowRadius = shadowRadius
shadowLayer.shadowPath = shadowPath
shadowLayer.shadowColor = shadowColor.cgColor
mutablePath.addRect(shadowRect)
mutablePath.addPath(shadowLayer.shadowPath!, transform: shadowTransform)
mutablePath.closeSubpath()
maskLayer.frame = shadowFrame
maskLayer.fillRule = kCAFillRuleEvenOdd
maskLayer.path = mutablePath
shadowLayer.mask = maskLayer
layer.superlayer?.insertSublayer(shadowLayer, above: layer)
Just an advance: u can use CAShapeLayer to set shadow
let shapeLayer = CAShapeLayer()
shapeLayer.lineWidth = 2
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.purple.cgColor
shapeLayer.shadowColor = UIColor.black.cgColor
shapeLayer.shadowOffset = CGSize(width: 0, height: 3)
shapeLayer.shadowOpacity = 1
view.layer.addSublayer(shapeLayer)
Related
How to drop an object shadow in iOS?
My object is UIImageView and i want to drop an elliptical shadow.Please refer image for reference.
Better you use another image for showing shadow. Use blur image or change alpha of the imageview.
Or if you want to do it programmatically, try it:
Obj c:
//create elliptical shadow for image through UIBezierPath
CGRect ovalRect = CGRectMake(0.0f, _imageView.frame.size.height + 10, _imageView.frame.size.width, 15);
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:ovalRect];
//applying shadow to path
_imageView.layer.shadowColor = kShadowColor.CGColor;
_imageView.layer.shadowOffset = CGSizeMake(0.0, 0.0);
_imageView.layer.shadowOpacity = 1.0;
_imageView.layer.shadowRadius = 3.0;
_imageView.layer.shadowPath = path.CGPath;
Swift :
//create elliptical shdow forimage through UIBezierPath
var ovalRect = CGRectMake(0.0, imageView.frame.size.height + 10, imageView.frame.size.width, 15)
var path = UIBezierPath(ovalInRect: ovalRect)
//applying shadow to path
imageView.layer.shadowColor = UIColor(white: 0.0, alpha: 0.5).CGColor
imageView.layer.shadowOffset = CGSizeMake(0.0, 0.0)
imageView.layer.shadowOpacity = 1.0
imageView.layer.shadowRadius = 3.0
imageView.layer.shadowPath = path.CGPath
Output:
Taken from http://www.innofied.com/implementing-shadow-ios/ and also have a look to know more: UIView with rounded corners and drop shadow?
You can use CAShapeLayer like this:
Objective-C:
// init CAShapeLayer
CAShapeLayer *shadowLayer = [CAShapeLayer layer];
shadowLayer.frame = CGRectMake(CGRectGetMinX(_imageView.frame), CGRectGetMaxY(_imageView.frame), _imageView.frame.size.width, _imageView.frame.size.height);
shadowLayer.path = [UIBezierPath bezierPathWithOvalInRect:shadowLayer.bounds].CGPath;
shadowLayer.fillColor = [UIColor colorWithWhite:0 alpha:0.02].CGColor;
shadowLayer.lineWidth = 0;
[self.view.layer addSublayer: shadowLayer];
Swift 3
let shadowLayer = CAShapeLayer()
shadowLayer.frame = CGRect(x: imageView.frame.minX, y: imageView.frame.maxY, width: imageView.frame.width, height: imageView.frame.height * 0.25)
shadowLayer.path = UIBezierPath(ovalIn: shadowLayer.bounds).cgPath
shadowLayer.fillColor = UIColor(white: 0, alpha: 0.02).cgColor
shadowLayer.lineWidth = 0
view.layer.addSublayer(shadowLayer)
Output:
So I followed an AppCoda tutorial on rounding the corners of a profile image, and it worked fine, except for one thing. Wherever the image was rounded, there is a bit of bleed-through from the image (especially if a white border is used).
self.imageview.image = image
self.imageview.layer.cornerRadius = 10.0
self.imageview.layer.borderWidth = 3.0
self.imageview.layer.borderColor = UIColor.whiteColor().CGColor
self.imageview.clipsToBounds = true
You can also add a mask which is inset a little, if you want:
let path = UIBezierPath(roundedRect: CGRectInset(imageView.bounds, 0.5, 0.5), cornerRadius: 10.0)
let mask = CAShapeLayer()
mask.path = path.CGPath
imageview.layer.mask = mask
You could create a mask over the rectangle. This seems to give clean edges, at least in Playground. Here is the code, but you will need to modify it a bit to get rounded inner rect.
// simple red rect
var view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.backgroundColor = UIColor.redColor()
view.layer.borderColor = UIColor.whiteColor().CGColor
view.layer.borderWidth = 6.0
// path for the mask
let rectanglePath = UIBezierPath(roundedRect:view.bounds, cornerRadius: 20)
// applying the mask over the view
let maskLayer = CAShapeLayer()
maskLayer.frame = view.bounds
maskLayer.path = rectanglePath.CGPath
view.layer.mask = maskLayer
A simple solution is that you can enlarge layer's bounds a little bit to cover the edge of view's image:
CGFloat offset = 1.f; // .5f is also good enough
self.imageview.image = image;
self.imageview.layer.cornerRadius = 10.0;
self.imageview.layer.borderWidth = 3.0 + offset;
self.imageview.layer.borderColor = UIColor.whiteColor().CGColor;
self.imageview.layer.masksToBounds = YES;
[self.imageview.layer setBounds:CGRectMake(-offset,
-offset,
CGRectGetWidth(self.imageview.frame) + offset * 2.f,
CGRectGetHeight(self.imageview.frame) + offset * 2.f)];
Given the following CAShapeLayer is it possible to add a drop shadow like the following image at the tip?
I'm using a UIBezierPath to draw the bars.
- (CAShapeLayer *)gaugeCircleLayer {
if (_gaugeCircleLayer == nil) {
_gaugeCircleLayer = [CAShapeLayer layer];
_gaugeCircleLayer.lineWidth = self.gaugeWidth;
_gaugeCircleLayer.fillColor = [UIColor clearColor].CGColor;
_gaugeCircleLayer.strokeColor = self.gaugeTintColor.CGColor;
_gaugeCircleLayer.strokeStart = 0.0f;
_gaugeCircleLayer.strokeEnd = self.value;
_gaugeCircleLayer.lineCap = kCALineCapRound;
_gaugeCircleLayer.masksToBounds = NO;
_gaugeCircleLayer.cornerRadius = 8.0;
_gaugeCircleLayer.shadowRadius = 8.0;
_gaugeCircleLayer.shadowColor = [UIColor blackColor].CGColor;
_gaugeCircleLayer.shadowOpacity = 0.5;
_gaugeCircleLayer.shadowOffset = CGSizeMake(0.0, 0.0);
_gaugeCircleLayer.path = [self circlPathForCurrentGaugeStyle].CGPath;
}
return _gaugeCircleLayer;
}
It will need to be applied to this UIBezierPath:
- (UIBezierPath *)insideCirclePath {
CGPoint arcCenter = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:arcCenter
radius:CGRectGetWidth(self.bounds) / 2.0f
startAngle:(3.0f * M_PI_2)
endAngle:(3.0f * M_PI_2) + (2.0f * M_PI)
clockwise:YES];
_titleTextLabel.textColor = self.gaugeTintColor;
return path;
}
Very roughly:
let arc1 = CAShapeLayer()
arc1.lineWidth = 20.0
arc1.path = UIBezierPath(ovalInRect: CGRectMake(10, 10, 80, 80)).CGPath
arc1.strokeStart = 0
arc1.strokeEnd = 0.5
arc1.strokeColor = UIColor.grayColor().CGColor
arc1.fillColor = UIColor.clearColor().CGColor
layer.addSublayer(arc1)
let cap = CAShapeLayer()
cap.shadowColor = UIColor.blackColor().CGColor
cap.shadowRadius = 8.0
cap.shadowOpacity = 0.9
cap.shadowOffset = CGSize(width: 0, height: 0)
cap.path = UIBezierPath(ovalInRect: CGRectMake(0, 40, 20, 20)).CGPath
cap.fillColor = UIColor.grayColor().CGColor
layer.addSublayer(cap)
let arc2 = CAShapeLayer()
arc2.lineWidth = 20.0
arc2.path = UIBezierPath(ovalInRect: CGRectMake(10, 10, 80, 80)).CGPath
arc2.strokeStart = 0.5
arc2.strokeEnd = 1.0
arc2.strokeColor = UIColor.grayColor().CGColor
arc2.fillColor = UIColor.clearColor().CGColor
layer.addSublayer(arc2)
I think you need two arcs, and one circle for cap with shadow.
My application is mostly round- and borderbased.
I use the layer property of UIView to give a corner radius and a border.
But I am facing a problem that the corners are not clear.
I am getting the following results:
UIButton
UIImageView
You can observe a thin border line around the white or grey border.
This is my code:
button.layer.borderWidth = 2.0;
button.layer.borderColor = [[UIColor whiteColor] CGColor];
button.layer.cornerRadius = 4;
button.clipsToBounds = YES;
I have searched to solve this but I'm not getting success.
I have tried button.layer.masksToBounds = YES, but with no effect.
Am I missing anything? Or are there any other methods which can give me better results compared to CALayer?
I tried many solution and end by using UIBezierPath.
I create category of UIView and add method to make round rect and border.
This is method of that category:
- (void)giveBorderWithCornerRadious:(CGFloat)radius borderColor:(UIColor *)borderColor andBorderWidth:(CGFloat)borderWidth
{
CGRect rect = self.bounds;
//Make round
// Create the path for to make circle
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:rect
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(radius, radius)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = rect;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the view's layer
self.layer.mask = maskLayer;
//Give Border
//Create path for border
UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:rect
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(radius, radius)];
// Create the shape layer and set its path
CAShapeLayer *borderLayer = [CAShapeLayer layer];
borderLayer.frame = rect;
borderLayer.path = borderPath.CGPath;
borderLayer.strokeColor = [UIColor whiteColor].CGColor;
borderLayer.fillColor = [UIColor clearColor].CGColor;
borderLayer.lineWidth = borderWidth;
//Add this layer to give border.
[[self layer] addSublayer:borderLayer];
}
I get idea of using UIBezierPath from this amazing article: Thinking like a Bézier path
I get most of code from this two link:
UIView category for rounding just the corners which you want, not all like CALayer cornerRadius.
How to get a border on UIBezierPath
Note: This is category method so self represent view on which this method is called. Like UIButton, UIImageView etc.
Here is a Swift 5 version of #CRDave's answer as an extension of UIView:
protocol CornerRadius {
func makeBorderWithCornerRadius(radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat)
}
extension UIView: CornerRadius {
func makeBorderWithCornerRadius(radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) {
let rect = self.bounds
let maskPath = UIBezierPath(roundedRect: rect,
byRoundingCorners: .allCorners,
cornerRadii: CGSize(width: radius, height: radius))
// Create the shape layer and set its path
let maskLayer = CAShapeLayer()
maskLayer.frame = rect
maskLayer.path = maskPath.cgPath
// Set the newly created shape layer as the mask for the view's layer
self.layer.mask = maskLayer
// Create path for border
let borderPath = UIBezierPath(roundedRect: rect,
byRoundingCorners: .allCorners,
cornerRadii: CGSize(width: radius, height: radius))
// Create the shape layer and set its path
let borderLayer = CAShapeLayer()
borderLayer.frame = rect
borderLayer.path = borderPath.cgPath
borderLayer.strokeColor = borderColor.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.lineWidth = borderWidth * UIScreen.main.scale
//Add this layer to give border.
self.layer.addSublayer(borderLayer)
}
}
This is Kamil Nomtek.com's answer updated to Swift 3+ and with some refinements (mostly semantics/naming and using a class protocol).
protocol RoundedBorderProtocol: class {
func makeBorder(with radius: CGFloat, borderWidth: CGFloat, borderColor: UIColor)
}
extension UIView: RoundedBorderProtocol {
func makeBorder(with radius: CGFloat, borderWidth: CGFloat, borderColor: UIColor) {
let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: radius, height: radius))
// Create the shape layer and set its path
let maskLayer = CAShapeLayer()
maskLayer.frame = bounds
maskLayer.path = maskPath.cgPath
// Set the newly created shape layer as the mask for the view's layer
layer.mask = maskLayer
//Create path for border
let borderPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: radius, height: radius))
// Create the shape layer and set its path
let borderLayer = CAShapeLayer()
borderLayer.frame = bounds
borderLayer.path = borderPath.cgPath
borderLayer.strokeColor = borderColor.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
//The border is in the center of the path, so only the inside is visible.
//Since only half of the line is visible, we need to multiply our width by 2.
borderLayer.lineWidth = borderWidth * 2
//Add this layer to display the border
layer.addSublayer(borderLayer)
}
}
The answer by CRDave works great but has one flaw: When called multiple times like on size change, it keeps adding layers. Instead previous layers should be updated.
See below for an updated ObjC version. For swift please adapt accordingly.
// UIView+Border.h
#import <UIKit/UIKit.h>
#interface UIView (Border)
- (void)setBorderWithCornerRadius:(CGFloat)radius
color:(UIColor *)borderColor
width:(CGFloat)borderWidth;
#end
// UIView+Border.m
#import "UIView+Border.h"
#implementation UIView (Border)
- (void)setBorderWithCornerRadius:(CGFloat)radius
color:(UIColor *)borderColor
width:(CGFloat)borderWidth {
CGRect rect = self.bounds;
//Make round
// Create the path for to make circle
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:rect
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(radius, radius)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = rect;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the view's layer
self.layer.mask = maskLayer;
//Give Border
//Create path for border
UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:rect
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(radius, radius)];
// Create the shape layer and set its path
NSString *layerName = #"ig_border_layer";
CAShapeLayer *borderLayer = (CAShapeLayer *)[[[self.layer sublayers] filteredArrayUsingPredicate:[NSPredicate predicateWithFormat:#"name == %#", layerName]] firstObject];
if (!borderLayer) {
borderLayer = [CAShapeLayer layer];
[borderLayer setName:layerName];
//Add this layer to give border.
[[self layer] addSublayer:borderLayer];
}
borderLayer.frame = rect;
borderLayer.path = borderPath.CGPath;
borderLayer.strokeColor = [UIColor whiteColor].CGColor;
borderLayer.fillColor = [UIColor clearColor].CGColor;
borderLayer.lineWidth = borderWidth;
}
#end
de.'s answer worked much better for me than CRDave's answer.
I had to translate it from Swift, so I thought I'd go ahead and post the translation:
extension UIView {
func giveBorderWithCornerRadius(cornerRadius r: CGFloat, borderColor c: UIColor, strokeWidth w: CGFloat) {
let rect = self.bounds
let maskPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: r, height: r))
let maskLayer = CAShapeLayer()
maskLayer.frame = rect
maskLayer.path = maskPath.cgPath
self.layer.mask = maskLayer
let borderPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: r, height: r))
let layerName = "border_layer"
var borderLayer: CAShapeLayer? = self.layer.sublayers?.filter({ (c) -> Bool in
if c.name == layerName {
return true
} else {
return false
}
}).first as? CAShapeLayer
if borderLayer == nil {
borderLayer = CAShapeLayer()
borderLayer!.name = layerName
self.layer.addSublayer(borderLayer!)
}
borderLayer!.frame = rect
borderLayer!.path = borderPath.cgPath
borderLayer!.strokeColor = c.cgColor
borderLayer!.fillColor = UIColor.clear.cgColor
borderLayer!.lineWidth = w
}
}
I'm calling the method from layoutSubviews()
delete
button.layer.borderWidth = 0.3;
button.layer.borderColor = [[UIColor blueMain] CGColor];
So, I have a CALayer, which has a mask & I want to add border around this layer's mask. For example, I have set triangle mask to the layer and I want to have border around that layer.
Can anyone please help me to solve this problem?
Swift 4
class CustomView: UIView {
override func draw(_ rect: CGRect) {
super.draw(rect)
self.backgroundColor = UIColor.black
//setup path for mask and border
let halfHeight = self.bounds.height * 0.5
let maskPath = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: [.topLeft, .bottomRight],
cornerRadii: CGSize(width: halfHeight,
height: halfHeight))
//setup MASK
self.layer.mask = nil;
let maskLayer = CAShapeLayer()
maskLayer.frame = self.bounds;
maskLayer.path = maskPath.cgPath
self.layer.mask = maskLayer
//setup Border for Mask
let borderLayer = CAShapeLayer()
borderLayer.path = maskPath.cgPath
borderLayer.lineWidth = 25
borderLayer.strokeColor = UIColor.red.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.frame = self.bounds
self.layer.addSublayer(borderLayer)
}
My approach in swift3.
// Usage:
self.btnGroup.roundCorner([.topRight, .bottomRight], radius: 4.0, borderColor: UIColor.red, borderWidth: 1.0)
// Apply round corner and border. An extension method of UIView.
public func roundCorner(_ corners: UIRectCorner, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) {
let path = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
let borderPath = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let borderLayer = CAShapeLayer()
borderLayer.path = borderPath.cgPath
borderLayer.lineWidth = borderWidth
borderLayer.strokeColor = borderColor.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.frame = self.bounds
self.layer.addSublayer(borderLayer)
}
Consider this example code:
- (void)drawRect:(CGRect)rect {
CAShapeLayer *maskLayer = [CAShapeLayer layer];
//Modify to your needs
CGFloat maskInsetWidth = 5.0f;
CGFloat maskInsetHeight = 5.0f;
CGFloat maskCornerRadius = 5.0f;
CGFloat borderWidth = 2.0f;
UIColor *borderColor = [UIColor blackColor];
CGRect insetRect = CGRectInset(self.bounds, maskInsetWidth, maskInsetHeight);
insetRect.size.width = MAX(insetRect.size.width, 0);
insetRect.size.height = MAX(insetRect.size.height, 0);
CGPathRef path = [UIBezierPath bezierPathWithRoundedRect:insetRect cornerRadius:maskCornerRadius].CGPath;
if (borderWidth > 0.0f && borderColor != nil) {
CAShapeLayer *borderLayer = [CAShapeLayer layer];
[borderLayer setPath:path];
[borderLayer setLineWidth:borderWidth * 2.0f];
[borderLayer setStrokeColor:borderColor.CGColor];
[borderLayer setFillColor:[UIColor clearColor].CGColor];
borderLayer.frame = self.bounds;
[self.layer addSublayer:borderLayer];
}
[maskLayer setPath:path];
[maskLayer setFillRule:kCAFillRuleEvenOdd];
maskLayer.frame = self.bounds;
[self.layer setMask:maskLayer];
}
Some suggestions:
Use an opaque shadow instead of a border (you will have a blurred effect).
Create another layer, set its background color with the color you want for your border, mask it with a mask slightly bigger than the one you already have to simulate the border width, and put it centered behind your layer (may not work with every shape).
Do a morphological operation on your mask image to calculate the border, for instance with the vImageDilate family of functions (more complicated, and may run into performance problems).
If you know the shape and it can be described mathematically, draw it and stroke it explicitly with Core Graphics functions.
Or, in the same case (shape known mathematically), use a CAShapeLayer to draw the border.
In a general case you cannot easily set a border around a mask. That's like asking to put a border around the transparent pixels of an image. Perhaps it may be done using image filters. In some more specific case, if you are using plain CAShapeLayer then here is a sample of code that does that:
[CATransaction begin];
[CATransaction setDisableActions:YES];
CALayer *hostLayer = [CALayer layer];
hostLayer.backgroundColor = [NSColor blackColor].CGColor;
hostLayer.speed = 0.0;
hostLayer.timeOffset = 0.0;
CALayer *maskedLayer = [CALayer layer];
maskedLayer.backgroundColor = [NSColor redColor].CGColor;
maskedLayer.position = CGPointMake(200, 200);
maskedLayer.bounds = CGRectMake(0, 0, 200, 200);
CAShapeLayer *mask = [CAShapeLayer layer];
mask.fillColor = [NSColor whiteColor].CGColor;
mask.position = CGPointMake(100, 100);
mask.bounds = CGRectMake(0, 0, 200, 200);
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 100, 100);
for (int i=0; i<20; i++) {
double x = arc4random_uniform(2000) / 10.0;
double y = arc4random_uniform(2000) / 10.0;
CGPathAddLineToPoint(path, NULL, x, y);
}
CGPathCloseSubpath(path);
mask.path = path;
CGPathRelease(path);
maskedLayer.mask = mask;
CAShapeLayer *maskCopy = [NSKeyedUnarchiver unarchiveObjectWithData:[NSKeyedArchiver archivedDataWithRootObject:mask]];
maskCopy.fillColor = NULL;
maskCopy.strokeColor = [NSColor yellowColor].CGColor;
maskCopy.lineWidth = 4;
maskCopy.position = maskedLayer.position;
// Alternately, don't set the position and add the copy as a sublayer
// maskedLayer.sublayers = #[maskCopy];
hostLayer.sublayers = #[maskedLayer,maskCopy];
_contentView.layer = hostLayer;
_contentView.wantsLayer = YES;
[CATransaction commit];
It basically creates an arbitrary path and sets it as the mask. It then takes a copy of this layer to stroke the path. You might need to tweak things to get the exact effect you are looking for.
If you subclass CALayer, you could instantiate it with the mask you want, and also override layoutSubLayers to include the border you want. This will work for all masks and should be the new accepted answer.
Could do this a couple ways. Below Ill do it by using the path of the given mask, and assigning that to class property to be used for constructing the new border in layoutSubLayers. There is potential that this method could be called multiple times, so I also set a boolean to track this. (Could also assign the border as a class property, and remove/re-add each time. For now I use bool check.
Swift 3:
class CustomLayer: CALayer {
private var path: CGPath?
private var borderSet: Bool = false
init(maskLayer: CAShapeLayer) {
super.init()
self.path = maskLayer.path
self.frame = maskLayer.frame
self.bounds = maskLayer.bounds
self.mask = maskLayer
}
override func layoutSublayers() {
if(!borderSet) {
self.borderSet = true
let newBorder = CAShapeLayer()
newBorder.lineWidth = 12
newBorder.path = self.path
newBorder.strokeColor = UIColor.black.cgColor
newBorder.fillColor = nil
self.addSublayer(newBorder)
}
}
required override init(layer: Any) {
super.init(layer: layer)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}