做了一个无限画布涂鸦软件的 demo,挺有意思 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
yingzir
V2EX    分享创造

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

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

    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     Solana     4285 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 05:34 PVG 13:34 LAX 21:34 JFK 00:34
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86