美文网首页阅读理解码农的世界程序员
从实现画画板的功能说设计模式

从实现画画板的功能说设计模式

作者: 蓝色小石头 | 来源:发表于2017-06-17 15:37 被阅读184次

    GitHub demo

    怎么才能记录用户在屏幕上操作的所有痕迹呢?

    他山之石

    先推荐几本设计模式的好书
    我看过许多遍的三本有关设计模式的书,《设计模式》定义并介绍23种设计模式,是设计模式的奠基者,书中以C++作为编程语言。《大化设计模式》深入浅出,幽默风趣,以C#为编程语言,笔者极力推荐。《OC编程之道》是结合iOS讲解设计模式的,以OC为编程语言。

    设计模式三部曲 作者 出版社
    《设计模式:可复用面向对象软件的基础》 GoF 1994 机械工业出版社
    **《大话设计模式》 ** 程杰 清华大学出版社
    《Objective-C编程之道:iOS设计模式解析》 [美]Carlo Chung 人民邮电出版社

    3本书各有侧重点,都值得反复看。建议先粗看《设计模式》了解各模式定义,然后精看《大话》深入了解各设计模式的运用场景及方法,再看《OC编程之道》结合iOS对设计模式的具体运用,对设计模式进一步理解。

    画画板功能

    • 用手指涂鸦画板
    • 清空画板,删除涂鸦
    • 允许撤销恢复涂鸦
    • 记录并回放涂鸦过程

    此次命令模式解决的就是核心的撤销恢复和涂鸦记录回放功能。
    GitHub demo

    文件结构

    文件结构图.png

    第一部分是操作命令的数据模型,第二部分是管理类,第三部分是视图类

    类(文件)名 作用
    命令格式.html 涂鸦操作命令格式说明文档
    CommandInfo(INIT\ADD\RMV\POP\CLEAR\END) 操作命令数据模型
    CommandManager 操作命令的管理类
    ReplayManager 命令队列的回放管理类
    DrawPath 涂鸦笔画的数据模型
    DrawView 涂鸦画板视图类
    ZoomView\DrawingboardScoll 画板缩放
    DrawDebugVC 画板功能展示页

    设计模式的运用

    • 组合模式

    画画板涂鸦以手指按下至抬起所滑动轨迹为一个笔划,DrawPath用组合模式记录了一个笔划的轨迹,同时也承担着记录一个点的功能。DrawPath除了颜色、线宽等基本信息外,不仅包含一个笔划的贝塞尔路径,还包括笔划中每个记录点的位置信息和标识符。(不是本文重点以后另做文章讲解)

    组合模式:将对象组合成树形结构以表示“部分-整体”的层次结构。组合使得用户对单个对象。(《设计模式》GoF,1994)

    • 命令模式

    应用场景:

    • 程序支持撤销与恢复。
    • 用对象参数化一个动作来执行操作,并用不同命令对象来代替回调函数
    • 想要在不同时刻对请求进行指定、排列和执行。
    • 想让系统支持事务,事务封装了对数据的一系列修改。事务可以建模为命令对象。

    命令模式(Command):将请求封装为一个对象,从而可用不同的请求对客户端进行参数化,对请求排队或记录请求日志,以及支持可撤销的操作。(《设计模式》GoF,1994)

    1. 操作命令格式化
      对操作命令格式化,每一个操作命令被具体化成一个命令对象,命令对象装载着操作命令的标识符、名称、据开始的相对时间、涂鸦信息等。

    2. 记录操作命令的队列
      开始记录后,用户在画板上的每一个操作(开始、添加笔划、撤销、恢复、删除、结束)都会被命令管理类CommandManager按时间顺序计入到命令队列,还提供了将命令队列转换成json串的功能,以便于上传服务器保存。

    ** 3. 对操作命令队列进行回放(命令模式精髓) **
    当需要回放涂鸦记录时,把以上保存的命令队列找出来,开启循环对视图重绘,循环结束的条件就是命令队列最后一条结束命令执行的相对时间已到。

    先创建2个数组,redoStackundoStack。在循环重绘时按顺序逐条取出已经到相对时间点的命令。

    其中redoStack只用来装载要添加笔划的命令,用这些笔划命令解析出笔划信息进行重绘;undoStack只用来装载被撤销的添加笔划命令。

    添加笔划命令即往redoStack添加一条笔划信息,撤销命令即把相应笔划信息从redoStack取出放入undoStack,恢复则反之,删除即清空redoStackundoStack

    若是添加上录音功能,俨然就能达到整个录制视频的效果,同学们可以自己尝试一下。

    相关文章

      网友评论

      • 蓝色小石头:设计模式说白了就是程序员们总结的解决常见问题的套路,是一种程序设计思想的经验总结,不分什么大项目能用小项目不能用之说,只要能用就能用。有时候你绞尽脑汁解决了一个问题,殊不知你用的可能其实就是一种经典的设计模式,自用而不自知那就尴尬了,多学学设计模式的套路早日成为编程老司机

      本文标题:从实现画画板的功能说设计模式

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