[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (3) Canvas내의 터치(마우스) 좌표 획득하는 방법

Flutter Canvas에서 터치(마우스) 좌표를 획득하는 방법

Flutter의 Canvas를 활용해 화면에서 터치 또는 마우스의 좌표를 획득하는 방법을 다룹니다. 이 과정에서 GestureDetector와 CustomPainter를 활용하며, 구현한 코드를 함께 제공합니다.

GestureDetector로 좌표 획득

Flutter에서는 GestureDetector 위젯을 사용하여 터치 이벤트를 감지하고, 해당 좌표를 획득할 수 있습니다.

코드 예제

 import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  const GridPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTapDown: (detail) {
          print("onTapDown:(${detail.localPosition})");
        },
        onTapUp: (detail) {
          print("onTapUp:(${detail.localPosition})");
        },
        onHorizontalDragUpdate: (detail) {
          print("onHorizontalDragUpdate:(${detail.localPosition})");
        },
        child: CustomPaint(
          child: Container(),
          painter: GridPainter(),
        ),
      ),
    );
  }
}

설명

• GestureDetector는 사용자의 터치 이벤트를 감지합니다.
  • onTapDown: 터치가 발생한 좌표를 출력.
  • onTapUp: 터치가 끝난 좌표를 출력.
  • onHorizontalDragUpdate: 드래그하는 동안의 좌표를 실시간으로 출력.
• 이 위젯의 child에 CustomPaint를 사용하여 그리드를 화면에 표시합니다.

CustomPainter로 배경과 그리드 그리기

다음 코드는 Canvas에 그리드와 배경을 그리며, GestureDetector와 결합하여 터치 좌표를 얻을 수 있습니다.

전체 코드

 import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  const GridPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTapDown: (detail) {
          print("onTapDown:(${detail.localPosition})");
        },
        onTapUp: (detail) {
          print("onTapUp:(${detail.localPosition})");
        },
        onHorizontalDragUpdate: (detail) {
          print("onHorizontalDragUpdate:(${detail.localPosition})");
        },
        child: CustomPaint(
          child: Container(),
          painter: GridPainter(),
        ),
      ),
    );
  }
}

class GridPainter extends CustomPainter {
  static const double gridWidth = 50.0;
  static const double gridHeight = 50.0;

  @override
  void paint(Canvas canvas, Size size) {
    // 배경 색상
    var backgroundPaint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.lime
      ..isAntiAlias = true;

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

    // 그리드 선 색상
    var linePaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.black38
      ..isAntiAlias = true;

    // 가로선
    for (double y = 0; y <= size.height; y += gridHeight) {
      canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
    }

    // 세로선
    for (double x = 0; x <= size.width; x += gridWidth) {
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

설명

• GridPainter는 고정된 간격의 그리드를 그립니다.
• CustomPainter의 paint 메서드는 Canvas를 사용하여 배경과 선을 그립니다.
• GestureDetector와 결합하면 그리드에서 터치 좌표를 손쉽게 감지할 수 있습니다.

결론

Flutter의 GestureDetector는 사용자 입력 이벤트를 처리하고, CustomPainter는 화면에 원하는 요소를 그릴 수 있는 강력한 도구입니다. 이를 결합하여 터치 이벤트와 시각적 피드백을 모두 처리할 수 있습니다.

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

위 코드를 사용해 Canvas에서 터치 좌표를 감지하는 기능을 구현해보세요! 추가로 커스터마이징이 필요하면 알려주세요.