离子框架中的 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:无法读取未定义的属性“路径”的主要内容,如果未能解决你的问题,请参考以下文章

离子框架中的移动应用程序

离子框架中的陷阱锚 HREF

在离子框架v3中重定向到其他页面

sh 知道离子框架(离子角度)版本使用。

如何获取离子框架的版本?

RaphaelJS 条带化成 SVG