icon_tool 组件

功能：

左边编辑区（画布），右边图标区（工具栏）； 从工具栏拖拽图标至画布，画布区域图标可以旋转、拉伸、拖拽； 有 ctrl+z(command+z)撤销功能； 新创建的图标会覆盖原先创建的图标，但是图标空隙部份是透明的，效果不明显。

用法：

通过 Vue.use()安装组件

import icon_tool from "icon_tool"
Vue.use(icon_tool)

图标则需要引入自定义的图标 css 文件，将图标类形成数组以 iconList 参数传给 IconTool 组件。

注意 组件使用到了 element-ui 的部分图标，需要引入 element-ui 的样式库，否则会导致图标的显示错误。 如果你安装了 element-ui 组件库，则需要：

import "element-ui/lib/theme-chalk/index.css"

本组件也上传了 element-ui 的图标样式库，如果你未安装 element-ui 组件库，则可以：

import "icon_tool/lib/icon.css"

属性：

IconTool 标签

整合画布和工具栏，具有完整功能。

参数

插槽

| 名称 | 说明 | | ---- | ---------------------- | | menu | 工具栏中的自定义菜单栏 |

IconList 标签

工具栏。

参数

| 名称 | 是否必要 | 类型 | 默认值 | 说明 | | -------- | -------- | ------ | ------ | ---------------------------- | | array | true | Array | / | 图标类数组 | | iconSize | false | Number | 50 | 图标大小，单位为 px，最小 16 |

事件

| 名称 | 说明 | 回调参数 | | ------- | -------------------- | ------------------------------------------------------------------------------------------ | | dragEnd | 拖拽结束时触发的函数 | 两个参数，第一个是一个 String，为拖动的图标名；第二个是一个 Object，为拖动结束时鼠标的坐标 |

SingleIcon 标签

画布中单个图标，有旋转、缩放、拖拽的功能。

参数

| 名称 | 是否必要 | 类型 | 默认值 | 说明 | | -------- | -------- | -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------- | | iconInfo | true | Object | / | 图标信息，需要 id、name（类名）、isFocus（用于选中图标）、location（图标中心的位置）。 | | border | false | Object/DOMRect | {left: 0,top: 0,right: 1920,bottom: 1080,} | 图标能够操作的边界 | | iconSize | false | Number | 70 | 图标大小，单位为 px，注意要在原图标大小上加 20 | | zoom | false | Boolean | true | 开启图标缩放功能 | | spin | false | Boolean | true | 开启旋转功能 |

事件

| 名称 | 说明 | 回调参数 | | ------ | ------------------------------------------ | -------------------------- | | delete | 点击删除按钮、点击键盘 delete 或退格键触发 | Object，记录删除前图标状态 | | change | 旋转、缩放、拖动开始时触发 | Object，记录操作变更前状态 |

问题：

现发现撤销功能可能与浏览器快捷键冲突（mac 端） 工具栏放左边时可能有拖动的动画 bug，但是不妨碍功能的正常使用