正文 

当前位置： 首页 > 知识 >

如何限制将捏缩放图像移动到图像边框？

     2023-03-15     216

关键词：

【中文标题】如何限制将捏缩放图像移动到图像边框？【英文标题】：How to restrict shifting of a pinch zoomed image to the image borders? 【发布时间】：2015-11-17 14:35:10 【问题描述】：

我在情节提要中设置了一个scrollView，其中包含一个imageView，使用自动布局，如图所示here。 此外，我为此imageView 启用了捏缩放，如docs 中所述。

imageView 在scollView 的两侧有 4 个 0 约束，并且它与主视图具有相等的宽度和高度，主视图具有 scrollView 作为子视图。

imageView 具有aspectFit 缩放模式，因此在未缩放状态下，图像将完全从左到右或从上到下（或两者）延伸。 在下面的示例中，它从上到下延伸，使一些背景左右可见：

我可以捏缩放图像，使其比屏幕大：

我可以向上或向下移动缩放的图像，但在顶部或底部的背景变得可见之前移动停止。这是我想要的。

但是，我可以将缩放后的图像向左或向右移动，以便可以看到背景：

我怎样才能避免将图像移动这么远（这里，向右）。与顶部或底部一样，它应该在边界处停止移动，这样就看不到背景了。

【问题讨论】：

【参考方案1】：

不是理想的解决方案，但我希望它会有所帮助：

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale 
    [self adjustScrollViewInsets];


- (void)adjustScrollViewInsets 
    CGFloat imageWidth = self.imageView.image.size.width;
    CGFloat imageHeight = self.imageView.image.size.height;
    CGFloat aspect = imageWidth / imageHeight;
    CGSize imageViewSize = self.imageView.frame.size;
    if (imageViewSize.width / aspect <= imageViewSize.height) 
        [self adjustVerticalInsetsWithImageHeight:(imageViewSize.width / aspect)];
     else 
        [self adjustHorizontalInsetsWithImageWidth:(imageViewSize.height * aspect)];
    


- (void)adjustHorizontalInsetsWithImageWidth:(CGFloat)width 
    CGFloat horizontalInset = (self.scrollView.contentSize.width - width) / 2;
    if (width < self.scrollView.frame.size.width) 
        horizontalInset = horizontalInset - (self.scrollView.frame.size.width - width) / 2;
    
    [self.scrollView setContentInset:UIEdgeInsetsMake(0, -horizontalInset, 0, -horizontalInset)];


- (void)adjustVerticalInsetsWithImageHeight:(CGFloat)height 
    CGFloat verticalInset = (self.scrollView.contentSize.height - height) / 2;
    if (height < self.scrollView.frame.size.height) 
        verticalInset = verticalInset - (self.scrollView.frame.size.height - height) / 2;
    
    [self.scrollView setContentInset:UIEdgeInsetsMake(-verticalInset, 0, -verticalInset, 0)];

如果您遇到问题，请查看this repo。

【讨论】：

嗨弗拉基米尔，我测试了你的代码。它正确计算插入。奇怪的是，使用正确的参数应用 setContentInset: 后，1）显示没有改变，即图像的大小没有改变并且周围的背景（如果有的话）仍然可见，2）它不再可以在应用插入的方向滚动（如果原始图像是横向的，即高度 您好弗拉基米尔，我发现了问题：您的代码没有考虑缩放比例因子。如果，例如垂直插入被设置，它们被设置为可见区域，并且即使缩放的图像允许垂直滚动也不可能。为了纠正这个问题，必须将 adjustVerticalInsetsWithImageHeight: 的参数与 scrollView.zoomScale 相乘（水平类似）。如果您同意，请编辑您的答案，我会接受。 我无法重现您的滚动问题（使用模拟器测试，9.1）。您是从我的存储库还是您自己的实现中测试了一个项目？无需考虑缩放比例因子，因为内容的大小和图像视图的大小已经针对当前比例进行了计算。您能否提供有关滚动问题的更多信息？视频或示例项目会很有帮助。 我用自己的实现进行了尝试。我会尽快提供更多信息。 我在代码中发现了问题：在您的代码中，scrollView 将 imageView 作为子视图。当 scrollView 被缩放时，imageView 也被缩放，并且不需要像您的代码中那样额外的缩放因子。在我的代码中，scrollView 有一个intermediateView 作为子视图，intermediateView 有一个imageView 作为子视图。当 scrollView 被缩放时，intermediateView 也被缩放，而 imageView 没有被缩放。因此，adjustVerticalInsetsWithImageHeight:(imageViewSize.width / aspect)*zoomscale 和 adjustVerticalInsetsWithImageHeight:(intermediateViewSize.width / aspect) 都有效。再次感谢您的回答！【参考方案2】：

