在UIView上画一条5像素的线

时间:2013-03-27 20:33:03

标签: ios objective-c uiview uitouch

我有一个非常简单(希望非常简单)的问题。在Objective-C中,如何在两点之间画一条线并将其添加到UIView?我已尝试使用UIImageView并操纵其Transform属性,但在使用以下代码时,最终会将该行转换为正方形或矩形:

[[self tline] setFrame:CGRectMake(start.x, start.y, width, 5)];
[[self tline] setTransform:CGAffineTransformMakeRotation(angle)];

我有两个CGPoints,startend,我想在这两个点之间画一条动态的5px线并将其添加到我的子视图中。

BK:

start是用户开始触摸屏幕的点,点end是用户手指当前所在的点。显然,这会在游戏过程中发生很大变化。我需要能够移动这一行来连接这两点。

我正在使用touchesBegan:, Moved:, and Ended:方法创建,移动和销毁该行。

CoreGraphics中

我有以下代码;如何将此行添加到self.view

CGContextRef c = UIGraphicsGetCurrentContext();
CGFloat color[4] = {1.0f, 1.0f, 1.0f, 0.6f};
CGContextSetStrokeColor(c, color);
CGContextBeginPath(c);
CGContextMoveToPoint(c, start.x, start.y);
CGContextAddLineToPoint(c, end.x, end.y);
CGContextSetLineWidth(c, 5);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextStrokePath(c);

自定义UIView:

#import <UIKit/UIKit.h>

@interface DrawingView : UIView

@property (nonatomic) CGPoint start;
@property (nonatomic) CGPoint end;

- (void)drawRect:(CGRect)rect;

@end

#import "DrawingView.h"

@implementation DrawingView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextSetLineCap(context, kCGLineCapSquare);
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor); //change color here
    CGFloat lineWidth = 5.0; //change line width here
    CGContextSetLineWidth(context, lineWidth);
    CGPoint startPoint = [self start];
    CGPoint endPoint = [self end];
    CGContextMoveToPoint(context, startPoint.x + lineWidth/2, startPoint.y + lineWidth/2);
    CGContextAddLineToPoint(context, endPoint.x + lineWidth/2, endPoint.y + lineWidth/2);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);

    NSLog(@"%f",_end.x);
}

- (void)setEnd:(CGPoint)end
{
    _end = end;
    [self setNeedsDisplay];
}

@end

drawRect:仅在初始化视图时调用...

UIViewController中的Draw方法:

- (void)drawTLine:(CGPoint)start withEndPoint:(CGPoint)end
{   
    [[self dview] setStart:start];
    [[self dview] setEnd:end];
    [[self dview] drawRect:[self dview].frame];
}

这是我添加绘图视图的方式:

DrawingView* dview = [[DrawingView alloc] initWithFrame:self.view.frame];
[dview setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:dview];

2 个答案:

答案 0 :(得分:3)

子类UIView并使用drawRect:方法

执行自定义绘图
- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextSetLineCap(context, kCGLineCapSquare);
    CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor); //change color here
    CGFloat lineWidth = 1.0; //change line width here
    CGContextSetLineWidth(context, lineWidth); 
    CGPoint startPoint = rect.origin; //change start point here
    CGPoint endPoint = {.x = CGRectGetMaxX(rect), .y = startPoint.y} //change end point here
    CGContextMoveToPoint(context, startPoint.x + lineWidth/2, startPoint.y + lineWidth/2);
    CGContextAddLineToPoint(context, endPoint.x + lineWidth/2, endPoint.y + lineWidth/2);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);        
}

这会在UIView的顶部绘制一条黑色的1px行。

如果您需要更新该行,您可以使用一些属性,如

@property (nonatomic) CGPoint startPoint;

并为setter提供自定义实现,如

- (void)setStartPoint:(CGPoint)point {
      _point = point;
      [self setNeedsDisplay]; // this will cause drawRect: to be called again
}

为您希望控制的每个属性执行此操作,并使drawRect:使用此类属性进行绘制。

答案 1 :(得分:0)

你可以像这样创建和UIBezierPath

UIBezierPath path = [[UIBezierPath alloc] init]
[path moveToPoint: CGPoint(x,y)] // X and Y, start point
[path addLineToPoint:CGPoint(x2,y2) // X2 and Y2, end point

如果要创建形状,可以使用addLineToPoint:方法添加更多点并完成使用 closePath方法

我希望能帮到你