场景：
项目中需要对图片模板上添加矩形与文本等数据，（vue2+element)。
需求：左侧摆放元素库（目前完成文本与正矩形），中间则是画板，右侧为拖动到画板中的元素信息。画板上元素可拖拽，元素相对位置会显示在右侧信息，亦可在右侧手动修改元素信息。可保存与恢复已添加的元素。
解决办法：
计划是寻找三方插件，奈何并未寻找到与项目契合的工具，只能想其他方法。
图片canvas编辑脚本有不少，我查阅了一下，多数推荐为的有fabricjs，konvajs，pixijs等。
他们的各自优劣势，网上也是有很多说法，根据自己的需求来确定，我最后选择konva的原因是他对于图层处理比较好。
效果图：
1.已添加两个元素
2.选中其中一个元素
3.右击图层展开图层菜单，可实现上下移动与删除图层
备注：
以上是我完成的demo，各位也可根据需求修改。还可以添加线条、标签等（文档上有的都有），画板也可拖动与缩放（代码有注释），写的扩展性尚可。
示例图是我项目中的截图，比demo多了一点功能放在下面
// 点击眼睛显示隐藏元素
onToggleShape(id) {
if (!id) return
const { stage } = this.KonvaInstance
const node = stage.find('#' + id)
const visible = node[0].visible()
node[0].visible(!visible)
this.currentShape.visible = !visible
},
// 点击左侧画面元素的列表
onClickLayerShapes(id) {
const { stage, tr } = this.KonvaInstance
tr.nodes([])
const node = stage.find('#' + id)
this.getShapeAttrs(node[0])
tr.nodes(node)
}