我遇到了同样的问题，并在 Swift 4.0 中实现，如下所示，它对我有用。

Swift 4.0：

    func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat) 
    adjustScrollViewInsets()


func adjustScrollViewInsets() 
    let imageWidth = self.imageView.image?.size.width
    let imageHeight = self.imageView.image?.size.height
    let aspect = imageWidth! / imageHeight!
    let imageViewSize = self.imageView.frame.size
    if imageViewSize.width / aspect <= imageViewSize.height 
        adjustVerticalInsetsWithImageHeight(height: imageViewSize.width / 2)
     else 
        adjustHorizontalInsetsWithImageWidth(width: imageViewSize.height / 2)
    


func adjustHorizontalInsetsWithImageWidth(width: CGFloat) 
    var horizontalInset = (self.scrollView.contentSize.width - width) / 2
    if width < self.scrollView.contentSize.width 
       horizontalInset = horizontalInset  - (self.scrollView.frame.size.width - width) / 2
    
    self.scrollView.contentInset = UIEdgeInsetsMake(0, -horizontalInset, 0, -horizontalInset)


func adjustVerticalInsetsWithImageHeight(height: CGFloat) 
    var verticalInset = (self.scrollView.contentSize.height - height) / 2
    if height < self.scrollView.frame.size.height 
        verticalInset = verticalInset - (self.scrollView.frame.size.height - height) / 2
    
    self.scrollView.contentInset = UIEdgeInsetsMake(-verticalInset, 0, -verticalInset, 0)

【讨论】：

虽然此答案可能是正确且有用的，但如果您 include some explanation along with it 解释它如何帮助解决问题，则最好。如果有更改（可能不相关）导致它停止工作并且用户需要了解它曾经是如何工作的，这在未来变得特别有用。

如何移动和缩放图像[关闭]

】如何移动和缩放图像[关闭]【英文标题】：HowtomoveandscaleanImage[closed]【发布时间】：2012-10-0809:44:24【问题描述】：我的android应用程序中有一个Imageview。我想移动和缩放图像。我还想裁剪图像的选定部分（就像照片/图像编辑器一... 查看详情

在不移动叠加视图的情况下裁剪和缩放图像，而是在 ImageView 中移动图像

】在不移动叠加视图的情况下裁剪和缩放图像，而是在ImageView中移动图像【英文标题】：CropandZoomImagewithoutMovingOverlayViewInsteadMoveImageinImageView【发布时间】：2014-08-0511:51:33【问题描述】：您好，我想在不移动叠加视图的情况下裁... 查看详情

图像未放大时如何停止移动图像？

】图像未放大时如何停止移动图像？【英文标题】：howtostopmovingimagewhenimageisnotzoomedin?【发布时间】：2015-11-0211:14:36【问题描述】：我有一个UIImageView我正在执行缩放缩放和全缩放移动图像。我可以移动图像但问题是即使图像没有... 查看详情

在iOS中的iPad上捏缩放将图像移动到最左角？

】在iOS中的iPad上捏缩放将图像移动到最左角？【英文标题】：PinchzoomshiftingimagetomostleftcorneroniPadiniOS?【发布时间】：2016-01-3017:14:14【问题描述】：我在iOS中有一张图片。当我捏住它移动到左上角的图像时，我在图像上添加了捏合... 查看详情

iOS5 中的图像移动和缩放问题

】iOS5中的图像移动和缩放问题【英文标题】：ImagemoveandscaleissueiniOS5【发布时间】：2011-10-1810:07:20【问题描述】：最近我将我的iphone升级到了iOS5。升级到iOS5后，图像上通常的移动和缩放功能不起作用（UImagePickerController）。在iOs5... 查看详情

无论浏览器缩放级别如何，如何使图像连续排列？

