缩放后如何重新居中

Question

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

我有5个白点，我特意选择了哪些坐标。黑点标记了草图的中心！红叉是 canvas 之外的元素，它标记了 window 的中心，因此我们可以与黑点进行比较，确保地图正确居中。我想让我的素描占据整个window。我希望能够平移和缩放我的草图。

我使用Processing.js绘图功能。我正在跟踪平移和比例。

我希望我的缩放操作将地图重新置于与之前相同的位置。但它不起作用。

最重要的代码是缩放函数中的代码。

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) 放大！中心（黑点）不再位于 window 中心（红十字）...

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

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

谢谢

Answer 1

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

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

如果您希望一切都相对于中心，那么一种选择是将原点移动到 window 的中心，然后相对于它绘制一切。因此，如果您的中心位于 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。

缩放后如何重新居中

How to recenter after a zoom

javascript

processing.js