Necesito ayuda para cambiar la opacidad (transparencia) de los objetos y arrastrarlos. Puedo cambiar la opacidad (transparencia), pero cuando lo hago, los objetos ya no se pueden arrastrar.
La imagen de abajo arroja más luz sobre la pregunta.
Las líneas relevantes para el color de relleno son las líneas 54-74
Las líneas relevantes para arrastrar objetos son las líneas 117-161
Puede ejecutar y editar el código usando el editor P5.js,
Este es el enlace al código.
La forma correcta de implementar la función de arrastrar y soltar es realizar una prueba de posicionamiento de los objetos que se pueden arrastrar, determinar qué objeto se está arrastrando y luego actualizar la posición en función de la posición del mouse.
const hexagon = [ new p5.Vector(50, 0), new p5.Vector(25, 43.3), new p5.Vector(-25, 43.3), new p5.Vector(-50, 0), new p5.Vector(-25, -43.3), new p5.Vector(25, -43.3) ]; let shapes = [ { x: 80, y: 80, color: [255, 0, 0, 100], points: hexagon }, { x: 200, y: 200, color: [0, 255, 0, 100], points: hexagon } ]; let draggingIx; let draggingOffset; function setup() { createCanvas(300, 300); } function draw() { background(255); for (let shape of shapes) { push(); translate(shape.x, shape.y); fill(...shape.color); beginShape(); for (let pt of shape.points) { vertex(pt.x, pt.y); } endShape(CLOSE); pop(); } } function mousePressed() { // Hit test in reverse order so that the top most element gets hit first for (let i = shapes.length - 1; i >= 0; i--) { let relativePos = createVector(mouseX - shapes[i].x, mouseY - shapes[i].y); if (pointInPoly(shapes[i].points, relativePos)) { draggingIx = i; draggingOffset = relativePos; break; } } } function mouseReleased() { draggingIx = draggingOffset = undefined; } function mouseDragged() { if (draggingIx >= 0) { shapes[draggingIx].x = mouseX - draggingOffset.x; shapes[draggingIx].y = mouseY - draggingOffset.y; } } function pointInPoly(verts, pt) { let c = false; // for each edge of the polygon for (let i = 0, j = verts.length - 1; i < verts.length; j = i++) { // Compute the slope of the edge let slope = (verts[j].y - verts[i].y) / (verts[j].x - verts[i].x); // If the mouse is positioned within the vertical bounds of the edge if (((verts[i].y > pt.y) != (verts[j].y > pt.y)) && // And it is far enough to the right that a horizontal line from the // left edge of the screen to the mouse would cross the edge (pt.x > (pt.y - verts[i].y) / slope + verts[i].x)) { // Flip the flag c = !c; } } return c; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Para su información, el objetivo de StackOverflow es aprender cómo hacer algo, no pedirle a la gente que escriba código arbitrario para usted, por lo que he escrito un código desde cero para demostrar cómo se debe hacer esto conceptualmente.
Para obtener más información sobre cómo funciona el algoritmo para probar si un punto está dentro de un polígono, consulte este tema en el foro Discourse de Processing.org .