Home Original page

GitHub - targetcloud/TGImage: 一款以最新潮的方式来使用UIImage的swift插件

一款以最时髦的方式来使用UIImage的swift插件

Swift Build License MIT Platform Cocoapod

Features

  • 支持链式编程
  • 支持with 和size两种开启模式
  • 支持+= 、+两种图片相加操作
  • 用例丰富、快速使用

Usage

size开启模式

UIImage.size() 或.resizable()
.color .border .corner
.image
.position

其中size开启的是固定大小模式、resizable开启的是可变大小模式

其中color支持传入渐变色，如 gradient: [.lightGray, .white], locations: [0, 1], from: CGPoint(x: 0, y: 1), to: CGPoint(x: 0, y: 0)

其中border可以设置color、width、radius、alignment

其中corner可以分别设置4个角或统一设置四个角为同一个值

其中image用于生成 UIImage

其中position用于后面+或+=时用

注意：按上面大的顺序链式编程，在size和image之间的color 、border 、corner没有顺序要求

size开启方式

UIImage.size(width: CGFloat, height: CGFloat)
UIImage.size(_ size: CGSize)
UIImage.resizable()

with CGContext开启模式

支持UIImage.with类方式开启或image.with类实例开启

类方式是返回单图，实例方式开始是在实例图的基础再加上with图，实际是两图相加模式

with开启方式

UIImage.with(width: CGFloat, height: CGFloat, block: ContextBlock)//单
image.with(size: CGSize, opaque: Bool = false, scale: CGFloat = 0, block: ContextBlock)//相加
image.with(_ block: ContextBlock)//单

应用场景及Demo(以下图都是用代码绘制的哦)

在cell的某角上放一个某角载剪的渐变图

在某图上再画图

多个图相加放入容器图中

…

1

UIImageView(image: ({ () -> UIImage in
            var container = UIImage.size(width: 180, height: 20)
                .color(.clear)
                .image
            for i in 0..<7{
                let doti = UIImage.size(width: 20, height: 20)
                    .color(gradient: [UIColor.randomColor(), UIColor.randomColor()], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 1, y: 1))
                    .corner(radius: 10)
                    .image
                    .position(CGPoint(x: i * 20 + (i + 1) * 3, y: 0))
                container = container + doti
            }
            return container
        })())

2

UIImageView(image: ({ () -> UIImage in
            var container = UIImage.size(width: 30, height: 120)
                .color(.clear)
                .image
            for i in 0..<4{
                let doti = UIImage.size(width: CGFloat(30 - i * 4), height: CGFloat(30 - i * 4))
                    .color(gradient: [UIColor.randomColor(), UIColor.randomColor()], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 1, y: 1))
                    .corner(radius: CGFloat(30 - i * 4) * 0.5)
                    .image
                    .position(CGPoint(x: i * 2, y: 30 * i + (i + 1) * 3))
                container += doti
            }
            return container
        })())

3

UIImageView(image:
            UIImage.size(width: 27, height: 27)
                .corner(radius: 13.5)
                .color(.white)
                .border(color: .lightGray)
                .border(width: 2)
                .image
                .with({ context in
                    context.setLineCap(.round)
                    UIColor.lightGray.setStroke()
                    context.setLineWidth(2)
                    context.move(to: CGPoint(x: 6, y: 12))
                    context.addLine(to: CGPoint(x: 9, y: 18))
                    context.move(to: CGPoint(x: 9, y: 18))
                    context.addLine(to: CGPoint(x: 21, y: 9))
                    context.strokePath()
                })
        )

4

UIImageView(image: UIImage.size(width: 100, height: 100)
            .color(gradient: [.green, .blue], locations: [0, 1], from: CGPoint(x: 0, y: 1), to: CGPoint(x: 0, y: 0))
            .border(gradient: [.red, .yellow], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 1, y: 0))
            .border(width: 5)
            .border(alignment: .outside)
            .corner(topLeft: 20)
            .corner(topRight: 50)
            .corner(bottomLeft: 50)
            .corner(bottomRight: 20)
            .image)

