如何在缩放后重新定位

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让你的生活变得更加艰难。具体来说，您应该具有处理draw()功能（请注意，您的draw()功能不处理正在查找的功能）并使用 frames <的概念/ strong>处理缩放和翻译等内容。即使你不希望它是60 fps，你仍然应该使用draw()函数绘制所有内容，而不是像你现在尝试做的事情那样。

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

如果您希望所有内容都相对于中心，那么一个选项是将原点移动到窗口的中心，然后绘制相对于该窗口的所有内容。因此，如果您的中心位于100, 100且您希望在75, 75上绘制内容，那么您实际上是在-25, -25处绘制的。然后，当你进行缩放和翻译时，他们将相对于中心。

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用箭头键移动圆圈，拖动鼠标以更改缩放。请注意，绿色圆圈位于中心，缩放与此相关。

CodePen为here。