时间戳

首页 > 解决方案 > 绘制矩形，p5.js

p5.js - 绘制矩形，p5.js

问题描述

所以我在 p5.js 中工作，我的任务是当我按下鼠标时，它需要绘制圆圈并且我已经完成了。但额外的事情是，这只可能发生在某个矩形中，我有点迷茫，有谁知道我怎么能做到这一点？

function setup() {
  createCanvas(400, 400);
}

var circles = [];

function draw() {
  background(220);
  rect(100, 100, 200, 200)
  
  var index = 0;
  while(index < circles.length) {
    ellipse(circles[index].x, circles[index].y, circles[index].d);
      index += 1;
  }
  if (mouseIsPressed) {
    // add a circle where the mouse is
    // not this: ellipse(mouseX, mouseY, 10);
    circles[circles.length] = { x: mouseX, y: mouseY, d: 30 };
  }
}

这是它需要的样子： 在此处输入图像描述

标签： p5.js

解决方案

现在，无论鼠标在屏幕上的哪个位置，您的代码都会在按下鼠标时生成一个圆圈。你想要的是只有当你的鼠标在你的矩形中时才生成新的圆圈，所以这只是添加一个条件以确保你的鼠标不在矩形之外。

要进行此测试，您首先需要知道矩形的边界是什么。您创建了它，rect(100, 100, 200, 200)这意味着左上角在 positionx:100, y:100并且它的宽度和长度是200所以它的右下角在 position x:(100+200)=300, y:(100+200)=300。

所以你只想创建你的圈子100 < mouseX < 300，100 < mouseY < 300你会这样写：

这样做，您的代码将更改为：

  if (mouseIsPressed && mouseX > 100 && mouseX < 300 && mouseY > 100 && mouseY < 300 ) {
    // add a circle where the mouse is
    circles[circles.length] = { x: mouseX, y: mouseY, d: 30 };
  }

现在，当您单击矩形外部时，不会添加任何圆圈。

请注意，由于圆圈以单击位置为中心，因此30/2=15如果单击距离矩形边界太近，您的圆圈（半径为 ）将被绘制出矩形。

所以也许你更想要这样的条件：

  if (mouseIsPressed && mouseX > 100+15 && mouseX < 300-15 && mouseY > 100+15 && mouseY < 300-15 ) {

你可以看到它在这里工作

此外，最好将所有这些度量（矩形位置、宽度和高度、圆直径）放在变量中，这样您就不必对不同的值进行硬编码，但您以后可以这样做当您的程序正常工作时。

推荐阅读