如何使用 Flutter 即时保存我在 pdf 图层上绘制的内容？

Question

我找不到这个问题的答案。首先，我想制作一个pdf查看器应用程序。同时，还需要像钢笔一样在pdf上做笔记，并且这个必须记录在pdf中，当然，实时绘制的区域必须是可见的。 我将在下面分享我的代码和屏幕截图。

body: Stack(
              children:[
                SizedBox(
                  height: document.pageSettings.size.height,
                  width: document.pageSettings.size.height,
                  child: GestureDetector(
                    onPanUpdate: (details) {
                      setState(() {
                        RenderBox renderBox = context.findRenderObject() as RenderBox;
                        points.add(renderBox.globalToLocal(details.globalPosition));
                      });
                    },
                    onPanEnd: (details) async {
                      points.add(null);
                      File(widget.path!).writeAsBytesSync(await document.save());
                      setState(() {
                        points.clear();

                      });
                    },
                    child:RepaintBoundary(
                      child: CustomPaint(
                        size: document.pageSettings.size,
                        painter: PDFCanvasPainter2(points, document,currentPage, widget.path!),
                        foregroundPainter: PDFCanvasPainter2(points, document,currentPage, widget.path!),
                        child: SfPdfViewer.file(
                              File(widget.path!),
                              enableTextSelection: false,
                              onPageChanged: (details) {
                                currentPage = details.newPageNumber;
                                print(currentPage);
                              },
                          ),
                        ),
                    ),
                    ),
                  ),
                Positioned(
                  top: 20,
                  child: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        isSwipe = !isSwipe;
                      });
                    },
                    child: isSwipe ? Text("Okuma Modu") : Text("Çizim Modu"),
                  ),
                ),
              ]
          ),
        );

黑色钢笔形状是我画的，其他红色形状是输出。

我的画家：

class PDFCanvasPainter2 extends CustomPainter {
  final List<Offset?> points;
  final PdfDocument document;
  final int currentPage;
  final String path;
  const PDFCanvasPainter2( this.points, this.document, this.currentPage, this.path);
  Offset adjustOffset(Offset offset, Size pageSize) {
    return Offset(offset.dx, offset.dy);
  }
  @override
  void paint(Canvas canvas, Size size) async {
    PdfPage page = document.pages[currentPage != 0 ? currentPage - 1 : currentPage];
    PdfPageLayer  layer = page.layers.add(name: "layer1");
    PdfGraphics graphics = layer.graphics;
    Paint paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 2.0;

    try{
      for (int i = 0; i < points.length - 1; i++) {
        if (points[i] != null && points[i + 1] != null) {
          Offset adjustedStart = adjustOffset(points[i]!, page.size);
          Offset adjustedEnd = adjustOffset(points[i + 1]!, page.size);
          canvas.drawLine(points[i]!, points[i + 1]!, paint);
          graphics.drawLine(
              PdfPen(PdfColor(250, 42, 42), width: 2),
              adjustedStart,
              adjustedEnd
          );
        } else if (points[i] != null && points[i + 1] == null) {
          // Kullanıcının kalemi kaldırdığını gösterir.
          //document.pages.add().graphics.draw
        }
      }
    }catch(e){
      print(e);
    }
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

我的第一个问题是我绘制的形状没有立即保存到 pdf 中。我只能在打开和关闭 pdf 时才能看到它。我的第二个问题是我绘制的形状没有出现在我绘制的地方。 pdf 的形状根据页面大小而定。

非常感谢。

我使用了很多方法和包，但没有一个成功。我什至找不到单独的现成代码。

Answer 1

您找到此功能的解决方案了吗？