可视化拖拽组件库一些技术要点原理分析
可视化拖拽组件库一些技术要点原理分析
本文主要对以下技术要点进行分析：
这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。
这个编辑器的实现思路是：
组件在画布中移动
首先需要将画布设为相对定位 position: relative，然后将每个组件设为绝对定位 position: absolute。除了这一点外，还要通过监听三个事件来进行移动：
插槽，用于放置组件。
复制代码
Shape 组件内部结构：
另外的四个小圆点需要通过计算间接算出来。例如左边中间的小圆点，计算公式为 left: 0, top: height / 2，其他小圆点同理。
" style="border-style: none; width: auto; height: auto; max-width: 100%; margin: 0px; visibility: visible; background-position: 50% center; background-repeat: no-repeat; cursor: zoom-in;">
4. 点击小圆点时，可以进行放大缩小操作。
handleMouseDownOnPoint(point) { const downEvent = window.event downEvent.stopPropagation() downEvent.preventDefault() const pos = { ...this.defaultStyle } const height = Number(pos.height) const width = Number(pos.width) const top = Number(pos.top) const left = Number(pos.left) const startX = downEvent.clientX const startY = downEvent.clientY // 是否需要保存快照 let needSave = false const move = (moveEvent) => { needSave = true const currX = moveEvent.clientX const currY = moveEvent.clientY const disY = currY - startY const disX = currX - startX const hasT = /t/.test(point) const hasB = /b/.test(point) const hasL = /l/.test(point) const hasR = /r/.test(point) const newHeight = height + (hasT? -disY : hasB? disY : 0) const newWidth = width + (hasL? -disX : hasR? disX : 0) pos.height = newHeight > 0? newHeight : 0 pos.width = newWidth > 0? newWidth : 0 pos.left = left + (hasL? disX : 0) pos.top = top + (hasT? disY : 0) this.$store.commit('setShapeStyle', pos) } const up = () => { document.removeEventListener('mousemove', move) document.removeEventListener('mouseup', up) needSave && this.$store.commit('recordSnapshot') } document.addEventListener('mousemove', move) document.addEventListener('mouseup', up) } 复制代码
它的原理是这样的：
吸附的代码大概在 300 行左右，建议自己打开源码文件看（文件路径：src\components\Editor\MarkLine.vue）。这里不贴代码了，主要说说原理是怎么实现的。
标线
在页面上创建 6 条线，分别是三横三竖。这 6 条线的作用是对齐，它们什么时候会出现呢？
复制代码
代码逻辑很简单，就是遍历组件的 style 对象，将每一个属性遍历出来。并且需要根据具体的属性用不同的组件显示出来，例如颜色属性，需要用颜色选择器显示；数值类的属性需要用 type=number 的 input 组件显示等等。
为了方便用户修改属性值，我使用 v-model 将组件和值绑定在一起。
" style="border-style: none; width: auto; height: auto; max-width: 100%; margin: 0px; visibility: visible; background-position: 50% center; background-repeat: no-repeat; cursor: zoom-in;">
9. 预览、保存代码
预览和编辑的渲染原理是一样的，区别是不需要编辑功能。所以只需要将原先渲染组件的代码稍微改一下就可以了。
复制代码
经过刚才的介绍，我们知道 Shape 组件具备了拖拽、放大缩小的功能。现在只需要将 Shape 组件去掉，外面改成套一个普通的 DIV 就可以了（其实不用这个 DIV 也行，但为了绑定事件这个功能，所以需要加上）。
确定 复制代码
选中事件时将事件添加到组件的 events 对象。
触发事件
预览或真正渲染页面时，也需要在每个组件外面套一层 DIV，这样就可以在 DIV 上绑定一个点击事件，点击时触发我们刚才添加的事件。
复制代码
点击动画将调用 addAnimation(animate) 将动画添加到组件的 animations 数组。
触发动画
运行动画的代码：
export default async function runAnimation($el, animations = []) { const play = (animation) => new Promise(resolve => { $el.classList.add(animation.value, 'animated') const removeAnimation = () => { $el.removeEventListener('animationend', removeAnimation) $el.removeEventListener('animationcancel', removeAnimation) $el.classList.remove(animation.value, 'animated') resolve() } $el.addEventListener('animationend', removeAnimation) $el.addEventListener('animationcancel', removeAnimation) }) for (let i = 0, len = animations.length; i < len; i++) { await play(animations[i]) } } 复制代码
运行动画需要两个参数：组件对应的 DOM 元素（在组件使用 this.$el 获取）和它的动画数据 animations。并且需要监听 animationend 事件和 animationcancel 事件：一个是动画结束时触发，一个是动画意外终止时触发。
利用这一点再配合 Promise 一起使用，就可以逐个运行组件的每个动画了。
12. 导入 PSD
由于时间关系，这个功能我还没做。现在简单的描述一下怎么做这个功能。那就是使用 psd.js 库，它可以解析 PSD 文件。
使用 psd 库解析 PSD 文件得出的数据如下：
{ children: [ { type: 'group', visible: false, opacity: 1, blendingMode: 'normal', name: 'Version D', left: 0, right: 900, top: 0, bottom: 600, height: 600, width: 900, children: [ { type: 'layer', visible: true, opacity: 1, blendingMode: 'normal', name: 'Make a change and save.', left: 275, right: 636, top: 435, bottom: 466, height: 31, width: 361, mask: {}, text: { value: 'Make a change and save.', font: { name: 'HelveticaNeue-Light', sizes: [ 33 ], colors: [ [ 85, 96, 110, 255 ] ], alignment: [ 'center' ] }, left: 0, top: 0, right: 0, bottom: 0, transform: { xx: 1, xy: 0, yx: 0, yy: 1, tx: 456, ty: 459 } }, image: {} } ] } ], document: { width: 900, height: 600, resources: { layerComps: [ { id: 692243163, name: 'Version A', capturedInfo: 1 }, { id: 725235304, name: 'Version B', capturedInfo: 1 }, { id: 730932877, name: 'Version C', capturedInfo: 1 } ], guides: [], slices: [] } } } 复制代码
从以上代码可以发现，这些数据和 css 非常像。根据这一点，只需要写一个转换函数，将这些数据转换成我们组件所需的数据，就能实现 PSD 文件转成渲染组件的功能。目前 quark-h5 和 luban-h5 都是这样实现的 PSD 转换功能。
13. 手机模式
由于画布是可以调整大小的，我们可以使用 iphone6 的分辨率来开发手机页面。
这样开发出来的页面也可以在手机下正常浏览，但可能会有样式偏差。因为我自定义的三个组件是没有做适配的，如果你需要开发手机页面，那自定义组件必须使用移动端的 UI 组件库。或者自己开发移动端专用的自定义组件。
总结
由于 DEMO 的代码比较多，所以在讲解每一个功能点时，我只把关键代码贴上来。所以大家会发现 DEMO 的源码和我贴上来的代码会有些区别，请不必在意。
另外，DEMO 的样式也比较简陋，主要是最近事情比较多，没太多时间写好看点，请见谅。
参考资料
- 编辑器
- 自定义组件
- 拖拽
- 删除组件、调整图层层级
- 放大缩小
- 撤消、重做
- 组件属性设置
- 吸附
- 预览、保存代码
- 绑定事件
- 绑定动画
- 导入 PSD
- 手机模式
- 用一个数组 componentData 维护编辑器中的数据。
- 把组件拖拽到画布中时，使用 push() 方法将新的组件数据添加到 componentData。
- 编辑器使用 v-for 指令遍历 componentData，将每个组件逐个渲染到画布（也可以使用 JSX 语法结合 render() 方法代替）。
{{ text }}
- dragstart 事件，在拖拽刚开始时触发。它主要用于将拖拽的组件信息传递给画布。
- drop 事件，在拖拽结束时触发。主要用于接收拖拽的组件信息。
{{ item.label }}
- mousedown 事件，在组件上按下鼠标时，记录组件当前的位置，即 xy 坐标（为了方便讲解，这里使用的坐标轴，实际上 xy 对应的是 css 中的 left 和 top。
- mousemove 事件，每次鼠标移动时，都用当前最新的 xy 坐标减去最开始的 xy 坐标，从而计算出移动距离，再改变组件位置。
- mouseup 事件，鼠标抬起时结束移动。
- 组件的高度 height、宽度 width
- 左上角的小圆点，坐标 left: 0, top: 0
- 右上角的小圆点，坐标 left: width, top: 0
- 左下角的小圆点，坐标 left: 0, top: height
- 右下角的小圆点，坐标 left: width, top: height
- 点击小圆点时，记录点击的坐标 xy。
- 假设我们现在向下拖动，那么 y 坐标就会增大。
- 用新的 y 坐标减去原来的 y 坐标，就可以知道在纵轴方向的移动距离是多少。
- 最后再将移动距离加上原来组件的高度，就可以得出新的组件高度。
- 如果是正数，说明是往下拉，组件的高度在增加。如果是负数，说明是往上拉，组件的高度在减少。
- 新增组件
- 删除组件
- 改变图层层级
- 拖动组件结束时
- 新操作替换当前快照索引后面所有的数据。还是用刚才的数据 [a, b, c, d] 举例，假设现在进行了两次撤销操作，快照索引变为 1，对应的快照数据为 b，如果这时进行了新的操作，对应的快照数据为 e。那 e 会把 cd 顶掉，现在的快照数据为 [a, b, e]。
- 不顶掉数据，在原来的快照中新增一条记录。用刚才的例子举例，e 不会把 cd 顶掉，而是在 cd 之前插入，即快照数据变为 [a, b, e, c, d]。
- 上下方向的两个组件左边、中间、右边对齐时会出现竖线
- 左右方向的两个组件上边、中间、下边对齐时会出现横线
- a 组件在左边不动，我们拖着 b 组件往 a 组件靠近。
- 这时它们最先对齐的是 a 的右边和 b 的左边，所以只需要一条线就够了。
- 如果 ab 组件已经靠近，并且 b 组件继续往左边移动，这时就要判断它们俩的中间是否对齐。
- b 组件继续拖动，这时需要判断 a 组件的左边和 b 组件的右边是否对齐，也是只需要一条线。
- 保存到服务器
- 本地保存
- alert 事件
- redirect 事件
{{ animate.label }}
- ref-line
- quark-h5
- luban-h5
- 易企秀
- drag 事件