卡片自动对齐

Posted

技术标签:

【中文标题】卡片自动对齐【英文标题】:Card auto alignment 【发布时间】:2021-11-25 16:42:26 【问题描述】:

我正在统一开发纸牌游戏。我正在处理应该看起来像弧线的纸牌对齐方式。

所以现在我通过放置 8 个空的游戏对象来实现这一点,因为最大卡数为 8,具有特定的旋转和位置。

然后使用下面的代码来生成卡片:

int clicks = 0;
public List<GameObject> _playerHandPoints; //playerHandPoints is the 8 empty gameObject created in canvas and passed to this via inspector

GameObject card = Instantiate(cardModel, _playerHandPoints[clicks].transform.position, _playerHandPoints[clicks].transform.rotation);
clicks += 1;

所以在上面的例子中,你可以看到我用空的游戏对象位置和旋转来实例化卡片,并通过点击计数增加它到下一个点。因此,每次点击图像中卡片下方的抽奖按钮时,卡片从左到右并一张一张地生成

在这里,我希望卡片真正居中对齐。例如,让我说我点击了抽奖按钮,我得到一张卡片,我希望它放在抽奖按钮的正上方。现在可以说我再次点击了绘图按钮 2 次。这意味着我有 3 张牌。我希望他们相应地居中对齐。就像我有 5 或 7 张牌一样,牌的位置应该看起来像一个像中国扇子一样的适当的半圆形,或者像同样缠绕在按钮上一样。简而言之……从 1 张卡片开始,随着数量的增加,它需要像中国粉丝一样正确地居中对齐。我真的想了很多,我已经完成了。无法知道该做什么如何做任何事情。我觉得自己陷入了一片空白……任何帮助或提示都将非常感谢……最后一件事我希望所有这些都发生在 canvas_UI 中

【问题讨论】:

【参考方案1】:

看起来可以通过极坐标解决...根据Draw将弧线除以段数,然后将它们放在那些坐标处。

x = radius * cos(theta)
y = radius * sin(theta)
z = constant;

如果圆弧从 45 度开始,到 135 度结束……那么它就是 90 度圆弧。

假设你抽了 2 张牌……那么弧线上会有 3 段让你的牌居中对齐。

所以点将在 45 + 1 * (90/3) 和 45 + 2 * (90/3) 角度,

然后把这个角度放在上面的极坐标方程中。

【讨论】:

嘿@vivek599。感谢您的回答。在这个时间点我不太擅长统一......所以我真的不明白极坐标的含义或如何在我的弧线中做弧线是由我手动设置的......希望你能用任何代码向我解释例子。谢谢 en.wikipedia.org/wiki/Polar_coordinate_system 过一遍。 嘿@vivek,只是想知道then just put this angles in the above polar equation. 你在这里说的是上面的哪个等式。 还有@vivek。我试图理解这一点..所以,我告诉你我自己的例子,让我知道我的方向是对还是错......所以假设我的弧线从 0 度开始,到 180 度结束......这意味着我有一个完整的 18 度弧......然后有 8 个段,因为我的最大牌是 8.. 现在我抽 2 张牌,所以点应该在 0 + 1 * (180/8) & 0 + 2 * (180 /8) 角度?那么这样对吗? 不,你的弧角会随着每次抽奖而变化,并且会根据抽奖和播放事件而增加或减少。每次绘制都以编程方式放置游戏对象。它不应该太重,您的 CPU 无法处理。如果你的最大牌是 8 并且你想将它们全部放置,那么你的计算是正确的。您只需根据要显示的卡片数量生成极点。您可以将弧保持在固定角度,只需改变绘制卡片的数量,并相应地生成线段。并将那些天使放在 THETA

以上是关于卡片自动对齐的主要内容,如果未能解决你的问题,请参考以下文章

带有表单 POST 按钮的 Bootstrap 4 卡片 - 无法与卡片底部对齐

Bootstrap 4 卡片 - 在底部对齐内容

无论vuetify中的文本如何,如何在卡片中底部对齐按钮?

如何在html中对齐卡片? [复制]

如何在 ListView.Builder 中右对齐卡片中的行?

Flutter 卡片列对齐和文本居中