Kami sedang mengembangkan aplikasi yang menampilkan tubuh manusia, berdasarkan input SVG. Tubuh manusia ini terbagi dalam beberapa wilayah, pikirkan kepala, lengan kiri, lengan kanan, perut dll.

Kami ingin menyorot wilayah gambar ketika pengguna mengklik misalnya satu tangan. Apa cara terbaik untuk mencapai hal seperti itu di Flutter?

Kami mencoba menggunakan Flare untuk Flutter, tetapi librart ini tidak memberikan interaksi langsung dengan tubuh manusia yang ditampilkan.

Apakah ada cara yang lebih mudah untuk:

  • Render tubuh berdasarkan SVG (karya seni mungkin berubah dalam pengembangan masa depan);
  • Deteksi klik, mis. GestureDetector;
  • Temukan wilayah yang ditekan berdasarkan koordinat klik;

Perhatikan bahwa kotak sederhana tidak akan berfungsi karena bagian gambar tumpang tindih. Anda dapat melihat efek yang ingin kami capai, saya mengklik satu tangan di sini. Menggambar beberapa kotak yang dapat diklik di sekitarnya, tidak akan berfungsi dengan baik.

Terima kasih sebelumnya.

Artwork

14
Giovanni 14 Agustus 2019, 10:26

1 menjawab

Jawaban Terbaik

Saya membuatnya bekerja dengan menggunakan pustaka built_path, yang mengkompilasi jalur SVG ke objek Path. Kami kemudian membungkusnya menjadi ClipPath Widget sebagai berikut:

return GestureDetector(
    onTap: () => _bodyPartTapped(part),
    child: ClipPath(
        child: Stack(children: <Widget>[
          Container(
              color: pressedBodyPart == part
                  ? Colors.blue
                  : Colors.transparent),
          CustomPaint(painter: PathPainter(path))
        ]),
        clipper: PathClipper(path)));

Ini akan mewarnai bagian tubuh menjadi biru jika ditekan, yang berfungsi dengan baik.

Saya telah membuat contoh lengkap yang dapat ditemukan di sini: https://github.com/gi097/flutter_clickable_regions

9
Giovanni 3 Desember 2019, 15:34