如何正确表示/缩放从 Adobe XD 到 aframe 的坐标？答案

【问题标题】：How do I correctly represent/scale coordinates from Adobe XD to aframe?如何正确表示/缩放从 Adobe XD 到 aframe 的坐标？
【发布时间】：2019-06-26 04:46:33
【问题描述】：

我正在尝试正确地表示/缩放从 Adobe XD 到 aframe 的坐标。

这就是我目前的做法： 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 Image

【问题讨论】：

标签： adobe aframe aframe-react

【解决方案1】：

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 单位相当于 1m。

【讨论】：