p5.js loadXML()用法及代碼示例

loadXML()函數用於讀取文件或URL的內容，並將其作為XML對象返回。該文件必須存在於草圖目錄中才能訪問。此方法可用於支持最大64MB的文件。

該函數是異步的，因此建議在preload()函數中調用該函數，以確保該函數先於其他函數執行。

用法:

loadXML(filename, callback, errorCallback )

參數：此函數接受上述和以下所述的三個參數：

filename:這是一個字符串，表示必須從中加載XML數據的文件路徑或URL。
callback:當該函數成功執行時，將調用此函數。此函數的第一個參數是從文件加載的XML數據。它是一個可選參數。
errorCallback:如果執行該函數時有任何錯誤，則調用該函數。此函數的第一個參數是錯誤響應。它是一個可選參數。

以下示例說明了p5.js中的loadXML()函數：

範例1：

/* == Contents of books.xml == 
  
<book> 
    <name>The Adventures of Sherlock Holmes:Part One</name> 
    <author>Arthur Conan Doyle</author> 
    <price>323</price> 
    <genre>Detective fiction</genre> 
</book> 
  
*/
  
let loadedXML = null; 
  
function setup() { 
  createCanvas(500, 200); 
  textSize(22); 
  
  text("Click on the button below to "
       + "load XML from file", 20, 20); 
  
  // Create a button for loading the XML 
  loadBtn = createButton("Load XML from file"); 
  loadBtn.position(30, 50) 
  loadBtn.mousePressed(loadXMLFile); 
} 
  
function loadXMLFile() { 
  
  // Load the XML from file 
  loadedXML = loadXML('books.xml', onFileload); 
} 
  
function onFileload() { 
  text("XML loaded successfully...", 30, 100); 
  let book = loadedXML.getChildren(); 
    
  // Get the content of the tags 
  let name = book[0].getContent(); 
  let author = book[1].getContent(); 
  let price = book[2].getContent(); 
  let genre = book[3].getContent(); 
  
  text("Name:" + name, 30, 140); 
  text("Author:" + author, 30, 160); 
  text("Price:" + price, 30, 180); 
  text("Genre:" + genre, 30, 200); 
}

輸出：
load-xml-books

範例2：

/* == Contents of movies.xml == 
  
<movies> 
    <movie year="1972" director="Francis Ford Coppola"> 
        The Godfather 
    </movie> 
    <movie year="1939" director="Victor Fleming"> 
        The Wizard of Oz 
    </movie> 
    <movie year="1941" director="Orson Welles"> 
        Citizen Kane 
    </movie> 
</movies> 
  
*/
  
let loadedXML = null; 
  
function setup() { 
  createCanvas(500, 450); 
  textSize(22); 
  
  text("Click on the button below to "
        + "load XML from file", 20, 20); 
  
  // Create a button for loading the XML 
  loadBtn = createButton("Load XML from file"); 
  loadBtn.position(30, 50) 
  loadBtn.mousePressed(loadXMLFile); 
} 
  
function loadXMLFile() { 
  
  // Load the XML from file 
  loadedXML = loadXML('movies.xml', onFileload); 
} 
  
function onFileload() { 
  
  // Get the children with the "movie" tag 
  let children = loadedXML.getChildren('movie'); 
  
  for (let i = 0; i < children.length; i++) { 
  
    // Get the content of the tag 
    let name = children[i].getContent(); 
  
    // Get a numerical attribute 
    let year = children[i].getNum('year'); 
  
    // Get a string attribute 
    let director = children[i].getString('director'); 
  
    text("Name:" + name, 30, 100 + i * 80); 
    text("Year:" + year, 30, 120 + i * 80); 
    text("Director:" + director, 30, 140 + i * 80); 
  } 
}

輸出：
load-xml-movies

在線編輯： https://editor.p5js.org/

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

參考： https://p5js.org/reference/#/p5/loadXML

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | loadXML() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。