將Ember.js與Fabric.js等畫布庫集成的正確方法是什麼？

我想用Ember.js和Fabric.js構建一個餐廳餐桌管理和樓層佈局應用程序（如果它們提供對Ember集成的更好支持，我準備考慮其他的canvas框架）。我已經有了一個Ember應用程序，可以管理一個表列表（例如TablesRoute以顯示錶列表，使用New ans編輯子路由等），並將它們寫入JSON後端。將Ember.js與Fabric.js等畫布庫集成的正確方法是什麼？

我需要在畫布上顯示錶格而不是簡單的項目列表。我需要在Fabric和Ember對象之間進行雙向綁定，即當表格在畫布上移動或調整大小時，我需要在Ember中更新對象屬性，在Ember中更新屬性時（通過表單或從後端更新），則需要I需要在畫布上更改圖形表示。

有人可以指出正確的架構方向如何解決這個問題嗎？

何處初始化Fabric畫布元素？ TablesRoute，應用程序路線？在哪個方法？
哪裏可以放上帆布畫圖代碼？到TablesRoute？ TableController？哪種方法？
我應該爲畫布創建視圖元素嗎？查看每個表的元素？
如何解決雙向綁定？
任何類似的應用程序在那裏？

我感謝所有幫助我能在這個:)

來源

2013-08-02 jaaksarv

你最終搞清楚了嗎？我正在研究類似的東西，並可以使用一些指導。 – Poyi

我最終爲此創建了Ember組件。組件包含使用組件時從Handlebars模板傳遞的表的數組。組件還包含中介類的數組。介體類是具有兩個屬性的Ember對象：Ember Table對象和Fabric Table對象。中保類也包含灰燼表觀察家認爲更新布表對象和結構表對象的事件偵聽器更新灰燼表對象。通過這種方式，Ember和Fabric之間的所有通信都很好地被抽象爲獨立的類。 – jaaksarv

織物表對象和中介對象將自動在組件內部通過觀察表陣列中的變化所造成。也許不是最好的解決方案，但我試圖儘可能多地分離Fabric ja Ember代碼，並將同步內容保存在一個地方（在Mediator中）。不幸的是我不能提供確切的代碼，因爲它是在NDA下。 – jaaksarv

可以初始化控制器的面料canvas元素。
您可以將畫布繪圖代碼放入控制器中。

注1：我使用的POD結構在下面的示例代碼。 https://www.ludu.co/course/ember

注2：我通過運行命令安裝fabric.js「涼亭安裝布--save」在我的項目。

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

來源

2016-02-06 23:26:43 Calvin

將Ember.js與Fabric.js等畫布庫集成的正確方法是什麼？

回答

相關問題