且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

你如何以编程方式从视图控制器中画一条线?

更新时间:2023-02-16 09:40:22

有两种常用的技巧.

  1. 使用 CAShapeLayer:

  • 创建一个UIBezierPath(用你想要的替换坐标):

  • Create a UIBezierPath (replace the coordinates with whatever you want):

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10.0, 10.0)];
[path addLineToPoint:CGPointMake(100.0, 100.0)];

  • 创建一个使用该 UIBezierPathCAShapeLayer:

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = [path CGPath];
    shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
    shapeLayer.lineWidth = 3.0;
    shapeLayer.fillColor = [[UIColor clearColor] CGColor];
    

  • 将该 CAShapeLayer 添加到您的视图层:

    [self.view.layer addSublayer:shapeLayer];
    

  • 在以前版本的 Xcode 中,您必须手动将 QuartzCore.framework 添加到您的项目的Link Binary with Libraries" 并在您的 .m 文件中导入 <QuartzCore/QuartzCore.h> 标头,但这不再是必需的(如果您有Enable Modules"和自动链接框架"构建设置打开).

    In previous versions of Xcode, you had to manually add QuartzCore.framework to your project's "Link Binary with Libraries" and import the <QuartzCore/QuartzCore.h> header in your .m file, but that's not necessary anymore (if you have the "Enable Modules" and "Link Frameworks Automatically" build settings turned on).

    另一种方法是继承 UIView 然后使用 CoreGraphicsdrawRect 方法中调用:

    The other approach is to subclass UIView and then use CoreGraphics calls in the drawRect method:

    • 创建一个 UIView 子类并定义一个绘制线条的 drawRect.

    • Create a UIView subclass and define a drawRect that draws your line.

    您可以使用 Core Graphics 做到这一点:

    You can do this with Core Graphics:

    - (void)drawRect:(CGRect)rect {
        CGContextRef context = UIGraphicsGetCurrentContext();
    
        CGContextSetStrokeColorWithColor(context, [[UIColor blueColor] CGColor]);
        CGContextSetLineWidth(context, 3.0);
        CGContextMoveToPoint(context, 10.0, 10.0);
        CGContextAddLineToPoint(context, 100.0, 100.0);
        CGContextDrawPath(context, kCGPathStroke);
    }
    

    或者使用UIKit:

    - (void)drawRect:(CGRect)rect {
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(10.0, 10.0)];
        [path addLineToPoint:CGPointMake(100.0, 100.0)];
        path.lineWidth = 3;
        [[UIColor blueColor] setStroke];
        [path stroke];
    }
    

  • 然后您可以将此视图类用作您的 NIB/故事板或视图的基类,或者您可以让您的视图控制器以编程方式将其添加为子视图:

  • Then you can either use this view class as the base class for your NIB/storyboard or view, or you can have your view controller programmatically add it as a subview:

    PathView *pathView = [[PathView alloc] initWithFrame:self.view.bounds];
    pathView.backgroundColor = [UIColor clearColor];
    
    [self.view addSubview: pathView];
    

  • 上述两种方法的 Swift 版本如下:


    The Swift renditions of the two above approaches are as follows:

    1. CAShapeLayer:

    // create path
    
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 10, y: 10))
    path.addLine(to: CGPoint(x: 100, y: 100))
    
    // Create a `CAShapeLayer` that uses that `UIBezierPath`:
    
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.blue.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = 3
    
    // Add that `CAShapeLayer` to your view's layer:
    
    view.layer.addSublayer(shapeLayer)
    

  • UIView 子类:

    class PathView: UIView {
    
        var path: UIBezierPath?           { didSet { setNeedsDisplay() } }
        var pathColor: UIColor = .blue    { didSet { setNeedsDisplay() } }
    
        override func draw(_ rect: CGRect) {
            // stroke the path
    
            pathColor.setStroke()
            path?.stroke()
        }
    
    }
    

    并将其添加到您的视图层次结构中:

    And add it to your view hierarchy:

    let pathView = PathView()
    pathView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(pathView)
    
    NSLayoutConstraint.activate([
        pathView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        pathView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        pathView.topAnchor.constraint(equalTo: view.topAnchor),
        pathView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ])
    
    pathView.backgroundColor = .clear
    
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 10, y: 10))
    path.addLine(to: CGPoint(x: 100, y: 100))
    path.lineWidth = 3
    
    pathView.path = path
    

    上面,我以编程方式添加 PathView,但您也可以通过 IB 添加它,只需以编程方式设置其 path.

    Above, I'm adding PathView programmatically, but you can add it via IB, too, and just set its path programmatically.