0

我正在尝试正确表示/缩放从 Adob​​e XD 到 aframe 的坐标。

这就是我目前的做法： 1. 将图像相关数据（坐标、宽度、高度）和图像本身作为 formData 上传到服务器。2. 资产完成后生成。3. 使用array.map 生成实体。4. 实体和一切生成和渲染都很好。但我注意到坐标有些不同。因此缩放没有正确完成。期望输出显示图像的准确表示，而坐标和图像本身的数据源是 Adob​​e 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 图像

4

1 回答 1

0

Adobe XD 坐标top-left原点位于中心，元素局部原点位于中心。Adobe Xy-axis也正向下，而 A-Frame 正向上。使用以下公式偏移x,坐标并翻转 Y 轴：y

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

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

最后，您将需要按比例缩小元素位置和大小。在 A-Frame 1 单位相当于 1m。

于 2019-06-25T20:46:33.910 回答