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

【问题标题】：How to retain image round corners during transition (zoom)如何在过渡（缩放）期间保留图像圆角
【发布时间】：2022-01-12 03:02:53
【问题描述】：

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

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

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

附：如果解决方案可以使用 extended_image 库完成，我更愿意。

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案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'),
  ),
),

【讨论】：

【解决方案2】：

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

  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),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),

【讨论】：