5

UIImageView(image: ({ () -> UIImage in
            let background = UIImage.size(width: 120, height: 120)
                .color(gradient: [.black, .white], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 0, y: 1))
                .corner(radius: 13.5)
                .image
            let circle = UIImage.size(width: 106, height: 106)
                .color(.white)
                .corner(radius: 50)
                .image
            let center = UIImage.size(width: 8, height: 8)
                .color(.black)
                .corner(radius: 3)
                .image
            let clock = background + circle + center
            return clock.with { context in
                context.setLineCap(.round)
                UIColor.black.setStroke()
                context.setLineWidth(2)
                context.move(to: CGPoint(x: clock.size.width / 2, y: clock.size.height / 2))
                context.addLine(to: CGPoint(x: clock.size.width / 2 - 5, y: 15))
                context.move(to: CGPoint(x: clock.size.width / 2, y: clock.size.height / 2))
                context.addLine(to: CGPoint(x: clock.size.width - 25, y: clock.size.height / 2 - 3))
                context.strokePath()
                UIColor.red.setStroke()
                context.setLineWidth(1)
                context.move(to: CGPoint(x: clock.size.width / 2 + 8, y: clock.size.height / 2 - 7))
                context.addLine(to: CGPoint(x: 26, y: clock.size.height / 2 + 35))
                context.strokePath()
                UIColor.red.setFill()
                let rect = CGRect(x: clock.size.width / 2 - 1, y: clock.size.height / 2 - 1, width: 3, height: 3)
                context.fillEllipse(in: rect)
            }
        })())

6

UIImageView(image:
            ({ () -> UIImage in
                let circle = UIImage.size(width: 8, height: 8)
                    .color(.white)
                    .corner(radius: 4)
                    .image
                    .position(CGPoint(x: 5, y: 5))
                return UIImage.size(width: UIScreen.main.bounds.width*0.5, height: 44)
                    .color(gradient: [.red, .white], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 1, y: 1))
                    .corner(bottomRight: 20)
                    .image + circle
            })())

UIImageView(image:
            ({ () -> UIImage in
                let circle = UIImage.size(width: 8, height: 8)
                    .color(.white)
                    .corner(radius: 4)
                    .image
                    .position(CGPoint(x: UIScreen.main.bounds.width * 0.5 - 15, y: 5))
                return UIImage.size(width: UIScreen.main.bounds.width*0.5, height: 44)
                    .color(gradient: [.white, .lightGray], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 1, y: 1))
                    .corner(bottomLeft: 20)
                    .image + circle
            })())

UIImageView(image:
            ({ () -> UIImage in
                return UIImage.size(width: UIScreen.main.bounds.width*0.5, height: 44)
                    .color(gradient: [.white, UIColor.randomColor().withAlphaComponent(0.5)], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 1, y: 1))
                    .corner(topLeft: 20)
                    .image
            })())

UIImageView(image:
            ({ () -> UIImage in
                return UIImage.size(width: UIScreen.main.bounds.width*0.5, height: 22)
                    .color(gradient: [UIColor.randomColor(), .white], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 1, y: 1))
                    .corner(topLeft: 10)
                    .image
            })())
            
UIImageView(image:
            ({ () -> UIImage in
                return UIImage.size(width: UIScreen.main.bounds.width*0.5, height: 22)
                    .color(gradient: [.lightGray, .white], locations: [0, 1], from: CGPoint(x: 0, y: 0), to: CGPoint(x: 1, y: 1))
                    .corner(bottomLeft: 10)
                    .image
            })())

更多使用配置组合效果请download本项目或fork本项目查看

Installation

  • 下载并拖动TGImage.swift到你的工程中

  • Cocoapods

Reference

如果你觉得赞，请Star