flutter - CustomPaint 在其下方的小部件上绘制。如何避免?

标签 flutter

<分区>

我有一个大小为 300、300 的 CustomPaoint。在这个下方我还有其他小部件。我还有一个监听器,用于跟踪向下和移动位置并将偏移量添加到列表中。此列表用于状态更改并发送到 CustomPainter 进行绘制。

一切正常。如果我在 CustomPaint 小部件的边界外点击,则它不会绘制。但是,如果我点击 CustomPaint 内部并移出它,那么偏移量将被记录并用于绘画,这会导致在 CustomPaint 下面的其他小部件中进行绘画。

如何避免?下面是我的代码。

class DrawingCanvas extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new DrawingCanvasState();

}

class DrawingCanvasState extends State<DrawingCanvas> {

  GlobalKey _paintKey = new GlobalKey();
  List<Offset> _finalOffsets = <Offset>[];

  DrawingCanvasState() {
  }

  @override
  Widget build(BuildContext context) {
    return new Listener(
      onPointerDown: (PointerDownEvent pdEvent) {
        RenderBox referenceBox = _paintKey.currentContext.findRenderObject();
        Offset localOffset = referenceBox.globalToLocal(pdEvent.position);
        setState((){
          this._finalOffsets.clear();
          this._finalOffsets.add(localOffset);
        });
      },
      onPointerMove: (PointerMoveEvent pmEvent) {
        RenderBox referenceBox = _paintKey.currentContext.findRenderObject();
        Offset localOffset = referenceBox.globalToLocal(pmEvent.position);
        setState((){
          this._finalOffsets.add(localOffset);
        });
      },
      onPointerUp: (PointerUpEvent puEvent){
      },
      onPointerCancel: (PointerCancelEvent pcEvent){
      },
      child: new CustomPaint(
        key: _paintKey,
        size: new Size(300.0, 300.0),
        isComplex: true,
        willChange: true,
        painter: new CanvasPainter(this._finalOffsets),
        child: new ConstrainedBox(
          constraints: new BoxConstraints.tightForFinite(width: 300.00, height: 300.00),
        ),
      ),
      behavior: HitTestBehavior.deferToChild,
    );
  }
}

class CanvasPainter extends CustomPainter {
  List<Offset> _offsets;

  CanvasPainter(List<Offset> pOffsets){
    this._offsets = pOffsets;
  }

  @override
  void paint(Canvas canvas, Size size) {

    Paint p = new Paint();
    p.color = Colors.black;
    p.strokeWidth = 5.0;
    p.isAntiAlias = true;
    p.style = PaintingStyle.stroke;
    p.strokeJoin = StrokeJoin.round;
    p.strokeCap = StrokeCap.round;
    canvas.drawPoints(PointMode.polygon, this._offsets, p);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint https://stackoverflow.com/questions/45578209/how-to-touch-paint-a-canvas?rq=1
    //print("should repaint check called");
    return true;
  }
}

注意 - DrawingCanvas 在另一个 Column Widget 中使用。下面还有两个Widgets。

请帮忙。

最佳答案

经过一些研究,我只是更改了我的代码以按照以下问题中的答案遵循代码。

How to touch paint a canvas?

关于flutter - CustomPaint 在其下方的小部件上绘制。如何避免?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49596289/

相关文章:

android - 带有很多选项的复选框

dart - Flutter 从 Future<bool> 方法返回 bool 类型

java - 当我尝试在 java 中实现 appium-flutter-driver 时,appium-flutter-finder 依赖项不起作用有人知道如何修复它吗?

android-studio - 在Flutter中五秒钟后隐藏互联网连接栏

Flutter Web 未在 Gitlab 页面上加载

flutter - 一次使用代码删除整个flutter中的 Debug模式

node.js - 最新版本的套接字 io nodejs 未连接到 flutter 应用程序

flutter - 为什么调用 runWithEntrypoint :libraryURI: on a FlutterEngine? 时找不到文件

flutter - GraphQl Flutter 包设置中的缓存以及如何检查其工作情况

flutter - Flutter中如何控制两个部分之间的时间延迟?