swift3.0 CoreGraphics绘图-实现画板Demo地址

写在前面 弄了下个人站...防止内容再次被锁定...所有东西都在这里面 welcome~ 个人博客

swift3.0对绘图的API进行了优化,看起来更swift了。

看下UI的构造。设置画笔粗细、清空面板和保存到本地

画板哦.gif

下面直接看画板文件

这里我做的比较复杂,记录触摸到的每个点,再连成路径,其实直接用可变路径CGMutablePath可变路径就可以实现。

成员变量

    public var lineWidth:CGFloat = 1
    fileprivate var allLineArray = [[CGPoint]]()   //所有的线    记录每一条线
    fileprivate var currentPointArray = [CGPoint]() //当前画线的点  画完置空 增加到 线数组中
    fileprivate var allPointWidth = [CGFloat]()    //所有的线宽

设置触摸时间,开始时记录第一个点并重绘(不重绘就没有只画一个点得效果),移动时不断记录并重绘。

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let point:CGPoint = (event?.allTouches?.first?.location(in: self))!
        //路径起点
        currentPointArray.append(point)
        self.setNeedsDisplay()
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        let point:CGPoint = (event?.allTouches?.first?.location(in: self))!
        //路径
        currentPointArray.append(point)
        //刷新视图
        self.setNeedsDisplay()
    }

由于我们的点都是存在数组中,当要清空画板时 只要将数组清空就可以了

    func cleanAll(){
        allLineArray.removeAll()
        currentPointArray.removeAll()
        allPointWidth.removeAll()
        self.setNeedsDisplay()
    }

下面看下 重绘的主逻辑

 override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        context?.setLineCap(.round)
        context?.setLineJoin(.round)
 
        //绘制之前的线
        if allLineArray.count > 0 {
            //遍历之前的线
            for i in 0..<allLineArray.count {
                let tmpArr = allLineArray[i]
                if tmpArr.count > 0 {
                    //画线
                    context?.beginPath()
                    //取出起始点
                    let sPoint:CGPoint = tmpArr[0]
                    context?.move(to: sPoint)
                    //取出所有当前线的点
                    for j in 0..<tmpArr.count {
                        let endPoint:CGPoint = tmpArr[j]
                        context?.addLine(to: endPoint)
                    }
                    context?.setLineWidth(allPointWidth[i])
                    context?.strokePath()
                }
            }
        }
        
        if currentPointArray.count > 0 {
            //绘制当前线
            context?.beginPath()
            context?.setLineWidth(self.lineWidth)
            context?.move(to: currentPointArray[0])
            print(currentPointArray[0])

            for i in 0..<currentPointArray.count {
                context?.addLine(to: currentPointArray[i])
                print(currentPointArray[i])
            }
            context?.strokePath()  
        }
    }

保存成图片可很简单,只要截屏设置范围就行

    //保存图片
    @IBAction func savePic(_ sender: Any) {
        
        let height:CGFloat = self.view.bounds.size.height - self.saveBtn.frame.height - 10
        let imageSize :CGSize = CGSize(width: self.view.bounds.size.width, height: height)
        UIGraphicsBeginImageContext(imageSize)
        view.layer.render(in: UIGraphicsGetCurrentContext()!)
        let img:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        UIImageWriteToSavedPhotosAlbum(img, self, #selector(image(_:didFinishSavingWithError:contextInfo:)), nil)
    }
    
    //保存图片回调
    func image(_ image: UIImage, didFinishSavingWithError error: NSError?, contextInfo:UnsafeRawPointer) {
        var resultTitle:String?
        var resultMessage:String?
        if error != nil {
            resultTitle = "错误"
            resultMessage = "保存失败,请检查是否允许使用相册"
        } else {
            resultTitle = "提示"
            resultMessage = "保存成功"
        }
        let alert:UIAlertController = UIAlertController.init(title: resultTitle, message:resultMessage, preferredStyle: .alert)
        alert.addAction(UIAlertAction.init(title: "确定", style: .default, handler: nil))
        self.present(alert, animated: true, completion: nil)
    }

不过千万别忘了给app设置相册的权限

在info.plist中添加Privacy - Photo Library Usage Description属性即可,value值为提示信息

相册权限.png

效果:

效果.png

有兴趣的童靴可可以直接用可变路径实现下 逻辑更简单 完了。

Demo地址

https://github.com/gongxiaokai/paintViewDemo

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术总结

iOS原生Loading效果

42240
来自专栏iOSer成长记录

MJRefresh 源码阅读

28220
来自专栏张高兴的博客

张高兴的 UWP 开发笔记:手机状态栏 StatusBar

35250
来自专栏老司机的简书

CoreText实现图文混排之点击事件

今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了。

19620
来自专栏進无尽的文章

绘图-简单手绘板的实现

自定义一个UIBezierPath的子类 LGPaintpath,下面是它的初始化方法

23630
来自专栏张高兴的博客

张高兴的 UWP 开发笔记:汉堡菜单进阶

44960
来自专栏移动端开发

事件分发机制

前言总结:     iOS的事件可以大概分为三种类型,我们会对这三种类型分别做一些介绍说明,先总结一下:     1.  Milti-Touch Events ...

24380
来自专栏游戏杂谈

INVALID_STATE_ERR: DOM Exception 11

在使用jQuery的ajax且网络很慢、设置了timeout的情况下,直接不判断ajax的readyState而直接取responseText将出会错(此时xh...

13120
来自专栏程序员维他命

MJRefresh 源码解析

MJRefresh是李明杰老师的作品,到现在已经有1w+颗star了,是一个简单实用,功能强大的iOS下拉刷新(也支持上拉加载更多)控件。它的可定制性很高,几乎...

19020
来自专栏大内老A

ASP.NET MVC的Razor引擎:RazorViewEngine

基于Web Form引擎的WebFormViewEngine和针对Razor引擎的RazorViewEngine都是抽象类型BuildManagerViewEn...

21690

扫码关注云+社区

领取腾讯云代金券