Swift 全功能的绘图板开发

原创 2015年03月29日 21:20:44

转载请注明出处:http://blog.csdn.net/zhangao0086/article/details/43836789

要做一个全功能的绘图板,至少要支持以下这些功能:

  • 支持铅笔绘图(画点)
  • 支持画直线
  • 支持一些简单的图形(矩形、圆形等)
  • 做一个真正的橡皮擦
  • 能设置画笔的粗细
  • 能设置画笔的颜色
  • 能设置背景色或者背景图
  • 能支持撤消与重做

我们先做一些基础性的工作,比如创建工程。
这里写图片描述


工程搭建

先创建一个Single View Application 工程:
这里写图片描述
语言选择Swift
这里写图片描述
为了最大程度的利用屏幕区域,我们完全隐藏掉状态栏,在Info.plist里修改或添加这两个参数:
这里写图片描述
然后进入到Main.storyboard,开始搭建我们的UI。
我们给已存在的ViewControllerView添加一个UIImageView的子视图,背景色设为Light Gray,然后添加4个约束,由于要做一个全屏的画板,必须要让Constraint to margins保持没有选中的状态,否则左右两边会留下苹果建议的空白区域,最后把User Interaction Enabled打开:
这里写图片描述
这里写图片描述
然后我们回到ViewControllerView上:

  • 添加一个放工具栏的容器:UIView,为该View设置约束:
    这里写图片描述
    同样的不要选择Contraint to margins
  • 在该View里添加一个UISegmentedControl,并给SegmentedControl设置6个选项,分别是:

    1. 铅笔
    2. 直尺
    3. 虚线
    4. 矩形
    5. 圆形
    6. 橡皮擦
  • 给这个SegmentedControl添加约束:
    这里写图片描述
    垂直居中,两边各留20,高度固定为28。

完整的UI及结构看起来像这样:
这里写图片描述
ImageView将会作为实际的绘制区域,顶部的SegmentedControl提供工具的选择。 到目前为止我们还没有写下一行代码,至此要开始编码了。
这里写图片描述

你可能会注意到Board有一部分被挡住了,这只是暂时的~


施工…

Board

我们创建一个Board类,继承自UIImageView,同时把这个类设置为Main.storyboardImageView的Class,这样当app启动的时候就会自动创建一个Board的实例了。
增加两个属性以及初始化方法:

var strokeWidth: CGFloat
var strokeColor: UIColor

override init() {
    self.strokeColor = UIColor.blackColor()
    self.strokeWidth = 1

    super.init()
}

required init(coder aDecoder: NSCoder) {
    self.strokeColor = UIColor.blackColor()
    self.strokeWidth = 1

    super.init(coder: aDecoder)
}

由于我们是依赖于touches方法来完成绘图过程,我们需要记录下每次touch的状态,比如beganmovedended等,为此我们创建一个枚举,在touches方法中进行记录,并调用私有的绘图方法drawingImage

enum DrawingState {
    case Began, Moved, Ended
}

class Board: UIImageView {

    private var drawingState: DrawingState!

    // 此处省略init方法与另外两个属性

    // MARK: - touches methods

    override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
        self.drawingState = .Began
        self.drawingImage()
    }

    override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
        self.drawingState = .Moved
        self.drawingImage()
    }

    override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
        self.drawingState = .Ended
        self.drawingImage()
    }

    // MARK: - drawing

    private func drawingImage() {
        // 暂时为空实现
    }
}

在我们实现drawingImage方法之前,我们先创建另外一个重要的组件:BaseBrush

BaseBrush

顾名思义,BaseBrush将会作为一个绘图的基类而存在,我们会在它的基础上创建一系列的子类,以达到弹性的设计目的。为此,我们创建一个BaseBrush类,并实现一个PaintBrush接口:

import CoreGraphics

protocol PaintBrush {

    func supportedContinuousDrawing() -> Bool;

    func drawInContext(context: CGContextRef)
}

class BaseBrush : NSObject, PaintBrush {
    var beginPoint: CGPoint!
    var endPoint: CGPoint!
    var lastPoint: CGPoint?

    var strokeWidth: CGFloat!

    func supportedContinuousDrawing() -> Bool {
        return false
    }

    func drawInContext(context: CGContextRef) {
        assert(false, "must implements in subclass.")
    }
}

BaseBrush实现了PaintBrush接口,PaintBrush声明了两个方法:

  • supportedContinuousDrawing,表示是否是连续不断的绘图
  • drawInContext,基于Context的绘图方法,子类必须实现具体的绘图

只要是实现了PaintBrush接口的类,我们就当作是一个绘图工具(如铅笔、直尺等),而BaseBrush除了实现PaintBrush接口以外,我们还为它增加了四个便利属性:

  • beginPoint,开始点的位置
  • endPoint,结束点的位置
  • lastPoint,最后一个点的位置(也可以称作是上一个点的位置)
  • strokeWidth,画笔的宽度

这么一来,子类也可以很方便的获取到当前的状态,并作一些深度定制的绘图方法。

lastPoint的意义:beginPoint和endPoint很好理解,beginPoint是手势刚识别时的点,只要手势不结束,那么beginPoint在手势识别期间是不会变的;endPoint总是表示手势最后识别的点;除了铅笔以外,其他的图形用这两个属性就够了,但是用铅笔在移动的时候,不能每次从beginPoint画到endPoint,如果是那样的话就是画直线了,而是应该从上一次画的位置(lastPoint)画到endPoint,这样才是连贯的线。

回到Board

我们实现了一个画笔的基类之后,就可以重新回到Board类了,毕竟我们之前的工作还没有做完,现在是时候完善Board类了。
我们用Board实际操纵BaseBrush,先为Board添加两个新的属性:

var brush: BaseBrush?

private var realImage: UIImage?    

brush对应到具体的画笔类,realImage保存当前的图形,重新修改touches方法,以便增加对brush属性的处理,完整的touches方法实现如下:

// MARK: - touches methods

override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
    if let brush = self.brush {
        brush.lastPoint = nil

        brush.beginPoint = touches.anyObject()!.locationInView(self)
        brush.endPoint = brush.beginPoint

        self.drawingState = .Began
        self.drawingImage()
    }
}

override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
    if let brush = self.brush {
        brush.endPoint = touches.anyObject()!.locationInView(self)

        self.drawingState = .Moved
        self.drawingImage()
    }
}

override func touchesCancelled(touches: NSSet!, withEvent event: UIEvent!) {
    if let brush = self.brush {
        brush.endPoint = nil
    }
}

override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
    if let brush = self.brush {
        brush.endPoint = touches.anyObject()!.locationInView(self)

        self.drawingState = .Ended

        self.drawingImage()
    }
}

我们需要防止brushnil的情况,以及为brush设置好beginPointendPoint,之后我们就可以完善drawingImage方法了,实现如下:

private func drawingImage() {
    if let brush = self.brush {

        // 1.
        UIGraphicsBeginImageContext(self.bounds.size)

        // 2.
        let context = UIGraphicsGetCurrentContext()

        UIColor.clearColor().setFill()
        UIRectFill(self.bounds)

        CGContextSetLineCap(context, kCGLineCapRound)
        CGContextSetLineWidth(context, self.strokeWidth)
        CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor)

        // 3.
        if let realImage = self.realImage {
            realImage.drawInRect(self.bounds)
        }

        // 4.
        brush.strokeWidth = self.strokeWidth
        brush.drawInContext(context);
        CGContextStrokePath(context)

        // 5.
        let previewImage = UIGraphicsGetImageFromCurrentImageContext()
        if self.drawingState == .Ended || brush.supportedContinuousDrawing() {
            self.realImage = previewImage
        }

        UIGraphicsEndImageContext()

        // 6.
        self.image = previewImage;

        brush.lastPoint = brush.endPoint
    }
}

步骤解析:

  1. 开启一个新的ImageContext,为保存每次的绘图状态作准备。
  2. 初始化context,进行基本设置(画笔宽度、画笔颜色、画笔的圆润度等)。
  3. 把之前保存的图片绘制进context中。
  4. 设置brush的基本属性,以便子类更方便的绘图;调用具体的绘图方法,并最终添加到context中。
  5. 从当前的context中,得到Image,如果是ended状态或者需要支持连续不断的绘图,则将Image保存到realImage中。
  6. 实时显示当前的绘制状态,并记录绘制的最后一个点。

这些工作完成以后,我们就可以开始写第一个工具了:铅笔工具。
这里写图片描述

铅笔工具

铅笔工具应该支持连续不断的绘图(不断的保存到realImage中),这也是我们给PaintBrush接口增加supportedContinuousDrawing方法的原因,考虑到用户的手指可能快速的移动,导致从一个点到另一个点有着跳跃性的动作,我们对铅笔工具采用画直线的方式来实现。
首先创建一个类,名为PencilBrush,继承自BaseBrush类,实现如下:

class PencilBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        if let lastPoint = self.lastPoint {
            CGContextMoveToPoint(context, lastPoint.x, lastPoint.y)
            CGContextAddLineToPoint(context, endPoint.x, endPoint.y)
        } else {
            CGContextMoveToPoint(context, beginPoint.x, beginPoint.y)
            CGContextAddLineToPoint(context, endPoint.x, endPoint.y)
        }
    }

    override func supportedContinuousDrawing() -> Bool {
        return true
    }
}

如果lastPoint为nil,则基于beginPoint画线,反之则基于lastPoint画线。
这样一来,一个铅笔工具就完成了,怎么样,很简单吧。
这里写图片描述


测试

到目前为止,我们的ViewController还保持着默认的状态,是时候先为铅笔工具写一些测试代码了。
ViewController添加board属性,并与Main.storyboard中的Board关联起来;创建一个brushes属性,并为之赋值为:

var brushes = [PencilBrush()]

ViewController中添加switchBrush:方法,并把Main.storyboard中的SegmentedControl的ValueChanged连接到ViewControllerswitchBrush:方法上,实现如下:

@IBAction func switchBrush(sender: UISegmentedControl) {
    assert(sender.tag < self.brushes.count, "!!!")

    self.board.brush = self.brushes[sender.selectedSegmentIndex]
}

最后在viewDidLoad方法中做一个初始化:
self.board.brush = brushes[0]
编译、运行,铅笔工具可以完美运行~!
这里写图片描述


其他的工具

接下来我们把其他的绘图工具也实现了。
其他的工具不像铅笔工具,不需要支持连续不断的绘图,所以也就不用覆盖supportedContinuousDrawing方法了。

直尺

创建一个LineBrush类,实现如下:

class LineBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        CGContextMoveToPoint(context, beginPoint.x, beginPoint.y)
        CGContextAddLineToPoint(context, endPoint.x, endPoint.y)
    }
}

虚线

创建一个DashLineBrush类,实现如下:

class DashLineBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        let lengths: [CGFloat] = [self.strokeWidth * 3, self.strokeWidth * 3]
        CGContextSetLineDash(context, 0, lengths, 2);

        CGContextMoveToPoint(context, beginPoint.x, beginPoint.y)
        CGContextAddLineToPoint(context, endPoint.x, endPoint.y)
    }
}

这里我们就用到了BaseBrushstrokeWidth属性,因为我们想要创建一条动态的虚线。

矩形

创建一个RectangleBrush类,实现如下:

class RectangleBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        CGContextAddRect(context, CGRect(origin: CGPoint(x: min(beginPoint.x, endPoint.x), y: min(beginPoint.y, endPoint.y)),
            size: CGSize(width: abs(endPoint.x - beginPoint.x), height: abs(endPoint.y - beginPoint.y))))
    }
}

我们用到了一些计算,因为我们希望矩形的区域不是由beginPoint定死的。

圆形

创建一个EllipseBrush类,实现如下:

class EllipseBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        CGContextAddEllipseInRect(context, CGRect(origin: CGPoint(x: min(beginPoint.x, endPoint.x), y: min(beginPoint.y, endPoint.y)),
            size: CGSize(width: abs(endPoint.x - beginPoint.x), height: abs(endPoint.y - beginPoint.y))))
    }
}

同样有一些计算,理由同上。

橡皮擦

从本文一开始就说过了,我们要做一个真正的橡皮擦,网上有很多的橡皮擦的实现其实就是把画笔颜色设置为背景色,但是如果背景色可以动态设置,甚至设置为一个渐变的图片时,这种方法就失效了,所以有些绘图app的背景色就是固定为白色的。
其实Apple的Quartz2D框架本身就是支持橡皮擦的,只用一个方法就可以完美实现。
让我们创建一个EraserBrush类,实现如下:

class EraserBrush: PencilBrush {

    override func drawInContext(context: CGContextRef) {
        CGContextSetBlendMode(context, kCGBlendModeClear);

        super.drawInContext(context)
    }
}

注意,与其他的工具不同,橡皮擦是继承自PencilBrush的,因为橡皮擦本身也是基于点的,而drawInContext里也只是加了一句:

CGContextSetBlendMode(context, kCGBlendModeClear);

加入这一句代码,一个真正的橡皮擦便实现了。


再次测试

现在我们的工程结构应该类似于这样:
这里写图片描述
我们修改下ViewController中的brushes属性的初始值:

var brushes = [PencilBrush(), LineBrush(), DashLineBrush(), RectangleBrush(), EllipseBrush(), EraserBrush()]

编译、运行:
这里写图片描述
除了橡皮擦擦除的范围太小以外,一切都很完美~!
这里写图片描述


设计思路

在继续完成剩下的功能之前,我想先对之前的代码进行些说明。

为什么不用drawRect方法

其实我最开始也是使用drawRect方法来完成绘制,但是感觉限制很多,比如context无法保存,还是要每次重画(虽然可以保存到一个BitMapContext里,但是这样与保存到image里有什么区别呢?);后来用CALayer保存每一条CGPath,但是这样仍然不能避免每次重绘,因为需要考虑到橡皮擦和画笔属性之类的影响,这么一来还不如采用image的方式来保存最新绘图板。
既然定下了以image来保存绘图板,那么drawRect就不方便了,因为不能用UIGraphicsBeginImageContext方法来创建一个ImageContext。

ViewController与Board、BaseBrush之间的关系

ViewControllerBoardBaseBrush这三者之间,虽然VC要知道另外两个组件,但是仅限于选择对应的工具给Board,Board本身并不知道当前的brush是哪个brush,也不需要知道其内部实现,只管调用对应的brush就行了;BaseBrush(及其子类)也并不知道自己将会被用于哪,它们只需要实现自己的算法即可。类似于这样的图:
这里写图片描述
实际上这里包含了两个设计模式。

策略设计模式

策略设计模式的UML图:
这里写图片描述
策略设计模式在iOS中也应用广泛,如AFNetworkingAFHTTPRequestSerializerAFHTTPResponseSerializer的设计,通过在运行时动态的改变委托对象,变换行为,使程序模块之间解耦、提高应变能力。
以我们的绘图板为例,输出不同的图形就意味着不同的算法,用户可根据不同的需求来选择某一种算法,即BaseBrush及其子类做具体的封装,这样的好处是每一个子类只关心自己的算法,达到了高聚合的原则,高级模块(Board)不用关心具体实现。
想象一下,如果是让Board里自身来处理这些算法,那代码中无疑会充斥很多与算法选择相关的逻辑,而且每增加一个算法都需要重新修改Board类,这又与代码应该对拓展开放、对修改关闭原则有了冲突,而且每个类也应该只有一个责任。
通过采用策略模式我们实现了一个好维护、易拓展的程序(妈妈再也不用担心工具栏不够用了^^)。

策略模式的定义:定义一个算法群,把每一个算法分别封装起来,让它们之间可以互相替换,使算法的变化独立于使用它的用户之上。

模板方法

在传统的策略模式中,每一个算法类都独自完成整个算法过程,例如一个网络解析程序,可能有一个算法用于解析JSON,有另一个算法用于解析XML等(另外一个例子是压缩程序,用ZIPRAR算法),独自完成整个算法对灵活性更好,但免不了会有重复代码,在DrawingBoard里我们做一个折中,尽量保证灵活性,又最大限度地避免重复代码。
我们将BaseBrush的角色提升为算法的基类,并提供一些便利的属性(如beginPointendPointstrokeWidth等),然后在BoarddrawingImage方法里对BaseBrush的接口进行调用,而BaseBrush不会知道自己的接口是如何联系起来的,虽然supportedContinuousDrawing(这是一个“钩子”)甚至影响了算法的流程(铅笔需要实时绘图)。
我们用drawingImage搭建了一个算法的骨架,看起来像是模板方法的UML图:
这里写图片描述

图中右边的方框代表模板方法。

BaseBrush通过提供抽象方法(drawInContext)、具体方法或钩子方法(supportedContinuousDrawing)来对应算法的每一个步骤,让其子类可以重定义或实现这些步骤。同时,让模板方法(即dawingImage)定义一个算法的骨架,模板方法不仅可以调用在抽象类中实现的基本方法,也可以调用在抽象类的子类中实现的基本方法,还可以调用其他对象中的方法。
除了对算法的封装以外,模板方法还能防止“循环依赖”,即高层组件依赖低层组件,反过来低层组件也依赖高层组件。想像一下,如果既让Board选择具体的算法子类,又让算法类直接调用drawingImage方法(不提供钩子,直接把Board的事件下发下去),那到时候就热闹了,这些类串在一起难以理解,又不好维护。

模板方法的定义:在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤。

其实模式都很简单,很多人在工作中会思考如何让自己的代码变得更好,“情不自禁”地就会慢慢实现这些原则,了解模式的设计意图,有助于在遇到需要折中的地方更加明白如何在设计上取舍。

以上就是我设计时的思路,说完了,接下来还要完成的工作有:

  • 提供对画笔颜色、粗细的设置
  • 背景设置
  • 全屏绘图(不能让Board一直显示不全)

先从画笔开始,Let’s go!


画笔设置

不管是画笔还是背景设置,我们都要有一个能提供设置的工具栏。

设置工具栏

所以我们往Board上再盖一个UIToolbar,与顶部的View类似:

  1. 拖一个UIToolbarBoard的父类上,与Board的视图层级平级。
  2. 设置UIToolbar的约束:左、右、下间距为0,高为44:
    这里写图片描述
  3. UIToolbar上拖一个UIBarButtonItemtitle就写:画笔设置。
  4. ViewController里增加一个paintingBrushSettings方法,并把UIBarButtonItemaction连接paintingBrushSettings方法上。
  5. ViewController里增加一个toolar属性,并把Xib中的UIToolbar连接到toolbar上。

UIToolbar配置好后,UI及视图层级如下:
这里写图片描述

RGBColorPicker

考虑到多个页面需要选取自定义的颜色,我们先创建一个工具类:RGBColorPicker,用于选择RGB颜色:

class RGBColorPicker: UIView {

    var colorChangedBlock: ((color: UIColor) -> Void)?

    private var sliders = [UISlider]()
    private var labels = [UILabel]()

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.initial()
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        self.initial()
    }

    private func initial() {
        self.backgroundColor = UIColor.clearColor()
        let trackColors = [UIColor.redColor(), UIColor.greenColor(), UIColor.blueColor()]

        for index in 1...3 {
            let slider = UISlider()
            slider.minimumValue = 0
            slider.value = 0
            slider.maximumValue = 255
            slider.minimumTrackTintColor = trackColors[index - 1]
            slider.addTarget(self, action: "colorChanged:", forControlEvents: .ValueChanged)
            self.addSubview(slider)
            self.sliders.append(slider)

            let label = UILabel()
            label.text = "0"
            self.addSubview(label)
            self.labels.append(label)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let sliderHeight = CGFloat(31)
        let labelWidth = CGFloat(29)
        let yHeight = self.bounds.size.height / CGFloat(sliders.count)

        for index in 0..<self.sliders.count {
            let slider = self.sliders[index]
            slider.frame = CGRect(x: 0, y: CGFloat(index) * yHeight, width: self.bounds.size.width - labelWidth - 5.0, height: sliderHeight)

            let label = self.labels[index]
            label.frame = CGRect(x: CGRectGetMaxX(slider.frame) + 5, y: slider.frame.origin.y, width: labelWidth, height: sliderHeight)
        }
    }

    override func intrinsicContentSize() -> CGSize {
        return CGSize(width: UIViewNoIntrinsicMetric, height: 107)
    }

    @IBAction private func colorChanged(slider: UISlider) {
        let color = UIColor(
            red: CGFloat(self.sliders[0].value / 255.0),
            green: CGFloat(self.sliders[1].value / 255.0),
            blue: CGFloat(self.sliders[2].value / 255.0),
            alpha: 1)

        let label = self.labels[find(self.sliders, slider)!]
        label.text = NSString(format: "%.0f", slider.value)

        if let colorChangedBlock = self.colorChangedBlock {
            colorChangedBlock(color: color)
        }
    }

    func setCurrentColor(color: UIColor) {
        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0
        color.getRed(&red, green: &green, blue: &blue, alpha: nil)
        let colors = [red, green, blue]

        for index in 0..<self.sliders.count {
            let slider = self.sliders[index]
            slider.value = Float(colors[index]) * 255

            let label = self.labels[index]
            label.text = NSString(format: "%.0f", slider.value)
        }
    }
}

