离子框架中的 RaphaelJS：TypeError：无法读取未定义的属性“路径”答案

【问题标题】：RaphaelJS in Ionic Framework: TypeError: Cannot read property 'path' of undefined离子框架中的 RaphaelJS：TypeError：无法读取未定义的属性“路径”
【发布时间】：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”。

谁能告诉我我的代码有什么问题？任何帮助将不胜感激。期待您的回答。非常感谢！

【问题讨论】：

标签： javascript html svg ionic-framework raphael

【解决方案1】：

我今天遇到了这个问题，好消息是我将整个 Raphael JS 库带入了 npm 包。您可以执行“npm install raphael-pkg”，然后将其导入使用。该软件包可通过https://www.npmjs.com/package/raphael-pkg 获得。

谢谢。

【讨论】：