p5.js | drop()函数

在p5.js中，drop()函数是一个用于在浏览器窗口中拖放文件的特殊函数。该函数用于向p5代码中添加拖放功能，以便将文件拖到浏览器窗口中来处理。

语法

function drop( handler );

• handler: 指定要调用的函数，该函数将处理在浏览器窗口中的拖放文件。

示例

下面是一个基本的示例，演示如何使用drop()函数来处理浏览器窗口中的拖放文件：

function setup() {
  createCanvas(400, 400);

  // 注册拖放文件的回调函数
  drop(fileDropped);
}

function draw() {
  background(220);
}

function fileDropped(file) {
  // 将拖放文件加载为p5.js图像
  let img = createImg(file.data).hide();
  img.size(200, 200);
  image(img, 0, 0, width, height);
}

在上面的代码中，我们在setup()函数中注册了一个文件拖放处理程序，并指定了一个名为fileDropped()的函数来处理拖放文件。当用户将文件拖到浏览器窗口中时，fileDropped()函数将被调用，并将文件作为参数传入。在我们的示例中，我们将拖放文件加载为p5.js图像并将其呈现在画布上。

注意事项

• drop()函数只能在p5.js sketch中使用。
• 拖放事件只适用于能够输入文件的设备，例如计算机。
• 在不支持拖放事件的浏览器中，drop()函数将失效。

参考文献

• p5.js官方文档：https://p5js.org/reference/#/p5/drop