web-dev-qa-db-ja.com

View Controllerからプログラムで線を描くにはどうすればいいですか?

UIViewControllerがあります。プログラムで作成されたビューの1つに線を引くにはどうすればよいですか?

80
mkc842

2つの一般的なテクニックがあります。

  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をプロジェクトの「ライブラリとリンクバイナリ」に を追加し、.mファイルに<QuartzCore/QuartzCore.h>ヘッダーをインポートする必要がありましたが、それはもう必要ありません(「モジュールを有効にする」および「フレームワークを自動的にリンクする」ビルド設定がオンになっている場合)。

  2. もう1つのアプローチは、UIViewをサブクラス化してから drawRect メソッドで CoreGraphics 呼び出しを使用することです。

    • 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 /ストーリーボードまたはビューの基本クラスとして使用するか、View Controllerにプログラムでサブビューとして追加します。

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

上記の2つのアプローチの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を設定するだけです。

179
Rob

UIViewを作成し、View Controllerのビューのサブビューとして追加します。このサブビューの高さまたは幅を非常に小さく変更して、線のように見せることができます。対角線を描く必要がある場合は、subviews transformプロパティを変更できます。

例えば黒い水平線を描画します。これは、View Controllerの実装内から呼び出されます

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

12
Jeff Ames

以下に便利なテクニックを示します。 Objective-Cのサブクラス化を避けるために描画にブロックを使用する

記事の汎用ビューサブクラスをプロジェクトに含めると、次のようなコードがView Controllerに配置され、その場で線を描画するビューを作成できます。

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];
8
Pierre Houston

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の答えに加えて、簡単に言うと、3番目のアプローチは、UIImageView-隠蔽-xibのビューを使用することです。 (Xcode 5のxibにドラッグしたときのデフォルトのUIImageViewの外観)

歓声と+1!

6
khunshan

スウィフト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)
6
Baraa Al-Tabbaa

実際にはそうすべきではありませんが、何らかの理由でそれが理にかなっている場合、たとえばDelegateDrawViewと呼ばれるUIViewのサブクラスを作成し、次のようなメソッドを実装するデリゲートを取得できます

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

そして、メソッド-[DelegateDrawView drawRect:]でデリゲートメソッドを呼び出します。

しかし、なぜビューコードをコントローラーに入れたいのでしょうか。

UIViewのサブクラスを作成する方が良いでしょう。UIViewの2つの角の間に線を引きます。2つの角を設定して、ビューコントローラーから希望する場所にビューを配置するプロパティを設定できます。

2
Nathan Day

ビュー内に描画するのは非常に簡単です。

必要な場所にコードをコピーして貼り付けてください。

-(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);
}

指が動くように線のように描画します

1
Kishore Kumar