How to restore the transformations after a resize

问题

I am working with Processing.js (version 1.4.8).

I have 5 white points, which coordinates I chose specifically. The black dot marks the center of the sketch! I want to be able to translate and scale my sketch. ALSO, I want it to occupy the whole window.

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();
  });
});

Until here, everything is fine, as you can see in this CodePen.

I want to be able to resize the window AND keep the transformations (translations, scales, ...) that I had already performed.

Please, open the CodePen and try to reproduce this weird behaviour:

1) Perform one (or two) transformation(s) using the top-right buttons

The map is translated by 200 to the right and 300 downwards.

Everything OK by now...

But the problem arises now.

2) Resize the window

The five points are again where they were before the "translate" operation.

So... Again... Is there a way to resize without losing all the transformations that had been performed?

Thanks

回答1:

Like you've discovered, it appears as though calling the size() function resets the transformation matrix. The short answer to your question is that you need to keep track of the transformations, and then apply them whenever you draw something.

The longer answer to your question is that you're using Processing.js a little bit differently than people typically use it. You've left out the draw() function (note that your draw() function is not the draw() function that's automatically called 60 times per second) and are trying to code event handlers yourself. This disconnect is why you're having issues.

If I were you, I'd start with a more basic sketch that starts out using Processing's built-in draw() function. Write code that draws the scene every frame. Make sure you set the translation and scale every frame. Here's an example:

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);
};

Then setup event listeners that change the values of scaleX and scaleY as well as translateX and translateY. Let Processing handle the rest.

来源：https://stackoverflow.com/questions/45557177/how-to-restore-the-transformations-after-a-resize

标签

javascript

processing.js