缩放后如何居中

Question

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

我有 5 个白点，这是我专门选择的坐标。黑点标志着草图的中心！红十字是画布外的一个元素，用于标记窗口的中心，以便我们可以与黑点进行比较并确保地图正确居中。我希望我的草图占据整个窗口。我希望能够翻译和缩放我的草图。

我使用 Processing.js 绘制函数。我正在跟踪翻译和音阶。

我希望我的缩放操作能够将地图重新​​定位到之前的位置。但它不起作用。

这是CodePen。

最重要的代码是来自缩放功能的代码。

var zoomIn = function() {
    scale *= 2;
    translateX += - centerX / scale;
    translateY += - centerY / scale;
    redraw();
};

var zoomOut = function() {
    translateX += centerX / scale;
    translateY += centerY / scale;
    scale *= 0.5;
    redraw();
};

可能在这里，我实际执行转换的地方：

var draw = function () {
    pjs.scale(scale, scale);
    pjs.translate(translateX, translateY);
    drawPoints();
    drawCenter();
};

我在下面向您展示我想要的示例。

1) 打开 CodePen 并使用箭头按钮进行一些翻译。

2) 放大！中心（黑点）不再位于窗口中心（红十字）...

我希望这（见下文）发生在 zoomIn 上！！！

你能帮我解决这个问题吗？

谢谢

Answer 1

就像我在your last question 中所说的那样，如果不按照预期的方式使用 Processing.js，您的生活就会变得更加艰难。具体来说，你真的应该有一个 Processing draw() 函数（请注意，你的 draw() 函数 不是 Processing 正在寻找的那个）并使用 frames 的想法处理缩放和翻译之类的东西。即使您不希望它达到 60 fps，您仍然应该使用 draw() 函数来绘制所有内容，而不是像现在尝试那样在事件中进行绘制。

但更一般地说，您的问题是由缩放影响翻译的事实引起的，并且两者都会影响绘制内容的位置。因此，当您告诉圆在中心绘制时，该位置会受到比例和平移的影响，这意味着它绘制的不是实际中心。您的代码完全按照您的要求执行，并且其行为也完全符合我的预期。

如果您希望所有内容都相对于中心，那么一种选择是将原点移动到窗口的中心，然后相对于该中心绘制所有内容。因此，如果您的中心位于100, 100 并且您想在75, 75 上绘制一些东西，那么您实际上会在-25, -25 上绘制它。然后，当您进行缩放和平移时，它们将相对于中心。

这是我的意思的一个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>
<script type="application/processing">

float offsetX = 0;
float offsetY = 0;
float zoom = 1;

void setup(){
  size(500, 500);
}

void draw(){
  background(200);
  
  translate(width/2, height/2);
  fill(0, 255, 0);
  ellipse(0, 0, 20, 20);
  
  scale(zoom);
  translate(offsetX, offsetY);
  
  fill(255);
  ellipse(-25, -25, 20, 20);
  ellipse(25, -25, 20, 20);
  ellipse(-25, 25, 20, 20);
  ellipse(25, 25, 20, 20);
  
  fill(255, 0, 0);
  ellipse(0, 0, 20, 20);
}

void keyPressed(){
  if(keyCode == UP){
    offsetY -= 10;
  }
  else if(keyCode == DOWN){
    offsetY += 10;
  }
  else if(keyCode == LEFT){
    offsetX -= 10;
  }
  else if(keyCode == RIGHT){
    offsetX += 10;
  }
  else if(key == 'r'){
    offsetX = 0;
    offsetY = 0;
    zoom = 1;
  }
}

void mouseDragged(){
  zoom += (pmouseY - mouseY)/10;
}

</script>
<canvas> </canvas>

使用方向键移动圆圈，拖动鼠标改变缩放。请注意，绿色圆圈保持在中心，并且缩放是相对的。

CodePen 是here。