毕设做了个纯 canvas 画板

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3478 天前的主题，其中的信息可能已经有所发展或是发生改变。

求大神轻拍砖
如果卡的话，刷新2遍就好了。。。

http://draw-board.herokuapp.com/

第 1 条附言 · 2015-05-26 12:20:44 +08:00

最近在忙写这个论文，下周就要答辩了。等答辩完了，我优化一下代码结构。

优化的点：
1、根据用户的屏幕初始化canvas大小，有选项可以调整canvas大小
2、增加用户鼠标mouse cursor
3、增加工具tooltip
4、优化虚线的结构
5、后台nodejs改用php

画板

canvas

刷新

41 条回复 • 2015-06-13 12:18:15 +08:00

lyklykkkkkkk

2015-05-25 20:10:14 +08:00

两个建议
1. mouse cursor比较重要，因为绘画要定位置，最好改个合适的。
2. layout能不能用flex，别用absolute。

MrEggNoodle

2015-05-25 20:42:00 +08:00

测试了一下，Mac下的safari刷不出来。chrome成功了。

YuJianrong

2015-05-25 22:50:41 +08:00

保存可以直接保存文件的，参考 https://github.com/eligrey/FileSaver.js/

shoumu

2015-05-25 23:23:01 +08:00

在我电脑上看起来有点奇怪，浏览器宽度大概为1230

flowfire

2015-05-26 00:07:04 +08:00

有时候橡皮擦会有点问题

cnpaas

2015-05-26 00:16:47 +08:00

@DualWield 请问你这个绘画板是基于什么语言的？

davidyin

2015-05-26 00:43:48 +08:00

第一句看成了：请大神经拍砖

w88975

2015-05-26 00:47:30 +08:00

@cnpaas 除了js还能有什么语言？

Biwood

2015-05-26 01:08:32 +08:00

好厉害，居然还能把刚画的东西缓存起来。
提点建议，能不能把每次画的东西都给个自由变换的框，可以拖动、旋转、缩放等，那样就更完美了

loddit

2015-05-26 01:57:33 +08:00

面板布局有点奇怪，不过功能完成度蛮高啊

zado

2015-05-26 07:52:18 +08:00

在IE下保存文件的时候我也遇到了同样的问题,我还没有研究出怎么解决.
可以参考一下 http://www.baidufe.com/item/65c055482d26ec59e27e.html ,他在IE下是打开一个新窗口,然后自己选图片令存为,也算是勉强的解决方案.

zado

2015-05-26 08:02:04 +08:00

@YuJianrong 这个试了下,在IE11下可用,谢谢!

zls930

2015-05-26 09:19:01 +08:00

加个素描笔刷吧！
这样我就会经常玩这个噜！

rwalle

2015-05-26 09:27:22 +08:00 via Android

应该是insert text，不是insert font吧

Gonster

2015-05-26 09:40:29 +08:00

0, 0 用了react 啊，数据存在 local storage 同一个key
~~挺好的

humaorongrong

2015-05-26 09:47:29 +08:00

求源代碼分享學習～
橡皮擦的形狀有時會是上一次使用畫筆的形狀。

learnshare

2015-05-26 09:58:09 +08:00

嗯，体验过后，感觉问题还比较多：
1. 这么个简单的应用，不应该上 Bootstrap，过大；
2. 初始线条宽度 50 有点大；
3. 工具栏应该加一下 title (tooltip)；
4. 方框工具线条宽度可以调到 0，但无效；
5. 虚线不应该是一段一段出来，应该指哪画到哪；
6. 插入文字最好做到 inline，在想要输入的地方输入；
7. 插入图片的 API 503 了。

不过仍然是一个好应用。

chipiano

2015-05-26 10:50:57 +08:00

要是能更完善我买下~

a591826944

2015-05-26 11:00:03 +08:00

上下移动图层位置。。并不能让画板上两个图层的层叠关系互换。。bug

a591826944

2015-05-26 11:02:38 +08:00

另外一个我这 mac 的 chrome 上所有画笔橡皮擦之类的选择后鼠标仍然是指针，不会变成对应的图标。。不会就是这样的吧

DualWield

2015-05-26 11:33:24 +08:00

@Biwood 当时我也想的是可以改动每次绘画的形状，自由变换，但是感觉好难做=。=

DualWield

2015-05-26 11:34:41 +08:00

@zls930 素描笔刷是什么喵

DualWield

2015-05-26 11:36:03 +08:00

@learnshare 是的，多谢建议，我应该多自己测一下哒> . <

DualWield

2015-05-26 11:37:20 +08:00

@a591826944 图层功能应该是完好的，上下移动图层位置是可以的啊。。。。。

DualWield

2015-05-26 11:37:44 +08:00

@chipiano 大财主！我一定好好完善！！~~

rcmerci

2015-05-26 11:39:17 +08:00

是不是用canvas画的东西，边缘都会有点模糊？

DualWield

2015-05-26 11:44:39 +08:00

@rcmerci 貌似是的，但是有数学方法优化好像。

cjyang1128

2015-05-26 12:04:33 +08:00

赞！

cnpaas

2015-05-26 12:50:13 +08:00

@DualWield 如果后端是php，那么希望来我们的平台试试部署你这个应用： /t/186799

YuJianrong

2015-05-26 13:29:59 +08:00

贴图为什么要把图片传到后端去……
FileAPI读一下前端用dataURI就好，参考：
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

fange01

2015-05-26 13:39:37 +08:00

做个微信适配也不错，画完可以直接分享。

DualWield

2015-05-26 13:45:05 +08:00

@YuJianrong 原谅我孤陋寡闻了，这么棒的API！！~~~

DualWield

2015-05-26 13:51:05 +08:00

@fange01 当时想了做个简易的设配，简易工具栏，后续工程吧

homfen

2015-05-26 14:54:37 +08:00

size调整有bug

DualWield

2015-05-26 19:50:13 +08:00

@homfen 请说明如何触发bug，bug的效果样子

second06

2015-05-26 23:23:23 +08:00

还不错，加油吧，骚年

ibloging

2015-05-27 08:36:44 +08:00

不错呀

zls930

2015-05-27 08:59:29 +08:00

素描笔刷就是类似两头细中间粗，带微小颗粒感的笔刷

homfen

2015-05-27 12:15:58 +08:00

@DualWield 先用画笔调整大小，然后换到橡皮调整大小，橡皮的大小和画笔一样，size无效，差不多就这样

chipiano

2015-06-11 18:17:05 +08:00

留个联系方式吧QQ? 有个类似画板的商业项目想找你，这论坛也没私信功能。

DualWield

2015-06-13 12:18:15 +08:00

@chipiano 企鹅4969661九九，加我说明v2画板