La función drop() es una función incorporada que se utiliza para registrar una función de devolución de llamada que se llama cada vez que se coloca un archivo en el elemento después de cargarlo. Cada archivo soltado se carga en la memoria y lo pasa como objeto p5.File a la función de devolución de llamada. Cuando varios archivos caen al mismo tiempo, se mostrarán varias llamadas a la función de devolución de llamada.
Esta función requiere la biblioteca p5.dom. Así que agregue la siguiente línea en la sección principal del archivo index.html .
<script language="javascript" type="text/javascript" src="path/to/p5.dom.js"> </script>
Sintaxis:
drop( callback, fxn )
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- devolución de llamada: este parámetro se usa para contener el archivo cargado que se llama para cada caída de archivo.
- fxn: este parámetro se usa cuando la función de devolución de llamada se activa cuando los archivos se eliminan con el evento de eliminación.
Los siguientes ejemplos ilustran la función drop() en p5.js:
Ejemplo 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);
}
Producción:
- Antes de soltar un archivo:
- Después de soltar un archivo:
Ejemplo 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();
}
Producción:
- Antes de soltar un archivo:
- Después de soltar un archivo:
