javascript拖放页面生成器

我正在构建一个A4大小的拖放页面生成器。 此生成器可以包含的元素是图像和文本框

我希望得到一些关于哪些框架可用于构建此类前端功能的建议

我想要的示例，请参见这里的

canva.com

到目前为止，我尝试的两个框架是

fabric js

和

greensock draggable

，它们不能满足我的需求，或者很难创建一个完整的页面生成器

理想情况下，我不想使用canvas进行此操作

编辑： 基本特征：

• 种植
• 轮换
• 重新调整尺寸
• 更改文本框的字体样式/颜色/大小
• 添加背景
• 帧/遮罩图像（方形图像可以通过叠加变成星形）

---

有一个有用的jquery旋转插件。。 您的代码：

<div id="product">

<img src="images/01.jpg" />

<img src="images/02.jpg" />

<img src="images/03.jpg" />

<img src="images/04.jpg" />

<img src="images/05.jpg" />

</div>
<script type="text/javascript">

jQuery(document).ready(function() {

    jQuery('#product').j360();

});

</script>

jQuery（文档）.ready（函数（）{
jQuery（“#产品”）.j360（）；
});

---

这应该行得通。
您的大多数目标都可以通过css 2/3+一些纯js实现
剪辑/掩蔽
重新调整大小，更改文本框的字体样式/颜色/大小，添加背景
纯js/css2
轮换
css3变换属性
拖拉
使用纯js或者您可以尝试一些开源插件，或者像jquery Dragable之类的东西，都可以很容易地完成
至于您当前的列表，我不明白，为什么您需要一些框架来实现它，而大多数都可以通过纯js/css通过一点努力/谷歌搜索来实现
在我谦逊的观点中，jquery或类似的东西是您真正需要的。只需查看jquery的“交互”部分，看看它是否可以帮助您构建构建器界面。每个交互都有不同的示例（右侧边栏）
UPD： 下面是一些脏代码示例（使用jqueryui）。双击

#main

以创建其他元素。未执行冲突/重叠检查，从

---

UPD2：几年后，我的示例在JSFIDLE上完全停止工作。无法确定原因，但主要答案仍然可信。
据我所知，您希望创建可配置的仪表板。 我建议使用一个表结构，其中每个单元格都应该有一个可删除的组件，如

<table id="mainTable">
                    <tbody>
                        <tr>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                        </tr>
                        <tr>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                        </tr>
                    </tbody>
                </table>

---

可拖动组件可以是文本或图像，在拖放时，您可以执行任何操作
我认为，如果您的目标是使其尽可能简单，那么仅使用一个框架是无法做到这一点的
如果我理解的很好，你想做的是允许你的应用程序的用户直接在浏览器中绘制某种高级“绘图”
第一：如果没有canvas元素，他们的作品必须在服务器端导出/生成
现在，最好的方法是使用一个javascript对象来表示每个文档及其内容，包括模型，并描述每个属性，如位置、旋转。这个对象应该被呈现，使css属性和html元素对应于对象结构。也就是说，AngularJS将是我的首选，因为它几乎自动监视您的模型，并在修改对象后立即实时渲染目标元素。（Angular 2更好，但仅记录在TypeScript和Dart中）
从这里开始，使用html5和css3，元素可以通过一个很好的属性进行操作：转换。它采用“translateX（10px）”或“rotateZ（10deg）”之类的值。 要了解有关它的详细信息：
另外，对于拖放内容：
要裁剪图像，应使用服务器端代码。（php示例：）
要在图像上使用遮罩，还可以使用css3属性：
对于应用程序和服务器之间的通信，请使用jQuery功能：
最后，从css3中选择您想要的内容：。
我希望这对你有帮助。祝你好运
更新：我发现clip-css属性已经过时，现在它是clip-path，但工作方式大致相同

---

更新2：实际上，可以通过掩码css属性制作掩码（带有图像而不是路径）。但要小心，它仍然部分受支持。
我试图在空闲时间实现这一点，但这不是在几个小时后使用纯js就可以从头开始实现的。到目前为止，我有一个jQuery插件原型，用于将新的dom元素放入页面区域。我还一直在尝试使页面中的任何块组件都可以调整大小。在我投入的几个小时里，我取得了一些成功

ResiZable块组件：（编辑：拖动中间的4个小句柄）

具有菜单和可拖放区域的页面生成器原型（只能拖放文本项）：
我会不断更新小提琴每当我开始工作，但我不会有一个完成插件很快

Too much code to put here! Visit the fiddle

---

您可以使用html5拖放api编写自己的模块。通常，这样的解决方案是定制的，以满足最终用户设置的规范。如果您想要stackoverflow的可能解决方案，您可以启动一个悬赏。@malinkody感谢您的评论，是的，我回到了jquery ui，我可能可以使用jquery编写代码，并将每个页面元素存储在json对象数组中。还是早期。我有很大的兴趣，因为我的公司开始重新设计他们的PDF模板界面之一。如果您能更精确地定义您的需求，我可以在下个周末开始一个基本的实现。例如，您是否只需要图像和文本框？它们是否应该进行旋转、重新调整大小、缩放等。？边界框应该是什么样的？（如fabric js？）您希望如何导出信息？导出的模板是否需要符合标准？它应该支持层吗？（例如，在图像处理器中）谢谢

$( ".set-as-droppable" ).droppable({
        accept: "div.Dragable",
        drop: function( event, ui ) {

}
}); 

Too much code to put here! Visit the fiddle