[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (4) Canvas에 Text 그리기

Canvas에 Text 그리기

실행 화면

화면 특정 좌표에 원과 텍스트를 그리는 예제입니다. 원, 사각형, 라인 등은 좌표만 입력하면 쉽게 그릴 수 있기 때문에 사용법이 조금 다른 텍스트 그리기 위주로 포스팅합니다.

Flutter Canvas에서 텍스트 그리기: 자세한 설명과 코드

Flutter의 Canvas를 활용하여 화면에 텍스트를 그리는 방법을 다룹니다. 이 과정에서 TextPainter를 사용하여 텍스트를 원하는 위치에 그리는 예제를 제공합니다.

1. 텍스트 그리기 함수

Canvas에 텍스트를 그리기 위해서는 TextPainter를 활용해야 합니다. 아래는 텍스트를 중심 정렬로 그리는 함수입니다.

 void _drawText(Canvas canvas, double centerX, double centerY, String text, TextStyle style) {
  final textSpan = TextSpan(
    text: text,
    style: style,
  );

  final textPainter = TextPainter()
    ..text = textSpan
    ..textDirection = TextDirection.ltr
    ..textAlign = TextAlign.center
    ..layout();

  final double xCenter = centerX - textPainter.width / 2;
  final double yCenter = centerY - textPainter.height / 2;
  final Offset offset = Offset(xCenter, yCenter);

  textPainter.paint(canvas, offset);
}

설명

• TextSpan: 텍스트와 스타일 정보를 담습니다.
• TextPainter: 텍스트의 레이아웃을 계산하고 그립니다.
• 중심 정렬을 위해 텍스트의 너비와 높이를 계산한 후, 시작 위치를 보정합니다.

2. 전체 코드 예제

Canvas에 원과 텍스트를 함께 그리는 예제입니다.

 import 'package:flutter/material.dart';

class TextDrawingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        child: Container(),
        painter: TextPainterExample(),
      ),
    );
  }
}

class TextPainterExample extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 배경 그리기
    final paintBackground = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paintBackground);

    // 원과 텍스트 스타일 정의
    final paintCircle = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    final textStyle = TextStyle(
      color: Colors.white,
      fontSize: 20,
    );

    // 원과 텍스트 그리기
    final center = Offset(size.width / 2, size.height / 2);
    canvas.drawCircle(center, 50.0, paintCircle);
    _drawText(canvas, center.dx, center.dy, "Flutter", textStyle);
  }

  void _drawText(Canvas canvas, double centerX, double centerY, String text, TextStyle style) {
    final textSpan = TextSpan(
      text: text,
      style: style,
    );

    final textPainter = TextPainter()
      ..text = textSpan
      ..textDirection = TextDirection.ltr
      ..textAlign = TextAlign.center
      ..layout();

    final double xCenter = centerX - textPainter.width / 2;
    final double yCenter = centerY - textPainter.height / 2;
    final Offset offset = Offset(xCenter, yCenter);

    textPainter.paint(canvas, offset);
  }

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

설명

1. CustomPainter를 사용하여 화면에 그립니다.
2. paint 메서드에서 배경, 원, 텍스트를 순차적으로 그립니다.
3. _drawText 함수는 텍스트의 위치와 스타일을 정렬하여 Canvas에 텍스트를 렌더링합니다.

결론

Flutter Canvas에서 텍스트를 그리는 방법은 TextPainter를 활용하여 구현할 수 있습니다. 이 과정을 통해 원하는 위치에 텍스트를 표시하고, 다양한 스타일을 적용할 수 있습니다.

이 코드를 기반으로 다양한 응용을 시도해보세요! 필요 시 추가적으로 커스터마이징이 가능합니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com