项目背景

由于客户需要的证书模板不固定，数量较大，使用传统的方式（往证书背景图上贴数据）不满足需求，所以才开发了这款用户可以自定义的证书模板。

步骤1：将上面所有的字段点到画板上并编辑好

功能介绍

证书上的字段分动态字段和静态字段两种，动态字段包括（姓名，身份证，证件照等），静态字段包括正文内容等，用户可以自己选择输入。所有字段用户均可以通过上方的CKEditor编辑器来排版，调整颜色字体大小位置居中等操作。字段亦可以在画布内拖动，缩放等。点击保存后，可以再其他页面预览，再次打开可以恢复上一次编辑的状态。

步骤2：确认好排版点击保存

前端工作

前端部分是根据后台传过来的数据（字段信息等）将其遍历在最上排的字段列表里，然后做了一套自定义模板的功能，从点击字段，生成到画板上开始。用户可以自己随意拖动缩放字段，改变文字的大小颜色字体等样式。待所有字段都在画板上之后，点击保存可以将按照约定好的数据格式的数据返回给后端。然后后端根据接受到的数据做预览和下载等功能。

步骤3：预览无误保存图片

注：以上图片字段均为本人测试使用，并非真实字段和使用场景^_^

---

重构心得(2018.07.16)

第一版（reconstruction/board-old.js）着急上线写的比较乱，耦合度非常的高，代码阅读起来比较费劲，虽然功能啥的都实现了，但是后期不好维护。 后来决定重构代码，重构的第一版（index.js），代码结构比之前的清晰很多，function封装的比较多，自定义字段和一般字段的方法分开写了，共有的部分，比如appendTag（）把字段放到画板上然后再绑定数据这个方法，两者都差不多，所以我就提取了这个方法，代码量上减少了不少。 但这版的耦合度还是比较高，不方便拓展和复用，方法处理干净。所以后期抽空我还会继续重构，直到耦合度非常低，可以拓展复用为止。

遇到的问题

拖动的时候，鼠标快速闪开，然后再触碰tag，tag会吸附到鼠标上。

解决办法

拖动的mouseup一开始是绑定在tag的class上面的

$(document).on('mousemove', '.js-checked-tag', function(ev) {
  ...
});

$('.js-checked-tag').mouseup(function(ev) {
  $(document).unbind('mousemove');
  ...
})

所以当鼠标快速闪过的时候，就已经脱离了tag这个元素，这个时候哪怕触发了mouseup也无法停止它的move事件。 于是我把mouseup事件绑定在了document上面。

document.onmouseup = function() {
  if (Elstatus == 'draging') {
    $(document).unbind('mousemove');
  }
};

这样就可以完美的解决这个问题啦，当然换成document之后，绑定数据的this也变了，所以mouseup这里的this要重新绑定一下，不然数据会有问题。