fis_lib_measure/lib/view/mobile_view/widgets/magnifier.dart

import 'dart:async';
import 'dart:ui';
import 'package:fis_measure/interfaces/process/workspace/application.dart';
import 'package:fis_measure/process/workspace/application.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CanvasMagnifier extends StatefulWidget {
  final double magnifierScale;
  final Size magnifierSize;
  const CanvasMagnifier({
    Key? key,
    this.magnifierScale = 2.0,
    this.magnifierSize = const Size(150, 150),
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CanvasMagnifierState();
}

class _CanvasMagnifierState extends State<CanvasMagnifier> {
  Application application = Get.find<IApplication>() as Application;
  final GlobalKey _magnifierKey = GlobalKey();

  Offset deltaOffsetFromTouchPoint = const Offset(0, 0);
  Offset magnifierCenter = const Offset(0, 0);
  Offset containerPos = const Offset(0, 0);
  Size containerSize = const Size(0, 0);
  bool ifShowMagnifier = false;
  bool ifSetTop = true; //是否置于顶部
  @override
  void initState() {
    application.mobileTouchEvent.addListener(_updateMagnifierPosition);
    WidgetsBinding.instance.addPostFrameCallback((_) => {
          _initContainerParam(),
        });
    super.initState();
  }

  @override
  void dispose() {
    application.mobileTouchEvent.removeListener(_updateMagnifierPosition);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final offsetMatrix = Matrix4.identity()
      ..translate(deltaOffsetFromTouchPoint.dx, deltaOffsetFromTouchPoint.dy)
      ..scale(widget.magnifierScale);
    return Column(
      mainAxisAlignment:
          ifSetTop ? MainAxisAlignment.start : MainAxisAlignment.end,
      children: [
        if (ifShowMagnifier)
          ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: BackdropFilter(
                filter: ImageFilter.matrix(offsetMatrix.storage),
                // filter: ImageFilter.matrix(testMatrix.storage),
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white, width: 2),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: SizedBox(
                    key: _magnifierKey,
                    width: widget.magnifierSize.width,
                    height: widget.magnifierSize.height,
                  ),
                ),
              )),
      ],
    );
  }

  void _getPositions() {
    if (_magnifierKey.currentContext == null) {
      return;
    }
    final RenderBox renderBoxRed =
        _magnifierKey.currentContext!.findRenderObject() as RenderBox;
    magnifierCenter = renderBoxRed.localToGlobal(
        Offset(widget.magnifierSize.width, widget.magnifierSize.height) / 2);
  }

  void _initContainerParam() {
    final containerLayer = context.findRenderObject() as RenderBox;
    containerPos = containerLayer.localToGlobal(Offset.zero);
    containerSize = containerLayer.size;
  }

  void _updateAlignment(Offset touchPos) {
    if (touchPos.dx < containerPos.dx + widget.magnifierSize.width) {
      if (ifSetTop && (touchPos.dy < containerSize.height / 2)) {
        setState(() {
          ifSetTop = false;
        });
      } else if (!ifSetTop && (touchPos.dy > containerSize.height / 2)) {
        setState(() {
          ifSetTop = true;
        });
      }
    } else if (!ifSetTop) {
      setState(() {
        ifSetTop = true;
      });
    }
  }

  void _updateMagnifierPosition(_, Offset offset) {
    setState(() {
      ifShowMagnifier = true;
    });
    _updateAlignment(offset);
    _getPositions();
    final finalOffset =
        magnifierCenter - (offset + containerPos) * widget.magnifierScale;
    setState(() {
      deltaOffsetFromTouchPoint = finalOffset;
    });
    callCloseMagnifier();
  }

  static Timer? timer;

  void callCloseMagnifier() {
    if (timer != null) {
      timer?.cancel();
    }
    timer = Timer(const Duration(milliseconds: 200), () {
      setState(() {
        ifShowMagnifier = false;
      });
      timer = null;
    });
  }
}