javascript拖放页面生成器
我正在构建一个A4大小的拖放页面生成器。此生成器可以包含的元素是图像和文本框。
我想得到一些关于可以用来构建这种前端功能的框架的建议。
我想要的例子，参见这里的canva.com
到目前为止，我尝试过的两个框架是fabric js和greensock draggable，它们不能满足我的需要，或者很难创建一个完整的页面生成器。
理想情况下，我不想为此使用画布。
编辑:基本功能：
- 种植
- 旋转
- 重新上浆
- 更改文本框的字体样式/颜色/大小
- 添加背景
- 帧/掩蔽图像(方形图像可以通过叠加变成星型)
回答 5
Stack Overflow用户
发布于 2016-04-22 06:53:22
大多数目标都可以通过css 2/3 +一些纯js来实现。
剪裁/掩蔽
http://www.html5rocks.com/en/tutorials/masking/adobe/
调整大小，更改文本框的字体样式/颜色/大小，添加背景
纯js/css2 2
旋转
css3变换性质transform.asp
拖拽
可以很容易地使用纯js，或者您可以尝试一些开源插件，或者像jquery这样的可拖式插件。
至于您当前的列表，我看不出来，为什么您需要这样的框架，因为大多数框架可以通过简单的js/css来实现，只需一点努力/googling就可以实现。
在我简陋的opininon中，jquery或类似的东西才是您真正需要的。只需查看jquery在这里的“交互”部分，https://jqueryui.com/draggable/，看看它是否可以帮助您构建构建器界面。每个交互都有不同的例子(右边栏)。
UPD:下面是一些http://jsfiddle.net/tbpxnxrm/2/的脏代码示例(使用jquery )。在#main中双击创建其他元素。没有实现从http://jsfiddle.net/4Vfm5/1095/分叉的碰撞/重叠检查
drag_defaults = {grid: [50,50], containment: "parent"};
resize_defaults = {
aspectRatio: true,
handles: 'ne, se, sw, nw',
grid: [50,50],
minHeight: 50,
minWidth: 50
}
$('.draggable').draggable(drag_defaults);
$('.resizable').resizable(resize_defaults);UPD2:几年后，我的例子完全停止了。虽然不能确定原因，但主要的答案仍然是可信的。
Stack Overflow用户
发布于 2016-04-22 07:13:30
据我理解，您希望创建可以配置的仪表板。我建议使用一个表结构表合并与拆分，其中每个单元格应该有一个可下拉的组件，如
<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>喜欢
然后放下写你自己的逻辑
$( ".set-as-droppable" ).droppable({
accept: "div.Dragable",
drop: function( event, ui ) {
}
}); 可拖放组件可以是文本或图像，在拖放时，您可以进行任何操作。
https://stackoverflow.com/questions/35046579
复制相似问题
腾讯云开发者
