Javascript 缩放后如何重新居中

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

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

我使用Processing.js draw函数。我一直在跟踪翻译和音阶

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

这是一本书

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

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） 打开代码笔，用箭头按钮进行一些翻译

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

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

你能帮我修一下吗

谢谢

正如我在中所说的，如果不按预期的方式使用Processing.js，您的生活会变得更加困难。具体来说，您应该真正拥有一个处理

draw（）

函数（请注意，您的

draw（）

函数是而不是处理正在寻找的函数），并使用帧的思想来处理缩放和转换之类的事情。即使您不希望它是60 fps，您仍然应该使用

draw（）

函数来绘制所有内容，而不是像现在这样在事件中进行绘制

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

如果希望所有对象都相对于中心，则一个选项是将原点移动到窗口的中心，然后绘制所有对象。所以，如果你的中心在

100100

并且你想在

75,75

上画一些东西，那么你实际上应该在

-25，-25

上画。然后，当您进行缩放和平移时，它们将相对于中心

以下是我的意思的一个例子：

浮动偏移量x=0；
浮动偏移量=0；
浮动缩放=1；
无效设置（）{
大小（500500）；
}
作废提款（）{
背景（200）；
平移（宽度/2，高度/2）；
填充（0,255,0）；
椭圆（0,0,20,20）；
缩放（缩放）；
翻译（offsetX，offsetY）；
填充（255）；
椭圆（-25，-25,20,20）；
椭圆（25，-25,20,20）；
椭圆（-25,25,20,20）；
椭圆（25,25,20,20）；
填充（255,0,0）；
椭圆（0,0,20,20）；
}
按下void键（）{
if（keyCode==UP）{
偏移量-=10；
}
else if（keyCode==向下）{
偏移量+=10；
}
else if（keyCode==左）{
抵销额x-=10；
}
else if（keyCode==右）{
offsetX+=10；
}
否则如果（键=='r'）{
offsetX=0；
offsetY=0；
缩放=1；
}
}
void mouseDragged（）{
缩放+=（pmouseY-mouseY）/10；
}

当我访问您的CodePen并更改窗口大小时，我注意到即使在进行任何转换之前，十字架也不会停留在黑色圆圈内。此外，正如我在上一个问题中所说：您的代码超出了Processing.js的设计用途，因为您没有指定

draw（）

function：请注意，您的

draw（）

函数不是Processing.js正在寻找的

draw（）

函数。你真的应该尝试一下我在上一个问题中概述的方法。你有没有弄明白这一点？@KevinWorkman我有，多亏了你的回答。我将其标记为已接受答案。答案很好，我还想知道在扩展到新来源之外时如何保持翻译。因此，如果你将圆移出原点，然后缩放，缩放会将圆从原点移开。@JacobArvidsson我不完全确定你在问什么。你可能想发布一个新的问题，以及一些屏幕截图模拟，显示你正在尝试做什么，以及显示你到目前为止已经尝试了什么。