Javascript 如何在调整大小后恢复转换

我正在使用Processing.js（版本1.4.8）

我有5个白点，这是我特别选择的坐标。黑点标记了草图的中心！我希望能够翻译和缩放我的草图。而且，我想让它占据整个窗口

var mapWidth, mapHeight, canvas, pjs, centerX, centerY;
var points = [[100, 100], [300, 100], [100, 300], [300, 300], [200, 200]];

var setSize = function() {
  mapWidth = $(window).outerWidth();
  mapHeight = $(window).outerHeight();
  if (pjs) {
    pjs.size(mapWidth, mapHeight);
  }
};

var clear = function() {
  pjs.background(200);
};

var drawPoint = function(coordinates) {
  var radius = 30;
  pjs.ellipse(coordinates[0], coordinates[1], radius, radius);
};

var drawPoints = function() {
  pjs.fill(255);
  points.map(function(point) {
    drawPoint(point);
  });
};

var calculateCenter = function() {
  centerX = Math.floor(mapWidth / 2);
  centerY = Math.floor(mapHeight / 2);
};

var drawCenter = function() {
  calculateCenter();
  var radius = 10;
  pjs.fill(0);
  pjs.ellipse(centerX, centerY, radius, radius);
  console.log("center", centerX, centerY);
};

var move = function() {
  pjs.translate(200, 300);
  redraw();
};

var zoomIn = function() {
  pjs.scale(2, 2);
  redraw();
};

var draw = function() {
  clear();
  drawPoints();
  drawCenter();
};

var redraw = function() {
  clear();
  draw();
};

var addEvent = function(object, type, callback) {
  if (object == null || typeof object == "undefined") return;
  if (object.addEventListener) {
    object.addEventListener(type, callback, false);
  } else if (object.attachEvent) {
    object.attachEvent("on" + type, callback);
  } else {
    object["on" + type] = callback;
  }
};

$(function() {
  canvas = document.getElementById("map");

  setSize();

  var pjsRun = function(processingjs) {
    pjs = processingjs;
    pjs.setup = function() {
      pjs.size(mapWidth, mapHeight);
      draw();
    };
  };
  var p = new Processing(canvas, pjsRun);

  addEvent(window, "resize", function(event) {
    setSize();
    redraw();
  });
});

在这里之前，一切都很好，正如您在CodePen中看到的那样

我希望能够调整窗口的大小，并保留我已经执行的转换（平移、缩放等）

请打开密码笔，尝试重现这种奇怪的行为：

1） 使用右上角的按钮执行一个（或两个）转换

地图向右平移200，向下平移300

现在一切都好了

但问题现在出现了

2） 调整窗口大小

这五点又回到了“翻译”操作之前的位置

所以。。。再一次有没有一种方法可以在不丢失已执行的所有转换的情况下调整大小

---

谢谢

正如您所发现的，调用

size（）

函数似乎会重置转换矩阵。对您的问题的简短回答是，您需要跟踪转换，然后在绘制某个对象时应用它们

对于您的问题，较长的答案是您使用的Processing.js与人们通常使用的稍有不同。您省略了

draw（）

函数（请注意，

draw（）

函数是而不是

draw（）

函数，该函数每秒自动调用60次），并尝试自己编写事件处理程序。这就是为什么你会有问题

如果我是你，我会从一个更基本的草图开始，它使用Processing的内置

draw（）

函数。编写每帧绘制场景的代码。确保设置了每帧的平移和缩放。下面是一个例子：

var draw = function() {
  scale(scaleX, scaleY);
  translate(translateX, translateY);

  background(200);
  fill(255);
  points.map(function(point) {
    ellipse(coordinates[0], coordinates[1], 30, 30);
  });

  fill(0);
  ellipse(width/2, height/2, 10, 10);
};

---

然后设置事件侦听器，更改

scaleX

和

scaleY

以及

translateX

和

translateY

的值。让处理来处理其余部分。

不完全相关，但为什么在使用jQuery时要填充事件侦听器附件？因为，我认为问题可能与jQuery“调整大小”事件有关。但是它不是，我忘了把它换回来。谢谢。我有几个问题。1） 我想要一张相当静态的素描。当我执行更改时，我显式地调用重画方法。我必须每秒绘制60次草图吗？或者我可以避免这种“循环”？2） 如何跟踪所有转换？我是只保存最后一次翻译，还是将它们相加？3） 你能给我举一个Processing.js draw函数的例子吗？我还没有真正理解它是如何工作的。。。非常感谢@joaorodr84您可以使用

noLoop（）

函数来避免每秒调用

draw（）

函数60次。您可以使用变量跟踪转换，是的，您必须跟踪“总”转换是什么。此示例已使用Processing.js

draw（）

函数。如果您有后续问题，请将其发布在他们自己的问题帖子中，并附上最新信息。祝你好运，凯文·沃克曼。。。你好我编辑了这个问题。它似乎正在使用Processing.js draw函数。但我还有一个问题。你能在帖子里看到我的更新吗？非常感谢。@joaorodr84请在他们自己的问题帖子中发布新问题，并附上他们自己的更新内容。堆栈溢出并不是为编辑中添加的新问题而设计的。另外，请注意，您发布的代码应该是一个小示例，我们可以复制并粘贴以运行，而不是完整的程序。我认为我无法缩短示例，因为在缩放之前移动（使用箭头）是重现问题的必要条件。但是，你是对的。我刚刚把它作为一个新问题发布了：。非常感谢。