[flutter] 플러터 앱에서 superellipse 모양을 이용한 그래프 그리기

15 Dec 2023

flutter

플러터(Flutter)로 그래픽을 그리는 것은 매우 유연하고 다양한 기능을 제공합니다. 이번 포스트에서는 superellipse(슈퍼엘립스) 모양을 이용하여 그래프를 그리는 방법에 대해 알아보겠습니다.

superellipse란?

슈퍼엘립스는 일반적인 원 또는 타원 형태에서 더 유연한 곡선을 만들어내는 수학적 개념입니다. 일반적으로 둥근 형태보다는 보다 각진 형태의 곡선을 만들 때 사용됩니다. 이번 포스트에서는 이러한 슈퍼엘립스 모양을 그래프로 표현하는 방법에 대해 알아보겠습니다.

슈퍼엘립스 그래픽 그리기

플러터(Flutter)에서는 CustomPainter 클래스를 이용하여 그래픽을 그릴 수 있습니다. 다음은 슈퍼엘립스 형태로 그래픽을 그리는 예제 코드입니다.

import 'package:flutter/material.dart';
import 'dart:math' as math;

class SuperEllipsePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;

    Path path = Path();
    double a = 100; // x축 반경
    double b = 100; // y축 반경
    double n = 2;   // 각도

    for (int i = 0; i <= 360; i++) {
      double t = i * (math.pi / 180);
      double x = a * math.pow(math.cos(t), 2 / n) * math.sign(math.cos(t));
      double y = b * math.pow(math.sin(t), 2 / n) * math.sign(math.sin(t));
      if (i == 0) {
        path.moveTo(size.width / 2 + x, size.height / 2 + y);
      } else {
        path.lineTo(size.width / 2 + x, size.height / 2 + y);
      }
    }

    canvas.drawPath(path, paint);
  }

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

class SuperEllipseGraph extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomPaint(
        painter: SuperEllipsePainter(),
        size: Size(200, 200),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: SuperEllipseGraph(),
      ),
    ),
  ));
}

위 코드는 CustomPainter를 상속받아 SuperEllipsePainter 클래스를 정의하고, 그래픽을 그리는 로직을 구현한 뒤, SuperEllipseGraph 위젯에서 사용하는 예제입니다.

이제 위 코드를 실행하면, 슈퍼엘립스 모양의 그래픽이 화면에 그려지는 것을 확인할 수 있을 것입니다.

이렇게 플러터에서는 수학적 개념을 활용하여 다양한 그래픽을 그릴 수 있습니다. 슈퍼엘립스를 포함한 다양한 수학적 개념을 활용하여 창의적이고 흥미로운 그래픽을 만들어보세요!