V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
daijinming
V2EX  ›  程序员

像前端高手求救,寻求 canvas 编辑器,可以 画圈,画框,画线,录入文字

  •  
  •   daijinming · 2020-07-17 15:15:13 +08:00 · 2536 次点击
    这是一个创建于 1588 天前的主题,其中的信息可能已经有所发展或是发生改变。

    像前端高手求救,寻求 canvas 编辑器,可以 画圈,画框,画线,录入文字,主要用于白板的录入

    23 条回复    2020-07-24 14:24:00 +08:00
    Kaier
        1
    Kaier  
       2020-07-17 15:18:00 +08:00   ❤️ 1
    daijinming
        2
    daijinming  
    OP
       2020-07-17 15:48:48 +08:00
    @Kaier 感谢了朋友
    izoabr
        3
    izoabr  
       2020-07-17 15:53:55 +08:00
    YoRolling
        4
    YoRolling  
       2020-07-17 16:13:48 +08:00
    fabric.js.
    daijinming
        5
    daijinming  
    OP
       2020-07-17 16:20:05 +08:00
    @izoabr 这个也不错
    daijinming
        6
    daijinming  
    OP
       2020-07-17 17:33:58 +08:00
    @Kaier 朋友,位置有点不太准,还有能不能加个后退功能
    Kaier
        7
    Kaier  
       2020-07-17 17:47:28 +08:00
    @daijinming 1. 位置不准? 请问你是用在线 demo 那个吗? 如果是. 请 clone 下项目, 用里面 example 里面的 html.
    2. 有. undo
    Kaier
        8
    Kaier  
       2020-07-17 17:52:56 +08:00
    @daijinming 你可以看下 example / index.html 的内容.
    你说的后退应该就是 里面的 撤销功能. draw.undo()
    daijinming
        9
    daijinming  
    OP
       2020-07-17 17:59:12 +08:00
    @Kaier 我自己整和的,canvas 我还有其他的用处,采用 pdf.js 加载 pdf, 然后用 easy-drawing-board 对 pdf 进行标记
    Kaier
        10
    Kaier  
       2020-07-17 18:02:41 +08:00
    @daijinming 能否给个 demo 出来呢. 比如放到 codepen 之类的, 我喵一喵
    daijinming
        11
    daijinming  
    OP
       2020-07-17 18:06:56 +08:00
    @Kaier https://github.com/daijinming/whiteboard-test.git 这个是我的测试项目,鼠标位置和绘制的位置上下有差别,要是有空给指导下,不急
    Kaier
        12
    Kaier  
       2020-07-17 18:09:49 +08:00
    @daijinming 好的, 感谢反馈. 晚上回家后我去康康
    hahaayaoyaoyao
        13
    hahaayaoyaoyao  
       2020-07-17 18:24:36 +08:00 via Android
    @daijinming 有 canvas 库的,你可以去找找

    我的这个就是用 p5 写的
    https://www.ztftrue.com/public/html/audio.html
    hahaayaoyaoyao
        14
    hahaayaoyaoyao  
       2020-07-17 18:25:24 +08:00 via Android
    Kaier
        15
    Kaier  
       2020-07-18 15:49:19 +08:00
    @daijinming 已修复, 请升级到 1.3.0 版本即可
    daijinming
        16
    daijinming  
    OP
       2020-07-18 17:28:27 +08:00
    @Kaier 好的,收到
    daijinming
        17
    daijinming  
    OP
       2020-07-20 10:00:16 +08:00
    @Kaier 朋友,我问下能不能把 canvas 设置成透明的,我考虑在 canvas 下面再放一个 canvas 用来渲染 pdf,我使用你那边组件提供的 undo 时,如果在公用 canvas 的时候,会将 渲染的 pdf 给抹掉
    Kaier
        18
    Kaier  
       2020-07-20 15:34:25 +08:00
    @daijinming 我看了下你之前的提供的 demo. 觉得是不能共用一个 canvas 的.
    我的做法是:
    1. 创建一个 canvas 给 pdf 用, 它是绝对定位 -9999px 的, 屏幕上看不到. 作用只是为了拿到 pdf 生成后的 canvas 宽高和 渲染数据. 渲染数据用一个 变量存起来. (将 pdf 的数据转成 base64)
    2. 创建的容器(也是画板插件真正要用的), 将 pdf 的数据渲染到这里面去.. 这样. 它的 橡皮擦功能 和 undo 功能就完全不受影响了.
    我把示例代码提到你的 demo 的 issues 里面去了.你可以看下. 覆盖你之前的文件后跑一下.
    如果你一定要共用一个 canvas 的话.. 那么很遗憾, 这个插件就帮不了你~
    daijinming
        19
    daijinming  
    OP
       2020-07-20 16:22:54 +08:00
    @Kaier 示例我看到了,可以解决我的问题了,3q
    daijinming
        20
    daijinming  
    OP
       2020-07-24 09:26:35 +08:00
    @Kaier 朋友,还有一个问题想和你探讨下,我考虑做个一个电子白板,将 canvas 上面的操作,记录起来,转成 base64 或是其他形式的字符串,发送给其他人,其他人也能在自己的 canvas 上恢复 canvas 上的操作,不知道可否指导一二
    Kaier
        21
    Kaier  
       2020-07-24 10:47:05 +08:00
    @daijinming 有转 base64 的 api.

    draw.generateBase64().then(data => console.log(data))
    daijinming
        22
    daijinming  
    OP
       2020-07-24 14:17:03 +08:00
    @Kaier 那接收方恢复,怎么处理
    daijinming
        23
    daijinming  
    OP
       2020-07-24 14:24:00 +08:00
    @Kaier 还有个事朋友,我看你发布的版本 还是有引用 core.js ,能不能打包成一个文件,我这边没法使用 npm 安装,都是手工在 html 加入引用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4208 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:02 · PVG 09:02 · LAX 17:02 · JFK 20:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.