How to get InteractiveViewer image pixel coordinate in flutter?

Viewed 645

i want to get pixel coordinate when i tapped the screen, i use interactiveView and GestureDetect in Fultter, i am so confused about the matrix transform , i am new to App develop, please give some advice if you could, very appraciate, Below is my code, which now i can zoom the image, but i can't calculate the coorect pixel coordiante when i click the screen. and since i have no idea how to calculate the ratio between pixel distance<->screen distance, i was stucked there. please help me.

What i am doing is i need pick a pixel position from the image, so i need zoom image first to get precise position,that's why i need ineractiveViewer . and at the same time i need record the gesture behavior, to monitor the behavior, then i wrapper InteractiveView to GestureDetect.
it look like this for now: enter image description here

Widget mapView() {
    double offsetX, offsetY;
    return Stack(
      children: <Widget>[
        Positioned.fill(
            
          child: 
          GestureDetector(
            onTapUp: (TapUpDetails details) {
              offsetX = details.localPosition.dx;
              offsetY = details.localPosition.dy;
              // print(
                  //"tap local pos, X: ${details.localPosition.dx}, Y: ${details.localPosition.dy}");
              // print(
              //     "tap global pos, X: ${details.globalPosition.dx}, Y: ${details.globalPosition.dy}");
              _childWasTappedAt = _transformationController!.toScene(details.localPosition);
              // print(
              //     "child pos to scene , X: ${_childWasTappedAt!.dx}, Y: ${_childWasTappedAt!.dy}");
              //double origin_scree_pixel_radio = 17;

              MediaQueryData queryData;
              queryData = MediaQuery.of(context);
              
              double pixel_ratio = queryData.devicePixelRatio;

              double scree_pixel_radio =  (1.0 / _cur_scale_value!)*pixel_ratio;

              double trans_x = -1.0 * _transformationController!.value.getTranslation().x;

              double local_offset_x = offsetX;

              double pixel_x = trans_x + local_offset_x * scree_pixel_radio;
              
              print("scale: ${_cur_scale_value}");
              print("radio: ${pixel_ratio}");
              print("view tran x: ${trans_x}");
              print("offset x: ${local_offset_x}");
              
              //print("image_Info: ${_image_info.toString()}");

              print("Pixel X: ${pixel_x}");

            },
            child: 
            InteractiveViewer(
              transformationController: _transformationController,
              minScale: 0.001,
              maxScale: 200.0,
              constrained: false,
              child: Image.asset(
                imagePath,
                filterQuality:FilterQuality.high,
              ),
              onInteractionEnd: (ScaleEndDetails details) {
                _cur_scale_value = _transformationController!.value.getMaxScaleOnAxis();
                //print("current scale: ${_cur_scale_value}");
              },
              onInteractionUpdate: (ScaleUpdateDetails details){
                //print('onInteractionUpdate----' + details.toString());
              },
            ),
          ),
        ),
        Positioned(
          top: 0.0,//_vehicle_y,
          left: 0.0,//_vehicle_x,
          child: Icon(Icons.favorite, color: Colors.red,),
        ),
      ],
    );
  }
1 Answers

Use this onInteractionUpdate method to get Coordinates. use also use different methods.

Vist This site for more info:- https://api.flutter.dev/flutter/widgets/InteractiveViewer/onInteractionUpdate.html

https://api.flutter.dev/flutter/gestures/ScaleStartDetails/localFocalPoint.html

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InteractiveViewer(
          onInteractionUpdate: (v) {
            print(v.localFocalPoint.dx);
            print(v.localFocalPoint.dy);
          },
          child: Image.network(
            "https://images.unsplash.com/photo-1643832678771-fdd9ed7638ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDd8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=2400&q=60",
            fit: BoxFit.fitHeight,
          ),
        ),
      ),
    );
  }
Related