Question

我正在尝试在“处理”中缩放网格，但在应用正确的平移（缩放以鼠标位置为中心）时遇到麻烦。我已经在网上搜索了一段时间，但我尝试的任何方法似乎都无效。

屏幕大小为width和height，鼠标位置为mouseX和mouseY。

我目前的代码在下面，但是它从左上角缩放了网格（由player.zoom控制），这不是我想要的。要更新网格的平移，player具有2d向量player.translate。

void mouseWheel(MouseEvent event) {
  float zoomFactor = 200.0f;

  float scroll = event.getCount();
  player.zoom -= scroll * player.zoom / zoomFactor;

  // player.translate.x += something;
  // player.translate.y += something;
}

如果您需要更多详细信息来回答，我可以将存储库与源代码链接。

Answer 1

我为您创建了一个非常简单的模型，希望可以为您指出将其应用于播放器的正确方向。

因此，这个小演示演示了在放大椭圆中心的同时仍将其作为中心焦点。

var startingList = ["1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8"];
var gameList = [];

function onLoad() {
  var i;

  for (i = startingList.length - 1; i >= 0; i--) {
    var rndNum = Math.floor(Math.random() * (i + 1));
    gameList.push(startingList[rndNum]);
    startingList.splice(rndNum, 1);
  }
  document.getElementById("b00").innerHTML = gameList[0];
}
window.onload = onLoad();
alert(gameList);

我建议您将其复制到新项目中，然后注释掉特定的行，以了解正在发生的事情以及如何将其转移到自己的项目中。

相同的原理仍然适用，为了使程序尽可能简单，我没有使用鼠标输入。

如何以正确的平移放大鼠标位置

1 个答案: