时间戳

首页 > 解决方案 > 如何翻译坐标以获得完美匹配

javascript - 如何翻译坐标以获得完美匹配

问题描述

给定一张图片，我在 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/ - 工作猫示例

标签： javascriptvue.jsp5.js

解决方案

p5.j​​s 中的rect 函数默认采用 x、y、height 和 width。

默认模式是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>

推荐阅读