14

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

我正在寻求一些关于哪些框架可用于构建此类前端功能的建议。

我所追求的示例，请参见此处canva.com

到目前为止，我尝试的两个框架是fabric js和greensock draggable，它们不能满足我的需求，或者很难创建一个完整的页面构建器。

理想情况下，我不想为此使用画布。

编辑：基本功能：

  • 裁剪
  • 回转
  • 重新调整大小
  • 更改文本框的字体样式/颜色/大小
  • 添加背景
  • 框架/遮罩图像（方形图像可以变成带有叠加层的星形）
4

5 回答 5

4

你的大部分目标都可以通过 css 2/3 + 一些纯 js 来实现

剪裁/遮罩

http://www.html5rocks.com/en/tutorials/masking/adobe/

重新调整大小，更改文本框的字体样式/颜色/大小，添加背景

纯js/css2

回转

css3 转换属性http://www.w3schools.com/cssref/css3_pr_transform.asp

拖动

可以很容易地完成，使用纯 js 或者你可以尝试一些开源插件，或者像 jquery draggable 之类的东西。

至于您当前的列表，我实际上并没有看到，为什么您需要一些框架来解决这个问题，而其中大部分都可以通过纯 js/css 稍加努力/谷歌搜索来实现。

在我谦虚的观点中，jquery 或类似的东西就是你真正需要的。只需在https://jqueryui.com/draggable/检查 jquery 的“交互”部分，看看它是否可以帮助您构建构建器界面。每个交互都有各种示例（右侧栏）。

UPD：这是给你的一些脏代码示例（使用 jquery UI）http://jsfiddle.net/tbpxnxrm/2/。双击#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：几年后，我的示例在 jsfiddle 上完全停止工作。无法确定为什么，但主要答案仍然是可信的。

于 2016-04-22T06:53:22.323 回答
4

据我了解，您希望创建可配置的仪表板。我建议使用表格结构表格合并和拆分，其中每个单元格都应该有一个可放置的组件，例如

<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>

喜欢

然后在 drop 上写下你自己的逻辑

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

}
});

可拖动组件可以是 TEXT 或 IMAGE 并且在放置时您可以进行任何操作

于 2016-04-22T07:13:30.050 回答
3

我试图在空闲时间实现这一点，但这不是在几个小时后使用纯 js 从头开始​​就能完成的。到目前为止，我有一个 jQuery 插件原型，用于将新的 dom 元素放入页面区域。我也一直在尝试使页面中的任何块组件可调整大小。在我投入的几个小时内，我取得了一些成功。

可调整大小的块组件：（编辑：拖动两侧中间的 4 个小手柄）

小提琴

带有菜单和可放置区域的页面构建器原型（只能放置文本项）：

小提琴

每当我开始工作时，我都会不断更新小提琴，但我不会很快有一个完成的插件。

Too much code to put here! Visit the fiddle
于 2016-04-22T17:15:16.013 回答
2

有一个有用的 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>

这应该有效。

于 2016-04-21T15:01:49.083 回答
2

如果您的目标是使其尽可能简单，我认为您不能仅使用一个框架来做到这一点。

如果我理解得很好，您想要做的是允许您的应用程序的用户直接在浏览器中制作某种高级“绘图”。

第一：没有画布元素，他们的作品将不得不在服务器端导出/生成。

现在，最好的方法是拥有一个表示每个文档及其内容的 javascript 对象，其中包含模型和每个属性，如位置、旋转描述。并且这个对象应该被渲染使css属性和html元素对应于对象结构。也就是说，AngularJS将是我的首选，因为它几乎会自动监视您的模型并在您修改对象后立即实时渲染目标元素。（Angular 2 更好，但仅记录在 TypeScript 和 Dart 中）

从这里开始，使用 html5 和 css3，可以使用一个不错的属性来操作元素：transform。它采用“translateX(10px)”或“rotateZ(10deg)”之类的值。要了解更多信息：http ://www.w3schools.com/cssref/css3_pr_transform.asp 。

另外，对于拖放的东西：http ://www.w3schools.com/html/html5_draganddrop.asp 。

要裁剪图像，您应该使用服务器端代码。（以 php 为例：http: //php.net/manual/fr/function.imagecrop.php）

要在图像上使用蒙版，还有一些效果很好的 css3 属性：http: //www.w3schools.com/cssref/pr_pos_clip.asp

对于您的应用程序和服务器之间的通信，请使用 jQuery 函数： http ://api.jquery.com/category/ajax/ 。

最后，从 css3 中选择你想要的：http: //www.w3schools.com/css/css3_intro.asp。 http://www.w3schools.com/css/css3_images.asp

我希望它会帮助你。祝你好运 ！

更新：我发现剪辑 css 属性已过时，现在它是剪辑路径，但它的工作方式大致相同。

更新 2：实际上，可以通过 mask css 属性制作遮罩（带有图像而不是路径）：https ://developer.mozilla.org/en-US/docs/Web/CSS/mask 。但要小心，它仍然部分支持http://caniuse.com/#search=mask。

于 2016-04-22T17:02:53.857 回答