p5.js | drop()函数

drop()函数是一个内置函数，用于注册一个回调函数，每次加载后将文件拖放到元素上时都会调用该回调函数。每个删除的文件都被加载到内存中，并将其作为 p5.File 对象传递给回调函数。当多个文件同时删除时，它将显示对回调函数的多次调用。

此函数需要 p5.dom 库。因此，在index.html文件的 head 部分添加以下行。

句法：

drop( callback, fxn )

参数：该函数接受上面提到的两个参数，如下所述：

• 回调：此参数用于保存每个文件放置调用的加载文件。
• fxn：当文件被drop事件触发时触发回调函数时使用该参数。

以下示例说明了 p5.js 中的 drop()函数：

示例 1：

function setup() {  
     
    // Create Canvas of given size 
     var cvs = createCanvas(400, 300);
      
    // Set the background color
    background('red');
    
    // Set the text position
    textAlign(CENTER);
      
    // Set the font size
    textSize(24);
      
    // Set the text color
    fill('white');
      
    // Display the text on the screen
    text('Drop file from device', width / 2, height / 2);
      
    // Function to drop the file
    cvs.drop(gotFile);
}
  
function gotFile(file) {
    
  // Set the background color
  background('green');
    
  // Display the text on the screen
  text('Received file name with extension:', width / 2, height / 2);
    
  // Drop file with given position
  text(file.name, width / 2, height / 2 + 50);
}

输出：

• 删除文件之前：
  
• 删除文件后：
  

示例 2：

var img;
  
function setup() {  
     
    // Create Canvas of given size 
     var cvs = createCanvas(600, 400);
      
    // Set the background color
    background('red');
    
    // Set the text position
    textAlign(CENTER);
      
    // Set the font size
    textSize(24);
      
    // Set the text color
    fill('white');
      
    // Display the text on the screen
    text('Drop file from device', width / 2, height / 2);
      
    // Function to drop the file
    cvs.drop(gotFile);
}
  
function draw() {
  if (img) {
    image(img, 0, 0, width, height);
  }
}
  
function gotFile(file) {
  img = createImg(file.data).hide();
}

输出：

• 删除文件之前：
  
• 删除文件后：