Как конвертировать координаты x, y для работы с абсолютным отображением?

Question

Я получаю координаты X, Y от вызова API. Они выглядят так:

x: "-0.0120956897735595703"
y: "0.147876381874084473"

Я установил отображение на каждом из этих изображений мини-карты как абсолютное. Я устанавливаю свойства left и top как координаты X и Y следующим образом: style={{left: player.x, top: player.y}}, но кажется, что числа слишком малы, чтобы что-либо делать. Прямо сейчас все изображения отображаются в верхнем левом углу, потому что координаты x и y слишком малы.

У меня вопрос, какой тип эти координаты указаны в моем вызове API, и как мне преобразовать их в CSS удобные значения для "сверху и слева", чтобы они точно отображались на моей миникарте?

код моего компонента для справки:

const Minimap = (props) => {
  const { players } = props.data.data
  return (
      <div style={mapStyle} className="realMinimapContainer">
      {players.map(player => {
        const heroName = localizedList[player.hero_id].replace('npc_dota_hero_', '');
        return (
          <img
          style={{left: player.x, top: player.y}}
          className="mapIcon" src={
            player.hero_id === 126 || player.hero_id === 128 ?
            newHeroes[player.hero_id] :
            `http://cdn.dota2.com/apps/dota2/images/heroes/${heroName}_icon.png`
      }></img>
        )
      })}
      </div>
  )
}

После следования совету @FelipeMateusMalara, приведенному ниже, кажется, что я подошел ближе, но изображения немного отклонены.

Здесь вы можете видеть, где изображения, я нарисовал красная стрелка, показывающая, где они должны быть:

Answer 1

Похоже, что координаты, которые вы получили от вызова API, являются нормализованными координатами, поэтому они находятся в диапазоне от -1 до 1, что указывает отрицательное число x-координаты. Кажется, что начало координат системы координат API находится посередине, а ваша система координат отображения имеет свое начало в верхнем левом углу. Вы должны умножить координаты на размер вашего дисплея и сместить их в соответствии с вашим источником отображения:

player.x = (API.x + 1) * display.width
player.y = (API.y + 1) * display.height

Answer 2

Вы можете просто умножить эти числа на 100 и добавить 50 к каждому, это приведет к правильному расположению их на карте, и в результате выражения x вы установите left css директива, и результат выражения y вы бы задали директиву bottom css, оба в процентах.

Почему это?

Это потому что ваш origin для обеих этих директив - это знак 50%, а не 0, так что вам просто нужно преобразовать числа, выраженные в процентах (умножить на 100), и добавить 50%, отсутствующих

Answer 3

Невозможно узнать по предоставленной вами информации. Я могу догадаться, что эти числа являются дельтами, а не смещением (которое можно просто умножить на ширину / высоту - поскольку одно из чисел показано в отрицательном значении). Я бы посоветовал вам заглянуть в отладчик (какие инструменты вы используете?) И посмотреть, не предоставлена ​​ли другая координата x / y. Или, возможно, вы можете просто обновить глобальную переменную своими дельта-координатами, однако я сомневаюсь, что вы хотите указать go.