】无论浏览器缩放级别如何，如何使图像连续排列？【英文标题】：Howtomakeimageslineupinarowregardlessofbrowserzoomlevel?【发布时间】：2011-09-2119:19:21【问题描述】：似乎无论我做什么，当我放大浏览器时，我都无法让一排图像水平排列... 查看详情

AppleTV 聚焦图像边框不缩放

】AppleTV聚焦图像边框不缩放【英文标题】：AppleTVfocusedimageborderdoesnotscale【发布时间】：2016-12-2310:36:53【问题描述】：我正在制作一个tvOS应用程序。我有一个集合视图单元，它有一个UIImageView。我在界面构建器中选中“聚焦时调... 查看详情

带有图像的 UIScrollView - 如何不缩放其中一个

】带有图像的UIScrollView-如何不缩放其中一个【英文标题】：UIScrollViewwithimages-hownottozoomoneofthem【发布时间】：2013-08-3011:58:48【问题描述】：我在scrollView中有很多imageViews。问题是我希望其中一个不要放大其图像。我无法将imageView... 查看详情

如何删除仅在 Chrome 中以不同缩放级别显示的透明图像叠加层上的边框？

】如何删除仅在Chrome中以不同缩放级别显示的透明图像叠加层上的边框？【英文标题】：HowdoIremoveaborderonatransparentimageoverlaywhichonlyappearsinChromeatdifferentzoomlevels?【发布时间】：2013-12-2010:30:09【问题描述】：不确定这是否可能是Chrom... 查看详情

如何将图像缩放到android中的指定坐标

】如何将图像缩放到android中的指定坐标【英文标题】：howtozoomtheimagetospecifiedcoordinatesinandroid【发布时间】：2016-04-2804:37:22【问题描述】：我想将图像缩放到图像的特定部分（到指定坐标）。我有一张图片，我在全屏的android图像... 查看详情

垂直添加元素时如何防止背景图像在移动浏览器上缩放？

】垂直添加元素时如何防止背景图像在移动浏览器上缩放？【英文标题】：Howtopreventbackground-imagefromzoomingonmobilebrowserwhenaddingelementsvertically?【发布时间】：2019-09-0913:58:31【问题描述】：我有一个ReactJS应用程序，当我按下“发布”... 查看详情

如何将图像 UIButton 缩放到插图？

】如何将图像UIButton缩放到插图？【英文标题】：HowtoscaleimageUIButtontotheinsets?【发布时间】：2016-10-1802:11:37【问题描述】：我有这个UIButton，但插图不在图像上，因此如果用户在图像边界之外但在插图内点击，则可以激活按钮。如... 查看详情

如何缩放视图并将自定义边框保持在原始大小\缩放？

】如何缩放视图并将自定义边框保持在原始大小\\\\缩放？【英文标题】：Howtoscaleviewandkeepcustombordersintheoriginalsize\\scale?如何缩放视图并将自定义边框保持在原始大小\\缩放？【发布时间】：2012-05-2713:38:50【问题描述】：我正在构... 查看详情

如何将边框图像添加到动态创建的图像？

】如何将边框图像添加到动态创建的图像？【英文标题】：HowcanIaddaborderimagetoadynamicallycreatedimage?【发布时间】：2020-02-1309:30:02【问题描述】：我正在从ajax调用中提取图像并尝试将其添加到已建立的div中。div已经包含我想用作边... 查看详情

你如何让背景图像快速缩放到屏幕大小？

】你如何让背景图像快速缩放到屏幕大小？【英文标题】：Howdoyoumakeabackgroundimagescaletoscreensizeinswift?【发布时间】：2014-11-2615:39:44【问题描述】：我正在尝试使用模式图像快速为我的背景制作UIView图像。除了我希望图像占据整个... 查看详情

如何将图像缩放到帧？

】如何将图像缩放到帧？【英文标题】：Howtoscaleanimagetoaframe?【发布时间】：2011-11-1123:32:40【问题描述】：是否可以将UIImage缩放到框架的大小？拍摄一张大图，然后将其“强行放入”较小的方框中。请举例说明【问题讨论】：【... 查看详情

移动图像缩放

makeimagesautoscaleformobilephonesimg{width:auto!important;height:auto!important;max-width:100%;} 查看详情

响应式移动图像缩放

allowsimagetoscaletofitmobilewindows.img{width:auto!important;height:auto!important;max-width:100%;} 查看详情