Flutter for SwiftUI Devs - Drawing on the Screen

 In SwiftUI 

Flutter 문서에는 이렇게 한 줄로 설명한다.

SwiftUI에서 스크린에 선이나 모양을 그리기 위해 CoreGraphics를 사용한다.

 

CoreGraphics는 무엇일까?

CoreGraphics는 Framework인데, Quartz technology의 power를 활용하여

lightweight 2D rendering을 높은 정확도의 output으로 수행한다.

path-based drawing, antialiased rendering, gradients, images,

color management, PDF documents, 그 이상을 다룬다.

 

Apple Developer Documentation

 

 

 In Flutter 

Flutter는 Canvas class에 기반한 API를 가지고 있다.

두 가지 class가 draw 하는 데 쓰인다.

1. CustomPaint는 painter를 필요로한다.
   

   CustomPaint(
      painter: SignaturePainter(_points),
      size: Size.infinite,
    ),

2. CustomPainter는 canvas에 그릴 알고리즘을 구현해 준다.

   class SignaturePainter extends CustomPainter {
      SignaturePainter(this.points);
   
      final List<Offset?> points;
   
      @override
      void paint(Canvas canvas, Size size) {
        final Paint paint = Paint()
          ..color = Colors.black
          ..strokeCap = StrokeCap.round
          ..strokeWidth = 5.0;
        for (int i = 0; i < points.length - 1; i++) {
          if (points[i] != null && points[i + 1] != null) {
            canvas.drawLine(points[i]!, points[i + 1]!, paint);
          }
        }
      }
   
      @override
      bool shouldRepaint(SignaturePainter oldDelegate) =>
          oldDelegate.points != points;
    }

 

 

---

 

Flutter for SwiftUI Developers