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

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

  •  
  •   imherer · 34 天前 · 1354 次点击
    这是一个创建于 34 天前的主题,其中的信息可能已经有所发展或是发生改变。

    首先申明不是打广告

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

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

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

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

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

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

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