这个工具类很简单,没有采用Auto Layout进行布局,因为layoutSubviews方法已经能很好的满足我们的需求了。当用户拖动任何一个UISlider的时候,我们能实时的通过colorChangedBlock回调给外部。它能展现一个这样的视图:
这里写图片描述
不过虽然该工具类本身没有采用Auto Layout进行布局,但是它还是支持Auto Layout的,当它被添加到某个Auto Layout的视图中的时候,Auto Layout布局系统可以通过intrinsicContentSize知道该视图的尺寸信息。
最后它还有一个setCurrentColor方法从外部接收一个UIColor,可以用于初始化。

画笔设置的UI

我打算在用户点击画笔设置的时候,从底部弹出一个控制面板(就像系统的Control Center那样),所以我们还要有一个像这样的设置UI:
这里写图片描述
具体的,创建一个PaintingBrushSettingsView类,同时创建一个PaintingBrushSettingsView.xib文件,并把xib中view的Class设为PaintingBrushSettingsView,设置view的背景色为透明:

  1. 放置一个title为“画笔粗细”的UILabel,约束设为:宽度固定为68,高度固定为21,左和上边距为8。
  2. 放置一个title为“1”的UILabel,“1”与“画笔粗细”的垂直间距为10,宽度固定为10,高度固定为21,与superview的左边距为10。
  3. 放置一个UISlider,用于调节画笔的粗细,与“1”的水平间距为5,并与“1”垂直居中,高度固定为30,宽度暂时不设,在PaintingBrushSettingsView中添加strokeWidthSlider属性,与之连接起来。
  4. 放置一个title为“20”的UILabel,约束设为:宽度固定为20,高度固定为21,top与“1”相同,与superview的右间距为10。并把上一步中的UISlider的右间距设为与“20”相隔5。
  5. 放置一个title为“画笔颜色”的UILabel,宽、高、left与“画笔粗细”相同,与上面UISlider的垂直间距设为12。
  6. 放置一个UIView至“画笔颜色”下方(上图中被选中的那个UIView),宽度固定为50,高度固定为30,left与“画笔颜色”相同,并且与“画笔颜色”的垂直间距为5,在PaintingBrushSettingsView中添加strokeColorPreview属性,与之连接起来。
  7. 放置一个UIView,把它的Class改为RGBColorPicker,约束设为:left与顶部的UISlider相同,底部与superview的间距为0,右间距为10,与上一步中的UIView的垂直间距为5。

PaintingBrushSettingsView类的完整代码如下:

class PaintingBrushSettingsView : UIView {

    var strokeWidthChangedBlock: ((strokeWidth: CGFloat) -> Void)?
    var strokeColorChangedBlock: ((strokeColor: UIColor) -> Void)?

    @IBOutlet private var strokeWidthSlider: UISlider!
    @IBOutlet private var strokeColorPreview: UIView!
    @IBOutlet private var colorPicker: RGBColorPicker!

    override func awakeFromNib() {
        super.awakeFromNib()

        self.strokeColorPreview.layer.borderColor = UIColor.blackColor().CGColor
        self.strokeColorPreview.layer.borderWidth = 1

        self.colorPicker.colorChangedBlock = {
            [unowned self] (color: UIColor) in

            self.strokeColorPreview.backgroundColor = color
            if let strokeColorChangedBlock = self.strokeColorChangedBlock {
                strokeColorChangedBlock(strokeColor: color)
            }
        }

        self.strokeWidthSlider.addTarget(self, action: "strokeWidthChanged:", forControlEvents: .ValueChanged)
    }

    func setBackgroundColor(color: UIColor) {
        self.strokeColorPreview.backgroundColor = color
        self.colorPicker.setCurrentColor(color)
    }

    func strokeWidthChanged(slider: UISlider) {
        if let strokeWidthChangedBlock = self.strokeWidthChangedBlock {
            strokeWidthChangedBlock(strokeWidth: CGFloat(slider.value))
        }
    }
}

strokeWidthChangedBlockstrokeColorChangedBlock两个Block用于给外部传递状态。setBackgroundColor用于初始化。

关于 Swift 1.2

在 Swift 1.2里,不能用 setBackgroundColor方法了,具体的,见Xcode 6.3的发布文档:Xcode 6.3 Release Notes,下面是用didSet代替原有的setBackgroundColor方法:

override var backgroundColor: UIColor? {
    didSet {
        self.strokeColorPreview.backgroundColor = self.backgroundColor
        self.colorPicker.setCurrentColor(self.backgroundColor!)

        super.backgroundColor = oldValue
    }
}

实现毛玻璃效果

在把PaintingBrushSettingsView显示出来之前,我们要先想一想以何种方式展现比较好,众所周知Control Center是有毛玻璃效果的,我们也想要这样的效果,而且不用自己实现。那如何产生效果? 答案是用UIToolbar就行了。
UIToolbar本身就是带有毛玻璃效果的,只要你不设置背景色,并且translucent属性为true,“恰好”我们页面底部就有一个UIToolbar,我们把它拉高就可以插入展现PaintingBrushSettingsView了。
只要get到了这一点,毛玻璃效果就算实现了~~
这里写图片描述

