0
我創建使用離子框架移動應用程序的特性「路徑」。在這個項目中，我使用Pathfinding.js和Raphael.js庫畫在我的navigation.html頁面的路徑（使用SVG）。RaphaelJS在離子框架：類型錯誤：無法讀取未定義
我的項目結構如下：
WWW
JS（文件夾）
controllers.js（文件）
模板（文件夾）
導航html的（文件）
的index.html（文件）
裏面的index.html，它包含下面的代碼片段：
<script type="text/javascript" src="js/raphael.min.js"></script>
<script type="text/javascript" src="js/pathfinding-browser.min.js"> </script>
<script src="js/controllers.js"></script>
裏面navigation.html，它包含下面的代碼片段：
<div id="draw_area"></div>
在我的controller.js中，我有以下代碼片段：
var paper = Raphael("draw_area", 300, 300);
console.log("paper" + paper)
var grid = new PF.Grid(120, 60);
var finder = new PF.AStarFinder();
var gridBackup = grid.clone();
var path = finder.findPath(0, 0, 2, 2, gridBackup);
var p1;
var pathStyle = {
stroke: 'yellow',
'stroke-width': 3
}
var numRows = 100;
var numCols = 120;
var nodeSize = 10;
var rects = [];
grid.setWalkableAt(1, 0, false);
executeTask();
var nodeColorizeEffect = {
duration: 50
}
function colorizeNode(node, color) {
node.animate({
fill: color
},
this.nodeColorizeEffect.duration);
}
function createRowTask(rowId) {
rects[rowId] = [];
for (j = 0; j < numCols; ++j) {
x = j * nodeSize;
y = rowId * nodeSize;
rect = paper.rect(x, y, nodeSize, nodeSize);
rect.attr("fill", "#f00");
rect.attr("stroke", "#fff");
rects[rowId].push(rect);
}
}
function executeTask() {
tasks = [];
for (i = 0; i < numRows; ++i) {
tasks.push(createRowTask(i));
}
drawPath(path);
}
function setStartEnd() {
var coord = toGridCoordinate(5, 5)
grid = this.grid
var gridX = coord[0]
var gridY = coord[1];
}
function drawPath(path) {
if (!path.length) {
return;
}
var svgPath = buildSvgPath2(path);
this.path = this.paper.path(svgPath).attr(this.pathStyle);
}
/**
* Given a path, build its SVG represention.
*/
function buildSvgPath2(path) {
var i, strs = [],
size = this.nodeSize;
var pathArray = " [ [M," + (path[0][0] * size + size/2) + "," + (path[1][1] * size + size/2) + "]"
for (i = 1; i < path.length; ++i) {
pathArray += ",[L," + (path[i][0] * size + size/2) + "," + (path[i][1] * size + size/2) + "]"
}
pathArray += "];"
console.log(pathArray);
return pathArray;
}
但是，這行代碼中，this.path = this.paper.path（svgPath）.attr（this.pathStyle）;給我一個錯誤，說「TypeError：無法讀取未定義的屬性路徑」。我嘗試了很多方法，但無法解決錯誤。
編輯： 看起來好像變量紙張在navigation.html中找不到id「draw_area」。
任何人都可以告訴我我的代碼有什麼問題嗎？任何幫助將不勝感激。期待你的回答。萬分感謝！