adobe - 如何正确表示/缩放从 Adobe XD 到 aframe 的坐标?
问题描述
我正在尝试正确表示/缩放从 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 坐标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。
推荐阅读
- batch-file - 如何增加程序集版本的最后一个数字?
- python - 我有一个 Visual Studio 代码终端问题我该如何解决它,以便我拥有集成的而不是外部的?
- spring-boot - 如何创建未发现异常的单元测试?
- python - How to display a data frame read into python through Pandas in a window using Tkinter on Python 3.8?
- python-3.x - 在python中,根据图像文件的名称来考虑图像文件进行计算
- python - 所有转换的累积和
- java - 使用 amazon SES SMTP 接口发送电子邮件后如何获得响应?
- python - 如何为 numpy 数组“x”实现函数 f(x) = { x^2, x>0 和 -x^2 , x<0 }?
- html - 订单列表的浮动图像和文本换行
- postgresql - 将 ISO8601 日期文本转换为时间戳