使用CALayer绘制虚线

时间:2012-10-03 04:17:41

标签: iphone objective-c ios ipad

我能够使用以下代码绘制虚线框:

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点画一条虚线,我应该如何修改这段代码?

8 个答案:

答案 0 :(得分:55)

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

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

答案 1 :(得分:5)

答案 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)
    }
}

答案 3 :(得分:1)

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

答案 4 :(得分:1)

斯威夫特,更紧凑:

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 :(得分:1)

下面是在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);
 }

答案 6 :(得分:0)

使用以下简化代码在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 :(得分:0)

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