What I have:
To create this line, I basically have an UIView
and I do the following:
void setLayerToLineFromAToB(CALayer *layer, CGPoint a, CGPoint b, CGFloat lineWidth) { CGPoint center = { 0.5 * (a.x + b.x), 0.5 * (a.y + b.y) }; CGFloat length = sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y)); CGFloat angle = atan2(a.y - b.y, a.x - b.x); layer.position = center; layer.bounds = (CGRect) { {0, 0}, { length + lineWidth, lineWidth } }; layer.transform = CATransform3DMakeRotation(angle, 0, 0, 1); }
Note: This code was found here on stackoverflow, so if someone can give me the reference to it I would appreciate.
What I want:
Ok so the "only" thing I need is to create this pattern on the UIView
. I know I am able to do this using Quartz2D (a simple way to do it can be found here). But I want to do it by manipulating the CALayer
and not going to to the draw method. Why? Because of the transformation I am making on my UIView
, I am not able to draw correctly using the draw
method.
Edit 1:
Just to illustrate my problem:
Normally what you have is UIView
and then you basically just draw something in it (in this case a simple line). The solution I found to get rid of the "gray" area, was to instead of drawing something, just transform the UIView
itself. It work well, if you want a fully filled line, the problem comes when you want a dashed one.
To use this, call the addDashedBorder() on your view. You can use the same extension on UILabel or almost any view. That's all on how to add dashed line border around UIView.
storyboard add a UIView as shown, create @IBOutlet and name it dottedView. Step 3 − Add the following code in your ViewController. swift, add the below extension. If you notice we are passing the width and the color of the dotted line, you can customize the way you want to have the dotted line.
Check UIBezierPath setLineDash:count:phase:
method:
- (void)setLineDash:(const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase` method.
This allows you to draw dashed lines.
CAShapeLayer
. Add it as sublayer to your UIView
. It has a path
property. UIBezierPath
. Draw the line using setLineDash
.For example:
UIBezierPath *path = [UIBezierPath bezierPath]; //draw a line [path moveToPoint:yourStartPoint]; //add yourStartPoint here [path addLineToPoint:yourEndPoint];// add yourEndPoint here [path stroke]; CGFloat dashPattern[] = {2.0f,6.0f,4.0f,2.0f}; //make your pattern here [path setLineDash:dashPattern count:4 phase:3]; UIColor *fill = [UIColor blueColor]; shapelayer.strokeStart = 0.0; shapelayer.strokeColor = fill.CGColor; shapelayer.lineWidth = 5.0; shapelayer.lineJoin = kCALineJoinMiter; shapelayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:10],[NSNumber numberWithInt:7], nil]; shapelayer.lineDashPhase = 3.0f; shapelayer.path = path.CGPath;
Note: This answer provides a hint so you can improvise accordingly to your requirement(s).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With