UIView带有虚线 [英] UIView with a Dashed line

问题描述

我有什么：

要创建此行，我基本上有一个 UIView 而且我这样做以下内容：

  void setLayerToLineFromAToB（CALayer * layer，CGPoint a，CGPoint b，CGFloat lineWidth）
 {
 CGPoint center = {0.5 *（ax + bx），0.5 *（ay + by）}; 
 CGFloat长度= 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）; 
} 
  

注意：此代码在stackoverflow上找到，所以如果有人可以给我参考它我会很感激。

我想要的是什么：

好吧所以我需要的唯一就是在 UIView 上创建这个模式。我知道我可以使用Quartz2D做到这一点（可以在这里找到一个简单的方法）一>）。但是我想通过操纵 CALayer 来实现它，而不是去绘制方法。为什么？由于我在 UIView 上进行的转换，我无法使用 draw 方法正确绘制。 / p>

编辑1：

只是为了说明我的问题：

通常你所拥有的是 UIView 然后你基本上只是画了一些东西（在这种情况下是简单的一行）。我发现摆脱灰色区域的解决方案是改为 UIView 本身而不是绘制东西。它运作良好，如果你想要一个完全填充的线，问题出现在你想要一个虚线。

解决方案

注意：Prince的代码确实帮助了我，所以我会给他+10的提示。但最后，我添加了自己的代码。我还将添加一些上下文，因此它对未来的读者有用

---

最终代码如下：

   - （void）updateLine {
 
 //重要，否则我们将添加多个子图层
 if（[[[self layer] sublayers] objectAtIndex：0]）
 {
 self.layer.sublayers = nil; 
} 
 
 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]]; 
 
 //设置路径
 CGMutablePathRef path = CGPathCreateMutable（）; 
 CGPathMoveToPoint（path，NULL，beginPoint.center.x，beginPoint.center.y）; 
 CGPathAddLineToPoint（path，NULL，endPoint.center.x，endPoint.center.y）; 
 
 [shapeLayer setPath：path]; 
 CGPathRelease（路径）; 
 
 [[self layer] addSublayer：shapeLayer]; 
} 
  

在我的情况下，beginPoint和endPoint可由用户移动，使用志愿。所以当其中一个移动时：

   - （void）observeValueForKeyPath：（NSString *）keyPath ofObject：（id）对象更改： （NSDictionary *）更改上下文：（void *）context 
 {
 if（[keyPath isEqual：@position]）
 {
 [self updateLine]; 
} 
} 
  

我确实玩过Prince的代码。我尝试了 draw：方法，它在虚线之间添加了一条细线（有点奇怪......），我也尝试了 initWithFrame ：。他自己的代码，没有任何修改，会在控制台上给我这种错误：

 <错误>：CGContextSaveGState ：无效上下文0x0 
<错误>：CGContextSetLineWidth：无效上下文0x0 
<错误>：CGContextSetLineJoin：无效上下文0x0 
<错误>：CGContextSetLineCap：无效上下文0x0 
 <错误>：CGContextSetMiterLimit：无效的上下文0x0 
<错误>：CGContextSetFlatness：无效的上下文0x0 
<错误>：CGContextAddPath：无效的上下文0x0 
<错误>：CGContextDrawPath：无效context 0x0 
<错误>：CGContextRestoreGState：无效的上下文0x0 
  

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.

解决方案

Note: The code from Prince did really help me out, so I will give him +10 for the tips. But in the end, I add to come with my own code. I will also add some context to it, so it can be useful for future readers

---

The final code was like this:

-(void)updateLine{

      // Important, otherwise we will be adding multiple sub layers
      if ([[[self layer] sublayers] objectAtIndex:0])
        {
            self.layer.sublayers = nil;
        }

        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, beginPoint.center.x, beginPoint.center.y);
        CGPathAddLineToPoint(path, NULL, endPoint.center.x, endPoint.center.y);

        [shapeLayer setPath:path];
        CGPathRelease(path);

        [[self layer] addSublayer:shapeLayer];
}

In my case, the beginPoint and endPoint are movable by the user, by using KVO. So when one of them moves:

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    if ([keyPath isEqual:@"position"])
    {
        [self updateLine];
    }
}

I did play a lot with Prince's code. I tried on the draw: method, which add a thin line between the dashed line (a bit weird...) and I also tried on initWithFrame:. By itself his code, without any modifications, would give me this kind of errors on the console:

<Error>: CGContextSaveGState: invalid context 0x0
<Error>: CGContextSetLineWidth: invalid context 0x0
<Error>: CGContextSetLineJoin: invalid context 0x0
<Error>: CGContextSetLineCap: invalid context 0x0
<Error>: CGContextSetMiterLimit: invalid context 0x0
<Error>: CGContextSetFlatness: invalid context 0x0
<Error>: CGContextAddPath: invalid context 0x0
<Error>: CGContextDrawPath: invalid context 0x0
<Error>: CGContextRestoreGState: invalid context 0x0

这篇关于UIView带有虚线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！