最近工作稍微轻松了一些,有了点空闲时间,所以从 11 月底开始,重拾之前做的趣味画板项目,开始进行重构,上周终于告一段落。基本上,所有假期与工作日的晚上全部时间都在搞,总算是完成了
在重构开始阶段时,我也收集了一些建议,并基本在这个重构版本都完成了。此版本增加了很多新的画笔效果和新功能,然后也做了多端兼容,PC 端鼠标操作和 Mobile 端手指操作以及样式都做了处理。在这次重构期间,我放弃了原生写 canvas 的各种逻辑,改用了 Fabric ,因为我在写一些效果时性能是真的有点堪忧。 之前还好,特别是这次加了很多新功能后效果有点差,所以就放下了执念,选择了这个比较出名的画布库。
话不多说,欢迎大家使用体验,如果有任何建议和 Bug ,包括交互上,使用感受等等,都可以提出。当然,如果能给个 Star 就更棒了,哈哈
功能我就不一一陈述了,期待你的探索
Link: https://songlh.top/paint-board/
Github: https://github.com/LHRUN/paint-board
![]() | 1 wuzhanggui 2024-01-08 09:31:10 +08:00 收藏了,支持 |
![]() | 2 xieren58 2024-01-08 09:31:18 +08:00 牛, 顶... |
![]() | 3 meetqyx 2024-01-08 09:33:23 +08:00 不知道是不是 BUG ,文字看起来有点糊,画的时候,点的四周有阴影,给人感觉也有点糊。 |
![]() | 4 SWALLOWW 2024-01-08 09:34:36 +08:00 能加上笔锋就好了 |
![]() | 5 shinession nbsp; 2024-01-08 09:48:38 +08:00 不错, 速度很快, 收藏待用 |
![]() | 6 dhb233 2024-01-08 10:01:35 +08:00 多色那个,建议增加个和画线方向对齐的方式,能画出来类似于彩虹的那种效果。那如果说为什么不用彩虹,因为彩虹变色太慢了 |
![]() | 7 LHRUN OP @wcao 画板选项下有个 cache 开关,关后会清晰的,这个主要是做了个取舍,在由很多绘制的情况下如果关闭后会由性能问题,操作起来有点掉帧。多点连接那个点的阴影是自带的,不过后面可以考虑配置化 |
![]() | 8 LHRUN OP @SWALLOWW 这个已经有思路了,已经做了一点 demo , 主要因为这次版本差不多已经到我的精力极限了,所以休息一下,下个大的功能版本会做 |
![]() | 10 LHRUN OP |
![]() | 11 wyattyhh 2024-01-08 10:40:48 +08:00 , mac 触控板用起来有个体验问题, 捏合的时候 mac 是缩小, 应用里是放大 |
![]() | 12 Aitisikuoliv1d 2024-01-08 10:42:45 +08:00 厉害 |
![]() | 13 cyberCat 2024-01-08 10:55:22 +08:00 牛逼 |
![]() | 14 Nosub 2024-01-08 11:08:38 +08:00 厉害了。 |
15 yzw716305797 2024-01-08 11:23:46 +08:00 牛逼 |
![]() | 16 b1u2g3 2024-01-08 11:38:01 +08:00 好玩~ |
![]() | 18 LHRUN OP |
![]() | 19 sunziren 2024-01-08 12:37:41 +08:00 牛逼 |
![]() | 20 edgm 2024-01-08 13:24:15 +08:00 很牛 |
21 ImmerTry 2024-01-08 13:40:18 +08:00 学习了 |
22 CDuXZMAPgHp1q9ew 2024-01-08 13:52:36 +08:00 这个宣传图是如何生成的? |
23 butubird439 2024-01-08 13:52:47 +08:00 哇,太牛了 |
24 ma836323493 2024-01-08 14:01:28 +08:00 @LHRUN #7 #7 我看着左侧的字咋有点模糊的感觉 |
25 crazyTanuki 2024-01-08 14:07:00 +08:00 做的挺好的,就是没想到使用场景 |
26 sundev 2024-01-08 14:17:16 +08:00 star 一波,说不定以后用上 |
28 rubbishmod 2024-01-08 14:22:15 +08:00 体验了一下,放大缩小(macos)似乎会引起整个页面进行了放大,导致 tools 被隐藏 |
29 SantinoSong 2024-01-08 14:22:44 +08:00 彩虹的变色逻辑是什么? RGB 按长度变化?可控吗 |
30 zhilvyun1 2024-01-08 14:23:39 +08:00 用在家装里可以不 可以加些标尺类的功能吗, 可以接续操作吗 |
![]() | 31 cyberCat 2024-01-08 14:26:45 +08:00 可以加 share link 分享链接功能。 这样用户可以将绘制好的图像通过外链分享出来,而网站也可以通过 share link 引流。 |
![]() | 32 ted0220 2024-01-08 14:31:25 +08:00 牛牛牛 |
![]() | 33 dauehbv 2024-01-08 14:42:34 +08:00 这个不错啊 |
34 wOuv7i4e7XxsSOR1 2024-01-08 14:47:52 +08:00 很不错 |
35 xing7673 2024-01-08 15:03:35 +08:00 在 m1max 上体验很好,值得学习 |
![]() | 36 LHRUN OP @wujichao 这个我用的方法太笨了,先是做出三张图,然后在 https://mockuphone.com/ 这个网站上生成单独的效果,最后再写一个 canvas 的 demo 做出位置保存下来的 |
![]() | 37 LHRUN OP @ma836323493 你是说工具面板吗,这个我在 windows 和 mac 上没有发现,后面我留意一下吧 |
![]() | 38 LHRUN OP @crazyTanuki 这个未来我是想做一些带有互动等内容的游戏玩法吧,准备过完年定一个大方向 |
![]() | 40 lyz1990 2024-01-08 15:14:25 +08:00 厉害啊! |
![]() | 41 LHRUN OP @rubbishmod 你是按住了 ctrl 键吗,我在 m1pro 上没有复现出来,后面我留意一下吧,看会不会复现 |
![]() | 42 LHRUN OP @SantinoSong 通过计算 hsl 的 hue ,随着鼠标移动,一直增加,然后再归 0 ,反复循环 |
![]() | 46 LHRUN OP |
47 godymho 2024-01-08 15:29:40 +08:00 体验了一下,挺丝滑的。我画了一个牛至 |
48 ma836323493 2024-01-08 15:30:15 +08:00 |
49 rubbishmod 2024-01-08 15:37:18 +08:00 @LHRUN mac 触摸板双指缩放就会触发 |
50 karnaugh 2024-01-08 16:19:41 +08:00 在当下这个节点,你确定不拖个 AI 搞一波么~ |
![]() | 51 thinkdiff 2024-01-08 16:27:26 +08:00 已 star |
52 abc1310054026 2024-01-08 16:28:50 +08:00 打开控制台再选择彩虹画一会就会很卡 |
![]() | 53 Febers 2024-01-08 16:42:41 +08:00 体验很棒,有考虑增加一些常用的图形如矩形、圆形吗,用来画产品图感觉会很棒 |
54 crazyTanuki 2024-01-08 16:56:09 +08:00 @LHRUN 画图猜猜游戏 |
![]() | 55 LHRUN OP @ma836323493 好的 感谢反馈 |
![]() | 56 LHRUN OP @rubbishmod 感谢反馈 我这次是完全忽略触摸板了 ,我下班后调试一下 |
![]() | 58 LHRUN OP @abc1310054026 多谢反馈,记录了 |
![]() | 59 CC2025 2024-01-08 17:05:17 +08:00 大佬牛杯 |
61 zhichaoli 2024-01-08 17:07:33 +08:00 os: windows Google Chrome 120.0.6099.199 (正式版本) ( 64 位) 中文字体看起来很模糊,有种马赛克的感觉 (100%显示) |
![]() | 62 LHRUN OP @crazyTanuki 这个有想过,还有想过协作绘画设计,我目前想法很多 就是知识储量不太够,后面就是定个方向,然后攻克相关技术了 。多谢建议 |
65 lostsquirrelX 2024-01-08 17:21:10 +08:00 star |
![]() | 66 summerLast 2024-01-08 17:24:36 +08:00 draw color 卡顿严重 |
67 Tvinsh 2024-01-08 17:30:41 +08:00 添加文字的时候,不能用鼠标框选文字,会同时画出线条 整体挺不错的,star 了 |
![]() | 68 jellybool 2024-01-08 19:43:59 +08:00 via Android 老哥,你这实力。直接做成商业项目多好,做海外肯定能赚钱! |
![]() | 69 zhuangzhuang1988 2024-01-08 19:50:01 +08:00 牛逼。 |
70 guji 2024-01-08 19:55:34 +08:00 我要能有你一半技术就好了。可我只会挑毛病。。。 暂时用出来俩问题: 1. draw width 类似需要微调的控件得显示数值,搞个配置文件的东西存在哪个地方,第二次打开就不用调了。 2. 选中像素风格,狂点鼠标会卡延迟。 |
![]() | 71 binjoo 2024-01-08 20:00:46 +08:00 太牛了。。 |
72 kakki 2024-01-08 20:08:56 +08:00 强,收藏了 |
![]() | 73 bocchi1amos 2024-01-08 20:57:46 +08:00 牛的,star 献上 |
![]() | 74 itning 2024-01-08 21:02:17 +08:00 666 |
75 caicaiwoshishui 2024-01-08 21:31:13 +08:00 非常 nice 感谢 |
![]() | 76 LHRUN OP @summerLast 这个我刚才试了一下 没有复现 要不麻烦说下设备和简单的复现步骤 |
78 laragh 2024-01-08 21:38:14 +08:00 v 友都这么牛么 |
![]() | 80 dianso 2024-01-08 21:42:15 +08:00 求 docker |
![]() | 81 LHRUN OP @guji 1. 记录了,显示具体数据之后会考虑,现在主打一个随意 。2. 没有复现,麻烦提供下复现步骤和设备信息。 难顶,好多问题都复现不出来 |
![]() | 82 LHRUN OP |
![]() | 84 dvz 2024-01-08 21:58:47 +08:00 太牛了 点赞 支持 收藏 |
![]() | 85 zhw2590582 2024-01-08 22:30:11 +08:00 真实牛叉啊 |
86 guji 2024-01-08 22:52:27 +08:00 @LHRUN 复现步骤就是选中像素模式,一边不断单击鼠标左键,一边移动鼠标全屏晃动,不时按住左键画两笔;也可以选中该模式直接按住鼠标左键一笔画十个大圈再由按住改为单击鼠标左键,就出现笔迹延迟了,多边形和素材模式也会有这个现象,基础和彩虹没有。(其实我是写名字写出这个现象的,字写得快点就出现了) |
87 wakiki 2024-01-08 23:13:04 +08:00 厉害!是否有计划支持导入 PS 、Krita 、MyPaint 的笔刷文件呢 |
![]() | 88 jellybool 2024-01-09 00:36:14 +08:00 via Android @LHRUN 你这种做 build in public ,然后好好改善和运用两三年,我感觉 $10 万 MMR 应该不是问题。 |
![]() | 90 Bo0 2024-01-09 08:38:26 +08:00 用数位板操作起来很流畅,轻度使用可以不开 PS 了,棒 |
![]() | 91 eWS2mq278TTzoj0O 2024-01-09 08:54:23 +08:00 建议: 橡皮擦增加圆形范围提示, 增加橡皮擦的 width 之后,我不知道他到底有多大 |
![]() | 92 LHRUN OP @zhw2590582 哇 大佬。我很久之前就观摩过你的项目 |
98 wwwz 2024-01-09 09:13:21 +08:00 滚轮向上是缩小,向下是放大,正常使用逻辑应该反过来吧 |
99 jollo 2024-01-09 09:20:44 +08:00 要是能像无边界一样,画板无限大就更好了 |
![]() | 100 Anoyou 2024-01-09 09:25:53 +08:00 厉害厉害,链接先收藏 |