3

我想使用 Ember.js 和 Fabric.js 构建一个餐厅餐桌管理和地板布局应用程序（如果它们为 Ember 集成提供更好的支持，我也准备考虑其他画布框架）。我已经有一个 Ember 应用程序，它可以管理表列表（即 TablesRoute 来显示表列表，使用 New ans Edit subroutes 等）并将它们读写到 JSON 后端。

我需要在画布上显示表格而不是简单的项目列表。我需要 Fabric 和 Ember 对象之间的双向绑定，即当表格在画布上移动或调整大小时，我需要在 Ember 中更新对象属性，反之亦然，当在 Ember 中更新属性时（通过表单或从后端更新）然后我需要在画布上更改图形表示。

有人可以指出正确的架构方向如何解决这个问题吗？

  • 在哪里初始化 Fabric 画布元素？TablesRoute，应用程序路由？用什么方法？
  • 画布绘制代码放在哪里？到 TablesRoute？表控制器？哪种方法？
  • 我应该为画布创建视图元素吗？查看每个表的元素？
  • 如何解决双向绑定？
  • 有没有类似的示例应用程序？

我很感激我能得到的所有帮助:)

4

1 回答 1

0
  1. 您可以在控制器中初始化 Fabric 画布元素。
  2. 您可以将画布绘制代码放在控制器中。

Note1：我在以下示例代码中使用了 POD 结构。https://www.ludu.co/course/ember

注意2：我通过在我的项目中运行命令'bower install fabric --save'来安装fabric.js。

模板.hbs

<div><button id="drawRect" {{action 'draw'}}>Draw Rect</button></div>
<div><canvas id="test_fabric" width="200" height="200"></canvas></div>

{{outlet}}

控制器.js

import Ember from 'ember';
/* global fabric */
// No import for fabric, it's a global called `fabric`

function drawRect() {
  // create a wrapper around native canvas element (with id="test_fabric")
  var canvas = new fabric.Canvas("test_fabric");

  // create a rectangle object
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20
  });

  // "add" rectangle onto canvas
  canvas.add(rect);
}

export default Ember.Controller.extend({
  actions: {
    draw: function() {
      //
      drawRect();
    }
  }
});

注意：不要忘记通过在模块中添加 /* 全局结构 */ 来让 JSHint 高兴。http://ember-cli.com/user-guide/#managing-dependencies

于 2016-02-06T23:26:43.557 回答