iOS图片上的线条测量

Question

我需要一些帮助才能开始绘制带圆圈的线条并测量其长度.我能够画线,但不能让它移动,花了几个小时决定发布SO.

所以请看下面的图片并指导我开始.任何使用目标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)
    }
}

这个类引入了两个私有属性:startPoint并endPoint跟踪用户手指触摸视图的位置.

在这个类中,您将找到setup()从所有初始化程序调用的函数.self.multipleTouchEnabled = true这里至关重要,因此视图可以同时检测多个触摸.

这些touchesBegan/Moved/Ended/Cancelled函数调用辅助函数来提取集合中UITouch实例的位置touches.

最后,最后三个函数负责绘制圆和连接线.

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一起使用!只需拖出a UIImageView,将其更改为类InteractiveImageView,设置适当的约束,然后运行应用程序.我将把它留给你在圆心之间的轴上画出文字.

这是我的概念验证图片. http://i60.tinypic.com/2wp2wds.png

对于那些寻找一个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