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

分享一个基于 Canvas 的 WEB 端多功能画画板

  •  
  •   LHRUN ·
    LHRUN · 2023-12-04 08:53:04 +08:00 · 2724 次点击
    这是一个创建于 375 天前的主题,其中的信息可能已经有所发展或是发生改变。

    分享一个我之前做的画画版,上一个功能迭代也是上半年的事情了,最近几个月被工作缠的一点时间都没有,只改了一点小的交互和 BUG 。然后最近终于有了些空闲,于是决定继续迭代,增加一些新功能。目前是有以下功能

    1. 画笔: 支持颜色修改、动态线宽和多种画笔效果。
    2. 橡皮擦: 通过鼠标线性移动来擦除内容。
    3. 文字绘制: 双击画板可以绘制文字。
    4. 拖拽功能: 按住空格键随意拖拽画布。
    5. 选择模式: 通过点击元素进行元素框选,按住手柄可以缩放或移动元素,按下 Backspace 键可删除选中的元素。
    6. 图层管理: 图层按照顺序进行显示,可以新增、删除和排序图层。
    7. 撤销与保存: 支持撤销、反撤销、清除和保存功能。

    接下来的计划是做移动端适配(这个优先级最高,现在只支持 PC ,我最初就是想做平板和移动端,用手指绘画,然后两指或三指拖拽缩放,但是一直没做到🤣)、背景颜色和图片切换、面板缩放以及登录与数据同步分享这几个功能。

    分享出来是想让大家提提意见,看有什么酷炫的功能或者效果可以加入进去,当然,如果能给个 Star 就更棒了,哈哈😂

    Github: https://github.com/LHRUN/paint-board
    Link: https://songlh.top/paint-board

    20 条回复    2023-12-05 17:45:50 +08:00
    deiphi
        1
    deiphi  
       2023-12-04 09:23:12 +08:00
    绘画这些功能还是很赞,但是文字输入部分,个人认为有几点做得还不够好。

    1 、在工具栏没有“输入文字”的图标或引导。
    2 、文字输入后似乎不能修改文字内容和颜色。
    3 、文字不能选择字体。

    另外期待移动端适配:)
    zjsxwc
        2
    zjsxwc  
       2023-12-04 09:25:23 +08:00
    up ,我有个需求,能不能粘贴我当前剪切板里复制过的图片,到图层里,然后能拖动被粘贴剪切板里图片的位置。
    liangxin1998
        3
    liangxin1998  
       2023-12-04 09:31:55 +08:00
    @zjsxwc 那是你的需求不是 up 的需求
    HongXinss
        4
    HongXinss  
       2023-12-04 10:00:29 +08:00
    做的很棒,star 了
    PlanV
        5
    PlanV  
       2023-12-04 10:02:45 +08:00
    真不错,很牛啊,star 了
    LHRUN
        6
    LHRUN  
    OP
       2023-12-04 10:03:46 +08:00
    @deiphi 多谢提议,1. 这个是要加的,如果现在没有看说明,应该没有人会想要双击的,即使双击了也不知道是要干什么。2. 这个我之前没有考虑过,但应该是个必须的功能。3. 这个我之后看一下可以怎么做,其实可以提供一些免费字体用于选择,比如谷歌的
    yangheng4922
        7
    yangheng4922  
       2023-12-04 10:05:38 +08:00
    上层图层用橡皮檫的痕迹会盖住下面的图层
    LHRUN
        8
    LHRUN  
    OP
       2023-12-04 10:06:15 +08:00
    @zjsxwc
    @liangxin1998
    加载图片这个在我的计划之内,不过粘贴图片我之前没有想到,后面研究一下应该也会加上的
    LHRUN
        9
    LHRUN  
    OP
       2023-12-04 10:08:32 +08:00
    @yangheng4922 这个不知道是不是我的图层理解问题,也有别人给我提过,我认为上层图层的操作应该都会覆盖到下面的图层,包括橡皮擦,如果你不想要覆盖,应该要调换这个图层的顺序
    LHRUN
        10
    LHRUN  
    OP
       2023-12-04 10:08:56 +08:00
    @HongXinss
    @PlanV
    thanks 😘
    daydreamcafe
        11
    daydreamcafe  
       2023-12-04 10:21:17 +08:00
    做得很好,简单易用而且看了下代码,很简洁易懂,先 star 了,改天找个时间好好精读一下,感觉是个值得学习的 canvas 示例项目
    WesleyQin
        12
    WesleyQin  
       2023-12-04 10:43:28 +08:00
    加载图片作为底层,调整图片的透明度。
    支持 pad ,最好能支持笔触,ipad pencil 屏蔽手指误触
    用来给小朋友临摹图片。
    yangheng4922
        13
    yangheng4922  
       2023-12-04 11:04:01 +08:00
    @LHRUN #9
    绘制操作是这样没错 橡皮檫的话不是传统的绘制操作 他应该是删除像素的
    平时用的图像处理基本都是这样的 ps 这些
    LHRUN
        14
    LHRUN  
    OP
       2023-12-04 11:55:58 +08:00
    @daydreamcafe 谢谢,不过之前做的有些只考虑了功能,没考虑一些优化细节(部分逻辑有点烂😂),并且没有用任何 canvas 库,现在已经有点性能问题了,我现在也在想到底是坚持自己写,还是开始接入 canvas 库重写部分逻辑
    LHRUN
        15
    LHRUN  
    OP
       2023-12-04 11:57:23 +08:00
    @WesleyQin 误触这个之前没有了解过,后面看看相关文档。透明度这个是个好想法,多谢提议
    LHRUN
        16
    LHRUN  
    OP
       2023-12-04 11:58:29 +08:00
    @yangheng4922 那可能和我最初的设计有点出入了,不过多谢建议 😘
    sankooc
        17
    sankooc  
       2023-12-04 13:25:49 +08:00
    不错 不错 star 了
    LHRUN
        18
    LHRUN  
    OP
       2023-12-04 19:00:48 +08:00
    @sankooc thanks 😘
    nicoljiang
        19
    nicoljiang  
       2023-12-05 17:14:12 +08:00
    效果不粗,但是在 retina 上清晰度好像比较低。
    LHRUN
        20
    LHRUN  
    OP
       2023-12-05 17:45:50 +08:00
    @nicoljiang 记录了,后面我看看
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3237 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 04:18 · PVG 12:18 · LAX 20:18 · JFK 23:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.