Question

我正在尝试正确地表示/缩放从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 Image

Answer 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型框架中，单位等于1m。

如何正确地将坐标从Adobe XD表示/缩放到aframe？

1 个答案: