POP绘图库Asana/Drawsana源代码看看

iOS 绘制就是采集点&＃xff0c;贝塞尔曲线得到形状&＃xff0c;绘图上下文去渲染出来

Asana/Drawsana 图形库&＃xff0c;设计的挺好

他可以画多种图形&＃xff0c;画线、文本、橡皮擦、五角形、矩形、箭头、角度&＃xff0c;

他支持多种操作&＃xff0c;撤销上一步、还原上一步&＃xff0c;平移选择的已渲染图形

他的实现&＃xff0c;大量使用了协议

设计: 主要看数据结构

可以分为三个层次&＃xff0c;行为的处理 &＃xff08; 采集点的传递 &＃xff09; &＃xff0c;图形的绘制&＃xff0c; 呈现的视图&＃xff08; 最开始采集点&＃xff0c; 最后的渲染呈现 &＃xff09;

图形的绘制

Shape 协议&＃xff0c;决定了可看 &＃xff08; 可渲染 &＃xff09;&＃xff0c;可点击

ShapeSelectable 协议&＃xff0c;增加了形状区域和仿射变换。

最基础的形状&＃xff0c;Shape

有一个 id、 类型的区分&＃xff0c;

渲染出来&＃xff0c;可否响应点击事件&＃xff0c;

更改绘图设置 &＃xff08; 画线的颜色、画线的填充色、画线的宽度 &＃xff09;


public protocol Shape: AnyObject, Codable {var id: String { get set }static var type: String { get }func render(in context: CGContext)func hitTest(point: CGPoint) -> Boolfunc apply(userSettings: UserSettings)
}

通用的形状协议 ShapeSelectable

下面 3 个协议&＃xff0c;添加功能

ShapeWithBoundingRect 协议继承自 Shape&＃xff0c; 添加了区域

public protocol ShapeWithBoundingRect: Shape {var boundingRect: CGRect { get }
}


ShapeWithTransform 协议继承自 Shape&＃xff0c; 添加了仿射变换


public protocol ShapeWithTransform: Shape {var transform: ShapeTransform { get set }
}

最终形状通用的协议为 ShapeSelectable,

他继承自上面两个协议


public protocol ShapeSelectable: ShapeWithBoundingRect, ShapeWithTransform {
}


具体的形状&＃xff0c;以角度形状为例 AngleShape

角度这个形状&＃xff0c;需要三个点确定


class AngleShape: ShapeSelectable{public var a: CGPoint &＃61; .zeropublic var b: CGPoint &＃61; .zeropublic var c: CGPoint &＃61; .zero// ... // 实现通用的形状信息&＃xff0c; id 、种类、线宽等
}

这里还有一个协议&＃xff0c; ShapeWithThreePoints

该协议拿到了三个点&＃xff0c;可算出三个点决定的矩形区域

extension AngleShape: ShapeWithThreePoints{}public protocol ShapeWithThreePoints {var a: CGPoint { get set }var b: CGPoint { get set }var c: CGPoint { get set }var strokeWidth: CGFloat { get set }
}


ShapeWithThreePoints 三点形状协议&＃xff0c;统一处理了三个点形状的区域&＃xff1b;

这个库的形状&＃xff0c;大部分是 ShapeWithTwoPoints &＃xff0c; 2 点形状协议&＃xff0c;统一处理了 2 点形状的区域&＃xff0c;

椭圆、星星、矩形、线段&＃xff0c;都是 2 点形状

行为的处理&＃xff0c;这个库是 tool

工具 tool 是形状 shape 的进一步封装

当前使用工具的通用模版

工具的通用模版 DrawingTool 包含如下信息