测试画笔设置

我们在ViewController新增加几个属性:

var toolbarEditingItems: [UIBarButtonItem]?
var currentSettingsView: UIView?

@IBOutlet var toolbarConstraintHeight: NSLayoutConstraint!

toolbarConstraintHeight连接到Main.storyboard中对应的约束上就行了。toolbarEditingItems能让我们在UIToolbar上显示不同的items,本来还需要一个toolbarItems属性的,因为UIViewController类本身就自带,我们便不用单独新增。currentSettingsView是用来保存当前展示的哪个设置页面,考虑到我们后面会增加背景设置,这个属性还是有必要的。
我们先写一个往toolbar上添加约束的工具方法:

func addConstraintsToToolbarForSettingsView(view: UIView) {
    view.setTranslatesAutoresizingMaskIntoConstraints(false)

    self.toolbar.addSubview(view)
    self.toolbar.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[settingsView]-0-|",
        options: .DirectionLeadingToTrailing,
        metrics: nil,
        views: ["settingsView" : view]))
    self.toolbar.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[settingsView(==height)]",
        options: .DirectionLeadingToTrailing,
        metrics: ["height" : view.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height],
        views: ["settingsView" : view]))
}

这个工具方法会把传入进来的view添加到toolbar上,同时添加相应的约束。注意高度的约束,我是通过systemLayoutSizeFittingSize方法计算出设置视图最佳的高度,这是为了达到更好的拓展性(背景设置与画笔设置所需要的高度很可能会不同)。
然后再增加一个setupBrushSettingsView方法:

func setupBrushSettingsView() {
    let brushSettingsView = UINib(nibName: "PaintingBrushSettingsView", bundle: nil).instantiateWithOwner(nil, options: nil).first as PaintingBrushSettingsView

    self.addConstraintsToToolbarForSettingsView(brushSettingsView)

    brushSettingsView.hidden = true
    brushSettingsView.tag = 1
    brushSettingsView.setBackgroundColor(self.board.strokeColor)

    brushSettingsView.strokeWidthChangedBlock = {
        [unowned self] (strokeWidth: CGFloat) -> Void in
        self.board.strokeWidth = strokeWidth
    }

    brushSettingsView.strokeColorChangedBlock = {
        [unowned self] (strokeColor: UIColor) -> Void in
        self.board.strokeColor = strokeColor
    }
}

我们在这个方法里实例化了一个PaintingBrushSettingsView,并添加到toolbar上,增加相应的约束,以及一些初始化设置和两个Block回调的处理。
然后修改viewDidLoad方法,增加以下行为:

//---
self.toolbarEditingItems = [
    UIBarButtonItem(barButtonSystemItem:.FlexibleSpace, target: nil, action: nil),
    UIBarButtonItem(title: "完成", style:.Plain, target: self, action: "endSetting")
]
self.toolbarItems = self.toolbar.items

self.setupBrushSettingsView()
//---

paintingBrushSettings方法里响应点击:

@IBAction func paintingBrushSettings() {
    self.currentSettingsView = self.toolbar.viewWithTag(1)
    self.currentSettingsView?.hidden = false

    self.updateToolbarForSettingsView()
}


func updateToolbarForSettingsView() {
    self.toolbarConstraintHeight.constant = self.currentSettingsView!.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height + 44

    self.toolbar.setItems(self.toolbarEditingItems, animated: true)
    UIView.beginAnimations(nil, context: nil)
    self.toolbar.layoutIfNeeded()
    UIView.commitAnimations()

    self.toolbar.bringSubviewToFront(self.currentSettingsView!)
}

updateToolbarForSettingsView也是一个工具方法,用于更新toolbar的高度。
由于我们采用了Auto Layout进行布局,动画要通过调用layoutIfNeeded方法来实现。
响应点击“完成”按钮的endSetting方法:

@IBAction func endSetting() {
    self.toolbarConstraintHeight.constant = 44

    self.toolbar.setItems(self.toolbarItems, animated: true)

    UIView.beginAnimations(nil, context: nil)
    self.toolbar.layoutIfNeeded()
    UIView.commitAnimations()

    self.currentSettingsView?.hidden = true
}

这么一来画笔设置就做完了,代码应该还是比较好理解,编译、运行后,应该能看到:

完成度已经很高了^^!
这里写图片描述


背景设置

整体的框架基本上已经在之前的工作中搭好了,我们快速过掉这一节。
Main.storyboard中增加了一个title为“背景设置”的UIBarButtonItem,并将action连接到ViewControllerbackgroundSettings方法上,你可以选择在插入“背景设置”之前,先插入一个FlexibleSpaceUIBarButtonItem
创建BackgroundSettingsVC类,继承自UIViewController,这与画笔设置继承于UIView不同,我们希望背景设置可以在用户的相册中选择照片,而使用UIImagePickerController的前提是要实现UIImagePickerControllerDelegateUINavigationControllerDelegate两个接口,如果让UIView来实现这两个接口会很奇怪。
创建一个BackgroundSettingsVC.xib文件:

  1. 放置一个title为“从相册中选择背景图”的UIButton,约束为:左、上边距为8,宽度固定为135,高度固定为30。
  2. 放置一个RGBColorPicker,约束为:左、右边距为8,与UIButton的垂直间距为20,底部与superview齐平。
  3. 把UIButton的Touch Up Inside事件连接到BackgroundSettingsVCpickImage方法上;RGBColorPicker连接到BackgroundSettingsVCcolorPicker属性上。

