在两个可移动的 uiviews 之间画线
Posted
技术标签:
【中文标题】在两个可移动的 uiviews 之间画线【英文标题】:Draw line between two movable uiviews 【发布时间】:2014-05-19 22:54:44 【问题描述】:我有一个“滚动视图”,其中包含可以拖动的节点 (UIViews
)。我正在尝试使用“calayer”在选定的UIViews
之间绘制边缘,但是当视图位置发生变化时,我无法弄清楚如何重绘线。
在我的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】:问题不在于您添加观察者的位置,而在于您要观察的内容——您使用 endNode 作为 endNode 上的 keyPath,这不起作用(无论如何,当您拖动时,endNode 不会改变)。您要观察的 endNode 的属性是中心。
您只需将您正在观察的 keyPath 更改为“中心”,并更改您的 observeValueForKeyPath:ofObject:change:context: 的实现:就像这样,
-(void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
if ([keyPath isEqualToString:@"center"] ) [self setNeedsDisplay];
我通过将平移手势识别器添加到其中一个 nodeView 来对此进行测试,并且在我拖动时,连接两个节点的线会相应更新。
【讨论】:
感谢您的帮助。其实挺简单的,想理解的时候肯定累了。我还有一个问题。我应该如何以及何时移除观察者?我可能想删除节点,然后我需要删除线及其观察者,还是? @freddy,如果您要删除节点,那么您应该以与执行此操作相同的方法删除观察者。如果您要离开此控制器,您可能应该删除 viewDidDisappear 或 dealloc 中的所有观察者。以上是关于在两个可移动的 uiviews 之间画线的主要内容,如果未能解决你的问题,请参考以下文章