如何在过渡期间保留图像圆角（缩放）

Question

我想显示带圆角的图像并具有缩放功能in/out。重要的是图像的圆角在缩放时不会切入图像，而是保留在图像的边缘。

我正在使用 extended_image 库来显示我的图像并使用其手势模式缩放图像 in/out。我知道它具有使用边框的圆形图像功能，但是，图像必须保持静态，因为缩放 in/out 会导致边缘（边框）切入图像。

我该如何解决这种情况（我可以使用任何可用的库）？

P.S。如果可以使用 extended_image 库来完成解决方案，我更愿意。

Extra：我能想到的解决方法是以某种方式将显示的 URL 转换为 Uint8List，并在转换过程中还为图像添加圆角。我知道如何转换 URL，但我不确定如何永久添加圆角。

Answer 1

you can use ClipRRect to round the corner of the image and you can this link to zoom in and zoom out.

https://github.com/iampawan/FlutterUtilsCollection?ref=morioh.com&utm_source=morioh.com

How to zoom In Zoom Out And Rotate in Flutter
☞ https://morioh.com/p/6bc7e69c1446

#Flutter #programming 

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image(
    image: NetworkImage(
      'https://www.tutorialkart.com/img/hummingbird.png'),
  ),
),

Answer 2

您可以先 ClipRRect 容器，然后使用交互式查看器。

  ClipRRect(
                    borderRadius: BorderRadius.circular(8.0),
                    clipBehavior: Clip.antiAlias,
                    child: Container(
                      child: InteractiveViewer(
                        maxScale: 3.0,
                        // minScale: 0.1,
                        // boundaryMargin: const EdgeInsets.all(double.infinity),
                        constrained: true,
                        child: Column(
                          children: [
                            Container(
                              child: Image(
                                image: AssetImage(imageUrl),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),

如何在过渡期间保留图像圆角（缩放）

How to retain image round corners during transition (zoom)

flutter

flutter-layout