Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I ensure that the image ratio is 1:1 when entering the page? #162

Open
yvone1991 opened this issue Sep 11, 2024 · 0 comments
Open

Comments

@yvone1991
Copy link

yvone1991 commented Sep 11, 2024

I am using the situation where the background moves and the screenshot area is fixed. However, every time I enter, the image is defaulted to be enlarged. I have tried various configurations but cannot load the image in a 1:1 ratio. I hope that the image is in a fitwidth or fitheight mode to fill one side of a physical screen. Then the screenshot rectangle is at the center of this image as the initial state when opening the page. But now every time I open it, the image is enlarged. How should this be modified?

I hope the effect when entering the page is like this:
Screenshot_20240911_105806

But,Now the effect when entering the page is like this:
Screenshot_20240911_105745

  Widget _buildBody(BuildContext context) {
    return FutureBuilder<Uint8List>(
      future: _chooseAssets != null ? _loadImage(_chooseAssets!) : null,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Container(
            color: ColorConfig.color12091C,
            child: const Center(
              child: CircularProgressIndicator(color: Colors.white),
            ),
          );
        } else if (snapshot.hasError) {
          return Center(child: Text(S.current.loadImageError));
        } else if (snapshot.hasData) {
          final imageData = snapshot.data!;
          return Stack(
            children: [
              Crop(
                image: imageData,
                willUpdateScale: (scale) {
                  return scale < 5;
                },
                initialSize: 1.0,
                initialRectBuilder: (rect, rect2) {
                  double cropWidth = rect.width * 0.8;
                  double cropHeight = cropWidth;
                  double left = (rect.width - cropWidth) / 2;
                  double top = (rect.height - cropHeight) / 2;
                  double right = left + cropWidth;
                  double bottom = top + cropHeight;
                  cropSizeNotifier.value =
                      Rect.fromLTRB(left, top, right, bottom);
                  return Rect.fromLTRB(left, top, right, bottom);
                },
                maskColor: Colors.black.withOpacity(0.6),
                interactive: true,
                progressIndicator: Container(
                  color: ColorConfig.color12091C,
                  child: const Center(
                    child: CircularProgressIndicator(color: Colors.white),
                  ),
                ),
                cornerDotBuilder: (size, edgeAlignment) {
                  return const SizedBox();
                },
                baseColor: ColorConfig.color12091C,
                controller: _cropController,
                onCropped: (croppedData) => _saveCroppedImage(croppedData),
              ),
              ValueListenableBuilder<Rect?>(
                valueListenable: cropSizeNotifier,
                builder: (context, cropRect, child) {
                  if (cropRect == null) return const SizedBox.shrink();
                  return Positioned(
                    left: cropRect.left - 2.w,
                    top: cropRect.top - 2.h,
                    child: IgnorePointer(
                      child: Container(
                        width: cropRect.width + 4.w,
                        height: cropRect.height + 4.h,
                        alignment: Alignment.center,
                        child: SvgPicture.asset(
                          Assets.svgImgCqk,
                          fit: BoxFit.fill,
                          width: cropRect.width + 4.w,
                          height: cropRect.height + 4.h,
                        ),
                      ),
                    ),
                  );
                },
              ),
              Positioned(
                left: 0,
                right: 0,
                bottom: 74.h,
                child: Row(
                  children: [
                    SizedBox(width: 16.w),
                    Expanded(
                        child: GradientButton(
                            text: S.current.changePhoto,
                            useGradient: false,
                            svgOnLeft: false,
                            rightIconSize: 16,
                            assetsName: Assets.svgIcoGh,
                            backgroundColor: const Color(0xFF272242),
                            onPressed: () {
                              ImageChooseManager.instance.onPickImage(context,
                                  maxAssets: 1,
                                  currentAssets: [
                                    _chooseAssets!
                                  ]).then((value) async {
                                if (value is String) {
                                  EasyLoading.showError(value);
                                } else if (value is List) {
                                  if (value.isNotEmpty) {
                                    setState(() {
                                      _chooseAssets = value[0];
                                    });
                                    // _loadImage(value[0]);
                                  }
                                }
                              });
                            })),
                    SizedBox(width: 7.w),
                    Expanded(
                        child: GradientButton(
                            text: S.current.confirm,
                            onPressed: () {
                              _cropController.crop();
                            })),
                    SizedBox(width: 16.w),
                  ],
                ),
              ),
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                child: CommonAppBar(
                  backgroundColor: Colors.transparent,
                  title: S.current.cropTitle,
                  fontSize: 14.sp,
                ),
              ),
            ],
          );
        } else {
          return Center(child: Text(S.current.noImageData));
        }
      },
    );
  }

by the way:
Can rotation and flipping be supported?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant