IOS 中使用 CoreGraphics 的交叉影线？

Question

如何使用核心图形在 IOS 中填充一个形状（应用一组 45 度角的平行线）？示例代码？

（我对在 MKMapKit 中使用 MKPolygon 特别感兴趣，但是目前只是想看看在 UIView 中使用 drawRect 是否可行？所以用交叉线填充 UIView 的背景）

Answer 1

创建一个 UIImage 以您想要的任何方式包含您的交叉影线图案（例如，通过使用 Core Graphics 绘制它或从 PNG 文件加载它）。

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

最后，将图案颜色设置为填充颜色，并填充形状（大概是通过填充轮廓形状的路径，或使用 UIRectFill）。

如果您需要对图案进行更多控制（以更改其平铺或对齐方式），您可以下降到 Core Graphics 级别并使用 CGPatternCreate 和 CGColorCreateWithPattern。

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

}

希望对您有所帮助。

Answer 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

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

结果：

IOS 中使用 CoreGraphics 的交叉影线？

Crosshatch in IOS using CoreGraphics?

gradient

core-graphics

uiview

drawrect

ios