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

请教各位前端大佬在线拖拽编辑的页面实现思路

  •  
  •   imherer · 2019-05-23 17:11:07 +08:00 · 5128 次点击
    这是一个创建于 1770 天前的主题,其中的信息可能已经有所发展或是发生改变。

    首先申明不是打广告

    最近一个朋友有个 批量生成证书 的需求。有点类似毕业证书或者获奖证书这种,除了姓名或几等奖不一样,其他内容基本都是一样的。

    最开始的实现方式是,让他创建一个证书模板,就是填写好证书内容,然后批量导入姓名,最后就可以批量生成证书了

    现在就 创建证书模板 他觉得不满意,想做成这种类似的效果: https://ue.818ps.com/?picId=1922617

    它这个网站上功能挺多的,不需要这么多,基本上只需要可以通过拖拽方式改变文字的位置、大小、颜色等就行了

    各位前端大佬,这种功能应该如何实现?思路是怎么样的呢?有现成的库吗?

    14 条回复    2019-11-25 17:16:30 +08:00
    ssvfdn
        1
    ssvfdn  
       2019-05-23 17:22:12 +08:00   ❤️ 1
    实现不复杂
    1、创建容器
    2、实现拖拽
    3、创建节点与数据,数据用于保存文字的位置、大小、颜色、位置并且同步节点效果
    3.1、创建的时候记住要生成唯一的 key 做为标记
    3.2、数据{},{'唯一 key':{ 'font-size':'', 'color':'','left':'0',top:'0'}, '唯一 key':{}}
    4、提交的时候把数据提交给服务端保存就可以
    --------
    到时展示的时候也是通过保存的数据遍历解析就可以了。
    mengkun
        2
    mengkun  
       2019-05-23 18:54:59 +08:00   ❤️ 1
    fabricjs 了解一下: http://fabricjs.com
    imherer
        3
    imherer  
    OP
       2019-05-23 19:42:21 +08:00
    @mengkun 谢谢。这个看着好像还可以。
    imherer
        4
    imherer  
    OP
       2019-05-23 19:42:47 +08:00
    @ssvfdn 1,2 步怎么实现呢?用什么技术?
    imherer
        5
    imherer  
    OP
       2019-05-23 19:43:45 +08:00
    @ssvfdn 单纯的拖拽还挺好实现的。主要是感觉就是通过拖船放大或缩小元素有点不好实现
    MiYogurt
        6
    MiYogurt  
       2019-05-23 19:51:16 +08:00   ❤️ 1
    我为一个团队写过这种应用,性能不太好把控。其实就是修改一些属性而已没什么难的。https://github.com/MiYogurt/drop-test 你可以看一下这个,很简单。
    MiYogurt
        7
    MiYogurt  
       2019-05-23 19:53:23 +08:00
    还有这个
    https://miyogurt.github.io/vue-ibox/
    https://github.com/MiYogurt/vue-ibox

    我都好久没写前端代码了,呵呵。
    imherer
        8
    imherer  
    OP
       2019-05-23 19:59:14 +08:00
    @MiYogurt 感谢!
    plqws
        9
    plqws  
       2019-05-23 20:27:11 +08:00
    HTML5 Drag&Drop API 几分钟上手一下就可以了
    xiangyuecn
        10
    xiangyuecn  
       2019-05-23 20:52:29 +08:00   ❤️ 1
    目测 “拖拽” 方式改变文字的 “位置、大小、颜色” 是一个伪需求(同一种证书应该书写 位置 大小 是固定的吧😒 颜色就不知道了,如果不是,那每次都要拖来拖去,那也太好玩了)。简单点的给个输入框、下拉框 供填写和选择就 ojbk 了。制作好证书背景图和对应的坐标、字体配置,外加一个 canvas、一个导入 file input、一个导出 button,再加一个 jszip 打压缩包。纯原生手撸 js。一个 html 文件足以,服务器也可以省了😜
    lzuntalented
        11
    lzuntalented  
       2019-05-23 20:56:51 +08:00   ❤️ 1
    https://github.com/lzuntalented/lz-h5-edit
    最近实现的在线编辑库,基础编辑功能有了
    你可以参考下
    ssvfdn
        12
    ssvfdn  
       2019-05-24 08:59:03 +08:00   ❤️ 1
    @imherer 放大与缩小可以通过计算得改变 width 与 height 或者通过样式 zoom 解决
    所说的技术对于节点操作比较好的可以考虑下 jQuery,不过原生 JS 也可以实现的
    这里用到的技术不多,用原生 JS 也能简单搞定
    这里需要你 CSS 与 JS 都有一定基础
    imherer
        13
    imherer  
    OP
       2019-05-24 10:00:07 +08:00
    @xiangyuecn 「“拖拽” 方式改变文字的 “位置、大小、颜色”」
    同一种证书位置大小什么的确实是固定的。 要实现这个需求的主要目的是创建不同种类的证书
    xs12
        14
    xs12  
       2019-11-25 17:16:30 +08:00
    @mengkun 孟坤 !!!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5442 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 08:37 · PVG 16:37 · LAX 01:37 · JFK 04:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.