2012-10-03 12 views
19

yo era capaz de dibujar un cuadro de líneas discontinuas, con el siguiente código:dibujo línea discontinua usando 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]]; 

Ahora si quiero simplemente dibujar una línea discontinua desde el punto X al punto B, ¿cómo debería modificar este código?

+0

¿qué quiere decir con el punto X y el punto B? son puntos en su rectángulo o son solo 2 puntos en cualquier lugar de la pantalla? –

+0

Posible duplicado [aquí] (http://stackoverflow.com/questions/12091916/uiview-with-a-dashed -line) –

+0

http://stackoverflow.com/questions/12091916/uiview-with-a-dashed- line/12092002 # 12092002 –

Respuesta

55

líneas se dibujan por primera mover la ruta de acceso a un punto inicial de la línea, a continuación, la adición de un segmento de línea a un punto:

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

Para la elaboración de línea discontinua, Es necesario utilizar 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]; 
+0

me golpeé la cabeza contra la pared durante varias horas, tratando de hacer esto con CGContext. ¡Muchas gracias! – user1244109

0

Swift 2.2

dejar caer esto en aquí para salvar a otros, el tiempo ..

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

Swift, más compacto:

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

probar este código, que funciona para mí,

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

tengo trabajo en Objective C con el código simplificado de la siguiente manera

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

Gracias por este fragmento de código, que puede proporcionar ayuda inmediata. Una explicación adecuada mejoraría [enormemente] (https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) su valor educativo al mostrar por qué esta es una buena solución al problema, y ​​lo haría hacer que sea más útil para futuros lectores con preguntas similares, pero no idénticas. Edite su respuesta para agregar una explicación y dé una indicación de qué limitaciones y suposiciones se aplican. – basvk

0

A continuación se muestra el fragmento de código para dibujar una La línea de UIView (Xamarin IOS)

Nota : separatorView es mi UIView que necesito mostrar como 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); 
} 
Cuestiones relacionadas