[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (5) 드래그로 Canvas 이동시키기

 

Flutter Canvas 드래그로 이동시키기

Flutter Canvas에서 드래그로 화면을 이동시키는 기능은 GestureDetector와 CustomPainter를 활용하여 구현할 수 있습니다. 이 포스팅에서는 Canvas를 드래그해 이동시키는 방법을 코드와 함께 자세히 설명합니다.

---

1. 기본 아이디어

1. 사용자가 드래그를 시작하면 초기 터치 좌표를 저장합니다.
2. 드래그를 업데이트할 때마다 이전 좌표와 현재 좌표의 차이를 계산하여 Canvas의 이동량(offset)을 갱신합니다.
3. CustomPainter를 사용하여 Canvas의 내용을 그릴 때 이동된 위치를 반영합니다.

---

2. 주요 코드

GestureDetector를 활용한 드래그 이벤트 처리

3. Canvas에 이동 반영

CustomPainter의 paint 메서드에서 canvas.translate를 사용하여 이동량을 반영합니다.

 

class DraggablePainter extends CustomPainter {

  final double offsetX;

  final double offsetY;

 

  DraggablePainter(this.offsetX, this.offsetY);

 

  @override

  void paint(Canvas canvas, Size size) {

    canvas.save();

    canvas.translate(offsetX, offsetY);

 

    // 배경 그리기

    _drawBackground(canvas, size);

 

    // 그리드 그리기

    _drawGrid(canvas, size);

 

    canvas.restore();

  }

 

  void _drawBackground(Canvas canvas, Size size) {

    final paint = Paint()..color = Colors.white70;

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

  }

 

  void _drawGrid(Canvas canvas, Size size) {

    final paint = Paint()..color = Colors.grey;

    const double gridSize = 50.0;

 

    for (double x = 0; x < size.width; x += gridSize) {

      canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);

    }

    for (double y = 0; y < size.height; y += gridSize) {

      canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);

    }

  }

 

  @override

  bool shouldRepaint(CustomPainter oldDelegate) => true;

}

 

 

 

---

4. 결과

• GestureDetector를 사용하여 드래그 이벤트를 처리하고, Canvas의 오프셋(offset)을 업데이트합니다.
• Canvas를 이동시킬 때 그리드와 기타 요소들도 함께 이동합니다.
• CustomPainter를 활용하여 Canvas를 갱신합니다.

---

코드 전체

import 'package:flutter/material.dart';

 

class DraggableObjectPage extends StatefulWidget {

  @override

  State<DraggableObjectPage> createState() => _DraggableObjectPageState();

}

 

class _DraggableObjectPageState extends State<DraggableObjectPage> {

  double offsetX = 0.0;

  double offsetY = 0.0;

  double preX = 0.0;

  double preY = 0.0;

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: GestureDetector(

        onPanDown: (details) {

          preX = details.localPosition.dx;

          preY = details.localPosition.dy;

        },

        onPanUpdate: (details) {

          setState(() {

            offsetX += details.localPosition.dx - preX;

            offsetY += details.localPosition.dy - preY;

            preX = details.localPosition.dx;

            preY = details.localPosition.dy;

          });

        },

        child: CustomPaint(

          size: Size.infinite,

          painter: DraggablePainter(offsetX, offsetY),

        ),

      ),

    );

  }

}

 

class DraggablePainter extends CustomPainter {

  final double offsetX;

  final double offsetY;

 

  DraggablePainter(this.offsetX, this.offsetY);

 

  @override

  void paint(Canvas canvas, Size size) {

    canvas.save();

    canvas.translate(offsetX, offsetY);

 

    final backgroundPaint = Paint()..color = Colors.white70;

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

 

    final gridPaint = Paint()..color = Colors.grey;

    const double gridSize = 50.0;

 

    for (double x = 0; x < size.width; x += gridSize) {

      canvas.drawLine(Offset(x, 0), Offset(x, size.height), gridPaint);

    }

    for (double y = 0; y < size.height; y += gridSize) {

      canvas.drawLine(Offset(0, y), Offset(size.width, y), gridPaint);

    }

 

    canvas.restore();

  }

 

  @override

  bool shouldRepaint(CustomPainter oldDelegate) => true;

 

}

 

---

결론

Flutter Canvas에서 드래그로 이동시키는 기능은 간단한 로직으로 구현할 수 있습니다. 이 방법을 사용하면 사용자가 직관적으로 Canvas를 제어할 수 있는 유용한 인터페이스를 만들 수 있습니다.