图片上的iOS线测量

Question

我需要一些帮助才能开始绘制两端带有圆圈的线并测量其长度。我能够划清界线，但不能让它移动，花了几个小时决定在 SO 上发帖。

所以请看下图并指导我开始。任何使用 objective-c 的示例或教程都会有所帮助。

谢谢 :)

Answer 1

这个想法看起来很有趣，所以我在 Xcode 中开始了一个新项目并创建了一个概念验证。

LineView(UIView子类)

这个类负责绘制两个圆和一条连接它们中心的线。

class LineView: UIView {

    var startPoint: CGPoint?
    var endPoint: CGPoint?

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setup()
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setup()
    }

    private func setup() {
        self.backgroundColor = UIColor.clearColor()
        self.multipleTouchEnabled = true
    }

    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        self.updatePointsWithTouches(touches)
    }

    override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
        self.updatePointsWithTouches(touches)
    }

    override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
        self.clearPoints()
    }

    override func touchesCancelled(touches: Set<UITouch>?, withEvent event: UIEvent?) {
        self.clearPoints()
    }

    private func updatePointsWithTouches(touches: Set<UITouch>) {
        if touches.count >= 1 {
            self.startPoint = touches[advance(touches.startIndex, 0)].locationInView(self)
        }

        if touches.count >= 2 {
            self.endPoint = touches[advance(touches.startIndex, 1)].locationInView(self)
        }

        self.setNeedsDisplay()
    }

    private func clearPoints() {
        self.startPoint = nil
        self.endPoint = nil
        self.setNeedsDisplay()
    }



    // MARK: - Drawing

    override func drawRect(rect: CGRect) {
        // draw circle at startPoint
        if let sp = self.startPoint {
            self.drawTouchCircleAtPoint(sp)
        }

        // draw circle at endPoint
        if let ep = self.endPoint {
            self.drawTouchCircleAtPoint(ep)
        }

        // draw line between points
        if let sp = self.startPoint, ep = self.endPoint {
            self.drawLineBetweenFirstPoint(sp, secondPoint: ep)
        }
    }

    private func drawTouchCircleAtPoint(p: CGPoint) {
        let context = UIGraphicsGetCurrentContext()
        CGContextSaveGState(context)

        CGContextSetLineWidth(context, 2.0)
        CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 0.6)

        CGContextAddArc(context, p.x, p.y, CGFloat(30.0), CGFloat(0.0), CGFloat(M_PI * 2), 1)
        CGContextFillPath(context)

        CGContextRestoreGState(context)
    }

    private func drawLineBetweenFirstPoint(p1: CGPoint, secondPoint p2: CGPoint) {
        let context = UIGraphicsGetCurrentContext()
        CGContextSaveGState(context)

        CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().colorWithAlphaComponent(0.6).CGColor)
        CGContextSetLineWidth(context, 1.0)

        CGContextMoveToPoint(context, p1.x, p1.y)
        CGContextAddLineToPoint(context, p2.x, p2.y)
        CGContextStrokePath(context)

        CGContextRestoreGState(context)
    }
}

此类引入了两个私有(private)属性:startPoint 和 endPoint，它们跟踪用户手指触摸 View 的位置。

在这个类中，您会发现一个从所有初始化程序调用的 setup() 函数。 self.multipleTouchEnabled = true 在这里至关重要，因此 View 可以同时检测到多个触摸。

touchesBegan/Moved/Ended/Cancelled 函数调用辅助函数，提取 touches 集中 UITouch 实例的位置。

最后，最后三个函数负责绘制圆和连接线。

InteractiveImageView(UIImageView 子类)

class InteractiveImageView: UIImageView {

    private var lineView: LineView!

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setup()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setup()
    }

    private func setup() {
        self.userInteractionEnabled = true
        self.lineView = LineView(frame: self.bounds)
        self.addSubview(self.lineView)
    }

}

这个 UIImageView 子类有一个嵌入的 LineView 来捕获多点触摸事件。

---

您也可以将这些类与 Storyboard 一起使用!只需拖出一个 UIImageView，将其类更改为 InteractiveImageView，设置适当的约束，然后运行该应用程序。我会留给您在圆心之间的轴上绘制文本。

这是我的概念验证图片。

---

对于寻求Objective-C解决方案的人，请参阅下面的LineView和InteractiveImageView实现文件。

LineView(在 Objective-C 中)

#import "LineView.h"

@interface LineView ()

@property (nonatomic) CGPoint startPoint;
@property (nonatomic) CGPoint endPoint;

@end

@implementation LineView

- (instancetype)init
{
    self = [super init];
    if (self) {
        [self setup];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        [self setup];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup
{
    self.backgroundColor = [UIColor clearColor];
    self.multipleTouchEnabled = true;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self updatePointsWithTouches:touches];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self updatePointsWithTouches:touches];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self clearPoints];
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self clearPoints];
}

- (void)clearPoints
{
    self.startPoint = CGPointZero;
    self.endPoint = CGPointZero;
    [self setNeedsDisplay];
}

- (void)updatePointsWithTouches:(NSSet *)touches
{
    if (touches.count >= 1) {
        UITouch *touch = [touches allObjects][0];
        self.startPoint = [touch locationInView:self];
    }

    if (touches.count >= 2) {
        UITouch *touch = [touches allObjects][1];
        self.endPoint = [touch locationInView:self];
    }

    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    if (self.startPoint.x != 0 && self.startPoint.y != 0) {
        [self drawTouchCircleAtPoint:self.startPoint];
    }

    if (self.endPoint.x != 0 && self.endPoint.y != 0) {
        [self drawTouchCircleAtPoint:self.endPoint];
    }

    if (self.endPoint.x != 0 && self.endPoint.y != 0 &&
        self.startPoint.x != 0 && self.startPoint.y != 0) {
        [self drawLineBetweenFirstPoint:self.startPoint end:self.endPoint];
    }
}

- (void)drawLineBetweenFirstPoint:(CGPoint)startPoint end:(CGPoint)endPoint
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextSetStrokeColorWithColor(context, [[[UIColor whiteColor] colorWithAlphaComponent:0.6] CGColor]);
    CGContextSetLineWidth(context, 1.0);

    CGContextMoveToPoint(context, startPoint.x, startPoint.y);
    CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);
}

- (void)drawTouchCircleAtPoint:(CGPoint)CirclePoint
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextSetLineWidth(context, 2.0);
    CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 0.6);

    CGContextAddArc(context, CirclePoint.x, CirclePoint.y, 30.0, 30.0,  M_PI * 2, YES);
    CGContextFillPath(context);
    CGContextRestoreGState(context);
}

@end

InteractiveImageView(在 Objective-C 中)

#import "InteractiveImageView.h"
#import "LineView.h"

@interface InteractiveImageView ()

@property (strong, nonatomic) LineView *lineView;

@end

@implementation InteractiveImageView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup
{
    self.userInteractionEnabled = YES;
    self.lineView = [[LineView alloc] initWithFrame:self.bounds];
    [self addSubview:self.lineView];
}

@end