看上去像这样:
这里写图片描述

BackgroundSettingsVC类的完整代码:

class BackgroundSettingsVC : UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    var backgroundImageChangedBlock: ((backgroundImage: UIImage) -> Void)?
    var backgroundColorChangedBlock: ((backgroundColor: UIColor) -> Void)?

    @IBOutlet private var colorPicker: RGBColorPicker!

    lazy private var pickerController: UIImagePickerController = {
        [unowned self] in
        let pickerController = UIImagePickerController()
        pickerController.delegate = self

        return pickerController
    }()

    override func awakeFromNib() {
        super.awakeFromNib()

        self.colorPicker.colorChangedBlock = {
            [unowned self] (color: UIColor) in
            if let backgroundColorChangedBlock = self.backgroundColorChangedBlock {
                backgroundColorChangedBlock(backgroundColor: color)
            }
        }
    }

    func setBackgroundColor(color: UIColor) {
        self.colorPicker.setCurrentColor(color)
    }

    @IBAction func pickImage() {
        self.presentViewController(self.pickerController, animated: true, completion: nil)
    }

    // MARK: UIImagePickerControllerDelegate Methods
    func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [NSObject : AnyObject]) {
        let image = info[UIImagePickerControllerOriginalImage] as UIImage

        if let backgroundImageChangedBlock = self.backgroundImageChangedBlock {
            backgroundImageChangedBlock(backgroundImage: image)
        }

        self.dismissViewControllerAnimated(true, completion: nil)
    }

    // MARK: UINavigationControllerDelegate Methods
    func navigationController(navigationController: UINavigationController, willShowViewController viewController: UIViewController, animated: Bool) {
        UIApplication.sharedApplication().setStatusBarHidden(true, withAnimation: .None)
    }
}

同样用两个Block进行回调;setBackgroundColor公共方法用于设置内部的RGBColorPicker的初始颜色状态;在UINavigationControllerDelegate里隐藏系统默认显示的状态栏。
回到ViewController,我们对背景设置进行测试。
setupBrushSettingsView方法一样,我们增加一个setupBackgroundSettingsView方法:

func setupBackgroundSettingsView() {
    let backgroundSettingsVC = UINib(nibName: "BackgroundSettingsVC", bundle: nil).instantiateWithOwner(nil, options: nil).first as BackgroundSettingsVC

    self.addConstraintsToToolbarForSettingsView(backgroundSettingsVC.view)

    backgroundSettingsVC.view.hidden = true
    backgroundSettingsVC.view.tag = 2
    backgroundSettingsVC.setBackgroundColor(self.board.backgroundColor!)

    self.addChildViewController(backgroundSettingsVC)

    backgroundSettingsVC.backgroundImageChangedBlock = {
        [unowned self] (backgroundImage: UIImage) in
        self.board.backgroundColor = UIColor(patternImage: backgroundImage)
    }

    backgroundSettingsVC.backgroundColorChangedBlock = {
        [unowned self] (backgroundColor: UIColor) in
        self.board.backgroundColor = backgroundColor
    }
}

修改viewDidLoad方法:

self.toolbarEditingItems = [
    UIBarButtonItem(barButtonSystemItem:.FlexibleSpace, target: nil, action: nil),
    UIBarButtonItem(title: "完成", style:.Plain, target: self, action: "endSetting")
]
self.toolbarItems = self.toolbar.items

self.setupBrushSettingsView()
self.setupBackgroundSettingsView() // Added~!!!

实现backgroundSettings方法:

@IBAction func backgroundSettings() {
    self.currentSettingsView = self.toolbar.viewWithTag(2)
    self.currentSettingsView?.hidden = false

    self.updateToolbarForSettingsView()
}

编译、运行,现在你可以用不同的背景色(或背景图)了!


全屏绘图

到目前为止,Board一直显示不全(事实上,我很早就实现了全屏绘图,但是优先级一直被我排在最后),现在是时候来解决它了。
解决思路是这样的:当用户开始绘图的时候,我们把顶部和底部两个View隐藏;当用户结束绘图的时候,再让两个View显示。
为了获取用户的绘图状态,我们需要在Board里加个“钩子”:

// 增加一个Block回调
var drawingStateChangedBlock: ((state: DrawingState) -> ())?

