Как правильно представить / масштабировать координаты от Adobe XD до кадра? - PullRequest
Новая
       32

Как правильно представить / масштабировать координаты от Adobe XD до кадра?

0 голосов
/ 23 июня 2019

Я пытаюсь правильно представить / масштабировать координаты от Adobe XD до кадра.

Вот как я делаю это сейчас: 1. Загрузка данных, связанных с изображением (координаты, ширина, высота) и самого изображения в виде formData на сервер. 2. Генерация для генерации после выполнения оценок. 3. Генерация объектов с использованием array.map. 4. Сущности и все генерируется и рендерит просто отлично. Но я заметил некоторую разницу в координатах. Следовательно, масштабирование выполняется неправильно. Ожидается вывод для точного представления изображений, а источником данных координат и самих изображений является Adobe XD. 

//The closest result I have been able to get is by this:
    const x = coordinates.x - XDArtboardWidth;
    const y = XDArtboardHeight - coordinates.y;

//And apply scaling of 0.01 0.01 0.01 to the Parenty entity component.


//Example data.
  // {
  //   "group": {
  //     "artboard": "ui/1",
  //     "artboardHeight": 1410,
  //     "artboardWidth": 2820,
  //     "children": [
  //       {
  //         "coordinates": {
  //           "x": 780,
  //           "y": 157
  //         },
  //         "guid": "5c88c834-355e-48a5-8266-dfb4f03e4f35",
  //         "isParentArtboard": false,
  //         "isParentGroup": true,
  //         "name": "top-right",
  //         "parent": "Group 3"
  //       }
  //     ],
  //     "name": "Group 3"
  //   }
  // }

const Entities = () => {
    return (
      <>
        {currnetUiChild.map((uiGroup, i) => {
          return uiGroup.children.map((ui, i) => {
            const width = ui.coordinates.width;
            const height = ui.coordinates.height;
            console.log(ui.coordinates, " =====");
            const x = ui.coordinates.x - activeUiArtboardWidth;
            const y = activeUiArtboardHeight - ui.coordinates.y;
            return (
              <Entity
                side="double"
                src={`#${ui.guid}`}
                primitive="a-plane"
                width={width}
                height={height}
                position={{ x: x, y: y, z: 0 }}
              />
            );
          });
        })}
      </>
    );
  };

// см. Изображения ниже для справки

Adobe XD image VR-изображение

1 Ответ

0 голосов
/ 25 июня 2019

Исходные координаты Adobe XD top-left, а элементы локального происхождения находятся в центре. Также Adobe X y-axis имеет положительное значение, а A-Frame - положительное. Сместите координаты x, y и отразите ось Y по следующим формулам:

x = x + ElementWidth / 2 - ArtboardWidth / 2;

y = - (y + ElementHeight / 2) + ArtboardHeight;

Наконец, вам нужно уменьшить позиции и размеры элементов. В A-Frame 1 единица эквивалентна 1 м.

...