像前端高手求救，寻求 canvas 编辑器，可以 画圈，画框，画线，录入文字
daijinming · 2020-07-17 15:15:13 +08:00 · 2538 次点击这是一个创建于 1589 天前的主题，其中的信息可能已经有所发展或是发生改变。
像前端高手求救，寻求 canvas 编辑器，可以 画圈，画框，画线，录入文字，主要用于白板的录入
 |
1
Kaier 2020-07-17 15:18:00 +08:00  1
|
 |
2
daijinming OP @Kaier 感谢了朋友
|
 |
3
izoabr 2020-07-17 15:53:55 +08:00
|
 |
4
YoRolling 2020-07-17 16:13:48 +08:00
fabric.js.
|
|
5
daijinming OP @izoabr 这个也不错
|
|
6
daijinming OP @Kaier 朋友，位置有点不太准，还有能不能加个后退功能
|
|
7
Kaier 2020-07-17 17:47:28 +08:00
@daijinming 1. 位置不准? 请问你是用在线 demo 那个吗? 如果是. 请 clone 下项目, 用里面 example 里面的 html.
2. 有. undo |
|
8
Kaier 2020-07-17 17:52:56 +08:00
@daijinming 你可以看下 example / index.html 的内容.
你说的后退应该就是 里面的 撤销功能. draw.undo() |
|
9
daijinming OP @Kaier 我自己整和的，canvas 我还有其他的用处，采用 pdf.js 加载 pdf， 然后用 easy-drawing-board 对 pdf 进行标记
|
|
10
Kaier 2020-07-17 18:02:41 +08:00
@daijinming 能否给个 demo 出来呢. 比如放到 codepen 之类的, 我喵一喵
|
|
11
daijinming OP @Kaier https://github.com/daijinming/whiteboard-test.git 这个是我的测试项目，鼠标位置和绘制的位置上下有差别，要是有空给指导下，不急
|
|
12
Kaier 2020-07-17 18:09:49 +08:00
@daijinming 好的, 感谢反馈. 晚上回家后我去康康
|
 |
13
hahaayaoyaoyao 2020-07-17 18:24:36 +08:00 via Android
|
|
14
hahaayaoyaoyao 2020-07-17 18:25:24 +08:00 via Android
|
|
15
Kaier 2020-07-18 15:49:19 +08:00
@daijinming 已修复, 请升级到 1.3.0 版本即可
|
|
16
daijinming OP @Kaier 好的，收到
|
|
17
daijinming OP @Kaier 朋友，我问下能不能把 canvas 设置成透明的，我考虑在 canvas 下面再放一个 canvas 用来渲染 pdf,我使用你那边组件提供的 undo 时，如果在公用 canvas 的时候，会将 渲染的 pdf 给抹掉
|
|
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 的话.. 那么很遗憾, 这个插件就帮不了你~ |
|
19
daijinming OP @Kaier 示例我看到了，可以解决我的问题了，3q
|
|
20
daijinming OP @Kaier 朋友，还有一个问题想和你探讨下，我考虑做个一个电子白板，将 canvas 上面的操作，记录起来，转成 base64 或是其他形式的字符串，发送给其他人，其他人也能在自己的 canvas 上恢复 canvas 上的操作，不知道可否指导一二
|
|
21
Kaier 2020-07-24 10:47:05 +08:00
|
|
22
daijinming OP @Kaier 那接收方恢复，怎么处理
|
|
23
daijinming OP @Kaier 还有个事朋友，我看你发布的版本 还是有引用 core.js ,能不能打包成一个文件，我这边没法使用 npm 安装，都是手工在 html 加入引用
|
Select Language