如何缩放坐标以适应 canvas？

Question

我在将从 .txt 文件加载的 x 和 y 坐标缩放到我的 canvas 大小时遇到问题，因此我绘制的圆圈和直线不会超出canvas，有什么建议吗？

let dots = [];
let dotsData;
let orderData;
function preload() {
  dotsData = loadStrings('./dots.txt');
  orderData = loadStrings('./orderFile.txt');
}

function setup() {
  createCanvas(750, 750);
  createDots(dotsData);
}

function draw() {
  background(220);
  fill(255, 100, 200);
  
  
  for (let i = 0; i < dots.length; i++) {
     circle(dots[i].x, dots[i].y, 20);
     let goalDot = dots.find(e => e.id == orderData[i]);
     if (goalDot) {
       line(dots[i].x, dots[i].y, goalDot.x, goalDot.y);
     }
  }
}

function createDots(filename) {
  const probData = new Array(filename.length);
  for (let i = 0; i < probData.length; i++) {
    dotsData[i] = splitTokens(filename[i]);
    dots.push({
      id: dotsData[i][0],
      x: dotsData[i][1],
      y: dotsData[i][2]
    })
  }
}

dotsData 文件看起来像

1 565.0 575.0
2 25.0 185.0
3 345.0 750.0
4 945.0 685.0
5 845.0 655.0

订单数据文件如下所示

Answer 1

计算几何的最大坐标（点），从文件读取后：

let max_x = 0;
let max_y = 0;

function createDots(filename) {
    const probData = new Array(filename.length);
    for (let i = 0; i < probData.length; i++) {
        dotsData[i] = splitTokens(filename[i]);
        dots.push({
            id: dotsData[i][0],
            x: dotsData[i][1],
            y: dotsData[i][2]
        })
        max_x = max(max_x, dotsData[i][1]);
        max_y = max(max_y, dotsData[i][2]);
    }
}

绘制前，设置canvas的scale() depending on the width and the height:

function draw() {
    background(220);
    fill(255, 100, 200);
    
    scale(width / (max_x * 1.1), height / (max_y * 1.1));
    
    for (let i = 0; i < dots.length; i++) {
        circle(dots[i].x, dots[i].y, 20);
        let goalDot = dots.find(e => e.id == orderData[i]);
        if (goalDot) {
            line(dots[i].x, dots[i].y, goalDot.x, goalDot.y);
        }
    }
}

如何缩放坐标以适应 canvas？

How to scale co-ordinates to fit on canvas?

javascript

processing

p5.js