Actualmente estoy haciendo un proyecto sobre p5.js y necesito hacer lo siguiente:

Entrada : imagen dada y rectángulo;

Algoritmo : mueve la imagen dentro del rectángulo. Al decir mover, quiero decir que cuando se hace clic con el mouse, se mueve toda la imagen para que coincida con el tamaño del rectángulo mostrando solo una parte de la imagen (tamaño del rectángulo)

Salida : arrastrar la imagen dentro del rectángulo

Mi código actual está moviendo la imagen, pero necesito que una imagen esté dentro del rectángulo y muestre solo una parte de la imagen que tenga este tamaño del rectángulo. El código está escrito en React:

 let backgroundImage; let dragging = false; let rollover = false; let x, y, w, h; // Location and size let offsetX, offsetY; const preload = (p5) => { const url = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png"; backgroundImage = p5.loadImage(url); }; const setup = (p5, parentRef) => { p5.createCanvas(1000, 500).parent(parentRef); // Starting location x = 100; y = 100; // Dimensions w = 300; h = 400; }; const draw = (p5) => { p5.background(233); if ( p5.mouseX > x && p5.mouseX < x + w && p5.mouseY > y && p5.mouseY < y + h ) { rollover = true; } else { rollover = false; } if (dragging) { x = p5.mouseX + offsetX; y = p5.mouseY + offsetY; } p5.image(backgroundImage, x, y, w, h); p5.noFill(); p5.rect(400, 100, 200, 300); }; const mousePressed = (p5) => { if ( p5.mouseX > x && p5.mouseX < x + w && p5.mouseY > y && p5.mouseY < y + h ) { dragging = true; offsetX = x - p5.mouseX; offsetY = y - p5.mouseY; } }; const mouseReleased = (p5) => { dragging = false; };

para mostrarlo, uso el siguiente código:

 <Sketch preload={preload} setup={setup} draw={draw} mouseReleased={mouseReleased} mousePressed={mousePressed} />

Yo uso la biblioteca react-p5 .