我如何正确表示/比例坐标从Adobe XD到Aframe

Question

我正在尝试正确表示/比例坐标，从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图像VR图像

Answer 1

坐标的Adobe XD起源为top-left，元素本地来源位于中心。同样，Adobe X y-axis是积极的，而A型框架则为正。用以下公式来抵消x，y坐标并翻转Y轴：

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

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

最后，您需要缩小元素位置和大小。在A框架中，1单位等于1M。