0

I recently started playing around with Flutter. I am also a complete beginner in terms object-oriented programming, so my question is probably quite basic, but I couldn't figure it out the whole weekend.

I am using customPain to draw freely and/or different shapes onto a canvas. What I would also like to do, ist to draw a wiggly line of user-defined length and direction. So the user taps the screen, moves the finger to a final point and creates a wiggly line b/w first and final point. I use a listener that "onPointerDown" creates a list of offsets that gets filled "onPointerMove". Everything works fine, I am able to create straight lines. So the idea is now to create a straight line on the canvas and "onPointerUp" convert the straight line of the then known length and direction into the wiggly line. Can anyone help on how to do this efficiently?

What I tried so far:

const beta = 30 * math.pi / 180;
        const segWidth = 10;
        final lineLength = (firstPoint-lastPoint).distance;
        final segCount = lineLength/segWidth;

        var segFirstX = firstPoint.dx;
        var segFirstY = firstPoint.dy;

        for(int i = 1; i < segCount; i++){
          
          var segLastX = points[segCount*i].dx;
          var segLastY = points[segCount*i].dy;
          var wiggleX = segWidth * math.cos(beta) + segFirstX;
          var wiggleY = segWidth * math.sin(beta) + segFirstY;


          path.quadraticBezierTo(wiggleX, wiggleY, segLastX, segLastY);
          path.moveTo(segLastX, segLastY);
          segFirstX = segLastX;
          segLastY = segLastY;
        }        
        canvas.drawPath(path, paint);

I tried to split the line of length lineLength into segments of equal width (e.g. segWidth=10). From this I calculate the number of segments segCount. I submit the starting point of the line (firstPoint.dx,firstPoint.dx) where the onPointerDown is registered. Then, in the for loop, I create variables with the coordinates on the line at the end of the first segment and calculate the reference point (wiggleX, wiggleY) for the quadraticBezierTo (probably the math is wrong...). I add the quadraticBezierTo to the path and move the path to the end of the first segment, which becomes the start of the second segment and iterate this until segCount is reached. While probably the math for the quadraticBezierTo is wrong, also the code itself doesn't work.

Can anybody help here?

edit: it should in the end look like this.

enter image description here

Thomas
  • 11
  • 3

0 Answers0