When I hide and open the shape I drew with CustomPaint, it draws a line to the left of the screen. How can I prevent this?

Question

I work with Offsets and Coordinates. I combine them using dots and have them draw a shape, when I hide this drawn shape and open it again, a line appears on my shape from the top left of the screen. How do I prevent this ?

before after

Eye Button Function

InkWell(onTap: () {
  setState(() {
    if (isEyeSelected) {
      selectedEyeIndexes.remove(index);
      showHiddenItems(index);
    } else {
      selectedEyeIndexes.add(index);
      for (int i = 0; i < studentLabelCoordinate[index].length; i++) {
         studentLabelCoordinate[index][i] = Offset.zero;
      }
    }
  });
},

Functions

                                      void showHiddenItems(int index) {
                                        if (imageTypeState?.toLowerCase() ==
                                                'bitewing' ||
                                            imageTypeState?.toLowerCase() ==
                                                'periapical') {
                                          for (var j = 0;
                                              j <
                                                  studentAnswerModel!
                                                      .illnessCoordsColors![
                                                          index]
                                                      .coords!
                                                      .length;
                                              j++) {
                                            studentLabelCoordinate[index].add(Offset(
                                                (studentAnswerModel!
                                                            .illnessCoordsColors![
                                                                index]
                                                            .coords![j][0] *
                                                        width!) *
                                                    widthrate *
                                                    _scale,
                                                (studentAnswerModel!
                                                                .illnessCoordsColors![
                                                                    index]
                                                                .coords![j][1] *
                                                            height!) *
                                                        _scale *
                                                        heightrate -
                                                    (deviceTopPadding!)));
                                          }
                                        } else {
                                          for (var j = 0;
                                              j <
                                                  studentAnswerModel!
                                                      .illnessCoordsColors![
                                                          index]
                                                      .coords!
                                                      .length;
                                              j++) {
                                            studentLabelCoordinate[index].add(Offset(
                                                (studentAnswerModel!
                                                            .illnessCoordsColors![
                                                                index]
                                                            .coords![j][0] *
                                                        width!) *
                                                    _scale,
                                                (studentAnswerModel!
                                                            .illnessCoordsColors![
                                                                index]
                                                            .coords![j][1] *
                                                        height! *
                                                        _scale) -
                                                    (deviceTopPadding! +
                                                        deviceBottomPadding! +
                                                        5.h)));
                                          }
                                        }
                                      }

Painter

class PathPainterStudent extends CustomPainter {
  PathPainterStudent({
    required this.coordinats,
    required this.labelColor,
  });

  List<List<Offset>> coordinats;
  List<String> labelColor;

  @override
  void paint(Canvas canvas, Size size) {
    List<Path> paths = [];

    for (var i = 0; i < coordinats.length; i++) {
      Paint paintq = Paint()
        ..color = Color(int.parse(labelColor[i].replaceAll('#', '0xFF')))
        ..style = PaintingStyle.stroke
        ..strokeWidth = 2.0;

      Paint paintq2 = Paint()
        ..color = Color(int.parse(labelColor[i].replaceAll('#', '0xFF')))
            .withOpacity(0.2)
        ..style = PaintingStyle.fill
        ..strokeWidth = 2.0;

      Path path = Path();
      paths.add(path);

      paths[i].addPolygon(coordinats[i], true);
      paths[i].close();
      canvas.drawPath(paths[i], paintq);

      canvas.drawPath(paths[i], paintq2);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

CustomPaint

                      CustomPaint(
                        painter: PathPainterStudent(
                            coordinats: studentLabelCoordinate,
                            labelColor: studentLabelColor),
                        size: MediaQuery.of(context).size,
                      ),

I'm deleting it from the list and adding it to the list again. I tried to play in the painter, but it didn't happen. When you give an offset list from outside, it always connects them together.

Answer 1

By default, a Path starts at (0, 0).

Before calling Canvas.drawPath(), move your path to the starting point using Path.moveTo(x, y).

Path path = Path();
double dx = coordinates[0].dx;
double dy = coordinates[0].dy;

path.moveTo(dx, dy);

// start drawing path

I hope it helped!