狂肝了一个多月,终于重构成功,欢迎体验 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
LHRUN
V2EX    分享创造

狂肝了一个多月,终于重构成功,欢迎体验

  •  3
     
  •   LHRUN
    LHRUN 2024-01-08 09:23:05 +08:00 19971 次点击
    这是一个创建于 641 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近工作稍微轻松了一些,有了点空闲时间,所以从 11 月底开始,重拾之前做的趣味画板项目,开始进行重构,上周终于告一段落。基本上,所有假期与工作日的晚上全部时间都在搞,总算是完成了

    在重构开始阶段时,我也收集了一些建议,并基本在这个重构版本都完成了。此版本增加了很多新的画笔效果和新功能,然后也做了多端兼容,PC 端鼠标操作和 Mobile 端手指操作以及样式都做了处理。在这次重构期间,我放弃了原生写 canvas 的各种逻辑,改用了 Fabric ,因为我在写一些效果时性能是真的有点堪忧。 之前还好,特别是这次加了很多新功能后效果有点差,所以就放下了执念,选择了这个比较出名的画布库。

    话不多说,欢迎大家使用体验,如果有任何建议和 Bug ,包括交互上,使用感受等等,都可以提出。当然,如果能给个 Star 就更棒了,哈哈

    功能我就不一一陈述了,期待你的探索

    Link: https://songlh.top/paint-board/

    Github: https://github.com/LHRUN/paint-board

    115 条回复    2024-01-10 20:11:59 +08:00
    1  2  
    wuzhanggui
        1
    wuzhanggui  
       2024-01-08 09:31:10 +08:00
    收藏了,支持
    xieren58
        2
    xieren58  
       2024-01-08 09:31:18 +08:00
    牛, 顶...
    meetqyx
        3
    meetqyx  
       2024-01-08 09:33:23 +08:00
    不知道是不是 BUG ,文字看起来有点糊,画的时候,点的四周有阴影,给人感觉也有点糊。
    SWALLOWW
        4
    SWALLOWW  
       2024-01-08 09:34:36 +08:00
    能加上笔锋就好了
    shinession
        5
    shinession nbsp;
       2024-01-08 09:48:38 +08:00
    不错, 速度很快, 收藏待用
    dhb233
        6
    dhb233  
       2024-01-08 10:01:35 +08:00
    多色那个,建议增加个和画线方向对齐的方式,能画出来类似于彩虹的那种效果。那如果说为什么不用彩虹,因为彩虹变色太慢了
    LHRUN
        7
    LHRUN  
    OP
       2024-01-08 10:06:55 +08:00
    @wcao 画板选项下有个 cache 开关,关后会清晰的,这个主要是做了个取舍,在由很多绘制的情况下如果关闭后会由性能问题,操作起来有点掉帧。多点连接那个点的阴影是自带的,不过后面可以考虑配置化
    LHRUN
        8
    LHRUN  
    OP
       2024-01-08 10:08:17 +08:00
    @SWALLOWW 这个已经有思路了,已经做了一点 demo , 主要因为这次版本差不多已经到我的精力极限了,所以休息一下,下个大的功能版本会做
    LHRUN
        9
    LHRUN  
    OP
       2024-01-08 10:09:18 +08:00
    @dhb233 有点不太理解你的意思
    LHRUN
        10
    LHRUN  
    OP
       2024-01-08 10:09:59 +08:00
    wyattyhh
        11
    wyattyhh  
       2024-01-08 10:40:48 +08:00
    , mac 触控板用起来有个体验问题, 捏合的时候 mac 是缩小, 应用里是放大
    Aitisikuoliv1d
        12
    Aitisikuoliv1d  
       2024-01-08 10:42:45 +08:00
    厉害
    cyberCat
        13
    cyberCat  
       2024-01-08 10:55:22 +08:00
    牛逼
    Nosub
        14
    Nosub  
       2024-01-08 11:08:38 +08:00
    厉害了。
    yzw716305797
        15
    yzw716305797  
       2024-01-08 11:23:46 +08:00
    牛逼
    b1u2g3
        16
    b1u2g3  
       2024-01-08 11:38:01 +08:00
    好玩~
    LHRUN
        17
    LHRUN  
    OP
       2024-01-08 11:39:19 +08:00
    @wyattyhh 这个我倒是没试,一直用鼠标了,晚上我看一下
    LHRUN
        18
    LHRUN  
    OP
       2024-01-08 11:39:45 +08:00
    sunziren
        19
    sunziren  
       2024-01-08 12:37:41 +08:00
    牛逼
    edgm
        20
    edgm  
       2024-01-08 13:24:15 +08:00
    很牛
    ImmerTry
        21
    ImmerTry  
       2024-01-08 13:40:18 +08:00
    学习了
    CDuXZMAPgHp1q9ew
        22
    CDuXZMAPgHp1q9ew  
       2024-01-08 13:52:36 +08:00
    这个宣传图是如何生成的?
    butubird439
        23
    butubird439  
       2024-01-08 13:52:47 +08:00
    哇,太牛了
    ma836323493
        24
    ma836323493  
       2024-01-08 14:01:28 +08:00
    @LHRUN #7 #7 我看着左侧的字咋有点模糊的感觉
    crazyTanuki
        25
    crazyTanuki  
       2024-01-08 14:07:00 +08:00
    做的挺好的,就是没想到使用场景
    sundev
        26
    sundev  
       2024-01-08 14:17:16 +08:00
    star 一波,说不定以后用上
    langpower
        27
    langpower  
       2024-01-08 14:20:04 +08:00 via Android
    @LHRUN 就是彩虹要画很长一条线才变色,希望能加入彩虹变色画多长的参数
    rubbishmod
        28
    rubbishmod  
       2024-01-08 14:22:15 +08:00
    体验了一下,放大缩小(macos)似乎会引起整个页面进行了放大,导致 tools 被隐藏
    SantinoSong
        29
    SantinoSong  
       2024-01-08 14:22:44 +08:00
    彩虹的变色逻辑是什么? RGB 按长度变化?可控吗
    zhilvyun1
        30
    zhilvyun1  
       2024-01-08 14:23:39 +08:00
    用在家装里可以不 可以加些标尺类的功能吗, 可以接续操作吗
    cyberCat
        31
    cyberCat  
       2024-01-08 14:26:45 +08:00
    可以加 share link 分享链接功能。
    这样用户可以将绘制好的图像通过外链分享出来,而网站也可以通过 share link 引流。
    ted0220
        32
    ted0220  
       2024-01-08 14:31:25 +08:00
    牛牛牛
    dauehbv
        33
    dauehbv  
       2024-01-08 14:42:34 +08:00
    这个不错啊
    wOuv7i4e7XxsSOR1
        34
    wOuv7i4e7XxsSOR1  
       2024-01-08 14:47:52 +08:00
    很不错
    xing7673
        35
    xing7673  
       2024-01-08 15:03:35 +08:00
    在 m1max 上体验很好,值得学习
    LHRUN
        36
    LHRUN  
    OP
       2024-01-08 15:07:50 +08:00
    @wujichao 这个我用的方法太笨了,先是做出三张图,然后在 https://mockuphone.com/ 这个网站上生成单独的效果,最后再写一个 canvas 的 demo 做出位置保存下来的
    LHRUN
        37
    LHRUN  
    OP
       2024-01-08 15:10:12 +08:00
    @ma836323493 你是说工具面板吗,这个我在 windows 和 mac 上没有发现,后面我留意一下吧
    LHRUN
        38
    LHRUN  
    OP
       2024-01-08 15:12:29 +08:00
    @crazyTanuki 这个未来我是想做一些带有互动等内容的游戏玩法吧,准备过完年定一个大方向
    LHRUN
        39
    LHRUN  
    OP
       2024-01-08 15:13:15 +08:00
    @langpower 懂你意思了,记录了,多谢建议
    lyz1990
        40
    lyz1990  
       2024-01-08 15:14:25 +08:00
    厉害啊!
    LHRUN
        41
    LHRUN  
    OP
       2024-01-08 15:15:20 +08:00
    @rubbishmod 你是按住了 ctrl 键吗,我在 m1pro 上没有复现出来,后面我留意一下吧,看会不会复现
    LHRUN
        42
    LHRUN  
    OP
       2024-01-08 15:19:05 +08:00
    @SantinoSong 通过计算 hsl 的 hue ,随着鼠标移动,一直增加,然后再归 0 ,反复循环
    LHRUN
        43
    LHRUN  
    OP
       2024-01-08 15:19:54 +08:00
    @zhilvyun1 sorry 这个还没有考虑过,与我想做的方向有点不同吧
    LHRUN
        44
    LHRUN  
    OP
       2024-01-08 15:20:28 +08:00
    @cyberCat 好想法,记录了,多谢建议
    LHRUN
        45
    LHRUN  
    OP
       2024-01-08 15:21:16 +08:00
    @xing7673 可以的,跟我的工作机差不多,完美
    LHRUN
        46
    LHRUN  
    OP
       2024-01-08 15:22:09 +08:00
    godymho
        47
    godymho  
       2024-01-08 15:29:40 +08:00
    体验了一下,挺丝滑的。我画了一个牛至
    ma836323493
        48
    ma836323493  
       2024-01-08 15:30:15 +08:00
    @LHRUN #37 #37


    rubbishmod
        49
    rubbishmod  
       2024-01-08 15:37:18 +08:00
    @LHRUN mac 触摸板双指缩放就会触发
    karnaugh
        50
    karnaugh  
       2024-01-08 16:19:41 +08:00
    在当下这个节点,你确定不拖个 AI 搞一波么~
    thinkdiff
        51
    thinkdiff  
       2024-01-08 16:27:26 +08:00
    已 star
    abc1310054026
        52
    abc1310054026  
       2024-01-08 16:28:50 +08:00
    打开控制台再选择彩虹画一会就会很卡
    Febers
        53
    Febers  
       2024-01-08 16:42:41 +08:00
    体验很棒,有考虑增加一些常用的图形如矩形、圆形吗,用来画产品图感觉会很棒
    crazyTanuki
        54
    crazyTanuki  
       2024-01-08 16:56:09 +08:00
    @LHRUN 画图猜猜游戏
    LHRUN
        55
    LHRUN  
    OP
       2024-01-08 17:01:06 +08:00
    @ma836323493 好的 感谢反馈
    LHRUN
        56
    LHRUN  
    OP
       2024-01-08 17:02:28 +08:00
    @rubbishmod 感谢反馈 我这次是完全忽略触摸板了 ,我下班后调试一下
    LHRUN
        57
    LHRUN  
    OP
       2024-01-08 17:03:56 +08:00
    @karnaugh 当然想了,下一步就是要定个发展方向,只是这方面的知识有点薄弱,只是会使用,还没了解过怎么接入
    LHRUN
        58
    LHRUN  
    OP
       
    @abc1310054026 多谢反馈,记录了
    CC2025
        59
    CC2025  
       2024-01-08 17:05:17 +08:00
    大佬牛杯
    LHRUN
        60
    LHRUN  
    OP
       2024-01-08 17:06:48 +08:00   1
    @Febers 可以的,记录了。加这些常用图形不算太难,只是随着功能的增加,面板东西太多不太好布局了,还要兼容移动端
    zhichaoli
        61
    zhichaoli  
       2024-01-08 17:07:33 +08:00
    os: windows
    Google Chrome 120.0.6099.199 (正式版本) ( 64 位)
    中文字体看起来很模糊,有种马赛克的感觉 (100%显示)
    LHRUN
        62
    LHRUN  
    OP
       2024-01-08 17:09:42 +08:00
    @crazyTanuki 这个有想过,还有想过协作绘画设计,我目前想法很多 就是知识储量不太够,后面就是定个方向,然后攻克相关技术了 。多谢建议
    LHRUN
        63
    LHRUN  
    OP
       2024-01-08 17:10:34 +08:00
    @zhichaoli 好的,记录了,我有空找个 windows 看一下样式
    LHRUN
        64
    LHRUN  
    OP
       2024-01-08 17:11:09 +08:00
    @godymho
    @thinkdiff
    @vuciao 多谢支持
    lostsquirrelX
        65
    lostsquirrelX  
       2024-01-08 17:21:10 +08:00
    star
    summerLast
        66
    summerLast  
       2024-01-08 17:24:36 +08:00
    draw color 卡顿严重
    Tvinsh
        67
    Tvinsh  
       2024-01-08 17:30:41 +08:00
    添加文字的时候,不能用鼠标框选文字,会同时画出线条
    整体挺不错的,star 了
    jellybool
        68
    jellybool  
       2024-01-08 19:43:59 +08:00 via Android
    老哥,你这实力。直接做成商业项目多好,做海外肯定能赚钱!
    zhuangzhuang1988
        69
    zhuangzhuang1988  
       2024-01-08 19:50:01 +08:00
    牛逼。
    guji
        70
    guji  
       2024-01-08 19:55:34 +08:00
    我要能有你一半技术就好了。可我只会挑毛病。。。

    暂时用出来俩问题:
    1. draw width 类似需要微调的控件得显示数值,搞个配置文件的东西存在哪个地方,第二次打开就不用调了。
    2. 选中像素风格,狂点鼠标会卡延迟。
    binjoo
        71
    binjoo  
       2024-01-08 20:00:46 +08:00
    太牛了。。
    kakki
        72
    kakki  
       2024-01-08 20:08:56 +08:00
    强,收藏了
    bocchi1amos
        73
    bocchi1amos  
       2024-01-08 20:57:46 +08:00
    牛的,star 献上
    itning
        74
    itning  
       2024-01-08 21:02:17 +08:00
    666
    caicaiwoshishui
        75
    caicaiwoshishui  
       2024-01-08 21:31:13 +08:00
    非常 nice 感谢
    LHRUN
        76
    LHRUN  
    OP
       2024-01-08 21:36:18 +08:00
    @summerLast 这个我刚才试了一下 没有复现 要不麻烦说下设备和简单的复现步骤
    LHRUN
        77
    LHRUN  
    OP
       2024-01-08 21:37:56 +08:00
    @Tvinsh 如果是在绘画模式和橡皮擦模式下的确不行,需要切换到选择模式。 感谢 star
    laragh
        78
    laragh  
       2024-01-08 21:38:14 +08:00
    v 友都这么牛么
    LHRUN
        79
    LHRUN  
    OP
       2024-01-08 21:41:38 +08:00
    @jellybool 商业项目暂时还没有想法,一是项目还没有那么成熟,二是决定以后的发展方向后再考虑吧
    dianso
        80
    dianso  
       2024-01-08 21:42:15 +08:00
    求 docker
    LHRUN
        81
    LHRUN  
    OP
       2024-01-08 21:45:09 +08:00
    @guji 1. 记录了,显示具体数据之后会考虑,现在主打一个随意 。2. 没有复现,麻烦提供下复现步骤和设备信息。 难顶,好多问题都复现不出来
    LHRUN
        82
    LHRUN  
    OP
       2024-01-08 21:46:36 +08:00
    LHRUN
        83
    LHRUN  
    OP
       2024-01-08 21:47:08 +08:00
    @dianso 这个之前也有人提了。我后面会加上
    dvz
        84
    dvz  
       2024-01-08 21:58:47 +08:00
    太牛了 点赞 支持 收藏
    zhw2590582
        85
    zhw2590582  
       2024-01-08 22:30:11 +08:00
    真实牛叉啊
    guji
        86
    guji  
       2024-01-08 22:52:27 +08:00
    @LHRUN 复现步骤就是选中像素模式,一边不断单击鼠标左键,一边移动鼠标全屏晃动,不时按住左键画两笔;也可以选中该模式直接按住鼠标左键一笔画十个大圈再由按住改为单击鼠标左键,就出现笔迹延迟了,多边形和素材模式也会有这个现象,基础和彩虹没有。(其实我是写名字写出这个现象的,字写得快点就出现了)
    wakiki
        87
    wakiki  
       2024-01-08 23:13:04 +08:00
    厉害!是否有计划支持导入 PS 、Krita 、MyPaint 的笔刷文件呢
    jellybool
        88
    jellybool  
       2024-01-09 00:36:14 +08:00 via Android
    @LHRUN 你这种做 build in public ,然后好好改善和运用两三年,我感觉 $10 万 MMR 应该不是问题。
    jellybool
        89
    jellybool  
       2024-01-09 00:36:59 +08:00 via Android
    @jellybool 运用 -> 运营
    Bo0
        90
    Bo0  
       2024-01-09 08:38:26 +08:00
    用数位板操作起来很流畅,轻度使用可以不开 PS 了,棒
    eWS2mq278TTzoj0O
        91
    eWS2mq278TTzoj0O  
       2024-01-09 08:54:23 +08:00
    建议: 橡皮擦增加圆形范围提示, 增加橡皮擦的 width 之后,我不知道他到底有多大
    LHRUN
        92
    LHRUN  
    OP
       2024-01-09 08:55:39 +08:00
    @zhw2590582 哇 大佬。我很久之前就观摩过你的项目
    LHRUN
        93
    LHRUN  
    OP
       2024-01-09 08:58:13 +08:00
    @guji 好的 多谢。记录了
    LHRUN
        94
    LHRUN  
    OP
       2024-01-09 08:59:19 +08:00
    @wakiki 这个我还没有研究过,如果有时间的话会了解一下。多谢支持
    LHRUN
        95
    LHRUN  
    OP
       2024-01-09 09:01:33 +08:00
    @jellybool 这块可能就是我不太擅长的区域了,可以探讨一下
    LHRUN
        96
    LHRUN  
    OP
       2024-01-09 09:02:55 +08:00
    @HongXinss 记录了,多谢建议,是应该都有数据化提示,现在太随意了
    LHRUN
        97
    LHRUN  
    OP
       2024-01-09 09:03:51 +08:00
    @dvz
    @Bo0 多谢支持
    wwwz
        98
    wwwz  
       2024-01-09 09:13:21 +08:00
    滚轮向上是缩小,向下是放大,正常使用逻辑应该反过来吧
    jollo
        99
    jollo  
       2024-01-09 09:20:44 +08:00
    要是能像无边界一样,画板无限大就更好了
    Anoyou
        100
    Anoyou  
       2024-01-09 09:25:53 +08:00
    厉害厉害,链接先收藏
    1  2  
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5238 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 34ms UTC 05:51 PVG 13:51 LAX 22:51 JFK 01:51
    Do have faith in what you're doing.
    ubao 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