最近工作稍微轻松了一些,有了点空闲时间,所以从 11 月底开始,重拾之前做的趣味画板项目,开始进行重构,上周终于告一段落。基本上,所有假期与工作日的晚上全部时间都在搞,总算是完成了😂
在重构开始阶段时,我也收集了一些建议,并基本在这个重构版本都完成了。此版本增加了很多新的画笔效果和新功能,然后也做了多端兼容,PC 端鼠标操作和 Mobile 端手指操作以及样式都做了处理。在这次重构期间,我放弃了原生写 canvas 的各种逻辑,改用了 Fabric ,因为我在写一些效果时性能是真的有点堪忧。 之前还好,特别是这次加了很多新功能后效果有点差,所以就放下了执念,选择了这个比较出名的画布库。
话不多说,欢迎大家使用体验,如果有任何建议和 Bug ,包括交互上,使用感受等等,都可以提出。当然,如果能给个 Star 就更棒了,哈哈😂
功能我就不一一陈述了,期待你的探索 🤔
Link: https://songlh.top/paint-board/
Github: https://github.com/LHRUN/paint-board

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