摘要

直接操作图片来实现它的缩放或者填充多余空间,首选 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, width: tarWidth, height: tarHeight))
image.draw(in: CGRect(x: x, y: y, width: 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。

重点

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

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

另外

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

Swift-技巧(一)缩放并填充图片的更多相关文章

  1. vc++ mfc 里保存缩放的bmp图片 不失真

    void CSaveView::OnFileSave() { BITMAP info;//原始图片 m_bitmap.GetBitmap(&info); CDC DC1; DC1.Create ...

  2. Android 手势检测实战 打造支持缩放平移的图片预览效果(下)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图 ...

  3. ImageMagick: DrawImage(Image*,DrawInfo*) 绘制填充图片时卡住的原因分析

    今天傍晚在测试的时候无意发现有两个动画会卡住,正常情况下,20秒就完成的操作,突然卡住. CPU:95%+,经过30 - 50秒左右后,程序又能正常的向下执行,结果是对的. 这种情况不是每次都发生,有 ...

  4. Swift - UITableView展开缩放动画

    Swift - UITableView展开缩放动画 效果 源码 https://github.com/YouXianMing/Swift-Animations // // HeaderViewTapA ...

  5. PHP的图片处理类(缩放、加图片水印和剪裁)

    <!--test.php文件内容--> <?php //包含这个类image.class.php include "image.class.php"; $img ...

  6. Flex 绘制圆形并填充图片

    注意:Ellipse 绘制椭圆,当width = height 时 则绘制圆形. BitmapFill:填充图片 <s:Group id="gpimgUser" width= ...

  7. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放,达到图片不变形目的,做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

  8. swift 点击button改变其内填充图片,达到选中的效果

    先看下效果: 点击后: 实现:在页面拖一个button,然后在所在页面声明其变量和一个点击事件 声明: @IBOutlet weak var BtnZiDong: UIButton! 点击事件函数: ...

  9. iOS swift 启动页加载广告(图片广告+视频广告)

    一般app在启动的时候都会有广告页,广告页用来加载自己的或者第三方的广告,广告的展示形式也多种多样,最近在看swift相关的东西,这里将提供支持加载图片广告和视频广告的解决方案 思路: 我们知道在加载 ...

随机推荐

  1. BZOJ_1008 越狱(快速幂)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1008 Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教 ...

  2. Nginx系列(8)- Nginx安装 | Docker环境下部署

    Docker环境下部署Nginx https://www.cnblogs.com/gltou/p/15186971.html

  3. VS2013的switch case缩进问题

    原来的   更改设置   改完后    

  4. 鸿蒙内核源码分析(ELF格式篇) | 应用程序入口并不是main | 百篇博客分析OpenHarmony源码 | v51.04

    百篇博客系列篇.本篇为: v51.xx 鸿蒙内核源码分析(ELF格式篇) | 应用程序入口并不是main | 51.c.h.o 加载运行相关篇为: v51.xx 鸿蒙内核源码分析(ELF格式篇) | ...

  5. 深入浅出WPF-01.WPF缘起

    WPF缘起 自2012年起,根据公司需要,开始进入界面开发工作.公司是医疗器械行业,很多操作都是基于PC进行的,所以桌面应用开发尤为重要.原有项目都是基于MFC进行的开发,而且是VC6.0的技术,维护 ...

  6. AOJ/搜索与递归及分治法习题集

    ALDS1_4_A-LinearSearch. Description: You are given a sequence of n integers S and a sequence of diff ...

  7. 初探计算机网络之CPU和内存

    CPU ​ CPU是一块超大规模的集成电路板,是计算机的核心部件,承载着计算机的主要运算和控制功能,是计算机的最终解释模块和执行模块.总之,用一句话概括就是,CPU是由控制器和运算器组成的,而内部寄存 ...

  8. CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

    本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中.通过本文,你 ...

  9. 10.10 Rewrite 实战

    将baidu.com跳转到www.baidu.com server { listen 80; server_name baidu.com; rewrite ^/ http://www.baidu.co ...

  10. 3D Analyst Tools(3D Analyst 工具)

    3D Analyst 工具 工具里有又细分如下分类: 注:以下代码的参数需要另行配置,不能直接执行:Python2不支持中文变量! 1.3D 要素 # Process: 3D 内部 arcpy.Ins ...