0
Ionic Frameworkを使用してモバイルAppsを作成しています。このプロジェクトでは、Pathfinding.jsとRaphael.jsライブラリを使用して、navigation.htmlページにパス（svgを使用）を描画しています。Ionic FrameworkのRaphaelJS：TypeError：未定義のプロパティ 'path'を読み取ることができません
マイプロジェクトの構造は次のようになります。
WWW
JS（フォルダ）
controllers.js（ファイル）
テンプレート（フォルダ）
ナビゲーション.html（ファイル）
の
のindex.html（ファイル）
index.htmlの内部に、それは次のコードスニペット含まれていますnavigation.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>
を、それが次のコードスニペットが含まれています
<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：未定義のプロパティ 'path'を読み取れません"というエラーが表示されます。私は多くの方法を試しましたが、エラーを解決できませんでした。
編集： 可変用紙がnavigation.htmlにid "draw_area"を見つけられないようです。
誰でも私のコードに間違いがあると教えてください。どんな助けもありがとう。お返事をお待ちしています。ありがとう、トン！