Рисование пунктирной линии с использованием CALayer
Мне удалось нарисовать пунктирную коробку, используя следующий код:
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
CGRect shapeRect = CGRectMake(0.0f, 0.0f, 200.0f, 100.0f);
[shapeLayer setBounds:shapeRect];
[shapeLayer setPosition:CGPointMake(self.coreImageView_.frameX, self.coreImageView_.frameBottom - self.coreImageView_.frameHeight/2)];
[shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
[shapeLayer setStrokeColor:[[UIColor whiteColor] CGColor]];
[shapeLayer setLineWidth:2.0f];
[shapeLayer setLineJoin:kCALineJoinRound];
[shapeLayer setLineDashPattern:
[NSArray arrayWithObjects:[NSNumber numberWithInt:5],
[NSNumber numberWithInt:5],
nil]];
Теперь, если я хочу просто нарисовать пунктирную линию от точки X до точки B, как мне изменить этот код?
Ответы
Ответ 1
Линии рисуются, сначала перемещая путь к начальной точке линии, затем добавляя отрезок линии к точке:
CGContextBeginPath(context);
CGContextMoveToPoint(context, 10.5f, 10.5f);
CGContextAddLineToPoint(context, 20.5f, 20.5f);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
Для рисования пунктирной линии вам нужно использовать CAShapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
[shapeLayer setBounds:self.bounds];
[shapeLayer setPosition:self.center];
[shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
[shapeLayer setStrokeColor:[[UIColor blackColor] CGColor]];
[shapeLayer setLineWidth:3.0f];
[shapeLayer setLineJoin:kCALineJoinRound];
[shapeLayer setLineDashPattern:
[NSArray arrayWithObjects:[NSNumber numberWithInt:10],
[NSNumber numberWithInt:5],nil]];
// Setup the path
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 10, 10);
CGPathAddLineToPoint(path, NULL, 100,100);
[shapeLayer setPath:path];
CGPathRelease(path);
[[self layer] addSublayer:shapeLayer];
Ответ 2
Смотрите:
https://developer.apple.com/library/mac/documentation/graphicsimaging/Reference/CGContext/Reference/reference.html#//apple_ref/c/func/CGContextSetLineDash
CGFloat dashLengths[] = { 10, 5 };
CGContextSetLineDash(context, 0, dashLengths, 2);
Ответ 3
Попробуйте этот код, он работает для меня,
Swift 3.0
extension UIView {
func addDashedLine(strokeColor: UIColor, lineWidth: CGFloat) {
backgroundColor = .clear
let shapeLayer = CAShapeLayer()
shapeLayer.name = "DashedTopLine"
shapeLayer.bounds = bounds
shapeLayer.position = CGPoint(x: frame.width / 2, y: frame.height / 2)
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = strokeColor.cgColor
shapeLayer.lineWidth = lineWidth
shapeLayer.lineJoin = kCALineJoinRound
shapeLayer.lineDashPattern = [4, 4]
let path = CGMutablePath()
path.move(to: CGPoint.zero)
path.addLine(to: CGPoint(x: frame.width, y: 0))
shapeLayer.path = path
layer.addSublayer(shapeLayer)
}
}
Ответ 4
Быстрое, более компактное:
func addDashedLine(fromPoint start: CGPoint, toPoint end:CGPoint) {
let line = CAShapeLayer()
let linePath = UIBezierPath()
linePath.moveToPoint(start)
linePath.addLineToPoint(end)
line.path = linePath.CGPath
line.strokeColor = UIColor.redColor().CGColor
line.lineWidth = 1
line.lineJoin = kCALineJoinRound
line.lineDashPattern = [4, 4]
self.layer.addSublayer(line)
}
Ответ 5
Swift 2.2
отбрасывая это здесь, чтобы сэкономить время.
extension UIView {
func addDashedLine(color: UIColor = UIColor.lightGrayColor()) {
layer.sublayers?.filter({ $0.name == "DashedTopLine" }).map({ $0.removeFromSuperlayer() })
self.backgroundColor = UIColor.clearColor()
let cgColor = color.CGColor
let shapeLayer: CAShapeLayer = CAShapeLayer()
let frameSize = self.frame.size
let shapeRect = CGRect(x: 0, y: 0, width: frameSize.width, height: frameSize.height)
shapeLayer.name = "DashedTopLine"
shapeLayer.bounds = shapeRect
shapeLayer.position = CGPoint(x: frameSize.width / 2, y: frameSize.height / 2)
shapeLayer.fillColor = UIColor.clearColor().CGColor
shapeLayer.strokeColor = cgColor
shapeLayer.lineWidth = 1
shapeLayer.lineJoin = kCALineJoinRound
shapeLayer.lineDashPattern = [4, 4]
let path: CGMutablePathRef = CGPathCreateMutable()
CGPathMoveToPoint(path, nil, 0, 0)
CGPathAddLineToPoint(path, nil, self.frame.width, 0)
shapeLayer.path = path
self.layer.addSublayer(shapeLayer)
}
}
Ответ 6
Получил работу в Objective C с упрощенным кодом ниже
//Dashed line for road
CAShapeLayer *dashedLine = [CAShapeLayer layer];
[dashedLine setFrame:CGRectMake(0, 342, 100 , 100)];
// Setup the path
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath, NULL, 0, 10);
CGPathAddLineToPoint(thePath, NULL, screenSize.width,10);
dashedLine.path = thePath;
CGPathRelease(thePath);
[dashedLine setLineDashPattern: [NSArray arrayWithObjects:[NSNumber numberWithFloat:15], nil]];
dashedLine.lineWidth = 1.0f;
dashedLine.strokeColor = [[UIColor redcolor] CGColor]];
[self.view.layer addSublayer:dashedLine];
Ответ 7
CAShapeLayer *shaplayer = [CAShapeLayer layer];
shaplayer.frame = CGRectMake(100, 100, 100, 100);
[self.view.layer addSublayer:shaplayer];
UIBezierPath *uipath = [UIBezierPath bezierPath];
[uipath moveToPoint:CGPointMake(50, 200)];
[uipath addLineToPoint:CGPointMake(250, 200)];
shaplayer.path = uipath.CGPath;
shaplayer.strokeColor = [UIColor redColor].CGColor;
shaplayer.lineDashPattern = @[@4];
Ответ 8
Ниже приведен фрагмент кода для рисования пунктирной линии в UIView (Xamarin iOS)
Примечание:
separatorView - это мой UIView, который мне нужно показать как Dashed
public void ShowDottedLine()
{
var dashedLayer = new CAShapeLayer();
var frameSize = separatorView.Frame.Size;
var shapeRect = new CGRect(0, 0, frameSize.Width, frameSize.Height);
dashedLayer.Bounds = shapeRect;
dashedLayer.Position = new CGPoint(frameSize.Width / 2, frameSize.Height / 2);
dashedLayer.FillColor = UIColor.Clear.CGColor;
dashedLayer.StrokeColor = ColorUtils.ColorWithHex(ColorConstants.DarkBlue).CGColor;
dashedLayer.LineWidth = 2;
dashedLayer.LineJoin = CAShapeLayer.JoinRound;
NSNumber[] patternArray = {5,5};
dashedLayer.LineDashPattern = Array;
var path = new CGPath();
path.MoveToPoint(CGPoint.Empty);
path.AddLineToPoint(new CGPoint(frameSize.Width, 0));
dashedLayer.Path = path;
separatorView.Layer.AddSublayer(dashedLayer);
}