我正在尝试正确表示/缩放从 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 }}
/>
);
});
})}
</>
);
};
//请参阅下面的图片以供参考