Как рассчитать координаты элемента при повороте или сдвиге картинки?

Question

[Bolide9]

Здравствуйте.
Идея такая: вывести на экран картинку и ставить тапом маркеры.
И конечно же проблема: вывожу картинку, и ставлю тапом маркеры на картинку. Но при сдвиге влево/вправо маркеры не остаются на том месте куда поставил.
Можно ли рассчитать как-то координаты, чтобы маркеры фиксировались на экране?

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoPick extends StatefulWidget {
  @override
  _PhotoPickState createState() => _PhotoPickState();
}

class _PhotoPickState extends State<PhotoPick> {
  var list = [
    'https://lh3.googleusercontent.com/proxy/fus43q0nx7HfVipBl3VqtCONrPZneoX1bfwnaGOUO4R97ieSnwtq2T01zKPTt7WDY2BeZBa7DvUVYjWGw2uPFcCsCiKf',
    'https://geomergroup.ru/docs/img/ServicePic/tehplan-torgovogo-centra.jpg',
    'https://www.voskov.ru/custom/u/catalogue/obj/40/scheme-ewk99i.JPG',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          itemCount: list.length,
          itemBuilder: (context, int index) {
            return Container(
              padding: EdgeInsets.only(top: 30),
              child: GestureDetector(
                onTap: () {
                  var img = list[index];
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => TestPage(img: img),
                    ),
                  );
                },
                child: ListTile(
                  title: Image.network(list[index]),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class TestPage extends StatefulWidget {
  final img;

  TestPage({Key key, @required this.img}) : super(key: key);

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  var lst = [];

  @override
  void initState() {
    super.initState();
  }

  void addWidget(double dx, double dy, double direction, double distance,
      double distanceSquared, double height, double width) {
    int r = Random().nextInt(255);
    int g = Random().nextInt(255);
    int b = Random().nextInt(255);

    var value = Positioned(
      left: dx,
      top: dy,
      child: Container(
        child: IconButton(
          color: Color.fromRGBO(r, g, b, 1),
          onPressed: () {},
          icon: Icon(
            Icons.gps_fixed_outlined,
            size: 24,
          ),
        ),
      ),
    );

    setState(() {
      lst.add(value);
    });
  }


  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Stack(
          children: [
            GestureDetector(
              onTapDown: (details) {
                final dx = details.globalPosition.dx;
                final dy = details.globalPosition.dy;
                final direction = details.globalPosition.direction;
                final distance = details.globalPosition.distance;
                final distanceSquared = details.globalPosition.distanceSquared;

                addWidget(dx, dy, direction, distance, distanceSquared, height,
                    width);
              },
              child: PhotoView(
                enableRotation: false,
                
                onTapDown: (context, details, controllerValue) {
                  final dx = details.localPosition.dx;
                  final dy = details.localPosition.dy;
                  final direction = details.localPosition.direction;
                  final distance = details.localPosition.distance;
                  final distanceSquared = details.localPosition.distanceSquared;

                  // addWidget(dx, dy, direction, distance, distanceSquared,
                  //     height, width);
                },
                imageProvider: Image.network(widget.img).image,
              ),
            ),
            for (var item in lst) item
          ],
        ),
      ),
    );
  }
}

Answer 1

[Вадим Попов]

Думаю тут стоит по другому подойти к выполнению задачи.
Я бы делал локальную копию изображения с маркерами на ней.
В этом вам поможет виджет RepaintBoundary

Обратившись к ключу этого виджета можно сделать png изображение ваших маркеров вместе с текущим изображением на нижнем слое и затем совместить эти два слоя и получить новое изображение

Вот пример как создаются картинка на основе этого виджета

final RenderRepaintBoundary boundary =
        globalKey.currentContext.findRenderObject();
    final ui.Image image = await boundary.toImage();
    final ByteData byteData =
        await image.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List pngBytes = byteData.buffer.asUint8List();
    await File(yourPath).writeAsBytes(pngBytes);
    return pngBytes;

Comments

[Bolide9]

Мне кажется это немного не то. Сама идея накладывать маркеры в определенное место на картинке и чтобы при передвижении влево/вправо или при приближении, маркеры оставались именно на том месте картинки, куда было нажато.
К примеру как карта, там точно также ставятся маркеры, и при каких-то действиях, маркеры остаются на своих местах.
Что то такое нашел, надо теперь разбираться :)
(https://stackoverflow.com/questions/59569693/keep-...)

[Вадим Попов]

Bolide9, ок, удачи)

Answer 2

[Umpiro]

У меня была такая задача. Я решил ее комбинацией виджетов Stack и Transform, если коротко.

Comments

[Bolide9]

а можно поподробнее)
линк на гитхаб или простой пример как рассчитать можно это.

[Umpiro]

Bolide9,
На гитхаб код выкладывать пока стыдно.)
Как это работает.
У вас есть виджет:

Transform(
  transform: matrix4,
  child: Stack(
    children: <Widget>[
       RepaintBoundary(
         key: boundaryKey,
         child: Image(),
       ),
       MarkersWidget(),
    ],
  ),
);

boundaryKey - это глобальный идентификатор для вашего изображения. Нужно задать его как параметр класса.
GlobalKey boundaryKey = GlobalKey();
Для перемещения или скейла изображения вы преобразуете matrix4.

[Bolide9]

Umpiro, Не подскажите что писали в matrix4?
И все же прошу выложите на гит и дайте ссылку. Мне нужно решение, я бы постарался решить так же, как и вы.

[Umpiro]

Bolide9,
То, что у меня в хистори по матрицам осталось:
https://www.informit.com/articles/article.aspx?p=2...
www.mathprofi.ru/svoistva_operacij_nad_matricami_m...
Код выложу только после релиза проекта. Это не совсем скоро.