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

Question

我正在使用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();
  });
});

直到这里，一切都很好，你可以在this CodePen中看到。

我希望能够调整窗口的大小并保留我已经执行过的转换（翻译，缩放......）。

请打开CodePen并尝试重现这种奇怪的行为：

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

地图由200向右翻译，300向下翻译。

现在一切都还好......

但问题现在出现了。

2）调整窗口大小

这五点再次出现在＆＃34;翻译＆＃34;之前。操作

所以...再次......有没有办法调整大小而不会丢失已执行的所有转换？

由于

Answer 1

就像你发现的那样，似乎调用public class CustomFirebaseInitProvider extends ContentProvider{ public CustomFirebaseInitProvider() { } public void attachInfo(Context var1, ProviderInfo var2) { super.attachInfo(var1, var2); } public boolean onCreate() { // Set custom options FirebaseOptions.Builder builder = new FirebaseOptions.Builder() .setApiKey("valid_key") .setApplicationId("valid_app_id") .setGcmSenderId("valid_sender_id") .setDatabaseUrl("valid_db_url") .setStorageBucket("valid_storage_bucket"); if(FirebaseApp.initializeApp(this.getContext(), builder.build()) == null) { Log.i("FirebaseInitProvider", "FirebaseApp initialization unsuccessful"); } else { Log.i("FirebaseInitProvider", "FirebaseApp initialization successful"); } List<FirebaseApp> appList = FirebaseApp.getApps(this.getContext()); for (int i=0; i< appList.size(); i++) { FirebaseApp app = appList.get(i); String apiKey = app.getOptions().getApiKey(); Log.d("TAG",apiKey); } return false; } @Nullable public Cursor query(Uri var1, String[] var2, String var3, String[] var4, String var5) { return null; } @Nullable public String getType(Uri var1) { return null; } @Nullable public Uri insert(Uri var1, ContentValues var2) { return null; } public int delete(Uri var1, String var2, String[] var3) { return 0; } public int update(Uri var1, ContentValues var2, String var3, String[] var4) { return 0; } } 函数会重置转换矩阵。对您的问题的简短回答是，您需要跟踪转换，然后在绘制内容时应用它们。

您的问题的答案越长，您使用Processing.js的方式与人们通常使用它的方式略有不同。您遗漏了size()功能（请注意，您的draw()功能不 draw()功能，每秒自动调用60次）并且正在尝试代码事件处理程序自己。这种脱节是您遇到问题的原因。

如果我是你，我会从使用Processing的内置draw()函数开始的更基本的草图开始。编写每帧绘制场景的代码。确保设置平移并缩放每一帧。这是一个例子：

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值的事件侦听器。让Processing处理剩下的事情。