前端实现可视化编辑器，有点类似于一个简单版本的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，其实右侧属性面板和画布区中元素的交互并没有什么难度，都是数据驱动。难点是是针对画布区中的元素进行各种编辑。

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

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

Answer 2

最近 GitHub 连续好几天给我推送了这个项目：huangwei9527/quark-h5。没有深入看它的文档，不知道和题主上面列出的这些项目有多大差异，不过作者在里面贴了一篇掘金文章阐述了其大致理念，从代码量和维护时长来看，这个项目的工程量不算小。

此前开发过一个基于 canvas 的图像编辑模块，其间看了阿里巴巴前端专家黄子毅的一篇文章，我花钱看的，写得比较简明易懂，不过里面说的东西我自己几乎都摸索出来了（此前简书有盗版的，花钱纯数情怀，现在估计搜不到了）。我自己本来也想写一些东西来把我那个编辑器说道说道的，但是耽误了许久，现在那些文章还躺在我的思否草稿列表里吃灰。

手头有本 Erich Gamma 等人编写的 《设计模式》，里面用一个简单的图文编辑器的开发设计思想来说明各种设计模式的实际应用，有重大的参考意义，不过这本书很难啃完。

Answer 3

看看这个https://github.com/MrXujiang/...

Answer 4

这个肯定已经有好的实现啦，比如3D创作领域都可以直接在网页上完成3D建模、贴图等等的。