How to crop image using resizable draggable point in flutter

38 views Asked by At

In this code i have resize container using all four corners but how to crop using all four mid point using this mid point crop image and than resize only crop image like below images in flutter.

In this code i have resize container using all four corners but how to crop using all four mid point using this mid point crop image and than resize only crop image like below images in flutter.

//top left
if (_isSelected)
        Positioned(
          top: top - ballDiameter /2 ,
          left: left - ballDiameter /2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {
              var newHeight = newWidth * aspectRatio ;
              setState(() {
                if (newHeight > 10 && newWidth > 10) {
                  top = top + (height - newHeight) ;
                  left = left + dx;
                  height = newHeight;
                  width = newWidth;
                }
              });
            },
            handlerWidget: HandlerWidget.VERTICAL,
          ),
        ),
      //top mid
      if (_isSelected && (width > 10 && height > 10))
        Positioned(
          top: top - ballDiameter / 2,
          left: left + width / 2 - ballDiameter / 2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {
             .....
            },
            handlerWidget: HandlerWidget.HORIZONTAL,
          ),
        ),
      // top right
      if (_isSelected && (width > 10 && height > 10))
        Positioned(
          top: top - ballDiameter / 2,
          left: left + width - ballDiameter / 2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {
              var newWidth = width +  dx;
              var newHeight = newWidth * aspectRatio ;
              setState(() {
                if (newHeight > 10 && newWidth > 10) {
                  top = top + (height - newHeight);
                  height = newHeight;
                  width = newWidth;
                }
              });
            },
            handlerWidget: HandlerWidget.VERTICAL,
          ),
        ),
      //left mid
      if (_isSelected && (width > 10 && height > 10))
        Positioned(
          top: top + height / 2 - ballDiameter/2,
          left: left  - ballDiameter / 2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {
           ....
            },
            handlerWidget: HandlerWidget.HORIZONTAL,
          ),
        ),
      //bottom right
      if (_isSelected && (width > 10 && height > 10))
        Positioned(
          top: top + height - ballDiameter / 2,
          left: left + width - ballDiameter / 2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {;
              var newWidth = width +  dx;
              var newHeight = newWidth * aspectRatio ;
              setState(() {
                if (newHeight > 10 && newWidth > 10) {
                  height = newHeight;
                  width = newWidth;
                }
              });
            },
            handlerWidget: HandlerWidget.VERTICAL,
          ),
        ),
      //right mid
      if (_isSelected && (width > 10 && height > 10))
        Positioned(
          top: top + height / 2 - ballDiameter/2,
          left: left  + width - ballDiameter / 2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {
         ....
          },
            handlerWidget: HandlerWidget.HORIZONTAL,
          ),
        ),
      //bottom left
      if (_isSelected && (width > 10 && height > 10))
        Positioned(
          top: top + height - ballDiameter / 2,
          left: left - ballDiameter / 2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {
              var newWidth = width -  dx;
              var newHeight = newWidth * aspectRatio ;
              setState(() {
                if (newHeight > 10 && newWidth > 10) {
                  height = newHeight;
                  width = newWidth;
                  top = top + (height - newHeight) ;
                  left = left + dx;
                }
              });
            },
            handlerWidget: HandlerWidget.VERTICAL,
          ),
        ),
      //bottom mid
      if (_isSelected && (width > 10 && height > 10))
        Positioned(
          top: top + height - ballDiameter/2,
          left: left + width /2 - ballDiameter / 2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {
            },
            handlerWidget: HandlerWidget.HORIZONTAL,
          ),
        ),

In this code i have resize container using all four corners but how to crop using all four mid point using this mid point crop image and than resize only crop image like below images in flutter.

here some images

enter image description here enter image description here enter image description here

0

There are 0 answers