0

我已经用 Custom Painter 创建了这个地区的地图视图小部件。我有多条路径并使用画布绘制路径：



class MyPainter extends CustomPainter {
  Function(String) setState;
  final BuildContext context;

  MyPainter(this.context, this.setState);

  @override
  void paint(Canvas _canvas, Size size) {
    TouchyCanvas canvas = TouchyCanvas(context, _canvas);

    // _canvas.translate(0, 0);

    districtMapData.forEach((e) {
      var _path = parseSvgPathData(e['shape'].toString());

      canvas.drawPath(
          _path,
          Paint()
            ..color = Colors.black
            ..strokeWidth = 200
            ..style = PaintingStyle.fill, onTapDown: (a) {
        print("pressed");
        print(e['name']);
      }, onTapUp: (a) {
        print("pressed up");
      });
    });
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

我正在使用path_drawing库从 svg 路径获取路径。我正在使用可触摸库来使画布中的每个路径都可点击。

第一个问题是我无法将自定义绘制小部件放入我创建的容器中。自定义绘制的小部件总是超出宽度范围。第二个问题是我不能同时实现双击缩放和捏缩放。我尝试了 zoom_widget，它允许双击但不能平移和捏合。我也尝试过 Flutter 的内置InteractiveViewer功能，但它似乎不适用于我的代码。


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

import 'package:touchable/touchable.dart';
import 'package:zoom_widget/zoom_widget.dart';

class ZoomableMapView extends StatefulWidget {
  @override
  _ZoomableMapViewState createState() => _ZoomableMapViewState();
}

class _ZoomableMapViewState extends State<ZoomableMapView>
    with SingleTickerProviderStateMixin {
  Color color = Colors.pink;

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

    return Scaffold(
        body: SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.red,
          child: AnimatedContainer(
              duration: Duration(seconds: 1),
              width: _width,
              height: 400,
              child:
                  // InteractiveViewer
                  Zoom(
                // minScale: 0.1,
                // maxScale: 5,
                // alignPanAxis: false,

                maxZoomHeight: 1000,
                maxZoomWidth: 1000,
                initZoom: 0.1,
                // centerOnScale: false,
                child: Transform.rotate(
                  angle: -pi / 8,
                  child: CanvasTouchDetector(
                    builder: (context) {
                      return CustomPaint(
                        painter: MyPainter(context, (String circleColor) {}),
                      );
                    },
                  ),
                ),
              )),
        ),
      ),
    ));
  }
}

这是用于画布的形状数据

当前实现的屏幕截图

4

1 回答 1

0

我在使用缩放小部件进行平移和捏合时遇到问题，因为我还使用可触摸库来使画布路径可点击。touchable 库有自己的平移手势处理实现，它覆盖了缩放小部件的手势。我不得不分叉并删除可触摸库中的平移手势回调，以使捏合和平移缩放工作。

于 2021-12-10T11:27:50.860 回答