[ios] 뷰 컨트롤러에서 프로그래밍 방식으로 선을 어떻게 그리나요?

나는 UIViewController. 프로그래밍 방식으로 생성 된 뷰 중 하나에 선을 어떻게 그리나요?



답변

두 가지 일반적인 기술이 있습니다.

  1. 사용 CAShapeLayer:

    • 다음을 만듭니다 UIBezierPath(원하는대로 좌표를 바꿉니다).

      UIBezierPath *path = [UIBezierPath bezierPath];
      [path moveToPoint:CGPointMake(10.0, 10.0)];
      [path addLineToPoint:CGPointMake(100.0, 100.0)];
      
    • CAShapeLayer그것을 사용하는 만들기 UIBezierPath:

      CAShapeLayer *shapeLayer = [CAShapeLayer layer];
      shapeLayer.path = [path CGPath];
      shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
      shapeLayer.lineWidth = 3.0;
      shapeLayer.fillColor = [[UIColor clearColor] CGColor];
      
    • CAShapeLayer뷰의 레이어에 추가하십시오 .

      [self.view.layer addSublayer:shapeLayer];
      

    이전 버전의 Xcode에서는 QuartzCore.framework를 프로젝트의 “Link Binary with Libraries” 에 수동으로 추가 하고 <QuartzCore/QuartzCore.h>.m 파일 의 헤더를 가져와야 했지만 더 이상 필요하지 않습니다 ( “Enable Modules”및 “Link 프레임 워크 자동 “빌드 설정 사용).

  2. 다른 방법은 하위 클래스 UIView를 만든 다음 메서드 에서 CoreGraphics 호출 을 사용 하는 drawRect것입니다.

    • 크리에이트 UIView서브 클래스를하고 정의 drawRect하여 선을 그립니다.

      Core Graphics로이 작업을 수행 할 수 있습니다.

      - (void)drawRect:(CGRect)rect {
          CGContextRef context = UIGraphicsGetCurrentContext();
      
          CGContextSetStrokeColorWithColor(context, [[UIColor blueColor] CGColor]);
          CGContextSetLineWidth(context, 3.0);
          CGContextMoveToPoint(context, 10.0, 10.0);
          CGContextAddLineToPoint(context, 100.0, 100.0);
          CGContextDrawPath(context, kCGPathStroke);
      }
      

      또는 사용 UIKit:

      - (void)drawRect:(CGRect)rect {
          UIBezierPath *path = [UIBezierPath bezierPath];
          [path moveToPoint:CGPointMake(10.0, 10.0)];
          [path addLineToPoint:CGPointMake(100.0, 100.0)];
          path.lineWidth = 3;
          [[UIColor blueColor] setStroke];
          [path stroke];
      }
      
    • 그런 다음이 뷰 클래스를 NIB / 스토리 보드 또는 뷰의 기본 클래스로 사용하거나 뷰 컨트롤러가 프로그래밍 방식으로이를 하위 뷰로 추가하도록 할 수 있습니다.

      PathView *pathView = [[PathView alloc] initWithFrame:self.view.bounds];
      pathView.backgroundColor = [UIColor clearColor];
      
      [self.view addSubview: pathView];
      

위의 두 가지 접근 방식의 Swift 변환은 다음과 같습니다.

  1. CAShapeLayer:

    // create path
    
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 10, y: 10))
    path.addLine(to: CGPoint(x: 100, y: 100))
    
    // Create a `CAShapeLayer` that uses that `UIBezierPath`:
    
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.blue.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = 3
    
    // Add that `CAShapeLayer` to your view's layer:
    
    view.layer.addSublayer(shapeLayer)
    
  2. UIView 아강:

    class PathView: UIView {
    
        var path: UIBezierPath?           { didSet { setNeedsDisplay() } }
        var pathColor: UIColor = .blue    { didSet { setNeedsDisplay() } }
    
        override func draw(_ rect: CGRect) {
            // stroke the path
    
            pathColor.setStroke()
            path?.stroke()
        }
    
    }
    

    뷰 계층 구조에 추가합니다.

    let pathView = PathView()
    pathView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(pathView)
    
    NSLayoutConstraint.activate([
        pathView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        pathView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        pathView.topAnchor.constraint(equalTo: view.topAnchor),
        pathView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ])
    
    pathView.backgroundColor = .clear
    
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 10, y: 10))
    path.addLine(to: CGPoint(x: 100, y: 100))
    path.lineWidth = 3
    
    pathView.path = path
    

    위에서 PathView프로그래밍 방식으로 추가하고 있지만 IB를 통해 추가 할 수도 있고 path프로그래밍 방식으로 설정할 수도 있습니다.


답변

UIView를 만들고 뷰 컨트롤러 뷰의 하위 뷰로 추가합니다. 이 서브 뷰의 높이 또는 너비를 매우 작게 수정하여 선처럼 보이게 할 수 있습니다. 대각선을 그려야하는 경우 subviews transform 속성을 수정할 수 있습니다.

예를 들어 검은 색 수평선을 그립니다. 이것은 뷰 컨트롤러의 구현에서 호출됩니다.

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0,0, self.view.frame.size.width, 1)];
lineView.backgroundColor = [UIColor blackColor];
[self.view addSubview:lineView];


