在两个可移动的uiviews之间画线

时间:2014-05-19 22:54:44

标签: ios objective-c uiview calayer key-value-observing

我有一个带有节点(UIViews)的“scrollview”,可以拖动它们。我试图在选定的UIViews和“calayer”之间绘制边缘,但我无法弄清楚当视图位置发生变化时如何重绘线条。

在我的viewController类中,我将节点数组中第一个和第二个之间的边添加为:

EdgeLayer *edge = [[EdgeLayer alloc]init];
edge.delegate = self;
edge.strokeColor = [UIColor colorWithWhite:0.25 alpha:1.0];
edge.strokeWidth = 0.5;
edge.startNode = [nodes objectAtIndex:0];
edge.endNode = [nodes objectAtIndex:1];
edge.frame = scrollView.bounds;
[scrollView.layer addSublayer:edge];
[edge setNeedsDisplay];

EdgeLayer.h

#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>

@interface EdgeLayer : CALayer
@property (nonatomic, strong) UIColor *fillColor;
@property (nonatomic) CGFloat strokeWidth;
@property (nonatomic, strong) UIColor *strokeColor;
@property (nonatomic) UIView *startNode;
@property (nonatomic) UIView *endNode;
@end

EdgeLayer.m

#import "EdgeLayer.h"
#import "NodeView.h"

@implementation EdgeLayer

@synthesize fillColor, strokeColor, strokeWidth;
- (id)init {
    self = [super init];
    if (self) {
    self.fillColor = [UIColor grayColor];
    self.strokeColor = [UIColor blackColor];
    self.strokeWidth = 1.0;
    [self setNeedsDisplay];
}

return self;
}

- (void) setStartNode:(NodeView*)startNode
{
     _startNode = startNode;
     [self setNeedsDisplay];
}

- (void) setEndNode:(NodeView*)endNode
{
    _endNode = endNode;
    [endNode addObserver:self forKeyPath:@"endNode" options:NSKeyValueObservingOptionNew context:nil];
    [self setNeedsDisplay];
 }

-(id)initWithLayer:(id)layer
{
    self = [super initWithLayer:layer];
    return self;
}

-(void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:    (NSDictionary *)change context:(void *)context
{
    if ([keyPath isEqualToString:@"endNode"] )
    {
    // process here
    }
    NSLog(@"View changed its geometry");
}

- (void)drawInContext:(CGContextRef)ctx
{
    NSLog(@"DRAW");

    CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
    CGContextSetLineWidth(ctx, 2);
    CGContextMoveToPoint(ctx, _startNode.center.x, _startNode.center.y);
    CGContextAddLineToPoint(ctx, _endNode.center.x, _endNode.center.y);
    CGContextStrokePath(ctx);
}
@end

这会从第一个和第二个节点中心位置添加一条线。我试图为终端节点添加一个观察者,但我不认为我做得对。我无法触发observeValueForKeyPath方法。我的猜测是我把观察者添加到了错误的地方。

1 个答案:

答案 0 :(得分:2)

问题不在于您添加观察者的位置,而在于您要观察的内容 - 您正在使用endNode作为endNode上的keyPath,这将无法正常工作(无论如何,endNode都不会更改)。您要观察的endNode属性是中心。

然后你需要将你正在观察的keyPath更改为“center”,并更改observeValueForKeyPath:ofObject的实现:change:context:like so,

-(void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if ([keyPath isEqualToString:@"center"] ) [self setNeedsDisplay];
}

我通过向其中一个nodeView添加一个平移手势识别器来测试这个,并且在我拖动时连接两个节点的线路已经适当更新。