RaphaelJS в Ionic Framework: TypeError: Не удается прочитать свойство «путь» неопределенного

Question

Я создаю мобильные приложения с использованием Ionic Framework. В этом проекте я использую Pathfinding.js и библиотеку Raphael.js для рисования пути (используя svg) на моей странице navigation.html.

Моя структура проекта выглядит следующим образом:

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> 

В моем контроллере.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: Невозможно прочитать свойство« путь неопределенного ». Я пробовал много способов, но не смог решить эту ошибку.

EDIT: Похоже переменной бумаги не может найти идентификатор «draw_area» на navigation.html.

Может кто-нибудь, пожалуйста, скажите мне, что не так с моим кодом? Любая помощь будет оценена по достоинству. Ждем вашего ответа. Благодаря тонну!

Answer 1

Сегодня я столкнулся с этой проблемой, и хорошо, что я принес всю библиотеку Raphael JS в пакет npm. Вы можете сделать «npm install raphael-pkg», а затем импортировать его для использования. Пакет доступен по телефону https://www.npmjs.com/package/raphael-pkg.

Спасибо.