离子框架中的 RaphaelJS:TypeError:无法读取未定义的属性“路径”
Posted
技术标签:
【中文标题】离子框架中的 RaphaelJS:TypeError:无法读取未定义的属性“路径”【英文标题】:RaphaelJS in Ionic Framework: TypeError: Cannot read property 'path' of undefined 【发布时间】:2017-06-09 02:20:35 【问题描述】:我正在使用 Ionic 框架创建移动应用程序。在这个项目中,我使用 Pathfinding.js 和 Raphael.js 库在我的 navigation.html 页面中绘制路径(使用 svg)。
我的项目结构如下:
www
js(文件夹)
controllers.js(文件)
模板(文件夹)
navigation.html(文件)
index.html(文件)
在index.html里面,包含如下代码sn-p:
<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中,包含如下代码sn-p:
<div id="draw_area"></div>
在我的 controller.js 中,我有以下代码 sn-p:
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:无法读取未定义的属性'路径'”。我尝试了很多方法,但无法解决错误。
编辑: 似乎变量 paper 在 navigation.html 上找不到 id“draw_area”。
谁能告诉我我的代码有什么问题?任何帮助将不胜感激。期待您的回答。非常感谢!
【问题讨论】:
【参考方案1】:我今天遇到了这个问题,好消息是我将整个 Raphael JS 库带入了 npm 包。您可以执行“npm install raphael-pkg”,然后将其导入使用。该软件包可通过https://www.npmjs.com/package/raphael-pkg 获得。
谢谢。
【讨论】:
以上是关于离子框架中的 RaphaelJS:TypeError:无法读取未定义的属性“路径”的主要内容,如果未能解决你的问题,请参考以下文章