[flutter] superellipse 모양의 정의와 특징

15 Dec 2023

flutter

superellipse(슈퍼엘립스)는 주어진 수식을 따라 생성된 특별한 형태의 곡선을 말합니다. 이러한 곡선은 수학자 네이컬스 아벨이 처음으로 발견하였으며, 롬도르프가 더 널리 알려지도록 하였습니다. 슈퍼엘립스는 수학 및 예술 분야에서 사용되며, 특히 디자인 분야에서 많이 활용됩니다. 지오메트릭한 디자인을 만들 때 유용한 도구로 사용될 수 있습니다.

superellipse의 특징은 무엇이 있나요?

슈퍼엘립스의 가장 큰 특징은 매개변수에 따라 다양한 모양을 가질 수 있다는 것입니다. 추가로, 정사각형과 원 사이의 중간 형태를 가지고 있어, 약간 둥근 모서리가 있는 직사각형처럼 보이는 특징을 가지고 있습니다. 이러한 특징은 슈퍼엘립스를 이용하여 다양한 형태의 아름다운 디자인을 만드는 데에 유용하게 활용될 수 있습니다.

이러한 형태는 Flutter나 다른 그래픽 관련 프레임워크를 사용하여 구현할 수 있으며, 예시 코드를 통해 쉽게 실습해볼 수 있습니다.

예시 코드:

import 'package:flutter/material.dart';

class SuperEllipseShape extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    final double radius = size.width / 2;

    Path path = Path()
      ..moveTo(radius * 1.0, 0) // 시작점
      ..relativeCubicTo(radius * 0.0, 0, radius * 0.3, 0.3 * radius, 0.7 * radius, 0.3 * radius) // 1사분면 커브
      ..relativeCubicTo(0.4 * radius, 0, 0.7 * radius, -0.3 * radius, 0.7 * radius, -0.3 * radius) // 2사분면 커브
      ..relativeCubicTo(0, -0.6 * radius, -0.3 * radius, -0.7 * radius, -0.3 * radius, -0.7 * radius) // 3사분면 커브
      ..relativeCubicTo(0, -0.4 * radius, -0.3 * radius, -0.7 * radius, -0.3 * radius, -0.7 * radius) // 4사분면 커브
      ..relativeCubicTo(-0.6 * radius, 0, -0.7 * radius, 0.3 * radius, -0.7 * radius, 0.3 * radius) // 1사분면 커브
      ..relativeCubicTo(-0.4 * radius, 0, -0.7 * radius, 0.3 * radius, -0.7 * radius, 0.3 * radius) // 2사분면 커브
      ..close();

    canvas.drawPath(path, paint);
  }

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

class MySuperEllipseShapeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: SuperEllipseShape(),
      size: Size(200, 200),
    );
  }
}

이 코드를 통해, SuperEllipse 모양의 디자인을 만들어낼 수 있으며, 이를 활용하여 다양한 아름다운 UI 디자인을 만들어볼 수 있습니다.

더 많은 정보를 확인하려면 아래의 링크를 참고하시기 바랍니다: