javascript - 将 Ember.js 与 Fabric.js 等 Canvas 库集成的正确方法是什么？

Question

我想使用 Ember.js 和 Fabric.js 构建一个餐厅餐 table 管理和楼层布局应用程序(如果其他 Canvas 框架为 Ember 集成提供更好的支持，我也准备考虑它们)。我已经有一个 Ember 应用程序，可以管理表列表(即 TablesRoute 显示表列表，使用 New 和 Edit 子路由等)并将它们读取和写入到 JSON 后端。

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

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

• 在哪里初始化 Fabric Canvas 元素？表路由、应用程序路由？用什么方法？
• Canvas 绘制代码放在哪里？到表路由？表 Controller ？哪种方法？
• 我应该为 Canvas 创建 View 元素吗？查看每个表的元素？
• 如何解决双向绑定(bind)？
• 有类似的示例应用程序吗？

非常感谢我能得到的所有帮助:)

Answer 1

1. 您可以在 Controller 中初始化 Fabric Canvas 元素。
2. 您可以将 Canvas 绘制代码放入 Controller 中。

注1:我在以下示例代码中使用了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}}

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