private func drawingImage() {
    if let brush = self.brush {
        // hook
        if let drawingStateChangedBlock = self.drawingStateChangedBlock {
            drawingStateChangedBlock(state: self.drawingState)
        }
        UIGraphicsBeginImageContext(self.bounds.size)
        // ...

这样一来用户绘图的状态就在ViewController掌握中了。
ViewController想要控制两个View的话,还需要增加几个属性:

@IBOutlet var topView: UIView!
@IBOutlet var topViewConstraintY: NSLayoutConstraint!
@IBOutlet var toolbarConstraintBottom: NSLayoutConstraint!

然后在viewDidLoad方法里增加对“钩子”的处理:

self.board.drawingStateChangedBlock = {(state: DrawingState) -> () in
    if state != .Moved {
        UIView.beginAnimations(nil, context: nil)
        if state == .Began {
            self.topViewConstraintY.constant = -self.topView.frame.size.height
            self.toolbarConstraintBottom.constant = -self.toolbar.frame.size.height

            self.topView.layoutIfNeeded()
            self.toolbar.layoutIfNeeded()
        } else if state == .Ended {
            UIView.setAnimationDelay(1.0)
            self.topViewConstraintY.constant = 0
            self.toolbarConstraintBottom.constant = 0

            self.topView.layoutIfNeeded()
            self.toolbar.layoutIfNeeded()
        }
        UIView.commitAnimations()
    }
}

只有当状态为开始或结束的时候我们才需要更新UI状态,而且我们在结束的事件里延迟了1秒钟,这样用户可以暂时预览下全图。

依靠Auto Layout布局系统以及我们在钩子里对高度的处理,用户在设置页面绘图时也能完美运行。


保存到图库

最后一个功能:保存到图库!
在toolbar上插入一个title为“保存到图库”的UIBarButtonItem,还是可以先插入一个FlexibleSpaceUIBarButtonItem,然后把action连接到ViewController的saveToAlbumy方法上:

@IBAction func saveToAlbum() {
    UIImageWriteToSavedPhotosAlbum(self.board.takeImage(), self, "image:didFinishSavingWithError:contextInfo:", nil)
}

我为Board添加一个新的公共方法:takeImage:

func takeImage() -> UIImage {
    UIGraphicsBeginImageContext(self.bounds.size)

    self.backgroundColor?.setFill()
    UIRectFill(self.bounds)

    self.image?.drawInRect(self.bounds)

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image
}

然后是一个方法指针的回调:

func image(image: UIImage, didFinishSavingWithError error: NSError?, contextInfo:UnsafePointer<Void>) {
    if let err = error {
        UIAlertView(title: "错误", message: err.localizedDescription, delegate: nil, cancelButtonTitle: "确定").show()
    } else {
        UIAlertView(title: "提示", message: "保存成功", delegate: nil, cancelButtonTitle: "确定").show()
    }
}

这里写图片描述
旅行到终点了~!
这里写图片描述


感谢一路的陪伴!

看了下,有些小长,文本+代码有2w3+,全部代码去除空行和空格有1w4+,直接贴代码会简单很多,但我始终觉得让代码完成功能并不是全部目的,代码背后隐藏的问题定义、设计、构建更有意义,毕竟软件开发完成“后”比完成“前”所花费的时间永远更多(除非是一个只有10行代码或者“一次性”的程序)。
希望与大家多多交流。

最后吐槽下CSDN新的Markdown编辑器,代码样式丑且不能自定义,而且有些代码高亮都无法识别。不过感觉草稿箱比以前更方便,问题主要还是集中在样式上,希望以后能不断改进,会一如既往的支持。


更新——撤消与重做功能

Swift 绘图板功能完善以及终极优化


GitHub地址

DrawingBoard

版权声明:如需转载,请注明出处,谢谢!

如何用Swift制作一个简单的画板APP

怎样用Swift的UIKit制作一个简单的画板APP???                                                  ---翻译自https://www.ray...

Swift 实践之绘画

绘画工程目录这里都使用Storyboard,方便而又快捷. 绘画的相关介绍 /* 1 CGContextMoveToPoint 开始画线 2 CGContextAddL...

IOS Swift3 基本图形绘制

import UIKit class ViewController: UIViewController {     override func viewDidLoad() {         ...
  • appiox8
  • appiox8
  • 2017年05月26日 23:41
  • 981

Swift 绘图板功能完善以及终极优化

转载请注明出处:http://blog.csdn.net/zhangao0086/article/details/45289475。 前文总结接着这篇:Swift 全功能的绘图板开发,虽然在上一篇中我...

[Swift]使用Quartz 2D进行绘图

转载自:http://www.jianshu.com/p/78cf97bfd072 iOS绘图技术主要有UIKit,Quartz 2D,Core Animatio...

iOS 2D绘图详解(Quartz 2D)之Bitmap

原创Blog,转载请注明出处  http://blog.csdn.net/hello_hwc?viewmode=list  我的stackoverflow 前五篇基础博客路径 iOS 2D绘图...

[Swift]iOS开发:使用模拟器绘制图片并保存到电脑本地

func renderImage(){ let W:CGFloat = 120 UIGraphicsBeginImageContextWithOptions(CGSiz...

ios绘图demo,做一个涂鸦板(下)

ios绘图demo,做一个涂鸦板(下) 之前一篇ios绘图demo,做一个涂鸦板(上) 完成了一个基本功能的绘图板,这一篇,最要是增加一个画贝塞尔曲线的功能。 ios绘图基础 ios...

Xcode8用Swift将图片写入到相册UIImageWriteToSavedPhotosAlbum方法

Xcode8中用UIImageWriteToSavedPhotosAlbum方法将图片写入相册: 当使用这个方法写入图片的时候,发现以前使用的方法调用会报错,这里就写出 我改正后所使用的方法...

第一章:创建你的第一个App(一)

Hello World!使用Swift创建你的第一个App 到现在为止,你应该已经安装好了Xcode6并且对Swift语言有了一定的了解。如果还没有,你需要回顾前面的章节,检查一下...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Swift 全功能的绘图板开发
举报原因:
原因补充:

(最多只允许输入30个字)