前端实现可视化编辑器，有点类似于一个简单版本的photoshop，求插件或者实现思路。具体描述如下

Question

现在要做一个前端可视化编辑器，如图所示，

按钮区域（顶部的）点击每个按钮，都会在下边的 画布区域（中间的）添加一个图层，比如文字图层，图片图层，或者是时间图层等等。

点击上边的每个图层，会出现右侧区域（属性编辑区域），并且图层上上下左右有可以拖动改变大小的点。比如就像 vue-drag-resize这样的插件

拖动四周可以改变大小。

基本的功能就是这样。搜索了一些答案，觉得不是很符合要求，比如
https://github.com/jaweii/Vue-Layout

?https://github.com/L-Chris/vue-design

?https://github.com/fireyy/vue-page-designer

?https://github.com/OXOYO/X-Page-Editor-Vue

觉得不太合适，想请问下各路好汉，有没有更合适的插件或者是实现这种插件的思路呢？？

Answer 1

前端可视化编辑器，我见过的，有以下几种方案

• 一是类似Google幻灯片那样，画布编辑区中的元素全用SVG做，可以对SVG元素进行路径编辑。
• 二是画布编辑区中的元素就是div之类的DOM元素。
• 三是画布区中放canvas。

如果你的项目对页面性能和功能要求不高，那么我觉得普通的DOM元素即可，方便你对DOM元素进行各种操作。
因为用了vue，其实右侧属性面板和画布区中元素的交互并没有什么难度，都是数据驱动。难点是是针对画布区中的元素进行各种编辑。

你要维护一份画布区中各个图层的层级关系（比如新拖入的元素一定是在最上层），也需要考虑是否有框选功能，是否有快捷键功能，元素是否有旋转功能等等，这些是需要根据你的实际需求去考虑的。

所以要做一个完整的编辑器，现成的插件是很难满足一个新项目的需求的，顶多其中某些组件或者部分算法你需要用其他已经实现过的案例来做。