将Ember.js与Fabric.js这样的画布库集成在一起的正确方法是什么

What is correct way to integrate Ember.js with canvas library like Fabric.js?

本文关键字：js 在一起 集成 是什么 方法 布库 Fabric Ember      更新时间：2023-09-26

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

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

有人能指出正确的体系结构方向吗？如何解决这个问题？

  • 在哪里初始化Fabric画布元素？表格路由，应用程序路由？用哪种方法
  • 画布绘图代码放在哪里？到桌子的路线？TableController？哪种方法
  • 我应该为画布创建View元素吗？是否查看每个表的元素
  • 如何解决双向绑定
  • 有类似的示例应用程序吗

我很感激在这方面能得到的所有帮助：）

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

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

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

template.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-依赖

相关文章：