如何使用map函数缩放TSP坐标使其适配p5.js画布显示范围

具体实现逻辑 #

• 先完成所有TSP坐标的解析，暂存数据不绘制
• 遍历所有坐标计算得到X、Y轴的最大最小值
• 预留画布边距（避免点贴边显示不全），使用p5.js内置的map()函数将原始坐标映射到画布可用范围
• 最后用映射后的坐标绘制城市点

修改后可运行代码 #

let loadTSP;
let loadSol;
let City = new Array();
citySize = 12;
let minX, maxX, minY, maxY;
// 画布内边距，单位像素，可自行调整
const padding = 50;

var myData = [];
function preload() {
  loadTSP = loadStrings("TSP_EUC_Problems/berlin52.tsp");
  // loadTSP = loadStrings("TSP_EUC_Problems/a280.tsp"); 
  // loadTSP = loadStrings("TSP_EUC_Problems/ch150.tsp"); 
  // loadSol = loadStrings(solutionFileName);
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255, 200, 200);
  showLoadedTSP();
  showSolution();
}

function showLoadedTSP() {
  // 第一步：解析所有TSP坐标数据
  loadTSP.splice(0, 6); // 移除文件前6行说明内容
  loadTSP.splice(loadTSP.length - 1, 1); // 移除最后一行结束标记
  for (let i = 0; i < loadTSP.length; i++) {
    myData[i] = split(trim(loadTSP[i]), /\s+/); // 按任意空白符分割，兼容多空格分隔的TSP格式
    if (myData[i].length > 3) {
      let voidSpaces = myData[i].length - 3;
      myData[i].splice(0, voidSpaces);
    }
    // 把坐标转成数字类型，避免后续计算出错
    myData[i][1] = Number(myData[i][1]);
    myData[i][2] = Number(myData[i][2]);
  }

  // 第二步：计算所有坐标的最大最小值
  minX = Infinity;
  maxX = -Infinity;
  minY = Infinity;
  maxY = -Infinity;
  for (let i = 0; i < myData.length; i++) {
    minX = min(minX, myData[i][1]);
    maxX = max(maxX, myData[i][1]);
    minY = min(minY, myData[i][2]);
    maxY = max(maxY, myData[i][2]);
  }

  // 第三步：坐标映射后绘制
  stroke(255);
  strokeWeight(2);
  fill("blue");
  for (let i = 0; i < myData.length; i++) {
    // 原始坐标映射到画布可用范围
    let drawX = map(myData[i][1], minX, maxX, padding, width - padding);
    let drawY = map(myData[i][2], minY, maxY, padding, height - padding);
    ellipse(drawX, drawY, citySize);
  }
  console.log(myData);
}

function showSolution() {

}

function draw() {
  // berlin52
  text("berlin52", 100,80);
  text("Berlin", 100,100);
  text("52 cities", 100,120);
  //ludwig a280
  // text("a280", 100,80);
  // text("Ludwig", 100,100);
  // text("280 cities", 100,120);
  // ch150
  // text("ch150", 100,80);
  // text("churritz", 100,100);
  // text("150 cities", 100,120);
}

额外优化说明 #

• 分割坐标时改用正则匹配任意空白符，兼容不同格式的TSP文件
• 坐标统一转成数字类型，避免字符串参与计算的异常
• 移除了原代码中重复的嵌套for循环，降低不必要的绘制开销
• 可调整padding变量自定义边距大小，适配不同显示需求

内容的提问来源于stack exchange，提问作者Yakob