답변

스위프트 3 :

let path = UIBezierPath()
path.move(to: CGPoint(x: 10, y: 10))
path.addLine(to: CGPoint(x: 100, y: 100))

let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.blue.cgColor
shapeLayer.lineWidth = 3.0

view.layer.addSublayer(shapeLayer)


답변

다음은 유용 할 수있는 멋진 기술 입니다. Objective-C에서 서브 클래 싱을 피하기 위해 그리기에 블록 사용

프로젝트에 기사의 범용 뷰 하위 클래스를 포함하면 다음과 같은 종류의 코드를 뷰 컨트롤러에 넣어 선을 그리는 즉시 뷰를 만들 수 있습니다.

DrawView* drawableView = [[[DrawView alloc] initWithFrame:CGRectMake(0,0,320,50)] autorelease];
drawableView.drawBlock = ^(UIView* v,CGContextRef context)
{
  CGPoint startPoint = CGPointMake(0,v.bounds.size.height-1);
  CGPoint endPoint = CGPointMake(v.bounds.size.width,v.bounds.size.height-1);

  CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
  CGContextSetLineWidth(context, 1);
  CGContextMoveToPoint(context, startPoint.x + 0.5, startPoint.y + 0.5);
  CGContextAddLineToPoint(context, endPoint.x + 0.5, endPoint.y + 0.5);
  CGContextStrokePath(context);
};
[self.view addSubview:drawableView];


답변

UIImageView를 사용하여 선을 그릴 수 있습니다.

그러나 하위 분류를 건너 뛸 수 있습니다. 그리고 Core Graphics에 거의 관심이 없기 때문에 여전히 사용할 수 있습니다. 그냥 넣을 수 있습니다-ViewDidLoad

  UIGraphicsBeginImageContext(self.view.frame.size);
  [self.myImageView.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
  CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
  CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brush);

  CGContextMoveToPoint(UIGraphicsGetCurrentContext(), 50, 50);
  CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), 200, 200);
  CGContextStrokePath(UIGraphicsGetCurrentContext());
  CGContextFlush(UIGraphicsGetCurrentContext());
  self.myImageView.image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

Rob의 대답에 추가로, UIImageView빠른 방법으로 세 번째 접근 방식은 xib의보기 를 사용하는 것입니다. (xcode 5의 xib에서 드래그 할 때 기본 UIImageView 모양)

건배와 +1!


답변

그렇게해서는 안되지만 어떤 이유로 든 이해가된다면 UIView의 하위 클래스를 만들 수 있습니다. DelegateDrawView예를 들어 다음과 같은 메서드를 구현하는 대리자를받는 UIView의 하위 클래스를 만들 수 있습니다.

- (void)delegateDrawView:(DelegateDrawView *)aDelegateDrawView drawRect:(NSRect)dirtyRect

그런 다음 메서드에서- [DelegateDrawView drawRect:]위임 메서드를 호출해야합니다.

하지만 컨트롤러에 뷰 코드를 넣으려는 이유는 무엇입니까?

모서리 중 두 개 사이에 선을 그리는 UIView의 하위 클래스를 만드는 것이 더 낫습니다. 둘 중 하나를 설정 한 다음 뷰 컨트롤러에서 원하는 위치에 뷰를 배치하는 속성을 가질 수 있습니다.


답변

보기 내부를 그리는 것은 매우 간단합니다. @ Mr.ROB는 두 가지 방법이 첫 번째 방법을 취했다고 말했습니다.

원하는 곳에 코드를 복사하여 붙여 넣으십시오.

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[event allTouches] anyObject];
     startingPoint = [touch locationInView:self.view];

    NSLog(@"Touch starting point = x : %f Touch Starting Point = y : %f", touchPoint.x, touchPoint.y);
}
-(void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

}
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[event allTouches] anyObject];
     touchPoint = [touch locationInView:self.view];

    NSLog(@"Touch end point =x : %f Touch end point =y : %f", touchPoint.x, touchPoint.y);
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

    UITouch *touch = [[event allTouches] anyObject];
    touchPoint = [touch locationInView:self.view];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(touchPoint.x,touchPoint.y)];
    [path addLineToPoint:CGPointMake(startingPoint.x,startingPoint.y)];
    startingPoint=touchPoint;
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = [path CGPath];
    shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
    shapeLayer.lineWidth = 3.0;
    shapeLayer.fillColor = [[UIColor redColor] CGColor];
    [self.view.layer addSublayer:shapeLayer];

    NSLog(@"Touch moving point =x : %f Touch moving point =y : %f", touchPoint.x, touchPoint.y);
    [self.view setNeedsDisplay];


}
- (void)tapGestureRecognizer:(UIGestureRecognizer *)recognizer {
    CGPoint tappedPoint = [recognizer locationInView:self.view];
    CGFloat xCoordinate = tappedPoint.x;
    CGFloat yCoordinate = tappedPoint.y;

    NSLog(@"Touch Using UITapGestureRecognizer x : %f y : %f", xCoordinate, yCoordinate);
}

손가락이 움직이는 선처럼 그려집니다.