• Swift-技巧(一)缩放并填充图片


    摘要

    直接操作图片来实现它的缩放或者填充多余空间,首选 UIGraphicsBeginImageContext 函数来实现,它就相当于一个画布,你甚至可以用它来涂鸦。

    最近有一个需求,就是将图片先等比例缩放到指定大小,然后将空余出来空间填充为黑色,返回指定大小的图片。

    这种直接操作图片的需求,就要考虑使用 UIGraphicsBeginImageContext 函数实现。它可以理解为一个画布,我们只需要把图片放在画布的对应位置,把画布的多余地方全部涂成黑色就完成。

    实现

    先看代码,然后再分析:

    func rescaleAndPading(_ image: UIImage, targetSize: CGSize) -> UIImage? {
            let max = max(image.width, image.height)
            let ratio = Float(targetSize.width) / Float(max)
            
            let (newWidth, newHeight) = (
     
                Int(Float(image.width) * ratio),
                Int(Float(image.height) * ratio)
            )
            
            let (tarWidth, tarHeight) = (
                
                Int(targetSize.width),
                Int(targetSize.height)
            )
            
            let deltaW = tarWidth - newWidth
            let deltaH = tarHeight - newHeight
            
            let (y, x) = (
                
                deltaH / 2,
                deltaW / 2
            )
            
            // 创建绘图上下文环境
            UIGraphicsBeginImageContext(targetSize)
            let context = UIGraphicsGetCurrentContext()
            // 黄色背景
            context?.setFillColor(UIColor.yellow.cgColor)
            context?.fill(CGRect(x: 0, y: 0,  tarWidth, height: tarHeight))
            image.draw(in: CGRect(x: x, y: y,  newWidth, height: newHeight))
            // 获取上下文里的内容,将视图写入到新的图像对象
            let newImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return newImage
        }
    

    看代码,总结出逻辑很简单,就是首先根据目标的 size 来计算出需要缩放的比例(按照最大边来处理),计算出图片在画布中的对应位置和缩放后的宽高。

    最后就是重头戏,调用 UIGraphicsBeginImageContext 来绘画。这里要留意几个参数的设置:

    • UIGraphicsBeginImageContext(targetSize) 中的 targetSize 是设置画布的大小。
    • image.draw(in:) 是图片在画布中的 rect 。
    • context 是画布的对象
    • context?.setFillColor(_) 是设置画布的颜色,若不设置,默认为 black(黑色)
    • context?.fill()是设置画布填充的 rect。

    重点

    如果是前面留意逻辑时,会发现逻辑中是先放置图片,然后填充空余空间,但是代码中是先填充全部空间,然后再放置图片,这是为什么?

    经过测试后发现,后绘制的区域会覆盖掉先前已经绘制的区域,所以代码中的处理就是防止填充区域覆盖图片区域。

    另外

    时间仓促,说的东西可能不全面,在你实现过程中遇到什么问题,评论区给我留言,我会尽快回复。

  • 相关阅读:
    JSONP跨域的原理解析( 一种脚本注入行为)
    用Navicat_SSH 连接数据库服务器
    ng-repeat && ng-options的故事
    The different between ng-grid & ui-grid
    Web工作原理
    js操作cookies方法
    人生苦短,我用Python(目录)
    哈希算法
    数据结构
    算法入门
  • 原文地址:https://www.cnblogs.com/shsuper/p/15497212.html
Copyright © 2020-2023  润新知