flutter : CustomPaint

CustomPaint

app view 에 직접적으로 그림을 그릴 수 있게 해주는 위젯들을 살펴보자.

그림을 그리는 동작이 기록되는 Canvas, 그림의 특성등을 지정하는 Paint, 앞의 두 class 를 담아내는 CustomPainter 와 상위 위젯 CustomPaint 가 있다.

CustomPaint class

CustomPaint({Key key, CustomPainter painter, CustomPainter foregroundPainter, Size size: Size.zero, bool isComplex: false, bool willChange: false, Widget child })

A widget that provides a canvas on which to draw during the paint phase.

flutter 가 앱 화면에 그림을 그리게 될 canvas 를 제공하는 위젯이다.

화면 렌더링에 사용될 painter 를 등록하는 역할을 하며 painter 에게는 그려질 영역의 크기를 제공하게 된다.

painter 로 canvas에 그린 후 child 를 그리고 foregroundPainter 로 그리는 순서로 동작한다.

즉, painter 로 그려진 화면 위에 child 위젯을 그리고 그 위에 foregroundPainter 가 그려지게 된다.

setState() 나 markNeedsLayout() 을 호출할 수 없다.

Because custom paint calls its painters during paint, you cannot call setState or markNeedsLayout during the callback (the layout for this frame has already happened).

CustomPaint(
      painter: Sky(),
      child: Text('Once upon a time...'),
      foregroundPainter: Ground(),
);

Sky() painter 로 그려진 화면에 Text 가 그려지고 그 위에 Ground() foregroundPainter 로 그림을 그려내는 렌더링 동작이 수행된다.

CustomPainter class

CustomPainter({Listenable repaint })

The interface used by CustomPaint (in the widgets library) and RenderCustomPaint (in the rendering library).

To implement a custom painter, either subclass or implement this interface to define your custom paint delegate.

CustomPaint 가 사용하는 인터페이스 이다.

paint() 메소드가 앱의 화면이 그려지는 동작이 수행될 때 호출된다.

class Sky extends CustomPainter {
}

method

paint(Canvas canvas, Size size)

The paint method is called whenever the custom object needs to be repainted.

현재의 canvas 에 그리는 동작들이 정의되는 메소드 이다.

실질적인 그림을 그리는 코드는 여기에 구현이 된다.

@override
  void paint(Canvas canvas, Size size) {
      canvas.drawRect(
      rect,
      Paint()..shader = gradient.createShader(rect),
    );
  }

Paint class

Paint

A description of the style to use when drawing on a Canvas.

그려지는 것의 스타일과 관련된 것들을 가진다.

blendMode, color, colorFilter, shader, strokeCap, strokeWidth 등이 있다.

파란색 속성을 가진 paint 를 가지고 네모를 그리는 예제 코드.

var myPaint = Paint()
      ..color = Colors.blue;
canvas.drawRect(rect, myPaint);

특별한 제한이 없다면 canvas 의 크기는 앱 화면의 크기가 되어 전체 화면에 파란색의 네모가 그려졌다.

Canvas class

Canvas(PictureRecorder recorder, [ Rect cullRect ])

An interface for recording graphical operations.

그래픽 관련된 동작을 기록하는 인터페이스 이다.

어느 위치에 점을 그린다거나 어느 위치에 원을 그린다는 식의 시퀀스를 저장하고 있다.

그래픽 관련된 동작의 시퀀스를 나타내는 Picture object 들을 생성하는데 사용된다.

methods

그리기 동작들이 구현되어 있는 다양한 메소드들이 있다.

선, 네모, 원, 반원 등등 다양한 모양을 그릴 수 있다.

drawArc(), drawCircle(), drawRect(), drawImage(), drawLine(), drawOval(), drawPicture(), ...

CustomPainter example

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var myPaint = Paint()
    myPaint.color = Colors.white;
    canvas.drawLine(Offset(10.0, 10.0), Offset(100.0, 200.0), myPaint);
    myPaint.color = Colors.yellow;
    canvas.drawOval(
      Rect.fromCenter(center: Offset(100.0, 150.0), width: 100.0, height: 80.0),
      myPaint
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

painter 가 그려질 canvas 의 크기가 제한된 예제.

Reference

Flutter Documentation