【问题标题】:Crosshatch in IOS using CoreGraphics?使用 CoreGraphics 在 IOS 中划线?
【发布时间】:2016-10-15 22:59:52
【问题描述】:

如何使用核心图形在 IOS 中的形状填充上划线(应用一组 45 度平行线)?示例代码?

(我对在 MKMapKit 中与 MKPolygon 一起使用特别感兴趣,但目前只是想看看它是否可以在 UIView 中使用 drawRect?所以用交叉影线填充 UIView 的背景)

【问题讨论】:

    标签: ios uiview core-graphics gradient drawrect


    【解决方案1】:

    创建一个UIImage,以任何您想要的方式包含您的剖面线图案(例如,使用 Core Graphics 绘制它或从 PNG 文件加载它)。

    然后使用+[UIColor colorWithPatternImage:] (Swift UIColor(patternImage:)) 创建一个“颜色”来绘制交叉影线图像。

    最后,将图案颜色设置为您的填充颜色,并填充形状(可能是通过填充轮廓轮廓的路径,或使用UIRectFill)。

    如果您需要对图案进行更多控制(以更改其平铺或对齐方式),您可以下拉到核心图形级别并使用CGPatternCreateCGColorCreateWithPattern

    【讨论】:

    • 我对不需要图像的方法感兴趣。您是否建议没有像“渐变”这样的现有方法可以做到这一点?即必须使用 CG 命令以编程方式有效地在 drawrect 中绘制一个?
    • 没有任何内置功能可以自动为您绘制剖面线图案。
    【解决方案2】:

    嘿,试试这个我在 300x300 UIView 上尝试过的示例代码

    - (void)drawRect:(CGRect)rect
    {
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetLineWidth(context, 1.5);
        CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
        int backward=0;
    
        for (int i=0;i<15; i++)
        {
            CGContextMoveToPoint(context, backward, 0);
            CGContextAddLineToPoint(context, 300, 300-backward);
            backward=backward+20;
        }
        int backwardNegitive=0;
        for (int i=0;i<15; i++)
        {
            CGContextMoveToPoint(context, 0,backwardNegitive);
            CGContextAddLineToPoint(context, 300-backwardNegitive,300);
            backwardNegitive=backwardNegitive+20;
        }
        int forward=0;
        for (int i=0;i<15; i++)
        {
            CGContextMoveToPoint(context, 300-forward, 0);
            CGContextAddLineToPoint(context, 0, 300-forward);
            forward=forward+20;
        }
        int forwardNegative=0;
        for (int i=0;i<15; i++)
        {
            CGContextMoveToPoint(context, 0,300+forwardNegative);
            CGContextAddLineToPoint(context,300+forwardNegative,0);
            forwardNegative=forwardNegative+20;
        }
        CGContextStrokePath(context);
    
    }
    

    希望对您有所帮助。

    【讨论】:

      【解决方案3】:

      这就是我在 Apple 开发者论坛上所说的内容:

      #import "CrossHatchView.h"
      
      @implementation CrossHatchView
      
      static  CGFloat  sides = 5.0;
      
      - (void)drawRect:(CGRect)rect
      {
          CGRect  bounds = self.bounds;
      
          UIBezierPath  *path = [UIBezierPath bezierPath];
      
          CGFloat  xCentre = CGRectGetMidX(bounds);
          CGFloat  yCentre = CGRectGetMidY(bounds);
          CGFloat  radius = 0.0;
      
          if (CGRectGetWidth(bounds) > CGRectGetHeight(bounds)) {
              radius = CGRectGetHeight(bounds) / 2.0;
          } else {
              radius = CGRectGetWidth(bounds) / 2.0;
          }
          CGFloat  angleIncrement = 2.0 * M_PI / sides;
      
          CGFloat  initialAngle = ( M_PI + (2.0 * M_PI / sides) ) / 2.0;
      
          for (NSUInteger  i = 0;  i < sides;  i++) {
              CGFloat  angle = initialAngle + i * angleIncrement;
              CGFloat  x = xCentre + radius * cos(angle);
              CGFloat  y = yCentre + radius * sin(angle);
              CGPoint  point = CGPointMake(x, y);
              if (i == 0) {
                  [path moveToPoint:point];
              } else {
                  [path addLineToPoint:point];
              }
          }
          [path closePath];
          [[UIColor cyanColor] set];
          [path addClip];
      
          CGRect  pathBounds = [path bounds];
      
          [path removeAllPoints];
          CGPoint  p1 = pathBounds.origin;
          CGPoint  p2 = CGPointMake(CGRectGetMaxX(pathBounds), CGRectGetMaxY(pathBounds));
          [path moveToPoint:p1];
          [path addLineToPoint:p2];
          path.lineWidth = 400.0;
          CGFloat  dashes[] = { 2.0, 2.0 };
          [path setLineDash:dashes count:2 phase:0.0];
          [[UIColor blackColor] set];
          [path stroke];
      }
      
      @end
      

      【讨论】:

        【解决方案4】:

        对于 swift 3.,使用来自 @user3230875 的方法

        final class CrossHatchView: UIView {
            
            // MARK: - LifeCycle
            
            override func draw(_ rect: CGRect) {
        
                // create rect path with bounds that equal to the 
                // size of a view, in addition it adds rounded corners, this will
                // be used later as a canvas for dash drawing
                let path:UIBezierPath = UIBezierPath(roundedRect: bounds, cornerRadius: 5)
        
                // specify the new area where the our drawing will be visible
                // check [link][1] for more
                path.addClip()
                        
                // grab the size of drawing area
                let pathBounds = path.bounds
        
                // cleanUp rounded rect, that is drawn above
                // just remove roundedRect in the words
                path.removeAllPoints()
        
                // get start and end point of the line
                let p1 = CGPoint(x:pathBounds.maxX, y:0)
                let p2 = CGPoint(x:0, y:pathBounds.maxX)
        
                // draw line
                path.move(to: p1)
                path.addLine(to: p2)
        
                // set line width equal to double width of view
                // because we later will draw this line using dash pattern
                path.lineWidth = bounds.width * 2
                
                // set dash pattern with some interval
                let dashes:[CGFloat] = [0.5, 7.0]
                path.setLineDash(dashes, count: 2, phase: 0.0)
        
                // set color for line 
                UIColor.lightGray.withAlphaComponent(0.5).set()
        
                // actually draw a line using specific
                // color and dash pattern
                path.stroke()
            }
        }
        

        结果:

        【讨论】:

        • 很好的答案。简单的逻辑
        • @hbk 工作正常,谢谢!但我不明白发生了什么。你能编辑答案并解释一下吗?
        • @heyfrank 添加了小解释。最好总是玩代码并阅读每个未知 api 的文档
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-05-31
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-03-14
        • 1970-01-01
        相关资源
        最近更新 更多