美文网首页
iOS图片裁切

iOS图片裁切

作者: 程序猿马国玺 | 来源:发表于2020-08-07 17:22 被阅读0次
效果图
拖拽裁切
裁切框
实现思路
  • 拖拽裁切
    这种实现比较简单,在imageView上添加一个拖拽手势,当手势开始的时候记录起点,当手势改变的时候修改view的frame。当手势结束的时候裁切图片

裁切图片的代码

extension UIImage {
    ///裁剪image,rect是相对于image.size大小
    public func cropping(to rect: CGRect) -> UIImage? {
        guard self.size.width > rect.origin.x else {
            return nil
        }
        guard self.size.height > rect.origin.y else {
            return nil
        }
        let scaleRect = CGRect(x: rect.origin.x*self.scale, y: rect.origin.y*self.scale, width: rect.width*self.scale, height: rect.height*self.scale)
        if let cgImage = self.cgImage?.cropping(to: scaleRect) {
            let cropImage = UIImage(cgImage: cgImage, scale: self.scale, orientation: .up)
            return cropImage
        } else {
            return nil
        }
    }
}
  • 裁切框
    裁切款要稍微复杂一点,首先是要做一个周围黑色背景中间镂空的效果,而且镂空可以放大、缩小、平移。这个通过在imageView上加layer实现了,放大缩小平移等操作是通过新生成layer替换之前的layer实现的
func resetCropMask() -> Void {
        let path = UIBezierPath(rect: self.backImageView.bounds)
        let clearPath = UIBezierPath(rect: self.cropView.frame)
        path.append(clearPath)

        let layer = CAShapeLayer()
        layer.frame = self.backImageView.bounds
        layer.fillColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5).cgColor
        layer.strokeColor = UIColor.clear.cgColor
        layer.fillRule = .evenOdd
        layer.path = path.cgPath
        for item in backImageView.layer.sublayers ?? [] {
            if item is CAShapeLayer {
                item.removeFromSuperlayer()
            }
        }
        self.backImageView.layer.addSublayer(layer)
    }

layer没有touch事件,所以添加了一个和layer镂空区域一致的透明view,这个view主要用来添加拖拽手势,处理裁剪框的放大缩小平移。
在这个view上,添加了四角四边总共八个view,对每个view的拖拽事件分别做了处理,这里其实并不难,比较容易出错。
代码详见demo

代码

demo地址

注意

裁切的图片必须要正常显示且显示完整,不能拉伸图片或者显示不全,因为最后裁切的时候是用裁切view相对于imageView的坐标计算的,如果图片没有正常显示,那么最后生成的图片会不正确

相关文章

  • iOS图片裁切

    效果图 实现思路 拖拽裁切这种实现比较简单,在imageView上添加一个拖拽手势,当手势开始的时候记录起点,当手...

  • MCClipImage

    github地址 支持功能说明 裁切矩形图片 裁切圆形图片 裁切相册图片 裁切拍照图片 调整图片缩放 调整裁切框大...

  • Android图片选择框架--PictureSelector

    功能特点 支持通过拍照获取图片 支持通过相册获取图片 支持图片裁切 支持仿IOS底部弹出选择菜单ActionShe...

  • 一个非常好用的Android图片选择工具类

    前言 功能特点 支持通过拍照获取图片 支持通过相册获取图片 支持图片裁切 支持仿IOS底部弹出选择菜单Action...

  • 基于 vue-cropper-elementUI 截图上传插件

    图片裁切 图片裁剪 ...

  • 如何优雅的设置圆形图片,避免离屏渲染的问题

    其实就是把下载的图片裁切成圆形图片,然后再设置 imageView.image ,为了避免每次都需要裁切图片的操作...

  • 图片的裁切

    ⒈想对图片进行裁切,首先点开图层的小锁 ⒉选框工具 右上第二个(平时不常用 通常用来得到画面中的某一部分) 套锁 ...

  • nodejs gm图片处理

    引入fs 、gm模块npm install gm 压缩图片 裁切图片 水印

  • [STAR]简洁的图片裁切

    尝试用STAR法则写一篇小白Demo,关于自定义图片切割功能 固定裁切框大小,图片可拖动缩放,精准裁切. 源码在最...

  • canvas的裁切规则

    应该是缩小后的图片上进行的裁切,并不是先裁切再绘制可以从canvas实现图片绘制的原理上来理解,实际上canvas...

网友评论

      本文标题:iOS图片裁切

      本文链接:https://www.haomeiwen.com/subject/tjjbqktx.html