如何在AngularJS项目中调用控制器数据供Two.JS绘图使用？

你现在遇到的核心问题有两个：一是Angular模块不统一，draw.js里新建了myApp模块，但你的数据是在SeatingApp模块的控制器里，两者完全独立，自然拿不到数据；二是数据加载时机不对，tableDAO.query()是异步请求，draw.js执行的时候数据可能还没从数据库返回，就算拿到了模块也不对，肯定画不了。

给你一个简单直接的修改方案，不用额外加复杂的东西，直接在现有的控制器里处理Two.js的绘图逻辑：

步骤1：修改getData.js，在TableController里加入绘图逻辑 #

把Two.js的初始化和绘图代码移到TableController里，这样就能直接访问到异步加载的tablelist数据，而且要等数据加载完成后再执行绘图：

"use strict";
var app = angular.module('SeatingApp', ['ngResource', 'ngStorage']);

app.factory('chairDAO', function ($resource){
  return $resource('/api/chair/:chairid');
});

app.factory('tableDAO', function ($resource){
  return $resource('/api/tables/:tableid');
});

app.controller('TableController', function(tableDAO, chairDAO, $scope){
  var vm = this;
  // 等待tablelist数据加载完成后再执行绘图
  vm.tablelist = tableDAO.query(function() {
    initTwoJsDrawing(vm.tablelist);
  });
  vm.chairslist = chairDAO.query();
  $scope.tablelist = vm.tablelist;
  $scope.chairslist = vm.chairslist;
});

// 单独抽离绘图函数，让代码更清晰
function initTwoJsDrawing(tableData) {
  var elem = document.getElementById("tablesnchairs");
  var two = new Two({
    type: Two.Types.canvas,
    fullscreen: false
  }).appendTo(elem);
  
  // 遍历数据绘制桌椅（这里用矩形示例）
  tableData.forEach(function(table) {
    // 注意：如果地图有固定尺寸，可能需要调整坐标比例适配画布
    two.makeRectangle(table.xco, table.yco, 5, 5);
  });
  
  two.update();
}

步骤2：调整HTML结构，移除独立的draw.js调用 #

原来的HTML里直接在div中引入draw.js的方式不合理，现在绘图逻辑已经整合到控制器里，只需要确保容器和脚本加载顺序正确：

<div id="map">
  <img src="images/map.png" id="mapimg">
</div>
<div id="tablesnchairs"></div>
<table id="test" ng-controller="TableController as tblCtrl">
  <tr ng-repeat="table in tblCtrl.tablelist">
    <td>{{table.xco}}</td>
    <td>{{table.yco}}</td>
  </tr>
</table>

<!-- 确保依赖脚本的加载顺序 -->
<script src="path/to/angular.js"></script>
<script src="path/to/angular-resource.js"></script>
<script src="path/to/angular-storage.js"></script>
<script src="path/to/two.js"></script>
<script src="js/getData.js"></script>

额外注意事项 #

• 坐标适配：如果你的地图图片有固定宽高，数据库返回的x/y坐标可能需要乘以比例系数，才能对应到canvas上的正确位置（比如地图宽800px，数据库x范围0-100，就需要乘以8）。
• 异步数据处理：用tableDAO.query()的回调函数确保数据加载完成后再绘图，避免因异步请求未完成导致的空数据问题。
• 模块统一：整个应用只使用SeatingApp这一个模块，不要随意新建模块，否则控制器、服务无法共享数据。

这样修改后，你就能顺利从数据库获取坐标，并用Two.js在地图上绘制桌椅了。

内容的提问来源于stack exchange，提问作者m nwl