V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Jarvi
V2EX  ›  分享创造

一个简洁的小画板

  •  
  •   Jarvi ·
    lll1024 · 2017-05-05 11:50:41 +08:00 · 2697 次点击
    这是一个创建于 2761 天前的主题,其中的信息可能已经有所发展或是发生改变。

    效果图

    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

    10 条回复    2017-05-07 10:35:44 +08:00
    chengfu
        1
    chengfu  
       2017-05-05 11:55:39 +08:00
    支持,iphone 版?
    Jarvi
        2
    Jarvi  
    OP
       2017-05-05 11:58:25 +08:00
    @chengfu 是的,这本身就是 OC 写的嘛
    chengfu
        3
    chengfu  
       2017-05-05 12:05:01 +08:00
    得,目测我被降权了~~~
    twm
        4
    twm  
       2017-05-05 12:41:23 +08:00
    自带的 Notes 很好用
    KKKKKK
        5
    KKKKKK  
       2017-05-05 13:11:29 +08:00
    iPhone 上做这种精准的选中?

    触摸屏跟鼠标比?
    Jarvi
        6
    Jarvi  
    OP
       2017-05-05 14:06:46 +08:00
    @KKKKKK 留了 12 个像素的响应区域
    thankfish
        7
    thankfish  
       2017-05-05 14:50:39 +08:00
    666666666
    话说为啥用 Safari 打开这个页面会崩溃
    mo93
        8
    mo93  
       2017-05-05 17:39:59 +08:00
    请问一下用什么做 GIF 的
    Jarvi
        9
    Jarvi  
    OP
       2017-05-05 17:47:38 +08:00
    @mo93 Gifox
    gen900
        10
    gen900  
       2017-05-07 10:35:44 +08:00 via iPhone
    @thankfish iPhone 也崩了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2843 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:05 · PVG 23:05 · LAX 07:05 · JFK 10:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.