public protocol DrawingTool: AnyObject {// 正在进行var isProgressive: Bool { get }// 工具名称var name: String { get }// 用户手指点击func handleTap(context: ToolOperationContext, point: CGPoint)// 用户手指刚滑动// 形状的拖拽刚开始 / 图形的绘制刚开始func handleDragStart(context: ToolOperationContext, point: CGPoint)// 用户手指滑动正在进行// 形状的拖拽继续 / 图形的绘制继续func handleDragContinue(context: ToolOperationContext, point: CGPoint, velocity: CGPoint)// 用户手指滑动结束了// 结束形状的拖拽 / 结束图形的绘制func handleDragEnd(context: ToolOperationContext, point: CGPoint)// 用户手指滑动取消了// 取消形状的拖拽 / 取消图形的绘制func handleDragCancel(context: ToolOperationContext, point: CGPoint)// 修改绘图设置&＃xff0c;绘图的颜色func apply(context: ToolOperationContext, userSettings: UserSettings)}

当前使用工具的功能模版

使用工具 tool 的功能模版&＃xff0c;

有两点形状的工具&＃xff0c;有 3 点形状的工具&＃xff0c;有画线形状的工具 ( pen ),

有选择工具 …

这里的例子是 2 点形状的工具&＃xff0c;DrawingToolForShapeWithTwoPoints

他里面有一个属性, 正在画的形状 shapeInProgress,

该形状通过两个点决定

pen class DrawingToolForShapeWithTwoPoints: DrawingTool {public typealias ShapeType &＃61; Shape & ShapeWithTwoPointsopen var name: String { fatalError("Override me") }// shapeInProgress 通过下面的 makeShape() 方法创建public var shapeInProgress: ShapeType?open func makeShape() -> ShapeType {fatalError("Override me")}// ...// 实现了 DrawingTool 协议的方法
}

当前使用的具体工具

因为前面的协议&＃xff0c;定义的比较完善&＃xff0c;

大量通用的代码&＃xff0c;放到了协议和父类里面&＃xff0c;

所以具体绘制的工具&＃xff0c;实现比较简洁

// 画线工具
public class LineTool: DrawingToolForShapeWithTwoPoints {public override var name: String { return "Line" }public override func makeShape() -> ShapeType { return LineShape() }
}// 箭头工具
public class ArrowTool: DrawingToolForShapeWithTwoPoints {public override var name: String { return "Arrow" }public override func makeShape() -> ShapeType {let shape &＃61; LineShape()shape.arrowStyle &＃61; .standardreturn shape}
}// 矩形工具
public class RectTool: DrawingToolForShapeWithTwoPoints {public override var name: String { return "Rectangle" }public override func makeShape() -> ShapeType { return RectShape() }
}// ...

呈现的视图

最开始采集点&＃xff0c;通过自定制手势

重写触摸方法&＃xff0c;采集到点


class ImmediatePanGestureRecognizer: UIGestureRecognizer {// 开始触摸override func touchesBegan(_ touches: Set, with event: UIEvent) {// ...}// 画线中/ 拖拽视图中override func touchesMoved(_ touches: Set, with event: UIEvent) {// ...}// 结束触摸override func touchesEnded(_ touches: Set, with event: UIEvent) {// ...}}

最后的渲染呈现

绘图需要两张 UIImage&＃xff0c;

画一笔&＃xff0c;把之前绘制的 UIImage 渲染出来&＃xff0c;把正在画的那一笔渲染出来&＃xff0c;得到绘制的视图&＃xff0c;也就是第二张 UIImage

这里用了三张 UIImage&＃xff0c; 一张最终版本 persistentBuffer,

把之前绘制的 UIImage 渲染出来 , transientBuffer

得到绘制的视图&＃xff0c;也就是第二张 UIImage , transientBufferWithShapeInProgress

public class DrawsanaView: UIView {private var persistentBuffer: UIImage?private var transientBuffer: UIImage?private var transientBufferWithShapeInProgress: UIImage?

对应的处理代码,

这里是一个画线/平移操作的绘制匿名函数, updateUncommittedShapeBuffers,


let updateUncommittedShapeBuffers: () -> Void &＃61; {self.transientBufferWithShapeInProgress &＃61; DrawsanaUtilities.renderImage(size: self.drawing.size) {// 把之前绘制的 UIImage 渲染出来self.transientBuffer?.draw(at: .zero)// 把正在画的那一笔渲染出来self.tool?.renderShapeInProgress(transientContext: $0)}// 得到绘制的视图 transientBufferWithShapeInProgress// 得到绘制的视图, 呈现self.drawingContentView.layer.contents &＃61; self.transientBufferWithShapeInProgress?.cgImage// 正在进行&＃xff0c;就更新if self.tool?.isProgressive &＃61;&＃61; true {self.transientBuffer &＃61; self.transientBufferWithShapeInProgress}}

实现

• POP, 使用协议&＃xff0c;能够避免大量的重复代码

• 如果面向过程写&＃xff0c;好理解写。逻辑都在一坨。因为同样的代码&＃xff0c;到处拷贝&＃xff0c;不好维护&＃xff0c;容易出错

例子&＃xff0c;角度的绘制

角度形状&＃xff0c;有 3 个点

public class AngleShape: ShapeWithThreePoints, ShapeWithStrokeState, ShapeSelectable{public static let type: String &＃61; "Angle"public var id: String &＃61; UUID().uuidStringpublic var a: CGPoint &＃61; .zeropublic var b: CGPoint &＃61; .zeropublic var c: CGPoint &＃61; .zero}

角度的画线方法


public func render(in context: CGContext) {// 开始绘制transform.begin(context: context)// 绘图效果的设置context.setLineCap(capStyle)context.setLineJoin(joinStyle)context.setLineWidth(strokeWidth)context.setStrokeColor(strokeColor.cgColor)if let dashPhase &＃61; dashPhase, let dashLengths &＃61; dashLengths {context.setLineDash(phase: dashPhase, lengths: dashLengths)} else {context.setLineDash(phase: 0, lengths: [])}// 画角度的两根线context.move(to: a)context.addLine(to: b)context.move(to: b)context.addLine(to: c)context.strokePath()// 画中间的角度弧形&＃xff0c;和角度文字renderInfo(in: context)// 结束绘制transform.end(context: context)}

调用下面的&＃xff0c;绘制中间的角度弧形&＃xff0c;和角度文字


private func renderInfo(in context: CGContext) {// 计算开始角&＃xff0c;和结束角if a &＃61;&＃61; c {return}let center &＃61; bvar startAngle &＃61; atan2(a.y - b.y, a.x - b.x)var endAngle &＃61; atan2(c.y - b.y, c.x - b.x)if 0

调用&＃xff0c;绘制角度大小的文字


private func renderDegreesInfo(in context: CGContext, startAngle: CGFloat, endAngle: CGFloat) {// 得到角度的大小&＃xff0c;富文本let radius: CGFloat &＃61; 44let fontSize: CGFloat &＃61; 14let font &＃61; UIFont.systemFont(ofSize: fontSize)let string &＃61; NSAttributedString(string: "\(degreesBetweenThreePoints(pointA: a, pointB: b, pointC: c))°", attributes: [NSAttributedString.Key.font: font,NSAttributedString.Key.foregroundColor: strokeColor])// 计算出&＃xff0c;摆放角度大小文本的位置let normalEnd &＃61; startAngle

通过三个点&＃xff0c;计算出角度的大小

private func degreesBetweenThreePoints(pointA: CGPoint, pointB: CGPoint, pointC: CGPoint) -> Int {// 邻边let a &＃61; pow((pointB.x - pointA.x), 2) &＃43; pow((pointB.y - pointA.y), 2)// 邻边let b &＃61; pow((pointB.x - pointC.x), 2) &＃43; pow((pointB.y - pointC.y), 2)// 对边let c &＃61; pow((pointC.x - pointA.x), 2) &＃43; pow((pointC.y - pointA.y), 2)if a &＃61;&＃61; 0 || b &＃61;&＃61; 0 {return 0}return Int(acos((a &＃43; b - c) / sqrt(4 * a * b) ) * 180 / CGFloat.pi)}


操作可撤销&＃xff0c;可还原的实现