[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: 드래그하는 동안의 좌표를 실시간으로 출력.
  • 이 위젯의 childCustomPaint를 사용하여 그리드를 화면에 표시합니다.

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는 고정된 간격의 그리드를 그립니다.
  • CustomPainterpaint 메서드는 Canvas를 사용하여 배경과 선을 그립니다.
  • GestureDetector와 결합하면 그리드에서 터치 좌표를 손쉽게 감지할 수 있습니다.

결론

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

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

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

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
185 [flutter (플루터 앱 개발)] Dart와 Flutter를 ChatGPT에게 배우다. file 졸리운_곰 2025.02.03 7
184 [flutter (플루터 앱 개발)] Flutter PDF 뷰어를 만드는 방법 : How to build a Flutter PDF viewer file 졸리운_곰 2025.01.19 10
183 [flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (6) 드래그로 Canvas 내 Object 이동시키기 졸리운_곰 2025.01.19 7
182 [flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (5) 드래그로 Canvas 이동시키기 file 졸리운_곰 2025.01.18 6
181 [flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (4) Canvas에 Text 그리기 file 졸리운_곰 2025.01.18 9
» [flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (3) Canvas내의 터치(마우스) 좌표 획득하는 방법 졸리운_곰 2025.01.17 5
179 [flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (2) Grid 격자 그리기 file 졸리운_곰 2025.01.17 12
178 [flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (1) 배경 색상 그리기 file 졸리운_곰 2025.01.16 9
177 [게임 일반] 선택 기반 게임의 표준 패턴 : Standard Patterns in Choice-Based Games 졸리운_곰 2025.01.13 7
176 [dart / flutter] Drawing Pixels With Dart : Dart 2d 그래픽 픽셀처리 file 졸리운_곰 2024.12.29 24
175 [unity, unity3d] 씬 뷰 조작법 | 유니티 졸리운_곰 2024.12.26 23
174 [Unity] 3D 씬(Scene) 뷰 조작법 file 졸리운_곰 2024.12.23 46
173 [Unity] 3D Unity 조작하기 file 졸리운_곰 2024.12.23 45
172 [flutter (플루터 앱 개발)] How to Implement Any UI in Flutter : 플러터에서 모든 UI를 구현하는 방법 file 졸리운_곰 2024.12.20 16
171 [Ren'Py] 렌파이(RenPy) 에 광고 (애드몹) 붙이기 file 졸리운_곰 2024.12.20 40
170 [godot 엔진] 오픈 소스 고도 프로젝트 모음 - 고도 배우기, Godot file 졸리운_곰 2024.12.16 80
169 [RPG Maker] Simple AdMob - RPG Maker MV 졸리운_곰 2024.12.16 16
168 [RPG Maker] 코르도바 광고 삽입 플러그인 - RPG Maker MV file 졸리운_곰 2024.12.15 25
167 [RPG Maker] MacOS에서 RPG Maker MZ로 만든 게임을 Android 앱으로 빌드하기 file 졸리운_곰 2024.12.15 19
166 [Unity] [모바일, 2D] 유니티 기초2 - 씬 전환하기 file 졸리운_곰 2024.12.14 20
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED