不透明度（透明度）并在 P5.js/Javascript 中拖动

Question

我在更改对象的不透明度（透明度）和拖动对象方面需要帮助。 我可以更改不透明度（透明度），但是当我这样做时，对象不再是可拖动的。

下图更能说明问题

https://ibb.co/2qhX6Jt

填充颜色的相关行是第 54-74 行

拖动对象的相关行是117-161行

您可以使用 P5.js 编辑器运行和编辑代码，

这是代码的链接。

https://editor.p5js.org/Chigoz/sketches/ulMnSYag4

Answer 1

实现拖放的正确方法是对可拖动对象进行命中测试，确定拖动的是哪个对象，然后根据鼠标的位置更新位置。

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>

仅供参考，StackOverflow 的重点是学习如何做某事，而不是要求人们为您编写任意代码，这就是为什么我从头开始编写一些代码来演示如何在概念上完成此操作。

有关测试点是否在多边形内的算法如何工作的更多信息，请参阅this topic on the Processing.org Discourse forum。