用map解释坐标的计算

如何解决用map解释坐标的计算

有人可以解释这个值/位置的含义：300-400/2+10。我知道它使红色圆圈不会超出正方形，但我不太了解计算方法。是否有一个页面可以读取它的工作原理，因为我个人会这样做

float  redCircle = map(mouseX,width,116,485);
circle(redCircle,map(mouseY,height,114,485),20);

具有一个数字位置，而不是像代码中那样的计算。我试图了解它，但我不明白。如果有人可以解释操作过程，我将不胜感激。

    void setup() {
        size(600,600);
      surface.setTitle("Mapping");
      surface.setLocation(CENTER,CENTER);
    }
    
    void draw() {
      background(0);
      stroke(255);
    
      fill(255,255,255);//weißer Kreis
      circle(mouseX,mouseY,20);
      mouseMoved();
      text("Maus X/Y:"+mouseX+"/"+mouseY,250,300); //Text für weiße Position
    
     
      fill(255,0); //Roter Kreis
      float posFromMouseX = map(mouseX,300-400/2+10,300-400/2+400-10);
      float posFromMouseY = map(mouseY,300-400/2+400-10);
      ellipse(posFromMouseX,posFromMouseY,20,20);
      text("map to: "+posFromMouseX+" / "+posFromMouseY,320); //Text für rote Position
      
      // Transparentes Rechteck in der Mitte
      noFill();
      rect(300-400/2,300-400/2,400,400); 
    }

解决方法

map()会相应地将数字的比例调整到一个范围。

例如，如果您具有以下值：

MouseX: 200
width: 1000

您可以轻松地计算出，如果屏幕的宽度为2000，则您的鼠标X位置需要成比例的为400。

但这是一个简单的例子。在您粘贴到此处的代码中，发生了相同的事情，但是比较的坐标是：

整个窗口
白色矩形

map() function需要5个参数：

map(value,start1,stop1,start2,stop2)

value：float：要转换的传入值
start1：float：值当前范围的下限
stop1：浮点数：该值当前范围的上限
start2：float：值目标范围的下限
stop2：浮动值：目标值范围的上限

所以...您可以完全不用计算而写以下行：

float posFromMouseX = map(mouseX,width,110,300-400/2+400-10);
// is the same thing than:
float posFromMouseX = map(mouseX,490);

用这种方式写的可能原因是：

作者可能不想做简单的数学运算
作者可能想知道这些数字从何而来（了解如何计算这些数字将在这方面有所帮助）
作者可能想更改变量的硬编码数字，并在以后使其白色矩形的尺寸动态变化

希望这对您有意义。玩得开心！