Question

鉴于图像，我将其副本复制到p5.js画布上。单击2次后，我记录了坐标，我想用此坐标绘制一个矩形。但是，我找不到正确的方法来在一个非常错误的位置绘制矩形。有代码https://jsfiddle.net/7gvuqtoj/

//p5 for a rect
  function preload(){
    img = loadImage('cat.jpg');
  }

  function setup() {

  var canvas = createCanvas(img.width, img.height);
  translate(0,0);
  // Move the canvas so it’s inside our <div id="sketch-holder">.
  // canvas.parent('img');
  background(255, 0, 200);
}

function draw(){
  image(img,0,0);
  rect(koors[0],koors[1],koors[2],koors[3]);
}

也可以看看：http://abereznyak.ru/projects/vue/-工作中的猫示例

Answer 1

p5.js中的rect function默认采用x，y，高度和宽度。

默认模式是rectMode（CORNER），它将rect（）的前两个参数解释为形状的左上角，而第三个和第四个参数是其宽度和高度。见

您可以通过找到x值之间的差和y值之间的差来计算矩形的高度和宽度。

这是一个代码示例。

function setup(){
  createCanvas(300,300);
  stroke(0);
}
var x1,x2, y1,y2;
x1 = -1;
function draw(){
    if (x1 > 0 && x2 > 0){
        if (x1 > x2){
            let t = x1;
            x1 = x2;
            x2 = t;
        }
        if (y1 > y2){
            let t = y1;
            y1 = y2;
            y2 = t;
        }
        rect(x1, y1, x2-x1, y2-y1);
        x1=x2=y1=y2=-1;
    }
}
function mouseClicked(){
  if (x1 < 0){
    x1 = mouseX;
    y1 = mouseY;
  } else {
    x2 = mouseX;
    y2 = mouseY;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

如何转换坐标以实现完美匹配

1 个答案: