Question

这些天我正在做一个项目。我的目标是更改两个正方形相交区域的颜色。我已经编写了检测两个正方形何时相交的代码，但无法弄清楚如何更改相交区域的颜色。请帮助我。

let squares = [];
let dragObject = null; // variable to hold the object being dragged

function setup() {
  createCanvas(600, 520);
  button1 = createButton("Alpha");
  button2 = createButton("Bravo");
  button3 = createButton("Charlie");
  button4 = createButton("Delta");
  button5 = createButton("Echo");
  button6 = createButton("Foxtrot");
  button7 = createButton("Golf");
  button8 = createButton("Hotel");
  button9 = createButton("India");
  button10 = createButton("Juliet");

  button1.mousePressed(doSomething);
}

function draw() {

  background(25, 240, 255);

  // if a square is being dragged, update its position
  if (this.dragObject != null) {
    this.dragObject.position.x = mouseX;
    this.dragObject.position.y = mouseY;
  }

  //draw all squares
  for (let i = 0; i < squares.length; i++) {
    let s = squares[i];
    s.show();
  }
  for (let i = 0; i < squares.length; i++) {
    for (let j = i + 1; j < squares.length; j++) {
      if (i != j && squares[i].collides(squares[j])) {
        squares[i].changecolor();

      }
    }
  }
}

function mousePressed() {

  if (this.dragObject == null) {

    //ask every square if they are being "hit"
    for (let i = 0; i < squares.length; i++) {
      let s = squares[i];
      if (s.hitTest()) {
        //if so, set the drag object as this square and return
        this.dragObject = s;
        return;
      }
    }

    //no squares are hit, create a new square.
    let square = new Square(mouseX, mouseY);
    squares.push(square);
  }
}

//mouse is released, release the current dragged object if there is one
function mouseReleased() {
  this.dragObject = null;
}

class Square {
  constructor(InitialX, InitialY) {
    this.w = 60;
    this.h = 60;
    this.position = {
      x: InitialX,
      y: InitialY
    };
  }

  //basic test of mouse position against square position and if its inside the rectangle
  hitTest() {
    let x = mouseX - this.position.x;
    let y = mouseY - this.position.y;
    return (x > 0 && x < this.w) && (y > 0 && y < this.h);
  }

  show() {
    fill(50);
    rect(this.position.x, this.position.y, this.w, this.h);
  }
  collides(sqr) {
    if (this.position.x < sqr.position.x + sqr.w &&
      this.position.x + this.w > sqr.position.x &&
      this.position.y < sqr.position.y + sqr.h &&
      this.position.y + this.h > sqr.position.y) {

      return true;
    }
    return false;

  }
  changecolor() {
    fill(random(255), random(255), random(255));
    background(200, 255, 100);
    for (let i = 0; i < squares.length; i++) {
      let s = squares[i];
      s.show();
    }
  }
}

function doSomething() {
  // fill(230, 170, 90);
  // ellipse(random(600), random(410), 30, 30);
  squares.pop();
}

Answer 1

让我们考虑一下如何表示两个正方形之间的相交区域。当然，一种方法就是简单地将其表示为另一个矩形，我们只需根据拦截区域更改其颜色即可。要绘制一个矩形，我们需要知道左上角的坐标，宽度和高度。因此，挑战在于在拖动正方形时计算它们。这应该在maindf['Distance'] = maindf.apply(lambda row: distance((row.Latitude1,row.Longditude1),(row.Latitude2,row.Longditude2)), axis=1)函数中完成。您已经实现了相交检查，剩下的就是计算新矩形的左上点（newX，newY），宽度（newW）和高度（newH）。

为了计算左上角的宽度和高度，可以将其添加到检查碰撞的块中：

draw()

结果：

改变正方形相交区域的颜色

1 个答案: