V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
DualWield
V2EX  ›  JavaScript

毕设做了个纯 canvas 画板

  •  1
     
  •   DualWield · 2015-05-25 19:43:01 +08:00 · 6073 次点击
    这是一个创建于 3462 天前的主题,其中的信息可能已经有所发展或是发生改变。

    求大神轻拍砖
    如果卡的话,刷新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
    41 条回复    2015-06-13 12:18:15 +08:00
    lyklykkkkkkk
        1
    lyklykkkkkkk  
       2015-05-25 20:10:14 +08:00
    两个建议
    1. mouse cursor比较重要,因为绘画要定位置,最好改个合适的。
    2. layout能不能用flex,别用absolute。
    MrEggNoodle
        2
    MrEggNoodle  
       2015-05-25 20:42:00 +08:00
    测试了一下,Mac下的safari刷不出来。chrome成功了。
    YuJianrong
        3
    YuJianrong  
       2015-05-25 22:50:41 +08:00
    保存可以直接保存文件的,参考 https://github.com/eligrey/FileSaver.js/
    shoumu
        4
    shoumu  
       2015-05-25 23:23:01 +08:00
    在我电脑上看起来有点奇怪,浏览器宽度大概为1230
    flowfire
        5
    flowfire  
       2015-05-26 00:07:04 +08:00
    有时候橡皮擦会有点问题
    cnpaas
        6
    cnpaas  
       2015-05-26 00:16:47 +08:00
    @DualWield 请问你这个绘画板是基于什么语言的?
    davidyin
        7
    davidyin  
       2015-05-26 00:43:48 +08:00
    第一句看成了:请大神经 拍砖
    w88975
        8
    w88975  
       2015-05-26 00:47:30 +08:00
    @cnpaas 除了js还能有什么语言?
    Biwood
        9
    Biwood  
       2015-05-26 01:08:32 +08:00
    好厉害,居然还能把刚画的东西缓存起来。
    提点建议,能不能把每次画的东西都给个自由变换的框,可以拖动、旋转、缩放等,那样就更完美了
    loddit
        10
    loddit  
       2015-05-26 01:57:33 +08:00
    面板布局有点奇怪,不过功能完成度蛮高啊
    zado
        11
    zado  
       2015-05-26 07:52:18 +08:00
    在IE下保存文件的时候我也遇到了同样的问题,我还没有研究出怎么解决.
    可以参考一下 http://www.baidufe.com/item/65c055482d26ec59e27e.html ,他在IE下是打开一个新窗口,然后自己选图片令存为,也算是勉强的解决方案.
    zado
        12
    zado  
       2015-05-26 08:02:04 +08:00
    @YuJianrong 这个试了下,在IE11下可用,谢谢!
    zls930
        13
    zls930  
       2015-05-26 09:19:01 +08:00
    加个素描笔刷吧!
    这样我就会经常玩这个噜!
    rwalle
        14
    rwalle  
       2015-05-26 09:27:22 +08:00 via Android
    应该是insert text,不是insert font吧
    Gonster
        15
    Gonster  
       2015-05-26 09:40:29 +08:00
    0, 0 用了react 啊, 数据存在 local storage 同一个key
    ~~挺好的
    humaorongrong
        16
    humaorongrong  
       2015-05-26 09:47:29 +08:00
    求源代碼分享學習~
    橡皮擦的形狀有時會是上一次使用畫筆的形狀。
    learnshare
        17
    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
        18
    chipiano  
       2015-05-26 10:50:57 +08:00
    要是能更完善 我买下~
    a591826944
        19
    a591826944  
       2015-05-26 11:00:03 +08:00
    上下移动图层位置。。并不能让画板上两个图层的层叠关系 互换。。bug
    a591826944
        20
    a591826944  
       2015-05-26 11:02:38 +08:00
    另外一个 我这 mac 的 chrome 上 所有 画笔 橡皮擦之类的 选择后鼠标仍然是指针,不会变成对应的图标。。不会 就是这样的吧
    DualWield
        21
    DualWield  
    OP
       2015-05-26 11:33:24 +08:00
    @Biwood 当时我也想的是可以改动每次绘画的形状,自由变换,但是感觉好难做=。=
    DualWield
        22
    DualWield  
    OP
       2015-05-26 11:34:41 +08:00
    @zls930 素描笔刷是什么喵
    DualWield
        23
    DualWield  
    OP
       2015-05-26 11:36:03 +08:00
    @learnshare 是的,多谢建议,我应该多自己测一下哒> . <
    DualWield
        24
    DualWield  
    OP
       2015-05-26 11:37:20 +08:00
    @a591826944 图层功能应该是完好的,上下移动图层位置是可以的啊。。。。。
    DualWield
        25
    DualWield  
    OP
       2015-05-26 11:37:44 +08:00
    @chipiano 大财主!我一定好好完善!!~~
    rcmerci
        26
    rcmerci  
       2015-05-26 11:39:17 +08:00
    是不是用canvas画的东西,边缘都会有点模糊?
    DualWield
        27
    DualWield  
    OP
       2015-05-26 11:44:39 +08:00
    @rcmerci 貌似是的,但是有数学方法优化好像。
    cjyang1128
        28
    cjyang1128  
       2015-05-26 12:04:33 +08:00
    赞!
    cnpaas
        29
    cnpaas  
       2015-05-26 12:50:13 +08:00
    @DualWield 如果后端是php,那么希望来我们的平台试试部署你这个应用: /t/186799
    YuJianrong
        30
    YuJianrong  
       2015-05-26 13:29:59 +08:00   ❤️ 1
    贴图为什么要把图片传到后端去……
    FileAPI读一下前端用dataURI就好,参考:
    https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
    fange01
        31
    fange01  
       2015-05-26 13:39:37 +08:00
    做个微信适配也不错,画完可以直接分享。
    DualWield
        32
    DualWield  
    OP
       2015-05-26 13:45:05 +08:00
    @YuJianrong 原谅我孤陋寡闻了,这么棒的API!!~~~
    DualWield
        33
    DualWield  
    OP
       2015-05-26 13:51:05 +08:00
    @fange01 当时想了做个简易的设配,简易工具栏,后续工程吧
    homfen
        34
    homfen  
       2015-05-26 14:54:37 +08:00
    size调整有bug
    DualWield
        35
    DualWield  
    OP
       2015-05-26 19:50:13 +08:00
    @homfen 请说明如何触发bug,bug的效果样子
    second06
        36
    second06  
       2015-05-26 23:23:23 +08:00
    还不错,加油吧,骚年
    ibloging
        37
    ibloging  
       2015-05-27 08:36:44 +08:00
    不错呀
    zls930
        38
    zls930  
       2015-05-27 08:59:29 +08:00
    素描笔刷就是类似两头细中间粗,带微小颗粒感的笔刷
    homfen
        39
    homfen  
       2015-05-27 12:15:58 +08:00
    @DualWield 先用画笔调整大小,然后换到橡皮调整大小,橡皮的大小和画笔一样,size无效,差不多就这样
    chipiano
        40
    chipiano  
       2015-06-11 18:17:05 +08:00
    留个联系方式吧QQ? 有个类似画板的商业项目想找你,这论坛也没私信功能。
    DualWield
        41
    DualWield  
    OP
       2015-06-13 12:18:15 +08:00
    @chipiano 企鹅4969661九九,加我说明v2画板
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2621 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 11:01 · PVG 19:01 · LAX 03:01 · JFK 06:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.