javascript - 所见即所得 - 将小部件从工具栏拖放到 Canvas 中

Question

我正在尝试创建一个基于 Web 的 WYSIWYG 编辑器，它由一个 Canvas 和一个带有小部件的工具栏组成，例如文本对象、形状对象、线条对象、图像对象、视频对象和照片库对象。人们可以从工具栏中单击并拖动对象并将它们放入 Canvas 区域。一旦放置在 Canvas 中，他们就可以更改对象的属性。他们可以更改的属性有宽度、高度、颜色、z-index 等......

有谁知道是否有现成的解决方案可供我使用和自定义？如果不是，那么我应该了解哪些库和技术才能从头开始构建它？

我主要是一名后端开发人员，所以我没有跟上 HTML5 和 CSS3 带来的所有新事物的速度，所以不确定它们是否与我需要做的事情相关。

Answer 1

我们 (@work) 与帕多瓦大学(意大利 - 软件工程类(class))启动了一项研究项目，旨在获得网页生成器。这是一个所见即所得，您可以将小部件从工具栏拖放到 Canvas 中 :) 不幸的是，UI 是意大利语，但代码非常好。

这是一个开源项目，你可以看看@source。

使用过的技术有:

• HTML5(<canvas> 可轻松表示形状并轻松放大/缩小)
• javascript/jQuery
• PHP(用于保存/加载模板的后端脚本)

引用文献:http://sketchyoursite.sourceforge.net/ (http://sourceforge.net/projects/sketchyoursite/)

编辑:另一个可能有用的工具是 https://gomockingbird.com/mockingbird/

关于从头开始，我建议你使用以下架构/技术:

• HTML+css obv 用于基本布局(小部件工具栏、 Canvas 区域...)
• 大量的 JS 来表示每个不同的对象。 IE。您可以将特定的小部件映射到具有某些属性的纯 JS 对象。当您单击 Canvas 区域内的对象时，将呈现这些 Prop 。当您想在区域内拖动对象、调整其大小等时，您应该使用 js 库(就个人而言，我更喜欢 mootools ，因为它通过 Class 系统简化了 OO)。
• 用于保存(XML、Json..DB？)和加载的服务器端脚本(Php、ruby、java...)。