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

做了一个无限画布涂鸦软件的 demo,挺有意思

  •  
  •   yingzir · 2021-04-23 21:39:30 +08:00 · 3693 次点击
    这是一个创建于 1321 天前的主题,其中的信息可能已经有所发展或是发生改变。
    只做了基本画,擦除,滴管,简单的颜色管理功能,这种软件不知道有没有人需要?

    36 条回复    2021-05-10 12:31:05 +08:00
    qile1
        1
    qile1  
       2021-04-23 23:25:36 +08:00 via Android
    web 版本得吗?视频为啥是黑色的
    yingzir
        2
    yingzir  
    OP
       2021-04-24 10:50:26 +08:00
    @qile1 是的,demo 用 canvas2d 实现的,web 版本有些局限,画面内容过多性能还是有问题,后面如果做产品的话,可能会用 bgfx+SDL 来实现
    turtlekey
        3
    turtlekey  
       2021-04-24 13:06:06 +08:00 via Android
    web 版开源吗,想自己部署
    qile1
        4
    qile1  
       2021-04-24 13:40:39 +08:00 via Android
    看到效果了,分享有没有连接,自己玩玩
    yingzir
        5
    yingzir  
    OP
       2021-04-24 14:51:06 +08:00
    @turtlekey
    @qile1
    目前这个阶段只是可行性研究了一下,效果还挺有意思,但是是用起来,怕是要砸显示器,我再完善一下,后面再放出来。
    yuuko
        6
    yuuko  
       2021-04-24 22:46:29 +08:00 via Android
    关注下,ios 有个差不多的软件,就叫无限草稿
    yingzir
        7
    yingzir  
    OP
       2021-04-25 09:01:50 +08:00
    @yuuko 谢谢推荐,刚下下来试了一下,它只能做到十倍缩放,笔记用还不错,我这个主要是娱乐,创作无限大的画挺不错,如果能协作做无限大的画,肯定很有意思,比喻做一个手绘的城市,做一个无限细节的生物。
    zhw2590582
        8
    zhw2590582  
       2021-04-25 14:02:27 +08:00
    好想法
    yuuko
        9
    yuuko  
       2021-04-25 21:15:16 +08:00 via Android
    @yingzir 出来了记得 @下
    yingzir
        10
    yingzir  
    OP
       2021-04-25 22:56:48 +08:00
    @yuuko 好,谢谢关注
    yingzir
        11
    yingzir  
    OP
       2021-04-25 22:58:12 +08:00
    @zhw2590582 谢谢
    ddzzhen
        12
    ddzzhen  
       2021-04-26 08:50:07 +08:00 via Android
    关注,看着很不错,创造的基础
    xiyuesaves
        13
    xiyuesaves  
       2021-04-26 11:53:49 +08:00
    挺不错的创意诶,关注下
    cyrtab
        14
    cyrtab  
       2021-04-26 16:15:46 +08:00
    关注一下
    xiayue
        15
    xiayue  
       2021-04-28 12:13:27 +08:00
    挺好的 开源了 @下
    xiyuesaves
        16
    xiyuesaves  
       2021-04-28 12:32:56 +08:00
    趁这两天公司没啥事摸了一个类似的玩玩哈哈

    superliwei
        17
    superliwei  
       2021-04-28 14:10:21 +08:00
    之前尝试过做无限缩放,但对一般用户这个功能意义不大,而且很容易导致找不到东西,所以现在的白板软件基本上都固定了缩放的上下限。
    分享下我做的白板: https://boardos.online
    yingzir
        18
    yingzir  
    OP
       2021-04-28 22:15:30 +08:00
    @xiyuesaves Hi 是什么软件,看起来不错
    yingzir
        19
    yingzir  
    OP
       2021-04-28 22:20:19 +08:00
    @superliwei github 登录 报错{"statusCode":404,"error":"Not Found","message":"Not Found"}
    搞个不注册试用就好了。
    superliwei
        20
    superliwei  
       2021-04-28 23:50:51 +08:00
    @yingzir github 有时会有这个问题,可以试试其它登陆方式。
    itabas016
        21
    itabas016  
       2021-04-29 10:18:12 +08:00 via Android
    @superliwei #17 移动端不支持啊
    superliwei
        22
    superliwei  
       2021-04-29 10:50:16 +08:00
    @itabas016 是的,后续会适配.
    xiyuesaves
        23
    xiyuesaves  
       2021-04-29 11:09:43 +08:00 via Android
    @yingzir 也是拿 canvas 实现的一个 demo,正好想实践一下这方面的知识,就用了楼主的创意,希望不要介意
    yingzir
        24
    yingzir  
    OP
       2021-04-29 13:12:21 +08:00
    @xiyuesaves 很好啊,canvas2d 做就是性能有些更不上,我画多点就卡,好像没有很好的办法
    xiyuesaves
        25
    xiyuesaves  
       2021-04-29 13:46:42 +08:00
    @yingzir 可以看一下我做的, 确实点一多就会出现卡顿, 这个优化我还在做,可以在控制台输入 highPerformanceDrag = true 来切换到高性能拖动,就是预览效果不太好

    https://canvas.furryworld.top
    superliwei
        26
    superliwei  
       2021-04-29 15:50:42 +08:00
    @xiyuesaves 可以通过缓存、裁剪、延迟渲染等方式来优化性能
    xiyuesaves
        27
    xiyuesaves  
       2021-04-29 17:03:06 +08:00
    @superliwei 谢谢建议, 现在正在研究怎么多人联机
    yingzir
        28
    yingzir  
    OP
       2021-04-29 19:39:27 +08:00
    @xiyuesaves 哇你动作真快啊,域名都搞好了,不错,看好你的项目了,笔触有点大,小点就好了,搞个保存。基本就可以用起来了
    xiyuesaves
        29
    xiyuesaves  
       2021-04-29 20:12:36 +08:00
    @yingzir 域名是早就买了的,分个二级,nginx 配置下就好了,笔触大小的话,改下配置文件就行,保存功能大概得花点时间,现在主要是在写多人联机部分
    xiyuesaves
        30
    xiyuesaves  
       2021-05-06 17:24:08 +08:00
    @yingzir 基本上功能已经完成了,可以看一下 x

    https://canvas.furryworld.top/

    邀请码目前默认: xiyue

    github(代码特别特别特别菜,轻喷): https://github.com/xiyuesaves/infiniteCanvas
    yingzir
        31
    yingzir  
    OP
       2021-05-07 10:44:21 +08:00
    @xiyuesaves Good! 刚试了一下,挺不错了,就是画完 zoom 的时候卡顿,我怀疑浏览器做这个可能比较难优化。
    xiyuesaves
        32
    xiyuesaves  
       2021-05-07 12:31:54 +08:00
    @yingzir 卡顿的主要原因是每个浏览器针对 mousemove 这个监听返回的频率不同导致的,比如 chrome,正常情况下这个绘制量是不可能导致卡顿的,但是打开控制台之后 mousemove 触发频率会提高很多,导致每一笔要处理的数据量很大,主要体现就是线条会变得歪歪扭扭的,正常情况下应该是很顺滑的曲线,这个暂时还没想要要怎么处理
    yingzir
        33
    yingzir  
    OP
       2021-05-07 14:28:30 +08:00
    @xiyuesaves 不是画的时候卡,是缩放,和移动时候,画的时候觉得不卡。
    xiyuesaves
        34
    xiyuesaves  
       2021-05-07 14:30:53 +08:00
    @yingzir 画确实不会卡啊,因为根本不会重绘画面,只会向上叠加,只有在缩放,拖动时会重绘所有路径
    M3oM3oBug
        35
    M3oM3oBug  
       2021-05-10 09:30:03 +08:00
    @xiyuesaves 不同浏览器对 mousemove 的监听,在打开控制台触发频率会高的问题,我之前做过尝试,第一是因为鼠标刷新率的问题,比如 125Hz/500Hz/1000Hz,触发高是浏览器完全接受了鼠标的反馈,第二是因为浏览器调试问题,至少 Chrome 在调试的时候会主动限制在低频,在开关控制台后限制消失。。

    解决办法是主动给监听函数设置一个依靠时间或 setTimeout 实现的节流,或者使用 requestAnimationFrame 实现每帧节流,可以试下
    xiyuesaves
        36
    xiyuesaves  
       2021-05-10 12:31:05 +08:00
    @M3oM3oBug requestAnimationFrame 也会根据用户显示设备帧数改变,最好还是用 setTimeout 来节流比较稳定吧?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1024 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 21:03 · PVG 05:03 · LAX 13:03 · JFK 16:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.