如何缩放后recenter(How to recenter after a zoom)

我与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发生！

你能帮我解决这个问题？

谢谢

就像我在说你的最后一个问题，你让你的生活，不使用Processing.js它的目的的方式更难。特别是，你应该有一个处理draw()函数（请注意，您draw()函数不是一个处理正在寻找），并使用框架的思路来处理这样的东西缩放和平移。即使你不希望它是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是在这里。