一个简洁的小画板

Jarvi 发布于 2017年05月05日
tinyfool 等1人欣赏。

效果图

2017-05-05 09.57.45.gif

项目地址:https://github.com/lll1024/JVDrawingBoard

说明

这是一个简洁的小画板 可以画双箭头、单箭头、涂鸦等 还可以编辑和撤销。总共包含两个类:

  • JVDrawingLayer: 继承自CAShapeLayer,根据传入的枚举值type基于贝塞尔曲线而绘制不同的形状。
  • JVDrawingView: 负责显示以及手势逻辑

下面是对JVDrawingLayer里边方法的说明:

+ (JVDrawingLayer *)createLayerWithStartPoint:(CGPoint)startPoint type:(JVDrawingType)type;

当手在屏幕上开始移动的时候便会调用这个方法,会根据起始点和传入的枚举值type创建不同的形状的path,目前只有五种形状,分别是单箭头、双箭头、双杠、直线和涂鸦。

- (NSInteger)caculateLocationWithPoint:(CGPoint)point;

当点击屏幕时用这个方法来判断点击位置是否在绘制线条上,如果在则返回具体的位置:JVDrawingTouch枚举值头部、中部和尾部(涂鸦除外)。

- (void)movePathWithStartPoint:(CGPoint)startPoint;
- (void)movePathWithEndPoint:(CGPoint)EndPoint;
- (void)movePathWithPreviousPoint:(CGPoint)previousPoint currentPoint:(CGPoint)currentPoint;

- (void)movePathWithStartPoint:(CGPoint)startPoint isSelected:(BOOL)isSelected;
- (void)movePathWithEndPoint:(CGPoint)EndPoint isSelected:(BOOL)isSelected;
- (void)movePathWithPreviousPoint:(CGPoint)previousPoint
                 currentPoint:(CGPoint)currentPoint
                   isSelected:(BOOL)isSelected;

对于非涂鸦线条来说,编辑可以是平移也可以拖拽头部和尾部,以上6个方法分别对应选中和非选中状态下的三种编辑方法。

- (void)moveGrafiitiPathPreviousPoint:(CGPoint)previousPoint currentPoint:(CGPoint)currentPoint;

这是对涂鸦的平移方法,涂鸦只能平移。

- (void)addToTrack;
- (BOOL)revokeUntilHidden;

这是添加轨迹和撤销的方法,当没有操作可供撤销时撤销操作就成了删除方法了。

上面只是简单介绍了这些方法是干什么的,但知道怎么用是不够的,你的需求可能跟我绘制的形状有出入,这样就只能对具体绘制的方法做一些修改或者添加了。我接下来也会对这些shape做一些添加和修改,比如在双箭头和双杠中间添加文字,旋转的时候也能跟着转。

以上如有帮助欢迎star

共7条回复
tinyfool 回复于 2017年05月07日

看上去不错

pinxue 回复于 2017年05月08日

网上有一个系列文章是讲如何做拟合以实现平滑的笔迹的,可以改进一下。

tinyfool 回复于 2017年05月08日

2楼 @pinxue 直接给线条加反走样属性就可以了吧?

我记得当年我是这么做的

pinxue 回复于 2017年05月08日

3楼 @tinyfool 那个效果有限的,翻出来了:https://code.tutsplus.com/tutorials/smooth-freehand-drawing-on-ios--mobile-13164 其实就是把 line to 换 curve to 再把 control point 做个简单修正,这样拐点就会比较顺滑。

tinyfool 回复于 2017年05月08日

4楼 @pinxue 这类想过,好像也做过,不够信,只有达雅

Jarvi 回复于 2017年05月08日

1楼 @tinyfool 谢谢

2楼 @pinxue 谢谢 使用curveTo需要四个点一画 刚试了一下画起来会有些延迟 如果画的稍长平移也会延迟

pinxue 回复于 2017年05月08日

6楼 @Jarvi 平移和转动都可以用操作 layer 的方式来避免重画。起笔延迟的问题确实会有,有些应用在画完一笔之后再做平滑,有些会自己做预测,但画的过程中有延迟就是实现的问题了。那个文章重点是演示拟合方法,在 -drawRect 搞其实也是不好的。

登录 或者 注册