ios 使用 CALayer 绘制虚线

drawing dashed line using CALayer

提问by adit

I was able to draw a dashed box, using the following code:

我能够使用以下代码绘制一个虚线框：

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]];

Now if I want to just draw a dashed line from point X to point B, how should I modify this code?

现在如果我只想画一条从X点到B点的虚线，我应该如何修改这段代码？

回答by Lithu T.V

Lines are drawn by first moving the path to a starting point of the line, then adding a line segment to a point:

通过首先将路径移动到线的起点，然后将线段添加到点来绘制线：

CGContextBeginPath(context);
CGContextMoveToPoint(context, 10.5f, 10.5f);
CGContextAddLineToPoint(context, 20.5f, 20.5f);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);

For drawing dashed line, You need to use CAShapeLayer

要绘制虚线，您需要使用 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];

回答by Patel Jigar

Try this code, it works for me,

试试这个代码，它对我有用，

Swift 3.0

斯威夫特 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)
    }
}

回答by wpearse

See:

看：

https://developer.apple.com/library/mac/documentation/graphicsimaging/Reference/CGContext/Reference/reference.html#//apple_ref/c/func/CGContextSetLineDash

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);

回答by Alexandre G

Swift 2.2

斯威夫特 2.2

dropping this in here to save others time..

把它放在这里是为了节省其他人的时间..

extension UIView {
    func addDashedLine(color: UIColor = UIColor.lightGrayColor()) {
        layer.sublayers?.filter({ 
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)
}
.name == "DashedTopLine" }).map({ 
 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);
 }
.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)
    }
}

回答by Wujo

Swift, more compact:

更快速、更紧凑：

   //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];

回答by Prashant

Below is the code snippet to draw a Dashed line in UIView (Xamarin iOS)

下面是在 UIView (Xamarin iOS) 中绘制虚线的代码片段

Note: separatorView is my UIView which i need to show as Dashed

注意： separatorView 是我的 UIView，我需要显示为虚线

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];

回答by Naishta

Got it working in Objective C with the simplified code as below

使用如下简化的代码在 Objective C 中工作

##代码##

回答by sfm.json

##代码##