如何从视图控制器以编程方式绘制一条线? [英] How do you draw a line programmatically from a view controller?

问题描述

我有一个 UIViewController.如何在其中一个以编程方式创建的视图中画一条线?

I have a UIViewController. How do I draw a line in one of its programmatically created views?

推荐答案

有两种常用技术.

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

创建一个使用该 UIBezierPath 的 CAShapeLayer:

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 文件中导入 标头，但这不再是必需的(如果您有启用模块"和自动链接框架"构建设置已打开).

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 进行子类化，然后使用 CoreGraphics 调用 drawRect 方法:

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.

这篇关于如何从视图控制器以编程方式绘制一条线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！